InstagramをAPI使ってサイトに表示したい話
今話題のハレノヒとは関係ないことはしっかりと伝えなければいけないと思い、筆をとりました。（嘘）
かれこれ200日ぐらい間が空いてしまっているというのに、1日に数件はアクセスがあるってんだから、はてなブログってすごいなぁ、としみじみ関心。
この200日の間、なんだかんだバタバタしていまして、プライベートでも個人でお商売をしている方のホームページなんかも作らせてもらったりしていた。
個人でお商売をするとなると、日々の情報発信がとてもとても大事になるようで、ホームページにはfacebookとInstagramを表示して欲しいとリクエストをもらっていた。
手始めにfacebookページプラグインとInstawidgetを使って、ぞれぞれを表示するようにしたんだけど、いざ運用が始まってみると投稿している内容がほとんど一緒。
しかも、facebookにいたっては縦長すぎる写真を掲載するものだから、プラグインで表示しているスペースでは写真1枚しか表示されないなんて現象が起きた。
それならばいっそ、Instagram APIを使っておしゃれに、フォトギャラリーっぽく見せた方が、見に来てくれた人にとっても有意義なんじゃないかと思い、今あれこれと調べている。
まだ調べ途中な感じは否めないけど、現状でのまとめ。
Instagram APIを使うにあたって、参考にさせてもらったサイトは、こちら。
このページに書かれている通り、Instagramのデベロッパー登録をして、アプリケーションの作成を進めてみると、アクセストークンの取得でまずつまずいた。
記事によるとコマンドラインで取得するようにと書かれているんだけど、コマンドプロンプトで同じ内容を入力しても、curlが認識できないとエラーが返ってくる。
コマンドプロンプト以外でのアクセストークンの取得方法を少し調べてみていたら、この記事にたどりついた。
これでURLを叩くだけで、アクセストークンが取得できるようになった。
ただ、私がアクセストークンを取得した際のURLには「&scope=public_content」が最後に付け加えられていたんだけど、どこで情報を仕入れたのか、どんな役割があるのかは不明。
https://api.instagram.com/oauth/authorize/?client_id=「CLIENT ID」&redirect_uri=「REDIRECT URI」&response_type=token&scope=public_content
こんな感じ。
アクセストークン取得できちゃったんで、もう調べませんけどね。
それで、最初の記事に載っていたサンプルのソースコードで試してみると……………表示されない…。
またまたアレコレ調べてみたところ、アプリケーションの「CLIENT STATUS」が「Sandbox Mode」となっていたら、他人の情報をひっぱってくることが出来ないらしい。
「Sandbox Users」に掲載したいIDを追加すれば、表示することも出来るみたいだけど、追加するには相手の承認も必要になるっぽい。
とりあえず依頼を受けた人にはリクエストは送っておいたけど、なかなかこういうことに疎い人なので、きっと直接声をかけないとリクエストは承認されないので、他人の表示についてはまた後日。（書かないかもしれない）
そんなこんなで右往左往したものの、とりあえずはまずは実験と割り切って、自分の情報をひっぱってみることにした。
情報をひぱってくるにあたり、ユーザーIDが必要になるようなのだけど、自分のユーザーIDであれば、アクセストークンの最初の「.（ピリオド）」前までが、ユーザーIDになるらしい。
それで、また最初の記事に載っていたサンプルのソースコードで試してみると……………表示されたっヽ(・∀・｡)ノ
これでCSSを調整してレイアウトすれば問題ないかと思いきや、画像サイズを大きくするとボケボケの写真になってしまう。
ちゃんと見てみたところ、読み込まれている画像のサイズは150px四方の小さいものだった。
これじゃ思ったようなレイアウトが出来なさそうだったので、何とかできないかと調べてみたら、instafeed.jsの公式サイトにちゃんと説明があった。
どうやら「resolution」というオプションを設定することで、画像サイズは変更することが出来るらしい。
ちなみに最小は「thumbnail」でこれがデフォルト。
最大サイズは「standard_resolution」で612px四方の画像を読み込むことが出来る。
私は612pxまでのサイズは必要ないので、「low_resolution（306px四方）」を指定することにした。
これで残りはcssの調整である程度形にすることが出来そうなぐらいまで、進めることが出来た。
ひとまず現時点でのまとめはここまで。
ブログ書くの久しぶりすぎて、スクリーンショット画像作ったりするのすっかり忘れてたけど、落ち着いたらまた少しずつ手を加えていこうかな…。
