この記事に書かれている機能は非推奨になりました。Ver.3では機能自体が削除され、過去のバージョンでも非推奨としています（2021年12月24日追記）。

この記事は2020年7月時点で作成された記事です。提供サービス側の仕様やUIの変更によって情報が最新ではない場合がございます。

a-blog cmsではInstagram API を通して投稿された情報を表示するために Api_Instagram_Users_Media_RecentとApi_Instagram_Users_Media_Likedを以前から提供していました。しかし2020年中に今までのInstagram APIは廃止され、代わりにFacebookが提供する、Instagram Graph API の使用が推奨されるとのことです。 そこでInstagram Graph APIに対応した新しいモジュール Api_Instagram_Users_Media_Recent2 を用意しました。このモジュールはInstagram Graph APIを用いてInstagramの投稿を表示するための機能を提供します。

ただしこのモジュールではInstagram Business Accountでないと情報を表示できません。

設定手順

ではここからInstagram Graph APIとの連携手順をご案内していきます。 Instagram Graph APIとの連携は以下の手順で行います。

1. Facebook for Developers への登録
2. Facebook for Developers でアプリを登録
3. a-blog cmsの認証処理
4. モジュールIDの使用

１. Facebook for Developers への登録

Facebookアカウントを使ったSNSログインのための準備として、a-blog cmsの 管理ページ＞コンフィグ＞プロパティ設定 にあるFacebookアプリケーション欄の「アプリ ID」と「app secret」の2つの情報が必要になります。この2つの情報は、 独自のFacebookアプリを作成することで入手できます。

注意：Facebookアプリの作成には、Facebook開発者登録が必要です。開発者登録がされていない場合には https://developers.facebook.com より事前にご登録ください。

２. Facebook for Developers でアプリを登録

新規アプリを作成画面へ移動します。上部ナビゲーションのマイアプリから「新しいアプリを追加」を選択します。

マイアプリを選択

新しいアプリを追加

「新しいアプリを追加」を選択すると、アプリの使用目的選択画面が表示されます。該当の項目を選択してください。使用目的がどれか未定またはインスグラムの画像をWebサイトに表示させたいだけの場合は「その他」を選択しておいてください。

アプリの利用目的を選択

アプリの利用目的を選択すると、アプリ名入力画面が表示されます。アプリ名と連絡先メールアドレスを入力して「アプリIDを作成」をクリックします。

アプリ名と連絡先メールアドレスを入力してアプリIDを作成

その後、セキュリティチェック画面が表示されます。「私はロボットではありません」にチェックを入れ、「送信」ボタンをクリックします。

「私はロボットではありません」にチェックを入れ、「送信」ボタンをクリック

これでアプリID の作成は完了です。次にアプリの登録が求められるので InstagramではなくFacebook ログインを選択します。

Facebookログインを選択後、サイドバーから、Facebookログイン > 設定 をクリックしてください。

Facebookログイン -> 設定

認証に必要なOAuthリダイレクトURIを登録します。ここには https://ドメイン名/callback/instagram2.html と入力してください。

リダイレクトURIを登録

次にアプリIDのベーシック設定をします。サイドバーから 設定 > ベーシック に移動します。

設定 > ベーシック

以下のようなフォームが表示されますので、アプリドメイン、連絡先メールアドレス、プライバシーポリシーのURL、利用規約のURL、アプリアイコンを登録してください。開発中であれば、プライバシーポリシーのURLと利用規約のURLは適当なもので問題ありません。

ベーシック情報を入力

登録後、アプリIDおよび app secretを a-blog cms に登録するために控えておきます。

３. 取得したアプリ ID, app secretなどを a-blog cmsに登録

次に控えた情報をa-blog cms側に登録します。 管理ページ＞コンフィグ＞プロパティ設定 から設定できます。プロパティ設定画面の「ウェブサービス」からInstagram Graph APIの各情報を登録します。

管理ページ > コンフィグ > 外部認証設定からInstagram Graph APIを認証します。

認証ボタンをクリックするとFacebookページに遷移します。ログイン情報の確認画面が表示されましたらインスタグラムと連携するFacebookアカウントであることを確認し、「〇〇としてログイン」をクリックします。もし別アカウントでログインしようとしていた場合は「別のアカウントにログインします」よりアカウントの切替を行ってください。

Facebookアカウントの確認

次に、アクセスを許可したいInstagramのビジネスアカウントを選択します。複数選択しておくことも可能です。

Instagramのビジネスアカウントを選択

アプリからアクセスできるページを選択してください。複数選択しておくことも可能です。

アプリからアクセスできるページを選択

アクセス許可設定画面では、全て「はい」の状態であることを確認し、「完了」をクリックします。

アクセス許可設定

「〇〇がFacebookにリンクされました」と表示されたことを確認し、「OK」をクリックします。

リンク完了画面

OAuth認証に成功すると、自動的にa-blog cmsのページに遷移します。「OAuth認証に成功しました。」と表示されたら、「トップページに戻る」をクリックします。これで連携は完了です。

OAuth認証成功

４. モジュールIDの使用

