ブログ単位でモジュールの表示を制御する

a-blog cmsでは、様々な情報を表示するのに適した各モジュールがありますが、さらにその表示を制御するために各モジュールのコンフィグ（＝設定）があります。管理ページ内の左側メニューのカスタマイズ管理 > コンフィグ から各モジュールを含めた設定への一覧があります。各モジュール名から設定画面へリンクしています。

ブログ内で共通した設定を行うには

各モジュールの管理画面では、表示順や件数など、モジュールごとに表示に関する設定ができるようになっています。各設定項目についての詳しい内容は、項目右にある「？」アイコンのツールチップをご確認ください。

同一モジュールで別の設定をしたい場合には

これらの設定は該当ブログ内で使用されるモジュール全てに適用されます。しかし、同じモジュールを使う場合でも、必ずしも同じ表示をしたいとは限りません。また、個別のカテゴリーだけ、といったように表示の設定ではなく条件の設定がしたい場合もあります。このような場合には、モジュールの設定とは別に固有のIDを付与したモジュールであるモジュールIDをご利用ください。モジュールIDについては、このドキュメント内のモジュールIDのページで解説しています。

a-blog cmsでは、Facebook、Twitterに加えて、新しくGoogleのAPIを使用してログインするログイン機能があります。Google、Facebook、Twitterの各サービス、a-blog cms のブログ、a-blog cmsのユーザーに必要な設定を行うことでこの機能が利用できます。

ハンズオン内容

• Google API Consoleから「Client ID」と「Secret Key」を取得する
• facebook for developersから「Application ID」と「Application Secret」を取得する
• Twitter Application Managementから「Consumer Key」と「Consumer Secret」を取得する
• SNSログイン機能の有効化し、ユーザー毎に認証を行う

作業場所

• Google API Console
• Facebook開発者 - 開発者向けFacebook
• Twitter Application Management
• 管理ページ

参考資料

• SNSログイン機能 | オンラインマニュアル | a-blog cms

課題：SNSログインボタンを設定する

Google API Consoleの設定

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

OAuth クライアント IDの作成手順

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

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

Google API Consoleの画面

プロジェクトを作成します

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

認証情報を作成します

「OAuth クライアント ID」を選択します

3. クライアント ID の作成を行います。クライアント ID の作成画面からはじめに同意画面を設定します。「同意画面を設定」からOAuth 同意画面からユーザーに表示するサービス名にサービス名を入力し保存をしてください。

同意画面を設定します

サービス名を入力し保存をしてください

アプリケーションの種類はウェブ アプリケーションを選択し、わかりやすい名前（例：googleOAuthApi）を入力します。承認済みの JavaScript 生成元にGoogleアカウントでログインを行うサイトのURL（http://www.example.com）を入力します。ワイルドカード（http://*example.com）やパス（http://example.com/subdir）を含めることはできませんのでご注意ください。承認済みのリダイレクト URIには以下の内容を入力してください。
対象となるa-blog cmsのブログURL/callback/signin/google.html

ウェブアプリケーションを選択し必要な情報を入力します

4. クライアント ID の作成が完了すると、OAuth クライアントの情報が表示されます。「OK」をクリックするとファイルをダウンロードしないと見れなくなりますので、メモしておいてください。

クライアントIDとシークレットが表示されます

facebook for developersの設定

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

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

アプリの作成手順

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

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への設定は後述します。

Twitter Application Managementの設定

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

アプリの作成手順

この手順は2016年5月現在のものです。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つあります。

1. 各サービスのAPIキーを登録

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

プロパティ設定画面

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

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

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

機能設定画面

3. ユーザーごとの設定

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

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

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

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

ログインするには

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

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

ハンズオン内容

• Google API Consoleから「サービス アカウント ID」と「P12形式のファイル（証明書）」を取得する
• 「P12形式のファイル（証明書）」をサーバーにアップする
• Google Analyticsのアナリティクス設定にユーザーを追加する
• Google Analyticsランキングモジュールを表示する

作業場所

• Google API Console
• Google Analytics
• 管理ページ

課題：Google Analyticsランキングモジュールを表示し、フィルターでエントリーのリストのみを表示する

Google API Consoleの設定

サービス アカウント キーの作成手順

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

Google API Consoleの画面

プロジェクトを作成します

2. Analytics APIを有効にします。その他の一般的なAPIにあるAnalytics APIのリンクからAnalytics APIのページに移動し、「有効にする」をクリックします。

その他の一般的なAPIのAnalytics APIをクリックします

Analytics APIを有効にします

3.「認証情報を作成」から「サービス アカウント キー」を選択します。

「サービス アカウント キー」を選択します

4. サービス アカウント キーの作成を行います。サービス アカウントは「新しいサービス アカウント」を選択してください。わかりやすいサービス アカウント名（例：googleAnalyticsApi）を入力します。キーのタイプはP12を選択してください。

「新しいサービス アカウント」を選択し必要な情報を入力します

5. サービス アカウント キーの作成が完了すると、新しい秘密鍵というモーダルウィンドウが表示され、P12形式のファイル（証明書）がパソコンに保存されます。

サービス アカウント キーの作成が完了するとメッセージが表示されます

6. サービス アカウント IDを確認します。認証情報の「サービス アカウントの管理」からサービス アカウント一覧を表示します。先ほど作成したサービス アカウント名のサービス アカウント IDをメモしておいてください。

サービス アカウントの管理をクリックします

サービス アカウント IDをメモしておいてください

P12形式のファイル（証明書）をサーバーにアップロードする

証明書をドキュメントルートより上の階層にアップロードするのが望ましいです

Google Analyticsの設定

Google Analyticsのアナリティクス設定からサービス アカウント IDを追加してください

a-blog cms 側の設定

1. Google Analytics APIキーを登録

「Client ID Key Location (p12)」は入力欄の下にあるa-blog cmsが設置されているディレクトリのパスを参考にしてください

2. テンプレートの編集

コンフィグの画面

<!-- BEGIN_MODULE Api_GoogleAnalytics_Ranking -->
<!-- BEGIN notFound -->
<p>Not Found.</p><!-- END notFound -->
<ul><!-- BEGIN ranking:loop -->
<li>
<a href="（自分のブログのURL）{path}">[{views} views] {title}</a>
</li><!-- END ranking:loop -->
</ul>
<!-- END_MODULE Api_GoogleAnalytics_Ranking -->

3. モジュールのフィルターの設定

Google Analyticsランキングモジュールでは、表示件数、集計開始日、集計終了日、フィルターの設定ができます。フィルターは以下のコードを入力することよってランキングに表示する内容をエントリーのみにすることができます。

ga:pagePath=~/(.*)\.html

ga:pagePath=~/hoge/

ランキングが表示されました

Google Analyticsランキングが表示されました

おまけ

対象テンプレート

• /themes/simple2016/admin/blog/analytics.html
• /themes/simple2016/admin/dashboard-left.html

simple2016テーマのブログのカスタムフィールド画面

Google Analyticsのアナリティクス設定のビューの画面

ダッシュボード

ロリポップサーバをお使いの環境で、エントリー登録（ユニット追加）を行った際にHTMLタグがユニットにある場合、403エラーになることがある場合の対処法について。

この現象の原因は、2012年9月よりロリポップが導入しているWAF（Web Application Firewall）と言われている機能が原因の場合があります。

ロリポップのWAF（Web Application Firewall）案内ページ

必要に応じて、機能をON、OFFなどの対処を行ってください。