Pocket

 

前回、InstagramAPIの使用に必要なアクセストークンの取得を行いましたので、今回は実際にAPIを使ってInstagramの写真を表示する方法をご紹介します!

 
 
 

Instagramの画像を表示しよう!

 

今回は、jQueryを使って画像の取得と表示を行います。
やりたいこととしては、ページが表示されたときにAPIで画像を取得して、その画像を表示するといった内容です。

 

具体的には、readyメソッドでajaxによってAPIを使い画像のデータを取得(このときにアクセストークンが必要になります)→データが取得できたらappendメソッドでhtmlに追加し表示させるといった流れになります。

 

以下がサンプルコードになります。

 

今回のサンプルでは、Instagramで「cat」というタグがついている写真を20件取得して表示しています。

 

実際には「ACCESS_TOKEN」の部分を取得したアクセストークンに書き換えて実行します。
簡単にコードの解説をすると、ajaxでアクセストークンを渡して写真を取得し、取得した写真のデータがdata.dataという配列で取れてきます。

さらに、この配列のdata.data[n].linkにInstagram上の写真へのリンクが入っており、data.data[n].images.low_resolution.urlに画像(jpg)が入っているので、srcにセットすることで画像を表示することができます。

ajaxのところは、urlに “https://api.instagram.com/v1/tags/cat/media/recent”と記述することで、catというタグがついている写真を取得しています。catの部分を取得したいタグに書き換えることで他のタグでの取得もできます。

 

また、タグの指定による取得以外にも人気のある写真の取得や、自分がいいね!をつけた写真の取得など、さまざまな条件での取得ができるので、開発者ページを参考にいろいろ使ってみると面白いと思います!→Instagram開発者ページ

 

このコードの実行結果はこのようになります。

instagram-cat

 

かわいいですね!
このようにcatとタグが付けられている写真が表示されます。

 
 
 

動画を表示しよう!

 

動画の場合、このままだと代替の画像が表示されるだけになってしまうので、写真か動画か判断して動画の場合はきちんと動画として表示させてみましょう。

 

動画かどうかを判断するには、data.data[n].typeを見ます。
動画の場合だと、data.data[n].type = video となりますので、その場合はvideoタグで囲み、動画として表示されるようにします。

 

以下がサンプルコードとなります。

動画のデータは、data.data[n].videos.low_resolution.urlの中に入っているので、それをvideoタグ内のsourceタグのsrcにセットすることで、動画が表示されます。
ただし、今のところ(2015/01/18時点)、FirefoxやIE8以下ではmp4の再生に対応していないので注意してください!

 
 
 

Lazyloadと組み合わせよう!

 

より実用的に使うために、ページの表示位置にきたら画像の読み込みを開始してくれるLazyloadと組み合わせて表示させるようにします。

 

①Lazyload.jsをダウンロードする

Lazy Load Plugin for jQueryにアクセスして、画面の下の方にあるDownloadセクションのsourceもしくはminifiedをクリックします。
クリックすると、ソースが表示されるので、右クリック→名前を付けて保存 などして保存しておきます。

 

②Lazyload.jsを読み込ませる

保存ができたらページに読み込ませ、設定を記述します。サンプルではminifiedのほうのlazyloadを使っています。

 

③data-originalに画像をセットする

設定ができたら、imgタグにid=’lazy’をセットし、いままでsrcにセットしていた画像ファイルのデータをdata-original属性にセットします。
先ほどの画像を表示するサンプルコードに組み合わせるとこのようになります。

こうすることで、画像の表示位置に来たときに初めて読み込みを開始するようになるので、画像をたくさん使用しているサイトなどで表示が遅くなってしまうことを防ぐことができます!

 
 
 

まとめ

 

今回は、InstagramAPIを使い、写真または動画の取得と表示、さらにはLazyload.jsと組み合わせた、より実用的な表示方法をご紹介しました!

 

ポイントとしては、

  1. ・さまざまな条件で写真を取得することができる。
  2. ・Instagramの動画を表示するにはtypeを見て処理を分ける。
  3. ・Lazyload.jsと組み合わせて表示することもできる。

ですかね!

 

InstagramAPIは、今回ご紹介した方法以外にもさまざまな利用方法がありますので、活用してみてはいかがでしょうか?

 
 
 

長文お読みいただきありがとうございました。
それでは!

 

Pocket

Comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

Copyright © team naporitan All Rights Reserved.