テクノロジー

2015.2.8

jQueryでInstagramのフィードを取得して自動スクロールさせる

jQueryでInstagramのフィードを取得して自動スクロールさせるのイメージ

手軽におしゃれな写真をシェアできるサービス「Instagram」。
写真が正方形というところがすごく素敵です。フィードを取得できないかなぁと思ったら、APIやプラグインが揃っていたのでさっそく試してみました。自身のアカウントや人気タグのフィードをランダムで取得し、横方向に自動スクロールさせてみます。今回使用したのは、以下の2つのjQueryプラグイン。

jQuery simplyScroll

横方向に延々と自動スクロールしてくれるjQueryプラグイン
http://logicbox.net/jquery/simplyscroll/
Github – logicbox/jquery-simplyscroll
今回、オプションは特に使用しません。

simplyScroll

Instafeed.js

Instagramで最新のfeedを取得してくれるjQueryプラグイン
http://instafeedjs.com/
Github – stevenschobert/instafeed.js
オプションが細かく設定できるすぐれたプラグインです。

instafeed.js

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

ではさっそく自身のアカウントのフィードを取得してみます。

html

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

JS

var userFeed = new Instafeed({
  get: 'user', //ユーザー名から取得します
  userId: 2945393597, //ユーザーIDを指定
  accessToken: '2945393597.1fa4ab2.a312a92e8a9f4911b8f601de98c448fd', //アクセストークンを指定
  limit: 10, //取得投稿の上限を設定
  sortBy: "random", //ランダムで並び替え
  template: '
  • {{caption}}
    • ',
  after: function() {
    $('#scroller ul').simplyScroll(); //Instafeed実行後、simplyScrollを実行して横スクロールさせる
  },
});
userFeed.run();

    CSS

    .simply-scroll-container { position:relative; }
.simply-scroll-clip { position:relative; overflow:hidden; }
.simply-scroll-list { margin:0; padding:0; overflow:hidden; }
.simply-scroll-list li { float:left; width:150px; height:150px; margin:0; padding:0; list-style:none; }

    上記の設定で動かしているのがコレです。



      アパレルや飲食店など、画像がユーザーへの訴求効果大となるWebサイトにはもってこいですね！どうぞお試しください。

      ついでにネクストのInstagramアカウントのフォローもどうぞ！

      Instagram