[baserCMS]Instagramの投稿写真をWebサイトに表示する

なお、現在インスタグラムのAPIを利用するためにアプリケーション登録をすると、初めはSandBox（サンドボックス）モードと呼ばれる状態となり、幾つかの制約がかかった状態となるようです。この記事では途中でbaserCMS用のプラグインを利用しますが、サンドボックスモードでも動くことを確認しています。ただし、プラグインをカスタマイズしてより柔軟なアプリケーションを作りたい場合は、インスタグラムに審査申請して、制限を外す必要が出てくることがありますので、予めご承知ください（2016年5月現在）。

この記事の動作環境

• baserCMS 3.0.9
• Instagram API（2016/5/6 現在の仕様）

Instageam Developerへの登録

インスタグラムのAPIを利用するには、デベロッパー登録が必要です。2015年末に幾つかの仕様変更がありましたが、古い仕様に基づいた解説記事が沢山あるため、少し混乱しそうです。下記に参考記事を挙げさせて頂きますので、ご覧頂ければと思います。

参考記事：
・ Instagram APIで投稿画像をショップに表示する方法｜EC-Campus.tv

ユーザーIDとアクセストークン

インスタグラムのAPIから投稿画像を取得するには、ユーザーID（ユーザー名ではない数字の羅列）とアクセストークンが必要です。先ほどの参考記事にある通りに手順をすすめると、下記のような形のユーザーIDとアクセストークンが手に入ると思います。

アクセストークンの形式：
12346789.xxxxxxx.xxxxxxxxxxxxxxxxx

このうち、最初のピリオドまでの数字部分がユーザーIDとなります（上の例だと「123456789」の部分）。 このユーザーIDとアクセストークンを控えておいてください。次のプラグイン設定で利用します。

プラグインのインストール

ダウンロードとリネーム

まず、GitHubで公開しているbaserCMS用プラグイン「Instagram」をダウンロードします。ただし、GitHubからダウンロードするとフォルダの末尾にブランチ名が付いてしまいます。そこで、以下の用にリネームします。

[Instagram-master] → [Instagram]

つまり「-master」というブランチ名の部分を取るだけです。このフォルダ名のリネームができたら、通常通りの手順でプラグインをインストールしてください（詳細なプラグインのインストール方法は、公式Wikiをご覧ください）。

プラグインの設定

プラグインのインストールに成功すると、プラグイン管理画面から管理アイコン（モニター画面のようなアイコン）をクリックして、インスタグラムプラグインの管理画面に入ることができます。

インストール直後は未設定となっていますので、まずは利用設定を行います。ここで先ほど取得したユーザーIDとアクセストークンを入力してください（図を参照）。

ユーザーIDとアクセストークンの登録が終われば設定は完了です。次項の投稿写真の表示方法へ進んでください。

投稿写真の表示方法

投稿写真を表示するには２つの方法があります。１つ目はプラグインが予め用意している「一覧ページ」を開く方法です。２つ目は、プラグインの専用ヘルパーを用いて、任意の固定ページ等で表示させる方法です。

一覧ページ

下記のURLがプラグインが用意する一覧ページです。

  http://example.com/instagram/instagrams/index

利用設定で登録したユーザーIDが投稿した写真を取得して表示しています。このページのデザイン等は、プラグインのビューファイルで行ってます。変更したいときは、下記の場所にあるindex.phpを修正してください。

  /app/Plugin/Instagram/View/Instagrams/index.php

ファイルを開くと幾つかのヘルパーを使用しているのが分かると思います。これらのヘルパーについて、詳細は後述しています。

任意の固定ページで写真を表示する

続いて、任意の固定ページ等で写真を表示する方法です。専用ヘルパーを利用します。

$this->BcBaser->instagramPosts($limit, $tag)
インスタグラムに投稿された写真を取得して表示します。

$limit

取得枚数です。初期値は20になっています（20枚以上は、サンドボックスモードの制限あり）。

$tag

文字列型で１つ指定できます（ただしサンドボックスモードでは、テストユーザーとして登録してあるユーザーの写真しか取得できず、第三者が指定のタグをつけて投稿していても取得できない）。

なお、この$this->BcBaser->instagramPosts()で出力されるHTMLは、以下のファイルで制御されています。

  /app/Plugin/Instagram/View/Instagrams/posts.php

中身を開いていただくと、幾つかのヘルパーを使用しているのが、分かると思います。これらのヘルパーについては、次項でご紹介しています。

専用ヘルパー（テンプレートタグ）

先ほどご紹介した$this->BcBaser->instagramPosts()は、任意の固定ページなど好きな所で使えましたが、以下に記載されているヘルパーは、Instagramプラグインのテンプレート内でしか利用できません。具体的には、

  /app/Plugin/Instagram/View/Instagrams/index.php

  /app/Plugin/Instagram/View/Instagrams/posts.php

の中でのみ使用できるものになります。ご注意ください。

$this->Instagram->postPhoto($data)
投稿された画像をimgタグで出力します。動画であった場合はvideoタグで出力されます。テンプレートのループ内で用います。

$this->Instagram->postCaption($data)
投稿されたキャプションを出力します。テンプレートのループ内で用います。

$this->Instagram->postDate($data, $format)
投稿された日時を出力します。テンプレートのループ内で用います。第2引数に時間表示のフォーマットを指定できます（例："Y年m月d日"）。

$this->Instagram->postCountLikes($data)
「いいね（Like）」された回数を出力します。テンプレートのループ内で用います。

$this->Instagram->postUser($data)
投稿者名を出力します。テンプレートのループ内で用います。

おわりに

今回（サンドボックスモードの関係もあり）、複雑な機能、自分以外がした投稿の取得などは対応していませんが、 プラグイン自体はMITライセンスのもとで公開してますので、皆さまの都合の良いようにカスタマイズして、ご利用頂ければと思います。