ルール

目次

ルールの基本

指定した条件ごとにコンフィグを設定

a-blog cmsでは、ルールという機能を利用すると、条件を指定してコンフィグを設定できるようになります。例えば、特定のデバイスやブラウザにのみ使用するコンフィグを設定したり、特定のカテゴリーの時のみ使用するコンフィグを設定したい、という時にこのルールを設定します。



どのような使い方ができる?


「スマートフォンの場合」のルール設定

ルールの設定画面


ルールは条件ごとにコンフィグの内容を変更できます。
その条件にはユーザー、カテゴリー、エントリーの各IDやコードがありますので、特定のカテゴリーの場合に特定のモジュールの表示を変更したり、ユニット設定を変更して特定のカテゴリーでユニット設定を変更してエントリーを作成する時には基本となるユニットを変える、といった使い方が考えられます。

また、ユーザーエージェントによる条件が設定できますので、アクセスしたユーザーエージェントによってテーマ設定を変更して、スマートフォンからのアクセス時にはスマートフォン専用テーマで表示する、といった使い方ができます。


他にも、ブログごとのコンフィグの設定だけではなく、モジュールIDごとのコンフィグの設定も変更できます。こちらの機能はVer.2.5以降のバージョンよりご利用いただけます。


Ver.2.5より、ルールの一覧にモジュールIDを変更するボタンが追加されています

Ver.2.5より、ルールの一覧にモジュールIDを変更するボタンが追加されています

Cookieを使った表示の振り分け方法

ブラウザのCookie情報を利用して、ルールを切り替えることができます。(ver2.5.0.0より)

使い方の一例

ABテストとして
Cookieがセットされているユーザーと、通常ユーザーでテーマをわけ、どちらがよりコンバージョン率が高いかを比べる。
コンテンツマーケティングツールとして
お問い合わせやサイト内である行動を取ったユーザーを見込み客としてCookieをセットし、見込み客に対してより効果的なコンテンツを提供する。
ユーザー属性ごとにわける
顧客・自社スタッフ・株主など属性をわけ、トップページで表示するコンテンツの順序を最適化する。

例えば、あるページにアクセスしたら、Cookieをセットします。採用情報のコンテンツを見るのは来年卒業予定の「学生」、製品情報をみるのは「顧客」であるなど、属性わけを行います。
トップページで「学生」には採用情報のお知らせをファーストビューに入る位置に置いたり、「顧客」には製品情報を上位に配置したりとコンテンツの最適化を行います。

設定方法

ルール設定で、Cookieの項目に条件を設定します。


Cookieのルール設定

Cookieのルール設定


Cookieをセットする方法

ルールを設定しただけではこの機能をいかすことはできません。アクセスしているユーザーにCookieをセットさせる必要があります。
Cookieをセットしてあげるには、JavaScriptなどのプログラミングスキルが必要になります。次にその一例を紹介します。

<script type="text/javascript">
$(function(){
 $.cookie( 'user-type', 'customer', { expires: 30 , path: '/' });
});
</script>

jQueryを使ってCookieをセットしています。user-typeはラベル名、customerは値です。expiresはCookieの有効期限、pathは有効範囲を指定しています。
例えば、顧客向けコンテンツのページでこのスクリプトを実行させると、Cookieがセットされてそのブラウザはユーザータイプが「顧客」となります。つまり、顧客向けコンテンツにアクセスしたので、ユーザー属性として「顧客」とみなしたわけです。

<script type="text/javascript">
$(function(){
 $.cookie( 'user-type', 'recruit', { expires: 30 , path: '/' });
});
</script>

この場合、ユーザータイプが「リクルート」となります。採用情報のページなどにこのスクリプトを実行するようにします。

'user-type'='customer'のルールと、'user-type'='recruit'のルールを用意して、テーマ設定をわけてコンテンツの順序を変更することで、Cookieを使ったルールによる表示の振り分けが行えます。

期間を使った表示の振り分け方法

