Instagram APIを使ってWEBサイトに写真を表示させてみよう

投稿日
  • コーディング

手軽に写真を加工、共有できるInstagram(インスタグラム)をお使いの方も多いのではないでしょうか?
いつもの見慣れた風景の写真も、フィルターをちょっとかけただけでお洒落になるのが楽しいですね。

さて、Instagramの写真を自分のWEBサイトに表示させたいと思った時には、いくつか方法があります。
1つは下記のサイトのような埋め込み型ウィジェットの生成サービスを利用する方法です。

SnapWidget

フォームに情報を入力するだけで埋め込みコードを生成してくれるので、あとはそれをサイトに埋め込むだけでOKです。とても簡単ですね。図1

図1

ほとんどの場合はこちらで十分だと思いますが、もう少し自由に画像を取り扱いたい、オリジナルのプログラムと組み合わせたい、という場合はInstagram側で用意されているAPIを利用します。

この記事ではInstagram APIを利用してWEBサイトに写真を表示させる方法をご紹介します。

※本記事の内容は公式の開発手引きであるInstagram Developer Documentationを参考に作成しております。

Instagram APIの制限とReview(審査)について

実はInstagramのAPIは開発者登録さえすれば自由に使える、というものではありません。
登録したばかりのアプリは「Sandbox Mode(サンドボックスモード)」という状態で動作するのですが、Sandbox Modeでは例えば他のユーザーのデータを自由に取得することはできないなどの制限があります。
この制限を外す、言い換えると別の権限を付加するには、InstagramのReview(審査)が必要です。
ただし、このReviewには例えばアプリケーションの動作説明をする動画を作成する必要があるなど、提出するだけでもかなり時間と労力がかかってしまいます。

なお「自分の画像を表示させる」にはSandbox Modeで十分です。
まずSandbox Modeで出来ることを十分に理解し、進めていきましょう。

Sandbox Modeで出来ること

画像の取得という点に注目した場合のSandbox Modeで出来ることは以下の通りです。

  • 最新20件の自分の写真のデータ(URLやキャプションなど)が取得可能
  • APIの呼び出しは1時間に500回まで
  • 登録したユーザー(Sandbox Users)の最新20件の写真データの取得が可能

APIの呼び出しを1回だけと考えるならば、1時間に500回の閲覧が上限になりますので、サイトの規模によっては十分に使えそうですね。
また別途ユーザーを登録することで、そのユーザーの写真も扱えるようになります。
複数のアカウントの写真を扱いたい場合は、すべてのアカウントでアプリを作るのではなく、1人の管理者の作ったアプリにユーザーとして参加するのが良さそうです。

API使用の流れ

かなり前置きが長くなりましたが、ここから制作に移ります。
実際にAPIを使ってデータを取得するには下記のような流れになっています。

  1. アプリの登録(クライアントの登録)を行う
  2. ユーザーにアプリを認証してもらい、アクセストークンを取得する
  3. アクセストークンを付与した状態でAPIを使いデータを取得する

自分自身のデータを得るためだけでも必ず1度は認証し、アクセストークンを発行する必要があります。

アプリの登録を行う

Instagramの開発者ページにアクセスします。
初めての場合は開発者の登録が必要です。
[Manage Clients]タブをクリックし、表示される項目への入力を行います。図2

図2 開発者登録

次に[Register a New Client]ボタンをクリックし、アプリケーションの登録を行います。
[Application Name][Description]は任意で構いません。
[Website URL]は開発者のホームページを入力します。あくまで連絡先としての登録なので、APIの使用を許可するドメインなどではありません。
[Valid redirect URIs]は認証後に遷移するページを登録します。
今回は任意で構いません。([Website URL]と同じでOK)
認証結果をPHPなどで別途処理したい場合は、そのプログラムへのURLを記載します。
次に[Security]タブをクリックし[Disable implicit OAuth]のチェックを外します。(今回はimplicit認証を利用するため)
最後に画像認証を行い、[Register]をクリックし登録は完了となります。
Manage Clientsに登録したアプリが表示されます。[CLIENT ID]はまた後ほど利用します。図3

図3 アプリケーション(クライアント)登録

ユーザーにアプリを認証してもらい、アクセストークンを取得する

次に登録したアプリをユーザーに認証してもらう作業を行います。
前述の通り、自分のデータにアクセスするためにも認証が必要となっています。
以下のURLの[CLIENT-ID][REDIRECT-URI]を先ほど登録したアプリの情報に置き換えて、アクセスすることで認証が可能です。

https://api.instagram.com/oauth/authorize/?client_id=CLIENT-ID&redirect_uri=REDIRECT-URI&response_type=token

[CLIENT ID]を"0123456789"、[Valid redirect URIs]を"https://capotast.co.jp/"とした場合のURL例は下記の通りです。(実際には動作しないURLですのでご了承下さい)

https://api.instagram.com/oauth/authorize/?client_id=0123456789&redirect_uri=https://capotast.co.jp/&response_type=token

上記URLをブラウザに入力しアクセスすると、以下のような認証画面が表示されます。
認証すると、[Valid redirect URIs]に登録したページに遷移し、そのURLのパラメータにアクセストークンが付与されます。図4
以後このアクセストークンが必要になるのでメモしておいて下さい。

図4 アプリ認証とアクセストークン取得

APIを使いデータを取得する

早速APIを使ってデータを取得してみましょう。
以下のURLの[ACCESS-TOKEN]を先ほど取得したアクセストークンに置き換えてアクセスします。

https://api.instagram.com/v1/users/self/media/recent/?access_token=ACCESS-TOKEN

無事に成功するとjson形式でデータが取得できたことが確認できます。
あとはこのデータをJavaScript、PHPなどで処理すればOKです。

以下は取得したJSONデータをPHPにてimgタグとして出力するサンプルプログラムです。

このようにしてサイトに表示させれば、あとはスタイルシートで装飾するもよし、JQueryなどを使ってアニメーションさせるもよし、すべては自由です。

<?php

$myAccessToken = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'; //実際のアクセストークンを入力

$json = file_get_contents('https://api.instagram.com/v1/users/self/media/recent/?access_token='.$myAccessToken);

$obj = json_decode($json);

foreach($obj->data as $data){
    echo '<img src="'.$data->images->low_resolution->url.'" alt="">';
}

InstagramのAPIによる写真の取得、いかがでしたでしょうか?
外部のウィジェットは使いたくないが、アプリの申請も厳しい、そんな時はSandbox ModeでのAPI利用がいいかもしれませんね。