MD-Blog_Web System

Facebook、Twitterに続いて急速に普及し続けているInstagram。
一般層における利用増加にともなって、"Instagramを絡めたプロモーションを行いたい！"といったプロジェクトの企画も増えてきたように思います。

プランニングの観点については、以前、NABANAがこのMD-Blogにエントリを上げてくれていますが、今回はもう少し技術よりのお話。Instagramが提供しているAPIを使って、データを取得する一例をざっくりとちょっぴりご紹介してみます。

このAPIには、Instagramと連携したモバイルアプリの開発するためのメソッドも用意されていますが、この記事ではもう少し簡易に、例えば自分がアップロードした写真や映像をWebサイト上にフィードしたり、特定のタグが付けられた最新記事を取得する、といった表示系処理に絞って書いていきます。

なお、規約や仕様は日々アップデートされるものですので、お試しになる前には、まず最新の公式資料をチェックすることをお忘れなく！

はじめに下準備

まずはデベロッパー登録！

Instagram APIを利用するために、まずはデベロッパーサイトからアプリケーション登録を行います。

1. デベロッパーサイトの右上にある「ログイン」をクリック！
2. ご自分のInstagramアカウントを入力。（新規ユーザ登録はInstagramアプリからしか出来ませんので、開発用のアカウントが必要な場合は別途アプリから作成しておきましょう）
3. 「Register Your Applicaton」をクリック！
4. ご自分のWebサイト名、連絡先、APIを使ってどんなものを作る予定かを入力して、デベロッパーとしてサインナップ！

これで「Client ID」を取得する準備が出来ました。
「Client ID」とは、APIとやりとりするためのアプリケーション識別情報のようなもので、エンドポイントへのリクエストで必要になります。

続いてクライアントIDを登録！

1. 「Manage Clients」をクリック！
2. 「Register a New Client」をクリック！
3. 作成するアプリケーション（サイト）の名前、説明、WebサイトのURLを入力。
4. 「OAuth redirect_uri」には、訪れた方のログイン認証を必要とするアプリケーションの場合には適切な戻り先が必要ですが、今回は対応しないので仮にWebサイトURLと同じものを記入しておきます。
5. 規約や注意事項をきちんと理解したら、「Register」をクリックして完了。

完了画面が表示されますので、「Client ID」の内容を控えておきましょう。

どんな情報が取得できるの？

デベロッパーサイトのメニューから「End Points」を開きましょう。
取得できる情報をいくつか挙げると、

• Users: ユーザの情報やユーザごとの投稿一覧など。
• Relationship: ユーザがフォローしている／されている関係の情報など。
• Media: 特定の写真／動画のデータを指定したり、検索したり、人気順の一覧など。
• Tags: 特定のタグに紐づく写真／動画を取得したり、検索したり、人気順の一覧。

などなど、リファレンスに記載されているように、それぞれデータ種別ごとにエンドポイントが用意されているので、

https://api.instagram.com/v1/tags/タグの名前/media/recent?client_id=あなたのClient ID

といったURLを叩くことでデータを取得することが出来るという形です。

例えば、特定のタグに紐づくデータを探してみる

先ほど記載したURLの例は、特定のタグに紐づく最新の写真／映像を取得する、というものでした。
デベロッパーサイト上には疎通テストが出来る「API Console」が用意されていますので、そちらで実際に実行してみましょう。

右ペインに結果が表示されます。JSON形式でデータが返ってくることが分かりますね。
大きく分けて、

• pagination: 結果は規定のデータ数毎（後述参照）に返ってくるので、そのページ分割のための値。
• meta: 正常／異常のレスポンスコード。
• data: こちらの配列に各写真／映像データが入っている。写真の場合は「images」に、映像の場合は「videos」の中に格納されています。

という３つに分かれているので、例えば特定のタグが付けられた写真だけをWebサイトに表示したい！という場合には、これらのデータをPHP等のプログラムで取得／表示してあげましょう。

気をつけよう！　ハマりやすいポイント

と、ざっくりと、プログラムで取得／表示してあげましょう...と書いてしまいましたが、ここでハマりやすいポイントがひとつあります。

それは、APIのリミット（リクエスト上限）です。

まず今回の例で上げたようなユーザのログイン認証を必要としない方法においては、1アプリケーションあたり1時間に5,000リクエストまで、と制限されています。

また、例に挙げた「Tags」のエンドポイントにおいては、ページネーションの値が存在しているように、1回のリクエストで取得できるデータの件数が限定されており、これは公式資料には記載が無い（と思う）のですが、どうやら最大値は20件ずつのようです。

となると、ユーザがアクセスした度に毎回最新記事を100件表示したい！なんていうプロモーションサイトでは、APIのリミットに到達してしまいますね。

これを回避するためには、ログイン認証を経て表示する仕組みとするか（その場合は1トークンあたり1時間に5,000リクエストとなります）、定時処理でデータをクライアント側にキャッシュする仕組み（※）を検討する必要があります。
※もちろんこの場合、取り扱うことが出来るのは自分が投稿した（権利を所有している）データに限りますが。

冒頭に記載したように、Instagramと連携したWebサービス・Webシステムの企画を立てる際には、あらかじめこういったAPIの仕様（規約）をしっかりと把握しておくこと、場合によってはモックアップを作成して、その都度最新のレギュレーションに合わせた実装をテストしておくことが重要！です。

また、「アプリでそういうのがあるからWebサイトでも出来るんじゃないの？？」とカンタンには行きません。Webサイトの場合、アプリに比べてユーザのログイン認証はハードルの高い行為だと思います。ユーザのニーズと技術的な裏付けを合わせて、フローを考えていく。Instagramに限りませんが、外部サービスと連携した企画においては、この手順は欠かすことが出来ません！

まとめ

小難しいオチになってしまいましたが、公式にもFirst Versionと記載されているとおり、このAPIはまだまだシンプルな機能になっています。
まずはリファレンスに書かれているメソッドを１つずつ試してみてはいかがでしょうか。
写真や映像を使ったあんなコト、こんなコト、アイデアが浮かぶかもしれません！