応用編：携帯のデザインテンプレートについて

デザインテンプレートは、FF-CMSで作成したエントリーの表示方法を記述します。
デザインテンプレートの書式は、HTMLとデザインテンプレートタグから成ります。
また、デザインテンプレートタグには大きく分けて以下の種類があります。

コンテナタグ
機能タグ
式言語

ここでは、FF-CMSにデフォルトで組み込まれているデザインテンプレートを例に説明します。

【画面一覧について】

はじめに、デフォルトで組み込まれているデザインテンプレートで表示する画面一覧は以下の通りです。

画面種別	説明
トップページ	サイトのトップページになります。
サブエリア	月別のエントリ一覧ページになります。
エントリーページ	エントリ内容を表示するページになります。

また、上記ページはすべて、以下のパーツで構成されます。

パーツ種別	説明
レイアウト	「サブエリア」、「メインエリア」をどのように配置するかを定義します
サブエリア	月別一覧へのリンクエリアになります
メインエリア	ページのメインエリアになります

【画面毎のデザインテンプレートの構成について】

各画面は、上記のパーツで構成されており、パーツ毎にデザインテンプレートを定義しています。
以下に各画面毎のデザインテンプレートの構成を説明します。

■トップページ

パーツ種別	デザインテンプレート名
レイアウト	mobile_layout
サブエリア	mobile_sub
メインエリア	mobile_top

■月別一覧ページ

パーツ種別	デザインテンプレート名
レイアウト	mobile_layout
サブエリア	mobile_sub
メインエリア	mobile_monthly

■エントリーページ

パーツ種別	デザインテンプレート名
レイアウト	mobile_layout
サブエリア	mobile_sub
メインエリア	mobile_entry

デフォルトのデザインテンプレートでは、メインエリア以外のパーツについては、共通のパーツとして再利用をしています。

【各デザインテンプレートについて】

デザインテンプレートは、HTMLとデザインテンプレートタグから成ります。
ここでは、各デザインテンプレートについて説明します。

■mobile_sub

デフォルトで組み込まれているmobile_subの内容は以下のようになっております。
------------------------------------------------------------------------------------------------------------
<* MobileEcho bgcolor="#9FFFFF" value="月間アーカイブ" *>・・・・・・・①
<* Months *>・・・・・・・②
<a href="<* Link name="mobile_monthly" year="{ month.year }" month="{ month.month }" *>" >・・・・・・・③
 <* Month *>(<* MonthEntryCount *>)・・・・・・・④
</a>
 
<* End *>
------------------------------------------------------------------------------------------------------------
①<* MobileEcho bgcolor="#9FFFFF" value="月間アーカイブ" *>
「"月間アーカイブ"」という文字列を出力しています。
また、その際、「bgcolor」の指定をしています。

②<* Months *>～<* End *>
月のループを作成します。通常は、エントリーが１つもない月は対象になりません。

③<* Link name="mobile_monthly" year="{ month.year }" month="{ month.month }" *>
年と月を基に月別別エントリー一覧へのリンクを出力します。

④<* Month *>(<* MonthEntryCount *>)
・<* Month *>
 月を出力します。
・<* MonthEntryCount *>
 月内のエントリ件数を出力します。

■mobile_top

デフォルトで組み込まれているmobile_topの内容は以下のようになっております。
------------------------------------------------------------------------------------------------------------
<* Set name="title" value="{ section.name + 'のトップページ' }" *>・・・・・・・①
<* Layout name="mobile_layout" *>・・・・・・・②
<* MobileEcho size="large" align="left" value ="最近の書き込み" *>・・・・・・・③
<* Entries size="3" *>・・・・・・・④
<a href="<* EntryLink name="mobile_entry" *>" ><* EntryTitle *></a>・・・・・・・⑤
 
<* MobileEcho value="{ entry.content.raw_text() }" *>・・・・・・・⑥
 
<* End *>
------------------------------------------------------------------------------------------------------------
①<* Set name="title" value="{ section.name + ' トップページ' }" *>
変数「title」に「セクション名+"トップページ"」をセットしています。

②<* Layout name="mobile_layout" *>
mobile_topのページレイアウトを指定します。

③<* MobileEcho size="large" align="left" value ="最近の書き込み" *>
「"最近の書き込み"」という文字列を出力しています。
また、その際、「size」、「align」の指定をしています。

④<* Entries size="3" *>～<* End *>
エントリーのループを作成します。
ループ件数は3で指定しています。

⑤<a href="<* EntryLink name="entry" *>" ><* EntryTitle *></a>
・<* EntryLink name="mobile_entry" *>
エントリーページへのリンクを出力します。
・<* EntryTitle *>
エントリーのタイトル名を出力します。

