という話

技術ブログにしたい

InstagramAPIのタグ検索で次のページを表示する方法

instagramのAPIを使って写真を取得する方法 : matsudam blog
このページを参考にアプリケーションを登録します。

この情報だとちょっと古くてアクセストークンが取得できないので別のやり方で取得します。

Instagramにログインした状態で以下のページにアクセスします

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

「CLIENT-ID」と「REDIRECT-URI」を自分のアプリケーションに置き換えてアクセスしてください。

画面が表示されたら「Authorize」ボタンをクリック。
するとリダイレクト先に「access_token」というパラメータ付きでリダイレクトされます。

APIにアクセス

アクセストークンがGET出来たので早速InstagramのタグAPIにアクセスします。
Tag Endpoints • Instagram Developer Documentation

上記のリファレンスを参考にアクセスします

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

JSONが返ってきますね。
上記URLの「snow」ってなってる部分を変更することで好きなタグにアクセス出来ます。

で、表題の次のページに行く方法なのですがレファレンスにはこう書いてあります

Get a list of recently tagged media. Note that this media is ordered by when the media was tagged with this tag, rather than the order it was posted. Use the max_tag_id and min_tag_id parameters in the pagination response to paginate through these objects. Can return a mix of image and video types.

Google翻訳さんの力を借りると、ページ毎にアクセスするにはmax_tag_idとmin_tag_idを付けてくださいってことらしい。

APIの中身を見るとpaginationキーの中にそれっぽいものがあります

"pagination": {
        "deprecation_warning": "next_max_id and min_id are deprecated for this endpoint; use min_tag_id and max_tag_id instead", 
        "min_tag_id": "1401794306803592", 
        "next_max_id": "1401794079657725", 
        "next_max_tag_id": "1401794079657725", 
        "next_min_id": "1401794306803592", 
        "next_url": "https://api.instagram.com/v1/tags/snow/media/recent?access_token=ACCESS-TOKEN&_=1401767576393&max_tag_id=1401794079657725"
    }

この「next_max_id」と「next_min_id」を指定すれば次のページ取れるんだなーと思ってjQueryでこんな感じで書きました。

var minTagId = undefind;
var maxTagId = undefind;
var tagName = 'snow';

function getInstagram()
{
  $.ajax({
    type: 'get',
    url: 'https://api.instagram.com/v1/tags/' + tagName + '/media/recent',
    dataType: 'jsonp',
    data: {
      access_token:ACCESS-TOKEN,
      max_tag_id:maxTagId,
      min_tag_id:minTagId
    },
    jsonpCallback: 'instagram',
  })
  .done(function(data)
  {
    maxTagId = data.pagination.next_max_id;
    minTagId = data.pagination.next_min_id;
    Console.log(data);
  });
}

1回目の時はundefindで2回目以降はレスポンスのnext_max_idとnext_min_idを指定するようにしたんですが、これではダメでした。何回やっても同じデータが取得されます。

で、色々ググったんですが見つからなくて途方にくれていたんですが、答えはレスポンスに書いてありました。

＿人人人人人人＿
＞　next_url　＜
￣Y^Y^Y^Y^Y￣

先ほどのJSONにも書いてますがpagination.next_urlというキーで帰って来てるURLにアクセスすれば次のページが取得できます。


next_urlと自分が書いたリクエストurlを比べるとmin_tag_idが無いのでmin_tag_idなしでリクエストしてもダメでした。
レファレンスに書いてあるとおりにやってるのにー！

何か釈然としないのですが、next_urlには&_=********みたいな形で知らないパラメータが追加されてるので、なんかこの辺でゴニョゴニョしてるのかなーとか思うんですがInstagram側のことなので分かりません。