2011年11月11日

Monacaのテンプレートエンジンを知る

asial

Pocket

MonacaにはJinja風のテンプレートエンジンが付随しています。このテンプレートエンジンは、AndroidやiPhone両方に対応するHTMLを生成するのを支援したり、同じアプリ内で何度も使う文言やレイアウトを共通化できます。

基本的な使い方

Monacaで作成するアプリ内のhtmlには自動的にテンプレートエンジンによって解釈されます。MonacaIDE上でHTML内にテンプレートエンジンの構文を埋め込みます。

iPhone、Android両方で違った使い方をする

if構文を使うことで、android端末とiOS端末とで違った結果を出力することができます。

index.html:


<html><head>(中略)</head><body>
{% if Device.Platform == IOS %}iOS端末用コンテンツ{% endif %}
{% if Device.Platform == Android %}android端末用コンテンツ{% endif %}
</body></html>

同じ文言を使いまわす

include構文を用いて、他のテンプレートを自身に出力することができます。

page.html:


<html>
<head> (中略) </head>
<body>
{% include "header.html" %}
</body>
(以下略)

header.html:


<div id="header">
    <span class="header_item">Home</span>
    <span class="header_item">News</span>
    <span class="header_item">Info</span>
</div>
(以下略)

page.htmlの結果:


<html>
<head> (中略) </head>
<body>
<div id="header">
    <span class="header_item">Home</span>
    <span class="header_item">News</span>
    <span class="header_item">Info</span>
</div>
</body>

レイアウトを共通化する

Monacaのテンプレートエンジンでは、テンプレートの継承という機能を用いてレイアウトなどを共通化することができます。

base.html:


<html>
<head>{% block head end %}</head>
<body>
{% block body end %}
</body>
</html>

index.html:


{% extends "base.html" %}
{% block head %}
<link rel="stylesheet" href="css/main.css" type="text/css" media="screen" charset="utf-8">
{% endblock %}
{% block body %}
This is "index.html".
{% endblock %}

index.htmlの結果:


<html>
<head>
<link rel="stylesheet" href="css/main.css" type="text/css" media="screen" charset="utf-8">
</head>
<body>
This is "index.html".
</body>
</html>