FlickrのAPIとPHP/HTML/CSSで写真ギャラリーサイトを作る(Part.1 ゴールと背景)

FlickrのAPIとPHP/HTML/CSSで写真ギャラリーサイトを作る(Part.1 ゴールと背景)

最近サイドプロジェクトをネットに上げました:
http://premflux.com/cc0/free-photo-japan-tsukuba-32576937024.html

そのプロジェクトの開発をAからZまで細かく説明したいと思います。

ただ、Flickrのユーザに向けるチュートリアルです。

このチュートリアルを5つのパーツで別けます:

Part. 1 : プロジェクトの背景とゴール
Part. 2 : FlickrのAPIの秘密とコール方法
Part. 3 : PHPのコーディング
Part. 4 : HTMLのコーディング
Part. 5 : CSSのコーディング

なぜFlickr?

写真を撮るのは趣味です。
毎週新しい写真の数がどんどん増えるため無料の1テラバイトを提供するFlickrを使い始めました。

私のギャラリーはこちらです:
https://www.flickr.com/photos/cc0/

今の所、4484枚がアップロードされています。
CC0のライセンスにしましたのでフリー素材として使われていたら嬉しいです。

プロジェクトのゴール

実は、今まで気になることがありました: 私のギャラリーのアクセスが少ないです。そしてSNSに中々シェアされていません。写真にタグを追加してもビュー数が変わりません。

でもやっぱり、撮った写真を沢山な人に見せたいです。
ですので、1つの対策を考えました。

その対策は各写真のカスタムページを作ることです。
ページの特徴:
・ Flickrの見せ方と違ったもの。
・ そして、シェアオプションが多いもの。
・ そして、SEO対策出来るもの。

結局何を作る?

基本的にPHPスクリプトを作ります。

そのスクリプトが下記のアクションを行います:

1. 個人のFlickrアカウントにアクセスして、アルバムのデータをJSONフォーマットでダウンロードする。
2. JSONデータを整理してローカルディスクに保存する。(APIのコールを減らすため)
3. ローカルデータからHTMLファイル(1つの写真1つのファイル)をローカルディスクにアウトプットする

で、アウトプットされたHTMLに下記のことが出来ます:

1. 写真の一番大きいバージョンを背景として表示する
2. 写真のサムネールを表示する(背景バージョンが全体的に表示されてないため)
3. 写真ダウンロードのページ(Flickr)に飛ぶ
4. 関連アルバムのページ(Flickr)に飛ぶ
5. 他の写真をランダム風に呼び出す
6. 色んなSNSにシェアする

アウトプットされたページのサンプル:
http://premflux.com/cc0/free-photo-japan-kanagawa-32961767952.html

では、次回、FlickrのAPIのコツを詳しく語ります!

Franck VESCHI

Franck VESCHI

シニア UI/UX デザイナー・デベロッパー at 株式会社ショーケース・ティービー
毎日、デザイン・UX・コーディング等に関係ある新しい技術・情報をわくわくしながら探しています。昔から好奇心の強い性格なのです!新規プロジェクトをいつも「冒険」のように受け取っています。このスタンスのお陰で、毎日の仕事が非常に面白いです。

今まで書いた記事:
http://bitwave.showcase-tv.com/author/franck/
Franck VESCHI

コメント