• GIZMODO
  • FUZE
  • DIGIDAY
  • gene
  • gene
  • cafeglobe
  • MYLOHAS
  • Glitty
  • roomie
  • machi-ya
  • GIZMODO
  • DIGIDAY
  • gene
  • cafeglobe
  • MYLOHAS
  • Glitty
  • machi-ya
  • roomie

ゲストライター  - ,,,,,,  04:00 PM

「Lifehacker.me」のオープンソースを使えば、パーソナルページがサクっと作れる

「Lifehacker.me」のオープンソースを使えば、パーソナルページがサクっと作れる

100928opensource_landingpage1.jpg


オンラインプロフィールの定番「Googleプロフィール」や、オシャレなページがカンタンに作成できるウェブサービス「Flavors.me」など、パーソナルページのためのサービスはいくつかありますが、こちらでは、米Lifehackerのオープンソースを活用する方法をご紹介しましょう。

必要なものは、以下の2つ(+1)。

  • 「Lifehacker.me」の「Landing Page PHP」スクリプト(こちらから無料でダウンロード可能)
  • PHP対応したウェブホスト(『DreamHost』などのウェブホスティングサービスを利用)
  • Flickr APIキー(Flickrアカウントと連携させたい場合のみ、こちらのページでサインアップすれば、無料で入手可能)
  •  


    作業プロセスの詳細は、以下の動画チュートリアルをご参照いただくとして、ポイントは以下のとおり。


    1: 「Lifehacker.me」の「Landing Page PHP」スクリプト(ZIPファイル)をダウンロードし、解凍して、すべてウェブサーバーのディレクトリにアップロードする

    2:「config.php」をテキストエディターで開き、設定を変更する。

    ・ページの設定変更:「config.php」の「VISUAL STYLE」の項目で設定変更すれば、背景画像やテキストの影、名前やナビゲーションの色など、自在にカスタマイズできる。背景画像は、サーバーのどこかにアップロードして、そのURLを指定すればOK。

    100928lifehackerpersonal.jpg※ クリックで拡大

    ・Flickrユーザ名の指定(Flickrのみ):Flickrのユーザ名を設定し、Flickr APIキーを貼り付ける。

    ・Vimeo/YouTube/Twitterユーザ名の指定: VimeoやYouTube、Twitterのユーザ名を指定する。

    なお、これらすべてのソーシャルネットワークと連携させる必要はなく、ページ内で表示しないアカウントは空欄のままでOK。ページのナビゲーションには表れません。

    ちなみに、米LifehackerのAdam Dachisが作成したデモページは、こちら。作業のプロセスは至ってシンプルですが、コンテンツとしては十分ですね。

    こちらのページ作成で利用したコードは、完全オープンソースです。自由にCSSを書き換えて、新しい機能を追加しましょう。「github」のこちらのページに保存されていますので、ぜひご活用ください。


    Adam Dachis(原文/訳:松岡由希子)

     

MORE FROM LIFEHACKER

powered by
    
    
    
  

Kotaku

Recommended

© mediagene Inc.