次にGraph APIを使用したモジュールを使用してみましょう。モジュール名は Api_Instagram_Users_Media_Recent2 です。管理画面 > モジュールID より新規モジュールIDを作成します。 この時、ビジネスアカウントを設定しないとモジュールIDを設定しても何も表示されないので注意してください。

またモジュールのスニペット情報は クイックサーチ機能（⌘ + K）より;recent2と入力していただくと見つかりますのでこれを利用してください。

正しく認証されていればスニペットを貼り付ける、モジュールIDを追加すると以下のようにインスタグラムの投稿一覧が表示されます。

スニペットのサムネイル画像サイズを調整する場合は FACEBOOK for Developers | Embedding Instagram Posts "Query String Parameters" を参考に画像のパラメーターを調整してください。

ここでは、a-blog cmsを使っているサイトで、特定フォルダ以下に別のサービス（プログラム）を設置したい場合の設定方法について説明します。

a-blog cmsはURLの偽装を行っており、実際のフォルダ・ファイル構造と、エントリーのURLが一致しない仕組みになっています。 a-blog cmsがインストールされている領域内で、特定のフォルダに別のシステムを入れたいケースもあります。通常では方法では、その特定のフォルダ内にもa-blog cmsの偽装処理（htaccessを使ったURL書き換え）が影響を与えるため、別のシステムが意図しない動作になることがあります。

対処方法

a-blog cms が設置されているルートディレクトリの.htaccessに記述を追加します。この例では /other/ ディレクトリをa-blog cmsから切り離しています。
※ver1.6.2以降は追記する内容はコメントアウトで記載されています。

RewriteCond %{REQUEST_URI} !^/?other/
RewriteRule ((\.(html|htm|php|xml|txt|js|json|css|yaml|csv))|/)$index.php [L]

通常は文末2行の記述を利用することで特定ディレクトリを除外できます。
特定ディレクトリ内が動的なサイトの場合は上記の記述が必要になるケースがあります。

Google Analytics で取得したアクセス数に基づいてページをランキング形式で表示するモジュールApi_GoogleAnalytics_Ranking を使用するとアクセスの多いコンテンツ順に一覧表示をすることができます。

Google API Consoleの設定

Google API Consoleにて、サービスアカウントを作成します。
プロジェクトを作成しましたら、認証情報から認証情報を作成ボタンを押します。サービスアカウントキーを選択します。
新しいサービスアカウントを選択し、サービスアカウント名はわかりやすい名前。役割はプロジェクトの「編集者」と「閲覧者」を選択します。キーのタイプはP12を選択します。
これで、サービスアカウントIDが作成されました。サービスアカウントIDとして長いメールアドレスが用意されていますので、その情報をコピーしておきます。ダウンロードしたP12ファイルはa-blog cms側の設定で使用します。

次の方法でもサービスアカウント作成画面へ移動できます
ハンバーガーアイコンからメニューを表示し「API Manager」から「IAMと管理」へ移動します。対象のプロジェクトに変更しておき、サービスアカウントから、「サービスアカウントを作成」をクリックします。この時「新しい秘密鍵の提供」はチェックをしてP12を選択します。

Google Analyticsの設定

Google Analyticsにてサービスアカウントからのアクセスにたいして許可をあたえます。
Google Analytics の対象サイトへ移動し、管理タブ > プロパティ（対象サイト） > ユーザー管理から、下記画像のような権限を付与するユーザー欄に、前述で作成したサービスアカウントIDのメールアドレスを貼り付けます。権限は「表示と分析」のままで、追加ボタンを押します。

a-blog cmsのコンフィグ設定

管理メニュー > コンフィグ > プロパティ設定 > ウェブサービス > Google Analytics APIの2項目を、設定します。
Service Account e-mail address：サービスアカウントIDのメールアドレスを登録（自動生成されます）
Client ID Key Location (p12)：サービスアカウント作成時にダウンロードする鍵ファイル（P12形式）をa-blog cmsを利用しているサーバーにアップロードし、そのファイルのパスを指定します。

Api_GoogleAnalytics_Ranking モジュールの表示設定

表示設定にて、設定可能な項目について、集計開始日、集計終了日は例を参考に記入します。
フィルターでは、ランキング表示させるURLを正規表現でフィルタリングしておくことができます。

ga:pagePath=~/faq/(.*).html
この例の場合、URLが/faq/配下のコンテンツで、.htmlとなるページのみランキング表示されます。

この記事に書かれている機能は非推奨になりました。Ver.3では機能自体が削除され、過去のバージョンでも非推奨としています（2021年12月24日追記）。

2020年にInstagram APIは廃止される予定です。代わりにInstagram Graph APIの利用が推奨されています。a-blog cmsでは（Ver.2.10.23, Ver.2.9.26, Ver.2.8.64以降から）Instagram Graph APIにも対応していますのでよろしければこちらをご覧ください。

Instagramと連携したモジュールが２つ用意されています。

• Instagram最近の投稿（Api_Instagram_Users_Media_Recent）
• Instagram最近のLiked（Api_Instagram_Users_Media_Liked）Instagramアプリの申請が必要になります。

連携をするとInstagramの写真を好きなレイアウトで作ることができる様になります。

アプリケーションの登録

