Instagram APIでフレブルBUHI画像閲覧
InstagramやPinterestなど画像系SNSのAPI使ってなんかできないかなとチュートリアル系サイトでを見てると
Instagram APIから画像データを取得する方法
Instagram APIを使ってねこ大好き専用の「Nekostagram」を作ってみた
と猫を集めてるのがあり、12のメジャーなSNSのアクティブ率を比較してみた – App Ape Labによると昨年末の国内Android端末ではInstagramがアクティブ率2位になっているので、とりあえずフレブル系の犬を集めるためハッシュ名を「#buhi」と考えてたら既にありました。（海外でもブヒっていうんですね。）
ハッシュがあるなら、Instagramから画像を引っ張ってきて表示するサイトを作るだけなんでやってみた。
Instagram Developer Documentationでデベロッパー登録して、PHPでoauthで認証してアクセストークンを拾って、そのアクセストークンで検索して表示という感じの流れで、APIでよくあるパターンのやつで、今回のタグ検索の仕組みまでは半日でできた。難しいとこは毎度のことだが英語なので翻訳しまくりになるのと古い写真と新しい写真の何順で送られて来て何を送れば次のデータが入手可能なのかを理解できず結局送られてくるデータをjsonをパースするPHPを作って検証しながら進める必要があった。（なお、データは新しいものから順に送られて来ます。）
ここから、ロゴやらデザインやらUIやら検証やらで丸一日ぐらいかかって、計1.5日ぐらいで出来た。
フレブルの写真をInstagramで検索して続々と表示するだけのWEBサイト「BUHI」です。
今回はお手本が既にある制作なので一日ぐらいで作りたがったがUI的な部分に時間がかかってしまった。
機能的には下記のような感じです。
・スマホ対応
・上にスクロールしすぎたら新着データを読む
・下にスクロールし底に近くなったら古いデータを読む
・Googleがかなり下までスクロールするのである程度で止める。
・読み込み中はボタンの色を変えて連続読み込みを停止する。
・動画にも対応
・ホバー又はクリックでテキスト情報表示へ切り替え
・右上に「いいね数」表示
Tags: API, BUHI, SNS, 犬, ｊQuery