投稿日: javascript

Instagramから写真を取得し、スワイプで横スクロールするスライダーをつくる

Instagram App Icon

サイトにInstagram写真を表示する

色々と面倒くさそうに思えるかもしれませんが、実はなにもむずかしく考える必要はありません。後に紹介する2つのプラグインを読み込ませれば簡単に実装できてしまいます。

まずはInstagram APIに登録

まずInstagram APIを使用する必要があります。それにはAPIの使用登録をする必要があるのですが、誰でも簡単に登録可能です。

やり方は、調べればたくさん出てきますので（投げやり）、そちらを参考にしてください。

Instafeed.jsという便利なプラグイン

Instafeed.js – a simple Instagram javascript plugin

このプラグインを使えば簡単に（JavaScriptの知識がそれほどなくても）自身のサイトにInstagramの写真を表示させることができます。

まずは上記サイトよりダウンロードしてサイトに読み込みましょう。Bowerやnpmを使ってもダウンロード可能です。

# npm
npm install instafeed.js
# bower
bower install instafeed.js

下記のように外部ホスティングサービスを使うのもありですね。
cdnjs.com – instafeed.js

<script src="/path/to/instafeed.js"></script>
<!-- or -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/instafeed.js/1.4.1/instafeed.min.js"></script>

Instafeed.jsの設定

公式に書かれているサンプル通りにやれば問題なくできるとは思いますが念のため。（自身のInstagramアカウントの写真を取得する場合です）

var feed = new Instafeed({
  userId: 'USERID',
  accessToken: 'ACCESSTOKEN',
  get: 'user',
  target: 'DOMElement's_ID', // Default: 'instafeed'
  template: 【※1】'<a href="{{link}}"><img src="{{image}}" alt="{{caption}}"></a>',
  after:【※2】
});
feed.run();

「get」、「UserId」、「AccessToken」は必須の値です。また、「target」を指定しない場合は、<xxx id=”instafeed”>と指定されているDOM要素を探します。

targetで取得されたDOM要素内に「template」で指定されたHTMLが挿入されます。二重のブラケットで囲ったキーワードを使用することでInstagramの画像やコメント、キャプションなどが取り込めます。

これでInstagramからの画像の取り込みは完了です。では、取り込んだ画像をスワイプ操作でスクロールできるようにしていきましょう。

スワイプ処理を簡単に実装できるプラグイン「Swiper」が最高に便利すぎる

なんなら、この表題で一本投稿してもいいぐらいです。それぐらい「Swiper」が最高すぎます。

Swiper – Most Modern Mobile Touch Slider – iDangero.us

読み込んで設定してクラスをあてがう

この3ステップです（どのプラグインも大体そう…）。

ここも公式サイトもしくは、Bower及びnpmを使ってソースファイルをダウンロードしましょう。

# Bower
bower install swiper
# npm
npm install swiper

サイトに読み込みます。簡略化するために下記の例ではSwiperの設定をHTML上に直接書き込んでいます。

<head>
  <!-- CSSファイルはHead内に記述 -->
  <link rel="stylesheet" href="path/to/swiper.min.css">
</head>
<body>
  <!-- 【※3】 -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <!-- スライドさせる要素 -->
      <div class="swiper-slide"></div>
      <div class="swiper-slide"></div>
      <div class="swiper-slide"></div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
  <!-- 【※3】 -->
  <!-- JavaScriptファイルは</body>の直上が望ましい -->
  <script src="path/to/swiper.min.js"></script>
  <script>
    // 第1引数でスワイプ処理を実行するDOM要素を指定
    var swiper = new Swiper('.swiper-container', {
      // スライドの位置を示すドットを表示
      pagination: '.swiper-pagination',
      // 画面内に表示させるスライド数
      slidesPerView: 'auto',
      // メインのスライドを画面中央に配置
      centeredSlides: true,
      // 永遠にスライドできるようにする
      loop: true
    });
  </script>
</body>

これで「.swiper-container」内の要素「.swiper-slide」がスワイプでスクロールするようになりました。動きも大変なめらかです。

自身のサイトに合うようにオリジナルのCSSを適用しておきましょう。

<link rel="stylesheet" href="path/to/swiper.min.css">
<link rel ="stylesheet" href="path/to/swiper-customised.css">

しかしこれではInstagramから取得した画像をスライドできていません。ここからもう一手間加える必要があります。

と、言っても上述の部分を合体させるだけですぐ終わります。

Instafeed.jsとSwiperの融合

手順としては2つほどです。

  • Instafeed.jsの設定（afterプロパティ）にSwiperの設定を書き込む
  • HTMLの段組みをSwiperに適応させる

afterプロパティでSwiperを読み込む

上述のSwiperの設定をInstafeedのafterプロパティ（【※2】部分）に書き込むだけです。

after: function(){
  var swiper = new Swiper('.swiper-container', {
    // 上の例に同じ
  });
}

templateプロパティで書き出すHTMLを修正

【※1】のHTMLをSwiperに適応するように修正します。

template: '<div class="swiper-slide"><a href="{{link}}"><img src="{{image}}" alt="{{caption}}"></a></div>'

そして【※3】に囲まれている部分のHTMLを下記のように変更します。

<div class="swiper-container">
  <div id="instafeed" class="swiper-wrapper">
    <!--
    ここにInstagramの画像がtemplateに従って書き出される
    -->
  </div>
  <div class="swiper-pagination"></div>
</div>

これで完成。
プラグイン作成者には足向けて寝られません（スーパー感謝orz）。

(Visited 3,906 times, 1 visits today)