TOKYOからOKINAWAに移住したHOMME

20代後半で思い立ったように東京から沖縄に移住したヤローの徒然＋プログラム関連作業用メモ

Instagramの写真を取得して自動スクロールするウィジェットを作る

作業用メモ

インスタのAPI仕様変更になったので改めて学習。

自身のアカウントや人気タグのフィードから写真を取得し、グリッド表示して横方向に自動スクロールさせてみる。今回使用したのは、以下の2つのjQueryプラグイン。

jQuery simplyScroll

横方向に延々と自動スクロールしてくれるjQueryプラグイン
http://logicbox.net/jquery/simplyscroll/f:id:yamatonchu:20160710200847p:plain

Instafeed.js

Instagramで最新のfeedを取得してくれるjQueryプラグイン
http://instafeedjs.com/f:id:yamatonchu:20160710200933p:plain

 Instafeed.jsの主なオプション

ハッシュキー用途
clientId (string)   Instagram APIで取得したあなたのClient IDを指定します。
http://instagram.com/developer/
accessToken (string)   User IDとaccessトークンがわからない方は、Instafeed.jsでOAuth認証することによって取得できます。
こちら
target (string)   画像を表示させたいDOM要素のIDを指定します。
デフォルトはinstafeed（たぶん）
template (string)   出力したいHTMLを指定することができます。
こんな具合にね
get (string)
popular – 人気の投稿
tagged – タグ
location – ロケーション
user – ユーザー
取得したい投稿の種類を指定します。
template (string)   出力したいHTMLを指定することができます。
こんな具合にね
tagName (string)   getオプションでtaggedを選ぶならこの設定が必要です
locationId (number)   getオプションでlocationを選ぶならこの設定が必要です
userId (number)   getオプションでuserを選ぶならこの設定が必要です
その他sortByやbeforeやafterなどの実行前後の動作指定用オプションがあります。詳しくは以下をご覧ください。
http://instafeedjs.com/#standard

 

１，アカウント作成

まずアカウントを作成しログインします、すでにアカウントをもっていればそのアカウントにログインすればOK。
https://instagram.com/accounts/login/

さらに以下のからデベロッパー（開発者）として登録。
http://instagram.com/developer/clients/manage/

２，アプリケーションの新規作成

スクロールウィジェットは「アプリケーション」として登録する必要があります。
まず右上の「Register a New Client」をクリックして新規作成します。f:id:yamatonchu:20160710201319p:plain

つぎに登録画面で必要情報を入力します。f:id:yamatonchu:20160710201500p:plain

  • Applictaiton Name：アプリケーションの名前
  • Dscription：アプリケーションの説明などを入力
  • Website：サイトのURLを入力（あれば）
  • OAuth redirect_uri：アクセストークンを取得する際にリダイレクトされるURL（基本的には最初の1回だけ使用するので適当でもOK）
  • Privacy Policy URL：自サイトにプライバシーポリシーのページがあれば入力
  • Contact email：連絡先用のメールアドレスを入力
  • Disable implicit OAuth：チェック入れたまま
  • Enforce signed header：チェックしないまま

Registerを押してアプリを作成します。

f:id:yamatonchu:20160710201905p:plain

アプリケーションの詳細が表示されるので各項目をメモっておく！

３，コードを取得

https://api.instagram.com/oauth/authorize/?client_id=◯◯◯&redirect_uri=□□□&response_type=code

アクセストークンを叩きます。
上記のURLをブラウザのURLバーにコピペして、URLにとびましょう。
○◯◯の部分に２で取得した「CLIENT ID」を差し替え。
□□□の部分に「REDIRECT URL」を差し替えしましょう。

URLにとぶと認証画面が表示されるので「Authorize」
f:id:yamatonchu:20160710202703p:plain

認証後、REDIRECT URLで設定したページに飛ばされます。
が、URLバーに表示されているURLの末尾に「?code=」で始まる英数字がくっついています。これが「コード」。これもメモっておきましょう。f:id:yamatonchu:20160710202838p:plain

４，アクセストークンを取得