⑥<* MobileEcho value="{ entry.content.raw_text() }" *>
エントリーの内容を出力します。

■mobile_monthly

デフォルトで組み込まれているmobile_monthlyの内容は以下のようになっております。
------------------------------------------------------------------------------------------------------------
<* Set name="title" value="{ year.to_s() + '年' + month.to_s() + '月の月間アーカイブ' }" *>・・・・・・・①
<* Layout name="mobile_layout" *>・・・・・・・②
<* MobileEcho size="large" align="left" value ="{ title }" *>・・・・・・・③
<* Entries year="{ year }" month="{ month }" *>・・・・・・・④
<a href="<* EntryLink name="mobile_entry" *>" ><* EntryTitle *></a>・・・・・・・⑤
 
<* MobileEcho value="{ entry.content.raw_text() }" *>・・・・・・・⑥
 
<* End *>"
------------------------------------------------------------------------------------------------------------
①<* Set name="title" value="{ year.to_s() + '年' + month.to_s() + '月の月間アーカイブ' }" *>
変数「title」に「XX年+XX月+"月の月間アーカイブ"」をセットしています。

②<* Layout name="mobile_layout" *>
mobile_monthlyのページレイアウトを指定します。

③<* MobileEcho size="large" align="left" value ="{ title }" *>
エントリーのタイトルを出力しています。
また、その際、「size」、「align」の指定をしています。

④<* Entries year="{ year }" month="{ month }" *>～<* End *>
指定した年月に紐づくエントリーのループを作成します。

⑤<a href="<* EntryLink name="entry" *>" ><* EntryTitle *></a>
・<* EntryLink name="entry" *>
エントリーページへのリンクを出力します。
・<* EntryTitle *>
エントリーのタイトル名を出力します。

⑥<* MobileEcho value="{ entry.content.raw_text() }" *>
エントリーの内容を出力します。

■mobile_entry

デフォルトで組み込まれているmobile_entryの内容は以下のようになっております。
------------------------------------------------------------------------------------------------------------
<* Set name="title" value="{ entry.title }" *>・・・・・・・①
<* Layout name="mobile_layout" *>・・・・・・・②
<* EntryDate format="%Y年%m月%d日" *>・・・・・・・③
 
<* MobileEcho color="#171717" value="{ entry.title }" *>・・・・・・・④
 
<* MobileEcho value="{ entry.content.raw_text() }" *>・・・・・・・⑤
 
------------------------------------------------------------------------------------------------------------
①<* Set name="title" value="{ entry.title }" *>
変数「title」にエントリーのタイトルをセットしています。

②<* Layout name="mobile_layout" *>
mobile_entryのページレイアウトを指定します。

③<* EntryDate format="%Y年%m月%d日" *>
エントリーの表示用日付を出力します。

④<* MobileEcho color="#171717" value="{ entry.title }" *>
エントリーのタイトルを出力します。
また、その際、「color」の指定をしています。

⑤<* EntryBody *>
エントリーの内容を出力します。

■mobile_layout

デフォルトで組み込まれているmobile_layoutの内容は以下のようになっております。
------------------------------------------------------------------------------------------------------------
<* MobileHead *>・・・・・・・①
<* MobileFontCss *>・・・・・・・②
<html>
<head>
 <title><* Echo value="{ title }" *></title>・・・・・・・③
</head>
<body>
 <a href="<* Link name="mobile_top" *>">・・・・・・・④
 <* MobileEcho bgcolor="#9FFFFF" value="{ section.name }" *>・・・・・・・⑤
 </a >
 <* Yield *>・・・・・・・⑥
 <* Include name="mobile_sub" *>・・・・・・・⑦
 
 <a href="<* Link name="mobile_top" *>">トップページ</a >
</body>
</html>
------------------------------------------------------------------------------------------------------------
①<* MobileHead *>
各種キャリア用のXHTMLヘッダ(XML宣言とDOCTYPE)を作成します。

②<* MobileFontCss *>
フォント用のデザインシートを記述します。MobileHeadとセットで書いておくことを推奨します。

③<* Echo value="{ title }" *>
タイトルを出力してます。

④<* Link name="mobile_top" *>
mobile_top(トップページ)へのリンクを出力します。

⑤<* MobileEcho bgcolor="#9FFFFF" value="{ section.name }" *>
セクション名を出力します。
また、その際、「bgcolor」の指定をしています。

⑥<* Yield *>
呼び出し元のデザインテンプレートの内容を出力します。
例えば、デザインテンプレート(mobile_top)から
<* Layout name="mobile_layout" *>
のように呼び出されている場合は、mobile_topの内容を出力します。

⑦<* Include name="mobile_sub" *>
デザインテンプレート(mobile_sub)の内容を出力します。