サブテンプレート作成（スマートフォン対応機能）

サブタイプテンプレートについて

サブタイプテンプレートを使うと、アクセス元のブラウザを判定してスマートフォンなどに最適化したページを表示させることができます。

※サブタイプテンプレートを作成するためには、「システム管理者」か「デザイナー」ロールに設定されたユーザーである必要があります。また、テンプレートを作成するためにはHTMLの知識も必要です。

ブラウザ判定とテンプレートを切り替える仕組み

一つのURLでテンプレートの切り替えをおこないます。

ブラウザ判定には、ユーザーエージェントの値を利用します。

判定ルールは、browser.ini (me/admin/data/config/browser.ini)ファイルに定義されています。判定ルールのカスタマイズも可能です。

MicroEngineは基本的には静的配信タイプのCMSですが、サブテンプレート機能を利用した場合は動的配信をおこないます。

ページ登録時にメインテンプレートとサブテンプレートを元にページを生成してキャッシュする仕組みのため、動的配信でも公開サイト側アクセス時にデータベースアクセスが発生しません。そのため高速に処理できます。

※サブタイプを使用する場合、メインテンプレートは、".php"などのPHPを実行できる拡張子である必要があります。

サブタイプテンプレートの利用方法

ここでは、PCサイト用ページとスマートフォン用ページを切り替えるケースについて説明します。

サブタイプテンプレートを使うためには、メインとなるテンプレートを作成します。
メインテンプレートをPCサイト用にデザインされたhtmlを元に作成します。
メインタイプというテンプレートタイプはありませんが、「シングルタイプ」または「マルチタイプ」を選択したテンプレートがメインテンプレートになります。
スマートフォンに最適化したhtmlを元にサブタイプテンプレートを作成します。
テンプレート登録時に、テンプレートタイプで「サブタイプ」を選択します。
「サブタイプ」を選択すると「メインテンプレートID」と「表示条件」という設定項目が表示されます。
「メインテンプレートID」には、事前に作成したメインテンプレートのIDを入力します。
「表示条件」には、サブタイプを表示させたい条件をプルダウンメニューから選択します。
サブタイプテンプレートはメインテンプレートで使われたMEタグをそのまま利用できるので参照IDを使う必要はありません。メインテンプレートで使ったMEタグと同じものをサブタイプテンプレート内に記述すれば同じ登録内容を出力できます。
サブタイプとして登録されたテンプレートは公開サイト側からは削除されてテンプレート保管ディレクトリ（me/admin/data/template/）配下に保管されます。
管理画面からはフォルダーペインで該当テンプレートファイルを選択することで再編集できます。
管理画面でメインテンプレートを元にしたページを登録します。
この操作により、メインテンプレートとサブタイプテンプレートを元にしたページのキャッシュファイルが作成されます。
公開サイトの該当ページには、キャッシュファイルを切り替えるためのスクリプトファイルが書き出されます。
公開サイト側のページにブラウザでアクセスした場合は、ブラウザのユーザーエージェントとサブタイプの表示条件が一致するか確認します。
サブタイプの表示条件と一致すればサブタイプを元にしたキャッシュファイルの内容を返します。
サブタイプの表示条件と一致しなかった場合は、メインテンプレートを元にしたキャッシュファイルの内容を返します。

browser.iniのカスタマイズ方法

browser.ini (me/admin/data/config/browser.ini)ファイルは、ini形式のフォーマットでユーザーエージェントの判定ルールをカスタマイズできます。

※現バージョンでは、browser.iniファイルは管理画面からは編集できません。FTPソフトなどを使いファイルを更新してください。

[]（各カッコ）で囲われたセクション名が、表示条件名としてテンプレート編集画面のプルダウンメニューに表示されます。

browser.ini の記述例：

[SmartPhone]
name[] = iPhone
name[] = iPod
name[] = Android
name[] = blackberry

この場合、[SmartPhone] が設定ファイル上のセクション名で、表示条件に表示される名前となります。
"name[] = iPhone" が条件の指定で、この場合ではユーザーエージェントに"iPhone"という文字が含まれれば一致したと判定されます。
"name[]" を複数記述すればそのいずれかに一致したらという条件になります。
"regex[]" という項目を使えば正規表現を利用できます。この値はPHPのpreg_match関数の引数として扱われます。
browser.iniはファイルの先頭に書かれたセクション順に評価されます。
サブタイプテンプレートは複数登録することができるので、その場合は、browser.iniに記述された順に評価されます。

閲覧時に、PC用・スマートフォン用などのテンプレートを切り替える方法

ブラウザでページを閲覧した際にユーザーエージェントを元に自動的に振り分けられます。

しかし、閲覧者がスマートフォンだけどPC用画面を見たい場合などにボタンをクリックしてもらうことでPC用画面を表示させることができます。

ここでは、PC用画面をメインテンプレートで作成していて、サブテンプレートの表示条件を"SmartPhone"にしている場合を例に説明します。

PCサイトを表示させるボタンの例

サブテンプレートにこのようなフォームを用意します。
"me_display_mode" というパラメータに "_DEFAULT" という値を指定します。"_DEFAULT" はメインテンプレートを指定するための予約語です。

<form action="" method="POST">
<input type="hidden" name="me_display_mode" value="_DEFAULT">
<input type="submit" value="PCサイトを表示する">
</form>

スマートフォン用サイトを表示させるボタンの例

メインテンプレートにこのようなフォームを用意します。
サブテンプレートの表示条件に、"SmartPhone" を指定しているため"me_display_mode"パラメータには "SmartPhone" を指定します。

<form action="" method="POST">
<input type="hidden" name="me_display_mode" value="SmartPhone">
<input type="submit" value="スマートフォンサイトを表示する">
</form>

これらのボタンをクリックするとCookieに情報を保存します。
Cookieの有効期間のデフォルトは30日間です。
user_config.ini の templateセクションの display_mode_cookie_expire 項目で有効期間を変更できます。