ルールでは、期間を使ってコンフィグの設定を振り分けることができます。たとえば、朝には朝のセールのバナーを表示し、夕方には、夕方のセールのバナーを表示することができます。この機能は Ver.2.5 よりご使用できます。

設定方法

一番初めのセレクトメニューでは、「BETWEEN」を選択します。選択することで、指定した期間の間でルールが適用されます。

詳細な条件設定ができる場所では、1つめのセレクトメニューでは「定期」または「固定」を選ぶことができます。「定期」を設定した場合、毎月、曜日、時間を選択できるようになります。「固定」を選択した場合、毎月、曜日、時間に加えて日付も設定できるようになります。

以下は、定期的にお昼になったらルールが適用される設定です。


BETWEEN、「定期」、時刻にはお昼の時間帯である「11:00:00~14:00:00」を設定した

「お昼」のときの設定

スマートフォンとPCの表示の振り分け方法

ユーザーエージェントによる振り分け


a-blog cms では、スマートフォン専用プラグインなどのプログラムはなく、このルール機能によって、ブラウザの名前(USER-AGENT)をチェックし設定を切り換えて表示します。


ルールを新規作成

ルールを新規作成


ルールの設定は 管理ページ>ルール から行います。


「スマートフォンの場合」のルール

「スマートフォンの場合」のルール


このルールの設定を行った後に、一覧のコンフィグのリンクから、スマートフォンの時のコンフィグについて設定を行います。最低限、テーマの設定を変更する事になります。
この場合、PCとスマートフォンでは同じURLで違ったテーマを表示させる事ができるようになります。a-blog cms で標準搭載のキャッシュ機能も、ルールによって個別に処理されます。


ルール別にコンフィグを設定します

ルール別にコンフィグを設定します


ルール名がついたコンフィグ管理画面

ルール名がついたコンフィグ管理画面


スマートフォン上で、PC・スマートフォンそれぞれの表示を可能にしたい場合


a-blog cms では、PC用とスマートフォン用のテーマをそれぞれ作成・適用できますが、スマートフォンでの表示の場合、スマートフォン用だけでなく、PC用の表示を見たいという場合があります。

ここでは、スマートフォン用テーマでの「PCモードに切り替える」ボタン、PC用テーマでの「スマートフォンモードに切り替える」ボタンの作成について解説します。

サンプルコード(スマートフォン用テーマの任意の場所に追加)

<form action="" method="post" id="switch_theme">
    <input type="hidden" name="cookie[]" value="acms_http_header_User-Agent" />
    <input type="hidden" name="acms_http_header_User-Agent" value="pc browser" />
    <input type="submit" name="ACMS_POST_Cookie" value="PCモードに切り替える" />
</form>

<script>
$('#switch_theme').submit(function(){
    $.cookie("js-switch_theme","on");
    return true;
 });
</script>

サンプルコード(PC用テーマの任意の場所に追加)

<form action="" method="post" id="switch_theme" style="display:none;">
    <input type="hidden" name="cookie[]" value="acms_http_header_User-Agent" />
    <input type="hidden" name="acms_http_header_User-Agent" value="Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_1_3 like Mac OS X; en-us) AppleWebKit/528.18 (KHTML, like Gecko) Version/4.0 Mobile/7E18 Safari/528.16" />
    <input type="submit" name="ACMS_POST_Cookie" value="スマートフォンモードに切り替える"  />
</form>
 
<script>
$(function() {
    if ( 'on' == $.cookie('js-switch_theme') ) {
        $('#switch_theme').show();
    }
});
</script>

解説

基本的に、PC、スマートフォンとも、移行先のユーザーエージェントの内容を渡して再度同じページの読み込みをしているものになります。

上記のPC用テーマに追加するコード中では、移行先となるユーザーエージェントの内容はiPhoneのものになっていますので、必要に応じて変更してください。また、スマートフォン用テーマに追加するコード内では、移行先となるPCのユーザーエージェントとして仮に「pc browser」としてあります。こちらも必要に応じて変更してください。

PC用テーマのscript部分は、スマートフォンでの表示時のみ切り替えボタンを表示するためのものです。