Instagram APIのJavascriptでの使い方とSandbox modeで出来る範囲(2016年5月現在)

posts_photo

Instagram

ロゴのリデザインや広告の実装、有名アカウントが取り上げられたりと最近Instagramの勢いが凄いですね。
今年の6月には勧告通りAPIの仕様が完全に移行するので、自分用メモとしてざっくりとした使い方と、無申請で使えるSandbox modeの出来る範囲を書いておこうと思います。

仕様の変更で何が変わるか?(ざっくり)

昔はInstagramのAPIって仕様がちょっと緩くて使いやすかったんですが、今回の仕様変更で一気にハードルが上がりました。
もともと『ハッシュタグで検索した写真を表示する』などの使い方はグレーでしたが、APIの仕様的には可能だったので色々なキャンペーンやサイトで使われていました。
今回の変更ではそういった使い方は完全に申請が必要な仕様となっており、ユーザーを大切にするという意味では至極もっともな変更かなぁと思います。
Instagramが審査した健全なサイトやアプリにしか、今後あなたの写真は表示されません。

※なぜ上記の仕様がグレーかと言うと『ユーザーが許可していないサイトやアプリにユーザーの写真を表示させる』行為がよくないからです。自分の写真が例えば社会的によろしくないサイトのトップページに表示されてたら嫌でしょ?って話です。

まあAPIを使いづらくなって困る!というのは広告やデジタルコンテンツ界隈の都合ですからね。タダで使わせてもらってる側は文句は言えません。

それでも同じようにAPIを使いたいという場合には、もろもろ必要事項を入力したり、まず使いたいサイトを作ってSandbox modeで実装して、
『そのサイトのビデオキャプチャで取りながら英語でプレゼンをした動画』
を提出しなければならないようです。

ハードル高いですねー。

まずサイトを完成させてから申請、という時点で納期が絶対の受託仕事にはもう使えない気がします。申請したからといって許可がすぐ下りるかもわからないですし。

instagram APIをJavascriptで取得する

【まず下記のデベロッパーサイトにアクセスしてアプリを登録します。】
https://www.instagram.com/developer/
アプリの登録は入力蘭に必要事項を入れれば大丈夫だと思うのでここでは割愛します。登録が完了するとクライアントIDとかが発行されて一覧で確認できます。

【アプリ登録したらEDITでsecurityタブのdessable oauthのチェックを外す】
Javascriptで情報を取得したい場合はここのチェックを外さないとアクセストークンを得ることができません。PHPなどサーバー側の言語の場合はチェックを入れたままで良いんですけどね。「JSだと第三者にアクセストークンを見られるけどそれでもいい?」という確認です。

【アクセストークンを取得する】
下記のページの「Client-Side (Implicit) Authentication」の項目にあるコードに、設定したクライアントIDとリダイレクトURLを入れます。
https://www.instagram.com/developer/authentication/
完成したコードをアドレスバーに入れて、アクセスするとGET値の部分にアクセストークンが入っていると思います。これを使ってAPIにアクセスします。
ちなみにリダイレクトURLは多分なんのサイトでも良くて、クライアントIDと設定したURLを合わせることでパスワード代わりになってるんじゃないかと思います。

【自分のユーザーIDを確認する】
数字の羅列になっているアクセストークンの、初めのカンマまでの数字が自分のユーザーIDのようです。

【そのあとはプラグインを頼ればいいと思います】
クライアントID、アクセストークン、自分のユーザーIDがそろったら、あとは下記URLなどを参考に自分のサイトにInstagramのサイトを表示させればいいと思います。

Instafeed.js
http://instafeedjs.com/
Instagram APIを使用し画像を表示できるjQueryプラグイン
http://qiita.com/d-uee/items/eb345764c04dd1a59115

プラグインじゃなくJSONデータをそのまま取得したい場合は下記の公式をご参照ください。
https://www.instagram.com/developer/endpoints/

ちなみに、Sandbox modeでは自分の情報以外にはアクセスできなさそうなので、使うのはだいたい下記のユーザーの写真へアクセスするためのコードになるかと思います。

https://api.instagram.com/v1/users/{user_id}/media/recent?access_token={access_token}

Sandbox modeで出来る範囲

・アプリで扱えるユーザーは10人まで。
 (自分以外のユーザーの写真を使うには、相手のアカウントに承認してもらう必要がある)
・アプリではそれぞれのユーザーから最新20個のデータのみ取得可能。
 (つまり「もっと見る」などでの写真の続きの読み込みは不可)
・APIレートは1時間に500リクエストまで。

詳細は下記より公式をご確認ください。
https://www.instagram.com/developer/sandbox/

無申請で出来る実用的な範囲をざっくりといえば、
『自分のアカウントの写真と情報を20枚以内表示させる』
(1時間に500PV以内のサイトなら)
という感じでしょうか。

個人サイトやコーポレートサイトならこれでも使える気はしますけど、
キャンペーンやインタラクティブコンテンツではもう気軽には使えませんねー。
実際に申請するのって自社開発のアプリでAPIを使用している人たちくらいでは。

まあ、またそのうち仕様は変わるんでしょうけどね。
SNSのAPIにはいつも諸行無常を感じます…。