InstagramAPIでの画像取得

Instagram APIの使い方。走り書き程度にメモ。
※後述しますが、このやり方ですぐに可能なのは、自分自身の情報や投稿を取得することのみです。
※昨日自分で試したら書いた当時と変わっているようなので細かい修正をしました 2016/12/13

下準備

開発者ページへのログイン

https://www.instagram.com/developer/register/

Developer Signupに入力して登録すると、アプリの登録画面が開きます。

Register Your Aplicationをクリック

1

Register a new Clientをクリック

2

と進むと以下の画面が表示されるので、情報を入力

3

入力に問題なければManage Clientsに進むので、情報確認

4

CLIENT_IDとREDIRECT_URIをエディタかなにかにコピペしておくと便利。

こっち側の仕組みづくり

アクセストークンを取得

https://instagram.com/oauth/authorize/?client_id=CLIENT_ID&redirect_uri=REDIRECT_URI&response_type=token

CLIENT_ID
REDIRECT_URI
をそれぞれ、取得したIDと指定したURLに書き換えて、ブラウザに入力する。

もしここで、

{“code”: 403, “error_type”: “OAuthForbiddenException”, “error_message”: “Implicit authentication is disabled”}

とかのエラーが表示された場合は、開発者管理画面の上部メニューからManage Clientsを開き、該当のアプリのManageボタンをクリック。ヒョじされる画面でSecurityタブを選択し、「Disable implicit OAuth」のチェックを外して再度試す。

アクセスが成功すると認証画面が表示されるので、Authorizeをクリック。

REDIRECT_URIにリダイレクトされて、URL末尾にトークンがクエリとしてくっついてるので、それをメモる。

その際ブラウザの画面はREDIRECT_URIで指定したサイトが開いていて、ブラウザのURL欄に入力されてるアドレスが、以下のようになってるはずです。ちょっとうろ覚えで、細かくは違ってるかもですが、末尾についてる数列がトークンになります。

http://REDIRECT_URIで指定したURI?token=トークンの数列

※Disable implicit OAuthのチェックを外して取得した場合は、このあと再度チェックを入れる。

通信

トークンをJSに生で書くと見られちゃうのでトークン付きでinstagramにリクエストを送る部分をPHPで記述。
今回はcontent-ig.phpというファイル名に。

そのPHPを呼び出して取得整形する部分をJSに記述

ページ側に、出力させる為のコンテナ枠を用意。

ここまでミスがなければ、無事に読み込まれて写真がざーーっと並んでるはず。
itemにごっそり配列でデータが入ってきてるので、そこの指定で色んな情報とれる。

返り値はオブジェクトになっていて、その内容はざっくりと以下のような感じ。

上で書いたような低解像度画像のURLを取得するなら11行目のあたりの

サムネイルなら

みたいな。

仕上げ

CSSで整形。

あと、サムネイルより大きな画像を取得する場合、インスタがスクエアのみでなくなったことを受け、スクエアではない写真が取得された場合は上下に余白ができる仕様になっている。
余白を作らないで取得するには開発者管理画面のEdit>MigrationsでNon square mediaにチェックを入れる。

以上
とにかく出力までをざっくりとメモでした。

余談:他のユーザーの投稿などを取得したい場合

取得の際に、他のユーザーを指定して取得することは仕様上はできるようなのですが、基本的には全く知らない人の写真をさくっと表示したりはできません。以下に少し触れます。

アプリケーション登録を行うと、まずはサンドボックスモードで登録されます。
これはAPIの利用に制限がある状態で、このモードの時は基本的に開発者本人のアカウントに関する内容しか取得できません。

他のユーザーの投稿を取得するには、サンドボックスモードのままなら取得したいアカウントを招待して承認してもらう必要があります。

または、Instagram側に正式なアプリケーションとして承認を受けることでも可能になります。

後者は普通にサイトでインスタ写真をウィジェットとして引っ張ってくるくらいの用途だと承認はおりないみたいで、要は個人でささっと使うなら前者一択ということのようです。

投稿を取得したいユーザーに、自分のアプリケーションへ登録してもらう

管理画面から任意のユーザーを招待して登録してもらうことで、自分のアプリケーションからAPIで情報を取得できるようになります。

招待の手順は以下のとおり

  1. クライアントのエディット画面を開く
  2. Sandboxタブを開く
  3. フォームに招待したいアカウントのユーザーネームを入れてSave Changesをクリック

これで招待はできてるはずなんですが、相手に何らかのお知らせが出たりはしません。相手に連絡して、開発者登録していない場合はまずその登録をしてもらって、ログイン後の管理画面でSandbox Inviteの画面を見てもらう必要があります。

超敷居高え!

ちなみに招待された側のフローは以下の通り。

  1. 開発者登録を行ってログイン
  2. 画面上部のSandbox Inviteのリンクをクリックして、招待一覧を開く
  3. 招待されたアプリケーションが表示されてるはずなのでacceptを押す(押した時点で、acceptしたというメッセージは出ますが、一覧表示では変わらずaccept/declineのままです。うーん。)

これで無事に登録…と言いたいところですが、なぜか自分の管理画面のSandbox Usersの、招待したアカウントががpendingのままです。試しに画像などの取得を試みたところやはり権限エラーで取得できません。これは正常な状態ではないと思うのですが、せっかく書いたのでここまで挙げておきます。

ユーザーIDの確認

usersに本人以外を指定する場合、ユーザーIDで指定する必要があります。ユーザーIDはアカウントとはまた別のユニークな数字で、通常はどこにも表示されていませんが、いくつかの方法で確認することができます。

Webサービスで確認

Lookup Your Instagram User ID

IDを調べたいアカウント名を入力してGOを押すだけです。

開発者画面で確認

ログインした状態で、以下のAPI Consoleを開きます。
ちなみにこの機能は廃止予定のもので、左メニューのリンクからは既に外されています。

API Console

AuthentificationでOAuth2を選んで認証するとusersが検索できるようになります。users/serachを選んで’q’にユーザー名を入れ、Sendを押すとResponseに取得した情報が表示されます。dataのidがユーザーIDです。

APIを使って動的に取得

APIを使ってアカウント名からユーザーIDを取得することができるはずなのですが、これについては権限の関係上か動作が確認できなかったので、割愛します。