Instagram APIを利用してノベンバコーデまとめページを作ったよ。

131218
今日はTHE NOVEMBERS小林くんのお誕生日!おめでとうございます△
11月に毎日THE NOVEMBERSのグッズのTシャツを着ていたので、そのコーデまとめページを作りました。
Marimelody wears dress in November.
Instagram APIを利用して作ったのでその覚え書きです。

写真の表示について記事書きました!
コピペなしでInstagramの画像を表示するよ!

やりたかったこと

まずはコーデまとめページをつくるにあたって実現したかったこと。

  • 自分のアカウントのデータを取得。
  • 11月1日から11月30日まで期間を指定。
  • 設定した期間内のデータを全て取得。

期間の指定と、取得数につまづいたのでそこを中心にまとめました。

自分のアカウントのデータを取得

クライアントID、アクセストークンの取得はこちらを参考にしました。
Instagram APIから画像データを取得する | フローズンブラウニー

自分のアカウントのデータを取得する場合、アクセストークンが必要になります。
アプリケーションの利用登録後、クライアントIDを取得し、アクセストークンを取得します。

クライアントIDの取得

http://instagram.com/developer/からアプリケーションの利用登録します。

  • Application Name アプリ名
  • Description アプリの説明
  • Website アプリのサイトURL
  • OAuth redirect_url 認証後のリダイレクトURL

アプリケーションの登録が完了するとクライアントIDが表示されます。

アクセストークンの取得

下記URLに取得したCLIENT ID、登録したREDIRECT URIを入力してブラウザからアクセスします。

https://instagram.com/oauth/authorize/?client_id=取得したCLIENT ID&redirect_uri=登録したREDIRECT URI&response_type=token

リダイレクトされてアクセストークンを取得出来ました!やったー!

http://marimelody.net/#access_token=アクセストークン

取得したアクセストークンを下記URLに入力してブラウザからアクセスすると、自分のアカウントのJSONデータが表示されます。

https://api.instagram.com/v1/users/self/media/recent?access_token=取得したアクセストークン

期間を指定して、期間内のデータを全て取得

User Endpoints

期間を指定するにはMIN_TIMESTAMPMAX_TIMESTAMPのパラメータを追加します。
Instagtamのtimestampがよくわからなかったので、投稿日のspanタグのvalueにtimestampが入っているのでそこからコピーしました。

MIN_TIMESTAMPに11月1日のtimestampを、MAX_TIMESTAMPに11月30日のtimestampをそれぞれ指定します。
このままでは20件しか表示されないので全件取得するため、COUNTに-1を指定します。

https://api.instagram.com/v1/users/ユーザーID/media/recent/?access_token=アクセストークン&count=-1&min_timestamp=11月1日のtimestamp&max_timestamp=11月30日のtimestamp

これで11月1日から11月30日までの全ての投稿のJSONデータを取得出来ました!わーい!

デモ

最初に紹介したノベンバコーデまとめページがデモサイトです。
Marimelody wears dress in November.
キャプションに含まれる文字列の検索とかパラメータで指定できたりしないのかなって思いつつ作ってみました。

写真の表示についてはこちらを参考にしています。
instagramをjQueryで使う – jQuery(javascript)の使い方

最後に改めてTHE NOVEMBERSに心からの感謝とリスペクトを△
次はひなげし観察日記を作りたいな…。