つぎにこれまでに取得したコード等をつかって「アクセストークン」を取得します。
ターミナル等のコマンドライン・ソフトを使います。

Windowsなら標準で入ってるコマンドプロンプトとかCmderとかかな。
Macなら標準ではいってるターミナルとかiTermがおすすめ。

今回はMacのiTermの場合を例に進めます。

 

ソフトを立ち上げて、下記のコードを打ち込みます。コピペでOK。

curl \-F 'client_id=◯◯◯' \
-F 'client_secret=●●●' \
-F'grant_type=authorization_code'\ 
-F 'redirect_uri=□□□' \ 
-F 'code=■■■' \https://api.instagram.com/oauth/access_token

例のごとく記号部分を差し替えしてから、打ち込みましょう。

◯◯◯の部分に２で取得した「CLIENT ID」に差し替え。
●●●の部分に２で取得した「CLIENT SECRET」
□□□の部分に２で取得した「REDIRECT URL」
■■■の部分に３で取得した「コード」

 

すると以下のようなコードを吐き出しますのでこれもメモ。

f:id:yamatonchu:20160710204942p:plain

ちなみに使うのは「"access_token"」の部分です。

５，ページに実装する

４まででバックヤードの準備ができたので後はページに載っけるだけです。

Javascript

まず冒頭で紹介した「jquery.simplyscroll.js」と「instafeed.min.js」をダウンロードします。

これらのjsファイルを読み込むわけですが、それより前にjQueryを読み込んでおきましょう。
すでにページに読み込みの記述があれば必要ありませんが、ない場合は下記を足すか、サーバーにjquery.jsを置いて読込しましょう。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

 

上記のコードのうしろで下記を読み込みます。
パスは自身のサーバーに応じて書き換えます。

<script type="text/javascript" src="../js/jquery.instafeed.js"></script>
<script type="text/javascript" src="../js/jquery.simplyscroll.js"></script>

 

さらに上記のうしろ部分に下記コードを書き足します。
前項までに取得した、各々の取得情報と差し替えしましょう。

<script type="text/javascript">
var userFeed = new Instafeed({
get: 'user',
userId: xxxxxxxxxxx,
accessToken: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
limit: 10,
sortBy: "random",

template: '<li><a href="{{link}}" target="_blank"><img src="{{image}}" alt="{{caption}}" /></a></li>', after: function() { $('#scroller ul').simplyScroll(); }, }); userFeed.run();

</script>

 

まずaccessTokenの部分に４で取得したアクセストークンを入力します。
つぎにuserIdにユーザーIDを入力します。アクセストークンの中の最初のドット「.」より前方部分がユーザーIDです。
わかりずらければ下記ページで、インスタのアカウント名からユーザーIDを調べることができます。
Find my Instagram User ID

limitは取得する写真の数を指定します。
sortByでは写真の並び順を指定します。種類は下記。

  • most-recent - 新しいものから順に
  • least-recent - 古いものから順に
  • most-liked - イイねの多い順
  • least-liked - イイねの少ない順
  • most-commented - コメントの多い順
  • least-commented - コメントの少ない順
  • random - ランダム

CSS

つぎにスクロール部分のデザインをCSSで指定します。
カスタムもできますが、めんどくさければ下記をコピペでOK。

<style type="text/css">
#instafeed{ margin-bottom:25px; }
.simply-scroll-container { position: relative; }
.simply-scroll-clip { position: relative; overflow: hidden; }
.simply-scroll-list { overflow: hidden; margin: 0; padding: 0; }
.simply-scroll-list li { float: left; padding: 0; margin: 0; width: 150px; height: 150px; list-style:none !important; }
.simply-scroll-list li img { display: block; }
.table table td{ vertical-align:top; }
</style>

HTML

最後に表示させたい部分に下記のタグを挿入します。

<div id="scroller"> 
<ul id="instafeed" class="clearfix"></ul>
</div>

 

完成形がコレ

ちょっと複雑だけど１回設定してしまえばOKだし、見栄えもいいのでinstagramをデザイン的にサイトに利用したい場合はぜひ参考にしてください。