インスタグラムの API を使うと、インスタグラムの写真を使ったアプリケーションを開発することができます。その開発例を準備段階から説明します。詳しくは後述しますが、今回はインスタグラム API の "SandBox" モードを使ったサンプルを紹介します。


【アプリケーション登録】
まず大大大前提としてインスタグラムのアカウントが必要です。こちらは取得済みとした上で以下を記載します。

インスタグラム API を使うには、インスタグラムデベロッパーであらかじめアプリケーションを登録しておく必要があります。これから API を使って作るアプリケーションを最初に登録しておく必要がある、という意味です。

というわけでまずは PC からインスタグラムデベロッパーにアクセスしてログインし、"Manage Clients" をクリックします:
2018032001


すると現在登録済みのアプリケーションの一覧が表示されます(まだ1つも登録していない場合は何も表示されません)。新たにアプリケーションを登録するにはこの画面で "Register a New Client" をクリック:
2018032002


新規登録画面ではまず最初に "Security" タブを選んで、"Disable implicit OAuth" のチェックを外しておきます:
2018032101


改めて "Details" タブに移動し、必要な項目を入力します。Application Name(アプリケーション名)は任意に指定できますが、"Instagram" や "Insta", "IG" といった文字列は使えない、という規約があるようです。後は Description(説明)を記入して、Company Name(会社名)は個人名でも空でもいいようです。大事なのは Website URL と Valid redirect URIs、ここはこの後の OAuth 認証で使うため、(アプリケーションとして動いていなくてもよいので)実在する URL を指定する必要があります。なおここで指定する値は後から編集することも可能です:
2018032102


すべて指定したら下にスクロールして「私はロボットではありません」の横をチェックします:
2018032103


自動化されたロボットでないことを証明するための質問に答えます。下の例では画像からお店を選べ、とのこと:
2018032104


まあこれとこれとこれ、、かな?? という感じにチェックして確認ボタン:
2018032105


正しい選択ができているとロボットではないことが証明できて、"Register" ボタンがクリックできるようになります:
2018032106


無事にアプリケーションの登録が完了し、CLIENT ID が取得できました。ここに表示されている CLIENT ID の値はこの後に利用するので控えておいてください:
2018032107


【アクセストークン取得】
インスタグラムの API は「アクセストークン」と呼ばれる文字列を使って利用します。このアクセストークンは上記手順で指定した情報を知っている(指定できる)人だけが取得できます。なお今回対象としている SandBox モードの場合、1つの登録アプリケーションにつき、アクセストークンが取得できるユーザーは20人までという上限がありますが、以下で紹介するアプリケーションの場合は本人だけが使う想定なので問題ないと思っています。

ウェブブラウザで以下の URL にアクセスします:
https://instagram.com/oauth/authorize/?client_id=(Client ID)&redirect_uri=(Redirect URI)&response_type=token&scope=public_content

(CLIENT ID) 部分には上記で取得した CLIENT ID の値を、(Redirect URI) 部分には取得時に指定した Valid Redirect URI の値にそれぞれ置き換えて指定します。すると以下のような画面になり、Instagram の画像やプロフィール情報にアクセスすることを許可するか?という確認画面が表示されるので "Authorize" をクリックして許可します:
2018032108


するとブラウザ画面が切り替わり、Rediret URI で指定した URL に転送されます。この時の URL には acess_token=XXXXXX..XXXXXX という形でアクセストークンが付与されています:
2018032109


この値がアクセストークン値で、この文字列を使うことでインスタグラム API を利用することができるようになります。この値を控えておきます:
https://dotnsf-myphotos.us-east.mybluemix.net/#access_token=XXXXXX..XXXXXX


【サンプルアプリケーション実行】
インスタグラム API を使った Node.js のサンプルウェブアプリケーションをこちらに用意しておきました:
https://github.com/dotnsf/myphotos

2018032101


このコードをダウンロード&展開するか、git clone して手元に用意してください。そして settings.js ファイルをテキストエディタで開き、exports.access_token の値を先程確認したアクセストークンの値に編集して保存します:
2018032101


2018032102


この状態のアプリケーションを指定した Redirect URI で動くように転送/コピー/デプロイします。これで準備は完了です。


実際の動作を確認するには(できればスマホで)Redirect URI にアクセスします。すると自分のインスタグラムの最新20件の画像/動画が確認できるアプリケーションが表示されます:
IMG_1999


次/前の画像を見るには左右に(フリックやマウスドラッグで)スライドさせます:
IMG_2001
 (↑伝わりにくいけど、右から左へスライド中の様子)


すると次/前の画像に切り替わります:
IMG_2002


表示されている画像をタップすると、インスタグラム上の同画像ページに移動し、タイトルやタグ、コメントも確認できます:
IMG_2003


インスタグラムの API を使って自分の画像をカルーセル表示する、というサンプルでした。実際に API が正しく動いて画像を取得できていることも確認できました。



【Sandbox モードについて】
Sandbox モードは誰でも気軽にインスタグラム API を使えるように 2016 年6月に用意されたモードです。アカウントと(上記の)アプリケーションの登録をするだけで使えるようになるというメリットがあります。

一方で、その利用には制約があります。使える API やその結果は限られたものだけです。私個人が確認した限りでは、ユーザー名からユーザー ID を検索する API は自分自身の ID については期待通りに動いたのですが、フォローしているユーザーや他のユーザーの検索はできませんでした(実行結果が空だった)。といった制約があり、この制約をなくすには Sandbox モードではなく、正式な API を利用する必要があり、そのためにはアプリケーションの申請が必要になります。個人的に正式な申請をした経験はないのですが、ウェブ上にはそういった情報もあるようです。1つだけ参照リンクを貼っておきます:
Instagram APIの審査を通した人に話を聞いてみた。

また Sandbox モードにおける制約等の(最新の)情報は公式ドキュメントを参照ください:
Sandbox Mode