-   topic   - トピックス

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

2016年05月06日 技術関係

今回は写真共有SNS「Instagram(インスタグラム)」に投稿された写真を、baserCMSで構築されたWebサイト上に表示する手順をご紹介します。

insta.png

なお、現在インスタグラムの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とアクセストークンを入力してください(図を参照)。

setting.png

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

投稿写真の表示方法

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

一覧ページ

下記の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
文字列型で1つ指定できます(ただしサンドボックスモードでは、テストユーザーとして登録してあるユーザーの写真しか取得できず、第三者が指定のタグをつけて投稿していても取得できない)。

なお、この$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ライセンスのもとで公開してますので、皆さまの都合の良いようにカスタマイズして、ご利用頂ければと思います。