Instagram APIで写真を一覧表示するアプリを作ってみよう

「インスタ映え」が2017年の流行語大賞に選ばれたことでも話題になっている、お馴染みの写真共有SNS「Instagram」。
InstagramではWeb APIを提供しており、アップロードこそできないものの写真を自由に取得できるようになっています。

今回はInstagramのAPIを使って、自分の写真を取得するMonacaアプリの作り方を紹介します。

作るアプリ

今回作るアプリは次のようになります。まずOAuth認証を行います。

Instagramのログイン画面が出るのでログインします。

確認画面が表示されます。承認するとウィンドウが自動で閉じます。

認証後のトークンを使ってInstagramから自分の写真を取得して一覧表示します。

事前準備

Instagramの Instagram Developer Documentation にログインし、［Register Your Application］ボタンからアプリ登録を行ってください。
登録が完了したら、［MANAGE］ボタンを押して Security タブを開き、「Disable implicit OAuth」のチェックを外します。

サンプルコード

今回のコードはgoofmint/Monaca_Instagram_Demoにアップロードしてあります。

事前準備で登録したアプリのクライアントIDをコピーして、 js/app.js を書き換えてください。

let client_id = 'YOUR_INSTAGRAM_CLIENT_ID';

そしてOAuth認証を行いますのでリダイレクト先のURLを設定します。なお、このURLはGETリクエストが受けられてリダイレクト処理しない場所であれば自由に指定できます（例えばですが https://press.monaca.io/ など）。

let redirect_uri = 'YOUR_REDIRECT_URL';

※ リダイレクトされるURLが良くないのは、Instagramから送られる access_token がリダイレクト処理によって欠落してしまう可能性があるからです。

処理について

認証処理

認証処理は InAppBrowser を使って行います。Cordovaプラグインの設定画面で InAppBrowser を有効にしてください。

認証用URLのリクエストパラメータには scope=public_content を指定します。この指定によって、公開設定になっている写真コンテンツが取得できます。

認証ウィンドウ（authWindow）を開いたら、 loadstartイベントを購読します。このイベントはURLが変わる度に発生します。access_token がURLに含まれていたら、認証が完了したことを意味します。

let authUrl = `https://www.instagram.com/oauth/authorize/?client_id=${client_id}&redirect_uri=${redirect_uri}&response_type=token&scope=public_content`;

$('#auth').on('click', (e) => {
  let authWindow_loadStartHandler = function(e) {
    // Instagramからaccess_tokenが送られれば成功
    if (m = e.url.match(/#access_token=(.*?)$/)) {
      authWindow.close();
      getPhoto(m[1]);
    }
  };
  let authWindow = window.open(authUrl, '_blank', 'location=no');
  authWindow.addEventListener('loadstart', authWindow_loadStartHandler);
});

access_token が取得できたら認証ウィンドウを閉じて、access_token を getPhoto （写真取得処理）に渡します。

写真取得処理

写真取得処理は次のようになります。APIエンドポイントはInstagram Developer Documentationで確認できます。引数は先ほど取得した access_token だけです。結果はJSON形式で返ってきます。

let photoUrl = 'https://api.instagram.com/v1/users/self/media/recent/';

let getPhoto = (authKey) => {
  $.ajax({
    url: photoUrl,
    type: 'get',
    dataType: 'json',
    data: {
      access_token: authKey
    }
  })
  .then((results) => {
    let html = [];
    for (let i = 0; i > results.data.length; i++) {
      // 標準画質のURLを使います
      let photo = results.data[i].images.standard_resolution.url;
      html.push(`<img src="${photo}" style="width: 100%" />`);
    }
    $('#photos').html(html.join(''));
  },
  err => {
    console.log(err);
  })
}

たったこれだけのコードで自分の写真をInstagramから取得できます。サンドボックスモードの時には自分の写真だけしか取れませんが、審査に通れば位置情報やタグを使って他の人の写真コンテンツも取得できるようになります。

今回のコードはgoofmint/Monaca_Instagram_Demoにアップロードしてあります。実装時の参考にしてください。