テンプレート¶

テンプレートの作成方法¶

テンプレートを作成する方法は2種類あります。 1つ目がRabbitのジェネレータ機能を使って静的なテンプレートを自動生成する方法です。 2つ目が手動でテンプレートを作成する方法です。

ランディングページ等の静的なシンプルなページをAMP化する場合にはジェネレータが向いています。デザインから新規に作成する場合や，動的な要素が多い場合には手動作成が向いています。また，手動で作成する場合も雛形が準備されていますのでゼロから作成する必要はありません。

テンプレートの雛形¶

Rabbitは新規作成テンプレートの雛形を提供しています。雛形は下記のとおりです。

<!doctype html>
<html ⚡>
  <head>
    <!--{call header() }-->
  </head>
  <body>
    <!--{call sidebar() }-->

    <header>
      <button on="tap:sidebar.toggle" class="menu" title="Toggle Sidebar"> ☰ </button>
      <span class="brand-logo">Site Name or Logo</span>
    </header>

    <main role="main">
      <h2>Welcome to the mobile web</h2>
      <!--{call carousel_example()}-->
      <br><br>
      <!--{call accordion_example()}-->
      <br><br>
      <!--{call tab_example()}-->
    </main>

    <footer>
      <div class="brand-logo">Footer Logo</div>
    </footer>
  </body>
</html>

テンプレートの動作原理¶

AMPサイトはRabbitのサーバー上でプロキシサイトとして動作します。 HTTPリクエスト内容からリクエスト内容にマッチするテンプレートを選択して表示します。静的なテンプレートの場合にはそのままテンプレート内容を表示するだけですが，動的なテンプレートの場合は，アクセス時にオリジナルページにアクセスし，ページから必要要素を取得してマッピンするという方式で動的なコンテンツにも対応しています。

テンプレートのプロパティ¶

テンプレート毎に下記設定を行うことが出来ます。 Mode —-

テンプレートの変換方式を下記から選択します。

モード	説明
Override	ページを丸ごと，作成したテンプレートに切り替えて出力します。
Filter	ページの一部箇所を，作成したフィルターで切り替えて出力します。
Show Original	変換せずにオリジナルページを出力します。

Condition¶

テンプレートを適用する条件を下記から選択して指定します。

条件	説明	説明
Equal	PATH_INFOがooと完全一致	単一のページにテンプレートを割り当てるためにはこの条件を使用します。
Start with	PATH_INFOがooから始まる	特定の文字列で始まるURLのページにテンプレートを割り当てるためにはこの条件を使用します。
Contains	PATH_INFOにooを含む	特定の文字列を含むURLのページにテンプレートを割り当てるためにはこの条件を使用します。
RegExp	PATH_INFOを正規表現で指定	正規表現によりテンプレートが割り当られるページを定義するためにこの条件を使用します。
XPath	BodyをXPathで指定	指定されたXPathの式が実行されるページにテンプレートを割り当てるためにはこの条件を使用します。
JavaScript	BodyをJavaScript指定	ネイティブなJavaScriptの式を使って、テンプレートをページに割り当てるためにはこの条件を使用します。

Status Code¶

出力時のHTTP Statusを選択します。

モード	説明
By pass	オリジナルのステータスコードで出力します。
200	200 (OK)で出力します。
302	302 (Found)で出力します。
404	404 (Not Found)で出力します。
500	500 (Internal Server Error) で出力します。

テンプレートの順序¶

テンプレートには適用順序があります。同条件のテンプレートが存在する場合には，最初の条件にマッチしたテンプレートが適用されます。また，テンプレートの順序はテンプレートマネージャーでドラッグアンドドロップで設定することが出来ます。

参考