movabletype.jp
検索

テーマのテンプレート構造とDynamicMTMLプラグイン

スマートフォンオプションに付属するテーマ、「Smart Blog」のテンプレート構造について解説します。

スマートフォンオプションは2013年6月を持って販売終了しました。管理画面用プラグインは、Movable Type 5.2.6より本体に同梱してリリースを行なっています。

テンプレートの構造

テーマの各テンプレートは、以下のような構造でテンプレートモジュールをインクルードしています。

スマートフォン : テンプレート構造

PCとモバイルでデザインが異なる部分は、以下のテンプレートモジュールに記述されています。アクセスしてきた端末に応じて、テンプレートモジュールを切り替えて読み込むことで、端末毎に最適化されたデザインでページを表示します。

PC用 モバイル用
メニュー メニューモバイル用
HTMLヘッダー HTMLヘッダーモバイル用
JavaScriptフッター JavaScriptフッターモバイル用
関連コンテンツ 表示しない

DynamicMTMLプラグインによるテンプレートモジュールの切換え

アクセスのあった端末の種類によって、インクルードするテンプレートモジュールを切り替えるために、DynamicMTMLプラグインを利用します。DynamicMTMLプラグインは、アルファサード社によって開発、提供されているプラグインです。プラグインの詳細は、アルファサード社のドキュメントを参照してください。

「Smart Blog」テーマでは、DynamicMTMLプラグインの以下の三種類のタグを利用しています。

  • mt:IfUserAgent (ブロックタグ)
    wantsモディファイア、likeモディファイアを指定してユーザーエージェント情報による分岐を行います。
  • MTML (ファンクションタグ)
    静的ファイル出力のテンプレートにのみ記載できます。tagモディファイアで指定したMTタグにparamsモディファイアで指定したパラメタを付けてMTタグとして出力します。
  • mt:DynamicMTML
    静的ファイル出力のテンプレートに記載した場合、このタグ(閉じタグを含む)及びタグの中のテキストがビルドされずそのままファイルに出力されます。このタグの内部に記述されたMTMLはダイナミックパブリッシング処理される時にビルドされます。
  • mt:BuildRecurs (ブロックタグ)
    ブロックで囲まれた内容を再度ビルドします。検索cgiやコメントプレビューの際にMTMLタグやDynamicMTMLタグを囲む形で利用します。

この三種類のタグを組み合わせて、テンプレートモジュールの切換えを行っていますが、記述方法は利用するテンプレートの公開方法によって異なります。以下に具体的な例で解説します。

システムテンプレートで利用する場合

例えば、「検索結果」や「コメントプレビュー」、「コメント完了」などのシステムテンプレートは、必ずMovable TypeシステムのCGIが動的に出力します。このため、システムテンプレート内では以下のように、mt:IfUserAgentタグを記述するだけで、PCとモバイル向けのインクルード処理を条件分岐することができます。

<mt:IfUserAgent wants="SmartPhone">
    <mt:Ignore><!-- モバイル用のモジュールをインクルード --></mt:Ignore>
    <$mt:Include module="HTMLヘッダーモバイル用"$>
<mt:Else>
    <mt:Ignore><!-- PC用のモジュールをインクルード --></mt:Ignore>
    <$mt:Include module="HTMLヘッダー"$>
</mt:IfUserAgent>    

公開設定がスタティックのテンプレート

例えば、「ウェブページ」や「ブログ記事」アーカイブテンプレートなど、公開設定をスタティックに指定したテンプレートでは、MTMLタグを利用してmt:IfUserAgentブロックを記述します。これにより、ブログ記事を公開したときにMTMLタグが処理され、テンプレート内にmt:IfUserAgentタグが出力されます。そして、ブログ記事がアクセスされたときに、ダイナミックパブリッシングによってmt:IfUserAgentタグを処理することで、端末に応じてインクルードするテンプレートモジュールを切り替えます。

<mtml tag="mt:IfUserAgent" params='wants="SmartPhone"'>
    <mt:DynamicMTML>
        <$mt:Include module="HTMLヘッダーモバイル用"$>
    </mt:DynamicMTML>
<mtml tag="mt:else">
    <$mt:Include module="HTMLヘッダー"$>
<mtml tag="/mt:IfUserAgent">

また、ダイナミックパブリッシングのみで処理するテンプレートは、mt:DynamicMTMLタグで囲みます。

公開設定がスタティックで、システムによっても出力されるテンプレート

例えば、「メインページ」や「カテゴリ別ブログ記事リスト」など、スタティックに公開するけれども、ページ送り機能などによってMovable Typeのシステムが処理する可能性のあるテンプレートは、上記をさらにmt:BuildRecursブロックで囲う必要があります。これにより、システムで処理される場合にも、ブロック内が正しく出力されます。

<mt:BuildRecurs>
    <mtml tag="mt:IfUserAgent" params='wants="SmartPhone"'>
        <$mt:Include module="HTMLヘッダーモバイル用"$>
    <mtml tag="mt:else">
        <$mt:Include module="HTMLヘッダー"$>
    <mtml tag="/mt:IfUserAgent">
</mt:BuildRecurs>

DynamicMTMLプラグインの管理画面の機能

DynamicMTMLプラグインをインストールすると、管理画面にプラグインの設定が追加されます。

ブログの[全般設定]に「ダイナミックパブリッシング設定」が追加されます。通常は、「DynamicMTMLを有効にする (サイト・パス直下に.htaccessを生成します)」をチェックするだけで、それ以外の設定項目は変更しないでください。

また、サイドメニューの[ツール]に、[ダイナミックキャッシュのクリア]というメニューが追加されます。クリックすると、ダイナミックパブリッシング設定でキャッシュを有効にしている場合に、キャッシュをクリアします。

Updated on 2013-07-16, 17:28 .

関連ページ