ソーシャルメディア 12-2
Instagramでお店の写真集をつくる（後編）

世界中で人気の高い写真共有サービスであるInstagram。検索APIを使えば、世界中のユーザーが撮影したカフェやショップの写真を集めて、写真集のように表示することもできる。その使い方について簡単に紹介しよう。

制作・文／河村奨（CogniTom Academic Design）

BROWSER IE9over Firefox3.6over Safari3.1over Chrome10over

01

APIの使い方や、この後必要になる場所ID を調べるには、API コンソールが便利だ。「https://apigee.com/console/instagram」にアクセスすると、すべてのAPIを試せるようになっている。

まず場所検索のAPI で店舗の場所IDを調べよう。"Method" メニューから利用可能なAPIを一覧表示できるので、locations/search を選択する【1-1】。

Queryタブに入力項目が表示されるので、下記のように入力して、Sendボタンをクリックしてみよう【1-2】。

・ foursquare_v2_idに店舗のVenue IDを入力（ Venue IDの調べ方は下記の【コラム】参照）
・最後の空欄に "client_id" と、"xxx"と入力（xxxの部分は、先ほど登録したクライアントの"CLIENT ID"に置き換え）。

【1-3】のようなレスポンスが返ってくるので、id 欄をメモしておこう。これが場所ID（location-id）になる。

【1-1】apigeeはInstagramのほか、Facebookなど多数のAPIを試せるプラットフォーム。

【1-2】APIが受け付けるパラメータが、あらかじめQuery画面に表示されていて親切。

【1-3】APIのレスポンス : JSON形式。色分けされていて比較的見やすい。id欄をメモ。

02

今度は、"Method" から locations/{location-id}/media/recent 選択して、client_id を前項と同じように入力。Templateタブに移動して、location-id に先ほど調べた場所IDを入力しよう【2-1】。

Send ボタンをクリックすると写真の情報がJSON 形式で表示されるはずだ【2-2】。よく目を凝らして見ていくと、ところどころ".jpg"の拡張子がついたURLが見つかる。これが、実際に写真を表示するために必要なURLだ。

【2-1】場所ID（location-id）の入力。URLに埋め込まれるものは、Templateタブで指定する。

【2-2】場所ID（location-id）の入力。URLに埋め込まれるものは、Templateタブで指定する。

【2-2】説明のためJSONデータを解析するアプリケーション(Power JSON Editor)で見てみると、上図のようになっている。写真のデータは"data"配列の中に並んでいる。

03

今回のサンプルは本誌のWeb ページのほか、github（https://github.com/osscafe/photofeed）【3-1】からもダウンロードできる【3-2】。本記事ではAPIに関連する部分のみ解説しよう。

jQuery と、Masonry を利用するので、scriptタグで指定している。このページの処理は、js/main.jsに書くものとする【3-3】。写真の一覧を表示するのは、instagram-photosをIDにもつDIV要素。HTML上では空欄だが、この後、Ajaxでデータを取得する【3-4】。

【3-1】githubページ : ZIPボタンをクリックするとサンプルをダウンロードできる。

【3-2】cssフォルダ、jsフォルダ、index.htmlがあるのを確認しておこう。

【3-3】

【3-4】

04

jQueryのgetJSON関数を使ってAPIにアクセスする。client_idとlocation_idには先ほど調べた値を入れておこう。なお、APIのURLの最後に"callback=?"があるのは、クロスドメインでデータを取得するのに必要なためだ【4-1】。

データの取得に成功すると、.successの中が実行され、HTML要素が作成される【4-2】。

Masonryは、もはやおなじみの画像など不規則なサイズの要素を隙間なく配置してくれるjQueryプラグイン。Pinterestのような縦方向にラインの通った配置が可能だ。JavaScript上では、【4-3】のように、画像の読み込みを検知して、位置調整を行う。columnWidthに180が指定されているのは、別途CSSで「写真の幅+隙間の幅」が180pxになるように指定されているため。CSSを変更した場合は、この値も調整しておくこと【4-4】。

【4-1】

【4-2】
・this.images.thumbnail.url → 画像URL
・this.caption → キャプション
・this.user.username → ユーザ名

【4-3】

【4-4】写真に加えて、コメント、撮影者、撮影者のプロフィール画像が表示されている。

【コラム】FoursquareのVenue IDの確認方法

InstagramのロケーションIDを調べるには、FoursquareのVenue IDを確認するのが早道だ。例として「下北沢オープンソースCafe」はFoursquare上では、次のようなURLになっている。「https://foursquare.com/v/下北沢オープンソースcafe/4d7700ba79cf6dcbf2fb3bef」。このURLの最後の部分「4d7700ba79cf6dcbf2fb3bef」がVenue IDにあたる。

[目次に戻る]

【本記事について】
2012年7月28日発売のweb creators特別号「新世代Web制作テクニック総特集」から、毎週記事をピックアップしてご紹介! スマートフォンサイト特集ではデザインのルールとコーディングのポイント、ソーシャルメディア特集では従来のWebサイトとの違いと有効な活用方法、WordPress特集ではサイト構築に必要な機能と役立つプラグインなど、基本的な知識と必須テクニックを網羅した内容になっています。

※本記事はweb creators特別号『新世代Web制作テクニック総特集』からの転載です。この記事は誌面でも読むことができます。