外部サービスとの連携

目次

Instagram連携の設定

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

  • 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 アプリ登録画面

Instagram アプリ登録画面


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

  • Client ID
  • Client Secret

a-blog cmsの設定

Client IDClient 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はアプリの審査が必要になります。アプリの審査はアプリを登録したサイトより審査できますが、内容によっては審査が通らない場合がありますのでご注意ください。

別のシステムと同居させる

ここでは、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 連携

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となるページのみランキング表示されます。

Googleアカウントを使ったログイン・サインアップ

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同意画面の設定

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と関連づけます

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


ログイン

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


ログイン画面

ログイン画面

Twitterアカウントを使ったログイン・サインアップ

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の画面

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」で実行できます

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


Keys and Access Tokens

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


Keys and Access Tokensの画面

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キー登録は2つありますのでお気をつけください。Twitter(SNSログイン用)を利用。


プロパティ設定画面

プロパティ設定画面


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

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

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


機能設定画面

機能設定画面


3. ユーザーごとの設定

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

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


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

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


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

ログインするには

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


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

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

Facebookアカウントを使ったログイン・サインアップ

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の画面

facebook for developersの画面


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

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


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


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

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


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


Create a New App IDの画面

Create a New App IDの画面


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


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

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


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


「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と関連づけます

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


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

ログインするには

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


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

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

Twitter との連携する際の事前設定

このマニュアルは、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」から新しいアプリケーションの作成を行います。


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

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


アプリケーション登録


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

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


Name 任意の名前で構いませんが、同じ名前のものを複数登録はできません。サイト(ブログ)名など、固有のものを使う事をおすすめします。
Description このアプリケーションの説明文です。どのサイトに使っているかなどの説明を残しておくと、アプリケーション一覧で確認できます。最低10字以上の説明文が必要です。
Website a-blog cms をインストールしてるサイトのURLです。基本的には子ブログと共用はできませんので、必要に応じて実際にTwitter 連携を使用する場所のURLを入力してください。
Callback URL http://設置先URL/callback/twitter.html

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


作成完了画面

作成完了画面


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

Keys and Access Tokens

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

API Keyの取得

API Keyの取得


a-blog cms側の設定(プロパティ設定)

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

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


key と secret を入力

key と secret を入力


a-blog cms側の設定(外部認証設定)

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

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

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


外部認証設定ページ

外部認証設定ページ

Twitter側の認証画面

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)」と投稿されます。 投稿先は、事前に設定したアカウントになります。