エントリー系モジュールで複数ID設定する

モジュルIDの仕様変更

ここ最近コア部分の仕様にいろいろ手をいれていっています。ということで今回はモジュールIDになります。(執筆時最新 1.7.0)

a-blog cmsには表示するパーツとしてモジュールというものがあり、モジュールIDをつけることによってモジュール毎に設定できるようになります。モジュールの設定ではこのカテゴリーを表示する。この日付の範囲で表示するなどURLコンテキストで指定できる値を設定できます。しかし基本的に設定できる値が各項目に対して一つしか設定できませんでした。

そこで、Entry_BodyとSummary系モジュールでブログID、ユーザID、カテゴリID、エントリIDの4つを複数指定できるようにしました。

指定の仕方

以下の画像のように値をカンマで区切って入力して頂ければOKです。

Google Analyticsランキングモジュールを表示してみよう

a-blog cms Ver.2.6.1からGoogle Analyticsと連携してエントリーのアクセスランキングのリストを表示することができるようになりました。このハンズオンは普段ご利用のGoogle Analyticsのアカウントが必要です。

ハンズオン内容

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

作業場所

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

普段ご利用のGoogle Analyticsと連携し、Google Analyticsランキングモジュールでエントリーのリストが表示されたら完成です。

Google API Consoleの設定

Google Analyticsとの連携の準備として、a-blog cms の管理ページ>コンフィグ>プロパティ設定 にあるGoogle Analytics API欄の「Service Account e-mail address」と「Client ID Key Location (p12)」の2つの情報が必要になります。「Service Account e-mail address」は、Googleのサービス アカウント キーを作成することで入手でき、「Client ID Key Location (p12)」は作成時パソコンに保存されたp12ファイルをサーバーにアップロードすることで確定します。

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

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


Google API Consoleの画面

Google API Consoleの画面


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

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

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


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

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


Analytics APIを有効にします

Analytics APIを有効にします

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


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

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

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


を選択し必要な情報を入力します

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

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


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

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

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


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

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


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

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

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

サービス アカウント キーを作成した際にダウンロードしたP12形式のファイル(証明書)をa-blog cmsをインストールしているサーバーにアップします。ドキュメントルート以下にアップロードをするとブラウザからアクセスできてしまいますので、ドキュメントルートより上の階層にアップロードするのが望ましいです。

Google Analyticsの設定

普段ご利用のa-blog cmsのサイトのアクセスを収集しているGoogle Analytics のアカウントにログインをして、アナリティクス設定のユーザー管理から先ほどメモしておいたサービス アカウント IDのメールアドレスを「権限を付与するユーザー」に追加します。


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

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

a-blog cms 側の設定

Google Analyticsランキングを表示するための設定は大きく3つあります。

1. Google Analytics APIキーを登録

Google AnalyticsのAPIキーは管理ページ>コンフィグ>プロパティ設定 から設定できます。プロパティ設定画面の「ウェブサービス」からGoogle Analytics API欄に登録します。「Service Account e-mail address」は、先ほどメモしておいたサービス アカウント IDのメールアドレスを登録してください。「Client ID Key Location (p12)」には先ほどサーバーにアップしたP12形式のファイル(証明書)のパスを登録してください。入力欄の下にあるa-blog cmsが設置されているディレクトリのパスを参考にしてください。


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

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

2. テンプレートの編集

管理ページ>コンフィグ から外部API連携の項目に、Google Analyticsランキングのモジュールがあります。スニペットを開いてテンプレートをコピーしてください。


コンフィグの画面

コンフィグの画面

<!-- 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ランキングのエントリーのリストが表示されたら完成です。


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

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

おまけ

simple2016テーマであれば、ダッシュボードにGoogle Analyticsのセッション数のグラフを表示することができます。Google AnalyticsのビューIDを管理ページ>ブログのカスタム情報からアクセス解析のGoogle Analytics View ID欄に、Google、Facebook、TwitterのAPIキーを取得してSNSログインを設定してみようのGoogle(ログイン)で設定したClient IDをGoogle Analytics API ClientID欄に設定してみてください。

対象テンプレート

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

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

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


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

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


ダッシュボード

ダッシュボード

エントリーでHTMLタグを登録すると403(Forbidden)のエラーが出る

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

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

ロリポップのWAF(Web Application Firewall)案内ページ

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

コンフィグの基本

a-blog cms の設定をコンフィグと呼びます。このコンフィグはブログ毎にあり、子ブログでは個別の設定が必要になります。また、下記のyamlファイルがコンフィグの初期値を設定しているファイルになり、子ブログを追加した際には、このファイルに設定してあるテーマでブログ追加される事になります。

デフォルトの設定

/private/config.system.default.yaml

このファイルに初期のテーマ設定やモジュールの表示件数などさまざまな設定が定義されています。アップデートの時にファイルを差し替えるためと、システム側で内容をキャッシュしているため、直接このファイルの中身を編集しないようにします。上書き用ファイルに変更を追加してください。

ユーザー上書き用ファイル

/private/config.system.yaml

このファイルには何も書かれていません。config.system.default.yamlから上書きしたい設定と値をコピーしてきてファイルに定義します。このファイルはアップデートの時にファイルを差し替えないようしてください。

config.system.yamlで上書きする

例えば、子ブログを新規作成したときはBlogテーマが設定されます。それはconfig.system.default.yamlのthemeがblogと定義されているからBlogテーマになります。

## テーマ
theme : blog
load_yaml_tpl : on

/private/config.system.default.yamlのtheme設定をconfig.system.yamlにコピーしてきます。config.system.yamlのthemeをsiteにすると子ブログを作成したときにSiteテーマが設定されるように上書きすることができます。

## テーマ
theme : site