まずは、Instagram側でアプリの登録を行います。これによりAPI連携で必要な Client Id Client Secret を取得します。 登録は https://www.instagram.com/developer/ から行います。 ここで注意点として、Valid redirect URL は、 http://ドメイン/callback/instagram.html を指定してください。

Instagram アプリ登録画面

アプリを登録後、詳細画面（Manage）に移動すると以下２つの値が確認できると思います。この値をメモ（コピー）しておきましょう。

• Client ID
• Client Secret

a-blog cmsの設定

Client ID と Client Secret が取得できたら、次にa-blog cms側の設定を行います。 管理ページ > コンフィグ > プロパティ設定 の Instagram アプリケーションに以下の情報を入力します。

• Client ID（Instagramアプリ登録で取得した Client ID ）
• Client Secret（Instagramアプリ登録で取得した Client Secret ）
• Client Redirect（Instagramアプリ登録で登録した Valid redirect URIs の値）

認証

プロパティの設定が保存できたら、Instagramの認証を行います。 管理画面 > コンフィグ > 外部認証設定 に移動し InstagramのOAuth認証ボタンを押して、Instagram側で認証してください。

モジュールの使用

これによりInstagram最近の投稿（Api_Instagram_Users_Media_Recent）モジュールが使用できるようになりました。スニペットを貼り付けて最近の投稿が取得できるか確認してみましょう。

Api_Instagram_Users_Media_Likedの使用

Instagram最近のLiked（Api_Instagram_Users_Media_Liked モジュールを使用する場合は注意が必要です。 Api_Instagram_Users_Media_RecentはSandboxモードで使用することができるのですが、Api_Instagram_Users_Media_Likedはアプリの審査が必要になります。アプリの審査はアプリを登録したサイトより審査できますが、内容によっては審査が通らない場合がありますのでご注意ください。

GoogleのAPIを使用してログインするログイン機能があります。この機能を利用することで簡単にa-blog cmsへログインすることができる様になります。またサインアップ機能（読者登録）も対応していますので、読者登録を実装されている場合は有効なカスタマイズになります。

Google API Consoleでの設定

Googleアカウントを使ったログインのための準備として、a-blog cms の管理ページ＞コンフィグ＞プロパティ設定 にあるGoogle（ログイン）欄の「Client ID」と「Secret Key」の2つの情報が必要になります。この2つの情報は、GoogleのOAuth クライアント IDを作成することで入手できます。

この手順は2016年10月現在のものです。Google側の仕様変更がされる場合がありますのでご注意ください。

1.Google API Console( https://console.developers.google.com/ )から、申請を行う必要があります。この時点でログインしているアカウントに関連づけられます。はじめにヘッダーの「プロジェクトを選択してください」から「プロジェクトの作成...」から新しいプロジェクトを作成を行います。

プロジェクトの作成

2.認証情報から認証情報作成を行います。左のAPI Managerから「認証情報」を選択します。「認証情報を作成」から「OAuth クライアント ID」を選択します。

• アプリケーションの種類: ウェブアプリケーション
• 承認済みの JavaScript 生成元: Googleアカウントでログインを行うサイトURL（http://www.example.com）を入力
• 承認済みのリダイレクト URI: 対象となるa-blog cmsのブログURL/callback/signin/google.html

作成すると、クライアントID と クライアントシークレット が表示されます。後で使うのでメモしておきましょう。また認証情報になりますので、外部にもれないように気をつけて下さい。

認証情報の作成

3.同意画面を設定します。認証情報 > OAuth同意画面から設定してください。サービス名は必須項目です。

OAuth同意画面の設定

a-blog cms 側の設定

Googleログインのためのa-blog cms側での設定は大きく3つあります。

1. 認証情報を登録

管理ページ > コンフィグ > プロパティ設定 から設定できます。先ほどメモした「Client ID」 を Client IDに 「Client Secret」を Secret Keyに入力してください。

2. Googleログインのための設定

ブログ全体でのSNSログイン機能と対象についての設定は 管理ページ > コンフィグ > 機能設定 から行います。

SNSログイン機能のチェックで該当ブログでの機能を有効化します。SNSログイン使用権限では、SNSログイン機能が使えるユーザー権限を設定します。

3. ユーザーごとの設定

「2. SNSログインのための設定」でブログでのSNSログイン機能を有効にすることで、該当ブログに所属する各ユーザーの管理画面にSNSログインのための項目が表示されるようになります。

ログインした状態で認証（または認証解除）することで、ログイン情報とこのユーザーが関連づけされます。ログイン状態がユーザーに関連づけされますので、この設定は管理者が一括ではなく、各ユーザーが個別に行うものとなります。

ユーザー管理でSNSと関連づけます

ログイン

ここまでの設定が行われていれば、ユーザーID、パスワードを入力しなくても、Googleのログインボタンからログインできるようになります。SNSログイン機能を有効にした状態で、a-blog cmsのログイン画面を表示すると、通常のユーザーID、パスワードの入力欄の下に、Googleのログインボタンが表示されます。

ログイン画面

Twitter APIを使用してログイン・サインアップする機能があります。この機能を利用することで簡単にa-blog cmsへログインできる様になります。またサインアップ機能（読者登録）も対応していますので、読者登録を実装されている場合は有効なカスタマイズになります。

Twitter Application Managementの設定

Twitterアカウントを使ったSNSログインのための準備として、a-blog cms の 管理ページ＞コンフィグ＞プロパティ設定 にあるTwitter（SNSログイン用）欄の「Consumer Key」と「Consumer Secret」の2つの情報が必要になります。この2つの情報は、 独自のTwitterアプリを作成することで入手できます。

アプリの作成手順

この手順は2016年05月現在のものです。Twitter側の仕様変更がされる場合がありますのでご注意ください。

1. Twitter のアプリケーション登録ページ( https://apps.twitter.com )から、申請を行う必要があります。この時点でログインしているアカウントが表示や投稿に関連づけられます。画面右側の「Create New App」から新しいアプリケーションの作成を行います。

Twitter Application Managementの画面

2.Application Detail の各欄を入力します。 Name、Descriptionにはわかりやすい名前と概要を入力し、Websiteには対象となるa-blog cmsのブログURLを入力してください。 Callback URLには以下の内容を入力してください。

対象となるa-blog cmsのブログURL/callback/signin/twitter.html

画面下部の規約に同意して登録を完了してください。

アプリケーション作成画面

3.アプリケーションの作成が完了すると、情報の確認や設定の変更ができます。以下の内容を変更してください。

Application Settings内「Access level」

基本のアクセス形式です。 (modify app permissions)のリンクからデフォルトは「Read & Write」ですが、SNSログインは「Read only」で実行できます。

SNSログインは「Read only」で実行できます

Keys and Access Tokens

a-blog cmsとの連携には、このタブで表示される「Consumer Key (API Key)」と「Consumer Secret (API Secret)」が必要になりますのでメモをしておいてください。

Keys and Access Tokensの画面

a-blog cms 側の設定

SNSログインのためのa-blog cms側での設定は大きく3つあります。

• APIキーの設定
• SNSログインのための設定
• ユーザーごとの設定

1. APIキーを設定

Google、Facebook、TwitterのAPIキーは 管理ページ＞コンフィグ＞プロパティ設定 から設定できます。プロパティ設定画面の「ウェブサービス」からGoogle (ログイン)、Twitter（SNSログイン用）、Facebook アプリケーションの各情報を登録します。

Twitterの APIキー登録は２つありますのでお気をつけください。Twitter（SNSログイン用）を利用。

プロパティ設定画面

2. SNSログインのための設定

ブログ全体でのSNSログイン機能と対象についての設定は 管理ページ＞コンフィグ＞機能設定 から行います。

SNSログイン機能 のチェックで該当ブログでの機能を有効化します。SNSログイン使用権限 では、SNSログイン機能が使えるユーザー権限を設定します。

機能設定画面

3. ユーザーごとの設定

「2. SNSログインのための設定」でブログでのSNSログイン機能を有効にすることで、 該当ブログに所属する各ユーザーの管理画面 にSNSログインのための項目が表示されるようになります。

Twitterログインボタンは、 SNSにログインした状態で認証（または認証解除）することで、ログイン情報とこのユーザーが関連づけされます。ログイン状態がユーザーに関連づけされますので、この設定は管理者が一括ではなく、各ユーザーが個別に行うものとなります。

ユーザー管理でSNSと関連づけます

認証がされている場合は「認証」ボタンが「認証解除」に変わって表示されます。各サービスの認証ボタンを押した時、サービスにログインしていない場合は、各サービスの認証画面が表示されます。ここでログインすることで、このユーザーでのa-blog cmsのSNSログインが有効になります。

ログインするには

ここまでの設定が行われていれば、ユーザーID、パスワードを入力しなくても、SNSログインボタンからログインできるようになります。SNSログイン機能を有効にした状態で、a-blog cmsのログイン画面を表示すると、通常のユーザーID、パスワードの入力欄の下に、Twitteのログインボタンが表示されます。

SNSログインが有効なログイン画面

Facebook APIを使用してログイン・サインアップする機能があります。この機能を利用することで簡単にa-blog cmsへログインできる様になります。またサインアップ機能（読者登録）も対応していますので、読者登録を実装されている場合は有効なカスタマイズになります。

facebook for developersの設定

Facebookアカウントを使ったSNSログインのための準備として、a-blog cmsの 管理ページ＞コンフィグ＞プロパティ設定 にあるFacebookアプリケーション欄の「Application ID」と「Appliction Secret」の2つの情報が必要になります。この2つの情報は、 独自のFacebookアプリを作成することで入手できます。

注意：Facebookアプリの作成には、Facebook開発者登録が必要です。開発者登録がされていない場合には https://developers.facebook.com より事前にご登録ください。

アプリの作成手順

この手順は2016年05月現在のものです。Twitter側の仕様変更がされる場合がありますのでご注意ください。

1.新規アプリを作成画面へ移動します。上部ナビゲーションのマイアプリから「新しいアプリを追加」を選択すると、モーダルウィンドウでプラットフォームの選択画面が表示されます。ここでは「ウェブサイト」を選択します。

facebook for developersの画面

ウェブサイトを選択します

2.Quick Start for ウェブサイトの画面から、新たに作成するAppの名前（任意のもの）を入力して「新しいFacebookアプリIDを作成」をクリックすると、次の画面へ移動します。

新しいFacebookアプリIDを作成します

3.連絡先メールアドレス、対象となるサイトに適したカテゴリを選択して「アプリIDを作成」をクリックして次の画面へ移動します。

Create a New App IDの画面

4.「Tell us about your website」のSite URLにFacebookアカウントでのログインを行うサイトのURLを入力します。

ログインを行うサイトのURLを入力します

5.アプリの登録ができました。画面下部の「Next Steps」の文中にある「Skip to Developer Dashbord」リンクからダッシュボードへ移動します。

「Skip to Developer Dashbord」リンクからダッシュボードへ移動します

6.ダッシュボード画面ではアプリID とapp secret が確認できます。app secret は非表示になっていますので、 App Secret 欄右側の「表示」で表示して確認してください。

ダッシュボードページ

これで設定に必要な 「Application ID」 と 「Appliction Secret」 が取得できました。 これらの情報のa-blog cmsへの設定は後述します。

a-blog cms 側の設定

SNSログインのためのa-blog cms側での設定は大きく3つあります。

• APIキーの設定
• SNSログインのための設定
• ユーザーごとの設定

1. APIキーを設定

FacebookのAPIキーは 管理ページ＞コンフィグ＞プロパティ設定 から設定できます。プロパティ設定画面の「ウェブサービス」からFacebook アプリケーションの各情報を登録します。

プロパティ設定画面

2. SNSログインのための設定

ブログ全体でのSNSログイン機能と対象についての設定は 管理ページ＞コンフィグ＞機能設定 から行います。

SNSログイン機能 のチェックで該当ブログでの機能を有効化します。SNSログイン使用権限 では、SNSログイン機能が使えるユーザー権限を設定します。

機能設定画面

3. ユーザーごとの設定

「2. SNSログインのための設定」でブログでのSNSログイン機能を有効にすることで、 該当ブログに所属する各ユーザーの管理画面 にSNSログインのための項目が表示されるようになります。

Facebookログインボタンは、 SNSにログインした状態で認証（または認証解除）することで、ログイン情報とこのユーザーが関連づけされます。ログイン状態がユーザーに関連づけされますので、この設定は管理者が一括ではなく、各ユーザーが個別に行うものとなります。

ユーザー管理でSNSと関連づけます

認証がされている場合は「認証」ボタンが「認証解除」に変わって表示されます。各サービスの認証ボタンを押した時、サービスにログインしていない場合は、各サービスの認証画面が表示されます。ここでログインすることで、このユーザーでのa-blog cmsのSNSログインが有効になります。

ログインするには

ここまでの設定が行われていれば、ユーザーID、パスワードを入力しなくても、SNSログインボタンからログインできるようになります。SNSログイン機能を有効にした状態で、a-blog cmsのログイン画面を表示すると、通常のユーザーID、パスワードの入力欄の下に、Facebookのログインボタンが表示されます。

SNSログインが有効なログイン画面

このマニュアルは、a-blog cms Ver.2.7.11をもとに説明しています。ご利用のバージョンによって、画面表示や内容が若干異なる場合があります。また、この解説は2017年06月に書かれており、今後のTwitter側の仕様変更によって使用できなくなる可能性があります。ご了承ください。

ここでは、a-blog cms とTwitter を連携させるための準備について説明します。

Twitter との連携によってできること

• 自分のタイムラインを表示
• 自分のツイートを表示
• リストのメンバーを表示
• リストのタイムラインを表示
• Twitter上の検索結果を表示
• a-blog cms からツイート
• a-blog cms からエントリー公開情報をツイートする

Twitter と連携するには、事前にa-blog cms, Twitter 両方の設定が必要になります。

Twitter 側の設定

Twitter のアプリケーション登録ページ( https://apps.twitter.com )から、申請を行う必要があります。 この時点でログインしているアカウントが表示や投稿に関連づけられます。 画面右側の「Create New App」から新しいアプリケーションの作成を行います。

アプリケーション登録画面

アプリケーション登録

アプリケーション登録画面

作成完了〜設定の変更と情報の取得

作成完了画面

アプリケーションの作成が完了すると、情報の確認や設定の変更ができます。 以下の内容をメモしてください。

Keys and Access Tokens

• Consumer Key (API Key)
• Consumer Secret (API Secret)

API Keyの取得

a-blog cms側の設定（プロパティ設定）

Twitter との連携のために、a-blog cms の管理ページから設定をします。

管理ページ＞コンフィグ＞プロパティ設定　に「Twitter アプリケーション」入力欄があります。 Twitter アプリケーション登録で発行されたConsumer key とConsumer secretを入力してください。

key と secret を入力

a-blog cms側の設定（外部認証設定）

続いて、外部認証設定をします。これは コンフィグ ＞外部認証設定 から行います。 ※この時点でプロパティ設定からConsumer key とConsumer secret が設定されていない場合には、外部認証設定ができません。

外部認証設定ページでは、OAuth認証を行うボタンが表示されます。このボタンをクリックすると、Twitter 側のアプリケーション認証画面へ移動します。この認証画面では表示に従い「アプリを認証」します。

認証が正常に完了すると「OAuth認証に成功しました」メッセージが表示されます。これでa-blog cms とTwitter の連携のための準備が完了しました。

外部認証設定ページ

Twitter側の認証画面

認証成功

これで Twitter と連携するための下準備が整いました。

このマニュアルは、a-blog cms Ver.2.7.11 をもとに説明しています。ご利用のバージョンによって、画面表示や内容が若干異なる場合があります。また、この解説は2017年06月に書かれており、今後のTwitter側の仕様変更によって使用できなくなる可能性があります。ご了承ください。

ここでは、a-blog cms からTwitter へツイート（投稿）するフォームの設置について説明します。

この機能を動作させるには、事前にa-blog cms とTwitter の連携のための準備ができている必要があります。詳しくは「Twitter と連携する際の事前設定」をご確認ください。

フォームの実装

a-blog cms からTwitter へツイート（投稿）するフォームは、以下のソースコードで実現できます。

<form action="" method="post" class="acms-admin-inline-btn acms-admin-form">
  <input type="text" name="tweet" value="" />
  <input type="hidden" name="twitter[]" value="tweet" />
  <input type="submit" name="ACMS_POST_Api_Twitter_Statuses_Update" value="ツイート" class="acms-admin-btn-admin" />
</form>

このフォームに入力・送信することで、関連づけてあるアカウントで投稿されますので、このフォーム自体はログイン後の画面に設置することになります。

具体的には、 /themes/system/admin/action.html を、使用するテーマ内にコピーし、この中に上記のコードを追加することで、ログイン時の各種管理ボタンにツイート用フォームが追加されます。

ツイートフォームを追加した状態

あとは、テキストフィールドにtweetしたい内容を記述してボタンを押すと、ツイートされます。

このマニュアルは、a-blog cms Ver.2.7.11 をもとに説明しています。ご利用のバージョンによって、画面表示や内容が若干異なる場合があります。また、この解説は2017年06月に書かれており、今後のTwitter側の仕様変更によって使用できなくなる可能性があります。ご了承ください。

ここでは、a-blog cms からTwitter へツイート（投稿）するフォームの設置について説明します。

この機能を動作させるには、事前にa-blog cms とTwitter の連携のための準備ができている必要があります。詳しくは「Twitter と連携する際の事前設定」をご確認ください。

フォームの実装

a-blog cms の非公開エントリーを公開に変更する時にTwitter へツイート（投稿）するフォームは、以下のソースコードで実現できます。

<form action="" method="post" class="acms-inline-btn">
  <input type="submit" name="ACMS_POST_Api_Twitter_Entry_Open" value="ツイートして公開" />&nbsp;<input type="text" 
name="tweet" value="更新しました: {status.title} ( {status.url} )" data-shorten="{status.url}" style="width:300px;" maxlength="140">
  <input type="hidden" name="bid" value="{bid}" />
  <input type="hidden" name="cid" value="{cid}" />
  <input type="hidden" name="eid" value="{eid}" />
</form>

このフォームから公開することで、関連づけてあるTwitter アカウントにエントリーの公開情報が投稿されます。このフォーム自体は各エントリーの公開・非公開のボタンを表示する部分に設置することになります。

具体的には、 /themes/system/admin/entry/action.html を使用するテーマ内にコピーし、このファイル中の <!-- BEGIN open -->と<!-- END open -->の間に「公開」についての記述に上記のコードを追加することで、ログイン時の各種管理ボタンに「ツイートして公開」用フォームが追加されます。

利用方法

このフォーム自体は動作の性質上エントリーが非公開の場合にしか表示されません。「ツイートして公開」ボタンからエントリーの公開とTwitter への投稿が同時に行われます。 上記のコードを使用した場合は「更新しました（エントリーのタイトル）（エントリーのURL）」と投稿されます。 投稿先は、事前に設定したアカウントになります。

JSON形式のデータを表示させることができるビルトインモジュール Json_2Tpl とGoogleの検索結果をJSON形式で取得することができるCustom Search API を連携させて Google の検索結果を使用するサイト内検索を実装することができます。

a-blog cms標準のサイト内検索機能はエントリー単位の検索ですが、 Custom Search API を連携させることで、一覧ページやトップページなどのページも検索対象に含めることができます。また、検索結果自動的に関連度順に表示されるため、普段Googleで検索するときのような検索体験を実現することができます。

Googleのサイト内検索を実装するためには以下の情報が必要になります。

• GoogleのAPIキー
• Googleカスタム検索エンジンの検索エンジンID

準備1: APIキーを用意する

Google Cloud Platform の管理画面からAPIキーを作成してください。 https://console.cloud.google.com/

必要であればIP アドレス（ウェブサーバー、cron ジョブなど）でAPIキーを使用できるウェブサイト、IP アドレス、アプリケーションを制御してください。

※Json_2Tpl ではwebサーバー側でHTTPリクエストを送信するため、HTTPリファラー（URL）による制限はできません。

また、APIの制限も行いましょう。

準備2: 検索エンジンの設定

Google カスタム検索エンジンにログインして、検索エンジンの作成と検索エンジンIDの取得をします。
https://programmablesearchengine.google.com/

1. 検索エンジンの作成

検索対象のドメインと任意の名前を設定して検索エンジンを作成します。
注意点として検索できるサイトでないといけないので、ablogcms.ioなどではなく、ご自身のサイトなどを設定ください。

2. 検索エンジンIDの取得

コントロールパネルの「基本」タブ内、検索エンジン IDをコピーします。

サイト内検索の実装

APIキーと検索エンジンIDがそろったらa-blog cmsのカスタマイズを行い、Googleの検索結果を使用したサイト内検索を実装します。

1. モジュールIDの作成・設定

Json_2Tpl モジュールのモジュールIDを作成し、表示設定のJSONファイルに以下のURLを設定します。

https://www.googleapis.com/customsearch/v1?key=認証キー&cx=検索エンジンID&q=%{KEYWORD}&hl=ja&start=%{start}

&start=%{start} の部分はページャー機能を実装する場合に必要になります。

2. テンプレートの記述

Json_2Tplのテンプレートを書くためには、jsonの中身を確認する必要がありますが、例えばキーワードを "api" としたとき、検索結果のデータを1件目から取得したい場合は下記のURLをブラウザのアドレスバーに入力して検索すると、jsonの中身を確認することができます。 https://www.googleapis.com/customsearch/v1?key=認証キー&cx=検索エンジンID&q=api&hl=ja&start=1

jsonデータの中身が確認できたら、Json_2Tpl の テンプレートの書き方 を参考に検索結果を表示するテンプレートを記述します。

<!-- BEGIN_MODULE Json_2Tpl id="google_custom_search" -->
<div class="google-search clearfix">
	<!-- BEGIN items:loop -->
	<div class="search-item clearfix">
		<h2>
			<a href="{link}">{htmlTitle}[raw]</a>
		</h2>
		<p class="link">{link}[trim(100, '...')]</p>
		<div class="acms-col-md-10">
			<p>{snippet}</p>
		</div>
		<div class="acms-col-md-2 acms-sp-hide">
			<!-- BEGIN pagemap -->
			<!-- BEGEN metatags:loop -->
			<img src="{og:image}[resizeImg(130)]" width="130">
			<!-- END metatags:loop -->
			<!-- END pagemap -->
		</div>
	</div>
	<!-- END items:loop -->

　　<ul class="search-pager">
		<!-- BEGIN queries -->
		<!-- BEGIN previousPage:loop -->
		<li class="link-item">
			<a href="search.html?keyword=%{KEYWORD}&start={startIndex}" class="btn">前</a>
		</li>
		<!-- END previousPage:loop -->

		<!-- BEGIN nextPage:loop -->
		<li class="link-item">
			<a href="search.html?keyword=%{KEYWORD}&start={startIndex}" class="btn">次</a>
		</li>
		<!-- END nextPage:loop -->
		<!-- END queries -->
　　</ul>
</div>
<!-- END_MODULE Json_2Tpl -->

ページャーは、a-blog cms標準機能であるクエリストリングの値をグローバル変数として取得するを利用して実装しています。
具体的には、{startIndex} の値をクエリストリングに渡すことで、Json_2Tpl モジュールの表示設定、JSONファイルで設定したURLの %{start}のグローバル変数が {startIndex}を参照するようになります。

次にキーワード検索をするためのフォームを設置します。

<form action="/search.html" class="search-form" method="post" role="search" aria-label="検索フォーム">
	<input type="hidden" name="tpl" value="/search.html">
	<input type="hidden" name="query[]" value="keyword">
	<input type="hidden" name="query[]" value="start">
	<input type="hidden" name="bid" value="%{BID}">
        <input type="hidden" name="start" value="1">
	<input type="text" name="keyword" class="search-form-text" value="%{KEYWORD}" size="15" placeholder="検索キーワード">
	<span class="search-form-btn-wrap">
		<button type="submit" name="ACMS_POST_2GET" class="search-form-btn"><span class="acms-icon-search"></span>
		</button>
	</span>
</form>

完成

検索フォームに適当な検索ワードを入力し、検索ボタンをクリックした時に、画像のような検索画面が表示されていれば完成です。スタイルやHTMLの構造を変えることで、オリジナルのレイアウトにすることも可能です。

追記：複数ワード対応

上記の実装で検索はヒットするようになりましたが、複数ワードをスペースで区切って検索すると検索結果が出てきません。

方法としては、半角スペース＆全角スペースを半角カンマに置き換えたグローバル変数 %{API_KEYWORD} を作成し、利用する事で複数ワードでの検索に対応できるようになります。

config.server.php

define('HOOK_ENABLE', 1);

extension/acms/Hook.php

    /**
     * グローバル変数の拡張
     *
     * @param array $globalVars
     */
    public function extendsGlobalVars(&$globalVars)
    {
        // $globalVars->set('key', 'var');
        $globalVars->set('API_KEYWORD', str_replace(' ', ',', mb_convert_kana(KEYWORD,'s','utf-8')));

    }

1. モジュールIDの作成・設定 の Json_2Tpl の設定画面で %{KEYWORD} と設定していた部分を %{API_KEYWORD} と修正ください。

外部サービスとの連携を強化するWebhook機能についてご紹介します。Ver.3.0から追加された機能です。

Webhook機能を使えば、Webhookとの連携に対応したツールとa-blog cms を連携できます。
例えばサイトの通知を受け取りたい場合、更新したら通知するという指示を与えておき、更新されるたびに外部サービスに通知する仕組みを作れるようになります。

具体的には、a-blog cms で記事が更新されたら、Slackに通知をしたり、IFTTTなどのWebサービスを経由してTwitterやFacebookなどのSNSに自動で投稿できます。

a-blog cms がサポートしているイベント

• エントリー（作成・更新・削除・公開）
• フォーム（送信）

a-blog cms では送信側のみ対応しています。
例えば、a-blog cms でエントリーを更新したら通知したり、a-blog cms のフォームに投稿されたら外部ツールにデータを投稿するといったa-blog cmsが主体となった仕組みを作成できます。

Webhook機能の使い方

Webhook機能を有効化する

ルートディレクトリにあるconfig.server.phpの HOOK_ENABLE を 1 にし、Webhookを有効化します。

define('HOOK_ENABLE', 1);

Webhookの設定を作成する

管理画面＞Webhookの順にページを移動して作成します。

設定

以下はWebhook機能の基本的な設定です。

ペイロード

ペイロードをカスタマイズする際には下記の設定を使用します。

Webhookのリクエスト履歴を確認する

リクエスト履歴にチェックをつけて、ログを記録します。一度でも機能が動作していたら、管理画面＞Wehook＞ログの順にページを移動し、リクエスト履歴を確認できます。

ステータスコードの状態を確認できます。もしエラーになっていたら、エラーのステータスコードが表示されます。
（HTTPレスポンスステータスコードについての詳細はMDNのドキュメントをご確認ください）

Webhook履歴のページ

ペイロードのテンプレートをカスタマイズする

ペイロードのテンプレートをカスタマイズするには、使用できる変数を確認するため、一度リクエスト履歴で成功レスポンス（200~299）以外のステータスコードを記録しなければなりません。一度、ペイロードの「カスタム」のチェックを外してWebhookを動作させ、エラーを出してください。

エラーのステータスコードを出したリクエスト履歴の詳細を開くと、下図のようなRequest Bodyが値として返ってきます。そうすると、使用できる変数が確認できます。

以下の場合は、タイプが「エントリー」、イベントが「公開」に設定した状態です。

第一階層の値を取得する

第一階層の値を取得したい場合は、{{$変数名}}とペイロードのテンプレート欄に記述します。
たとえば、エントリーのURLを取得したい場合は、{{$url}}になります。

第二階層以下の値を取得する

第二階層以下の値を取得したい場合は、->でつなぎます。実際には{{$変数名->変数名2->変数名3}}のような記述をペイロードのテンプレート欄におこないます。
たとえば、エントリータイトルを取得したい場合は{{$contents->entry->title}}になります。

テンプレートの記入例

ペイロードのテンプレート欄に下記のように記入すると出力できます。 { "value1" : "{{ $url }}", "value2" : "{{ $contents->entry->title }}" }

以下は、a-blog cms と Slack を連携し、Slackに通知を送るための記述です。
JSON形式の記述が採用されているため、「\n」で改行できます。

{
  "text": "ページを更新しました！\n「{{$contents->entry->title}}」\n{{$url}}",
  "username": "更新情報bot",
  "icon_emoji": ":dog:"
}

テンプレートにはカスタムフィールドの値を使用することも可能です。

{
    "webhook_id": "2",
    "webhook_name": "Slack\u901a\u77e5",
    "type": "entry",
    "event": "entry:created,entry:opened",
    "actor": {
        "uid": 1,
        "name": "admin"
    },
    "url": "http:\/\/acms.org\/entry-322.html",
    "contents": {
      ...（省略）...
      "field": {
            "message": "ここにmessageカスタムフィールドに登録された内容が入ります"
        }
    }
}

ペイロードのテンプレート欄には下記のように記入すると出力できます。

{
  "value1" : "{{ $contents->field-> message }}",
}

トラブルシューティング

リクエスト履歴のステータスコードがエラーになっていて動かない その１

ペイロードの「カスタム」のチェックが外れたままになっていないでしょうか？
テンプレートの変数を確認するために、カスタマイズしている最中は「カスタム」のチェックが外れた状態なので、Webhookの動作を確認したい時は「カスタム」にチェックをつけることを忘れないようにしましょう。

リクエスト履歴のステータスコードがエラーになっていて動かない その2

もしステータスコードがエラーになっていて、ログ＞Response Bodyの項目で missing_text_or_fallback_or_attachmentsと表示されていたら、ペイロードの書き方が悪いかもしれません。見直してみてください。

missing_text_or_fallback_or_attachmentsと表示されている様子

ハンズオン記事

以下の記事では、Slackと連携する方法とIFTTTと連携してGoogle Driveにデータを保存する方法を紹介しています。動画もあるので、ぜひご覧ください。

• Webhookで外部サービスとCMSを連携してみよう | 2021秋オンライン合宿 | ハンズオン | a-blog cms developer