a-blog cmsのコンフィグ一覧

a-blog cmsのコンフィグ一覧

CSVファイルをインポートしてエントリを一括更新しよう

ハンズオン「CSVファイルをインポートしてエントリを一括登録」では、CSVファイルを使った一括登録をしましたが、ここでは逆に、エントリのデータをCSVファイルにダウンロードする方法と、そのファイルを使った一括更新の方法を試してみましょう。

  • CSVファイルでのダウンロードの準備
  • CSVファイルを使ったエントリの一括更新

ダウンロードモジュール | モジュール | ドキュメント | a-blog cms 制作者向け情報

CSVファイルでのダウンロードには、ダウンロードモジュールを使用します。

ダウンロードモジュールとは、任意のファイルをダウンロードできるようにするモジュールです。a-blog cmsのデータベースに格納されているデータを取り出して任意の形式のファイルに出力し、そのファイルをダウンロードできるようにします。

出力するファイルは、CSVやXML形式など任意の形式で作成でき、モジュールやグローバル変数などを記述してカスタマイズが可能です。

ダウンロードさせたいファイルのテンプレートを作成します。CSVやXMLなど任意のテキスト形式のテンプレートファイルを作成できます。テンプレートですので、モジュールやグローバル変数を記述できます。

今回は例として、ハンズオン「CSVファイルをインポートしてエントリを一括登録しよう」で作成した「会員紹介」のエントリデータをCSVファイルでダウンロードできるようにしてみましょう。

ダウンロードされるCSVファイルのテンプレートとして以下のようなファイルを作成します。これは、Entry_Bodyモジュールを使用して、会員紹介のエントリをCSV形式のファイルに出力する場合の例です。

※ここではEntry_Bodyモジュールを使用していますが、標準の出力件数や条件など変更が必要な場合はモジュールIDを作成して使用しましょう。

entry_title,entry_id,kana,email,sex,age,birthday,marriage,pref,phone,carrier,curry
<!-- BEGIN_MODULE Entry_Body id="membersCSV" --><!-- BEGIN entry:loop -->"{title}[escquot]","{entry:loop.eid}","{kana}[escquot]","{email}[escquot]","{sex}[escquot]","{age}[escquot]","{birthday}[escquot]","{marriage}[escquot]","{pref}[escquot]","{phone}[escquot]","{carrier}[escquot]","{curry}[escquot]"
<!-- END entry:loop --><!-- END_MODULE Entry_Body -->

CSV形式では、ダブルクォーテーションで囲まれた中にダブルクォーテーションが含まれている時のために、ダブルクォーテーションをエスケープする校正オプション[escquot]を指定しています。(CSVの仕様につきましては、他のWebサイトを参照してください。)

ここではEntry_Bodyモジュールを使用して出力していますが、モジュールIDを作成して指定することで、件数やデータの表示順を指定できます。


モジュール作成(条件設定)画面

CSV出力用のモジュールIDを作成


モジュール作成(表示設定)画面

件数を増やしておきましょう


上記のソースを記述したら、ファイル名を「download.csv」として保存します。ここでは例として「csv」というディレクトリをテーマディレクトリ内に作成し、/themes/simple2016/csv/download.csv とします。

次に、ファイルをダウンロードするためのフォームボタンを作成します。テンプレートの任意の場所にフォームボタンを設置できます。手順1で作成したCSVファイルをダウンロードする場合は、以下のようなソースを記述します。

<form action="会員リスト.csv" method="post">
    <input type="hidden" name="bid" value="1" />
    <input type="hidden" name="cid" value="6" />
    <input type="hidden" name="tpl" value="csv/download.csv" />
    <input type="hidden" name="charset" value="Shift_JIS" />
    <input type="submit" name="ACMS_POST_Download" value="会員紹介をCSVファイルでダウンロード" />
</form>

※ここではsimple2016にカテゴリID6で「会員紹介」が作られている前提で記述しています。

今回は、ログイン後の画面上部に表示される管理ボックス内にボタンを表示させるため、 /themes/system/admin/action.html を /themes/simple2016/admin/action.html として複製し、ここに追記しましょう。


ダウンロードボタン

ダウンロードボタンを追加


このモジュールでCSVファイルをダウンロードした結果が、以下の内容になります。

entry_title,entry_id,kana,email,sex,age,birthday,marriage,pref,phone,carrier,curry
"有田 季衣","211","ありた きえ","arita_toshie@example.com","女","41","1974/9/6","既婚","北海道","080-8766-3232","ドコモ","左ルー・ナン派"
"川島 敏和","208","かわしま としかず","kawashima_toshikazu@example.com","男","57","1958/5/30","既婚","栃木県","080-9837-4008","ドコモ","右ルー・ルー攻め派"
"長友 希","180","ながとも き","nagatomo_nozomi@example.com","女","35","1980/8/29","既婚","岡山県","080-2317-6705","au","右ルー・別口派"
"板倉 ヒロ","169","いたくら ひろ","itakura_hiro@example.com","男","61","1955/4/29","既婚","奈良県","080-7126- 566","ソフトバンク","ぶっかけ・混ぜ混ぜ派"
"川畑 和之","132","かわはた かずゆき","kawahata_kazuyuki@example.com","男","56","1960/1/11","既婚","三重県","080-8816-8138","ドコモ","ぶっかけ・せき止め派"
(情報多数のため以下省略)

今回ダウンロードしたCSVファイルのデータには「entry_id」の項目が含まれていますので、データを編集後、本ハンズオンの「CSVファイルによるエントリの追加」の手順でCSVファイルをインポートすることで、新規エントリの追加ではなく、既存エントリ(同じ「entry_id」のエントリ)の更新となります。

このような方法により、複数のエントリを少ない手数で一括更新できます。