テンプレート解説アーカイブ

TOPページ > テンプレート解説

このカテゴリでは、デフォルトテンプレートに関する解説を行います。

『テンプレート解説』カテゴリ内のエントリ一覧

テンプレートとは

2008年3月 2日 15:14 | Writer: apstar | 記事本文

テンプレートとは、簡単に言うと、Movable Typeで作成するWebページの雛形です。

Movable Type 4の場合、管理画面のナビゲーションで「デザイン」→「テンプレート」と進むと、テンプレートの編集ページが表示されます。

Movable Type 4 からは、テンプレートファイルは細かいモジュール化によって細分化が進み、非常に多くのファイルで構成されています。

ページ先頭へ

タグ:Template

デフォルトテンプレートのXHTML

2008年3月 2日 15:37 | Writer: apstar | 記事本文

以下に、デフォルトテンプレートのXHTML文書構造を示します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" id="sixapart-standard">
<head>
</head>

<body class="mt-main-index layout-wtt">
    <div id="container">
        <div id="container-inner">
            <div id="header">
                <div id="header-inner">
                    <div id="header-content">
                    </div>
                </div>
            </div>
            <div id="content">
                <div id="content-inner">

                    <div id="alpha">
                        <div id="alpha-inner">
                        </div>
                    </div>

                   <div id="beta">
                       <div id="beta-inner">
                       </div>
                   </div>

                   <div id="gamma">
                       <div id="gamma-inner">

                       </div>
                   </div>

                </div>
            </div>

            <div id="footer">
                <div id="footer-inner">
                    <div id="footer-content">
                    </div>
                </div>
            </div>

        </div>
    </div>
</body>
</html>

デフォルトテンプレートの場合、header-content、alpha-inner、beta-inner、gamma-inner、footer-contentの5つのブロック内へコンテンツ内容を書きます。

Movable Type 4 の場合は、インデックスページ、カテゴリページ、エントリページ、各種アーカイブページ、検索結果ページなどのどこのページでも、（基本的に）このXHTMLと同じ構造でファイルが作成されます。

ページ先頭へ

デフォルトテンプレートのファイル構成

2008年3月 2日 17:07 | Writer: apstar | 記事本文

デフォルトテンプレートのファイル構成を以下に示します。

インデックステンプレート: Atom; JavaScript; RSD; RSS; アーカイブインデックス; スタイルシート; メインページ

アーカイブテンプレート: ウェブページ; ブログ記事; ブログ記事リスト

テンプレートモジュール: ウェブページの詳細; カテゴリ; コメント; コメント入力フォーム; コメント詳細; サイドバー; サイドバー(2カラム); サイドバー(3カラム); タグ; トラックバック; フッター; ブログ記事のメタデータ; ブログ記事の概要; ブログ記事の詳細; ヘッダー

システムテンプレート: コメントプレビュー; コメント完了; ダイナミックパブリッシングエラー; ポップアップ画像; 検索結果

実際のファイル名

テンプレートは日本語表記ですが、これはMovable Type 4 が内部的に英語ファイル名を変換してくれているためです。テンプレート名とファイル名の対比表を以下に示します。

インデックステンプレート: Atom / atom.mtml; JavaScript / javascript.mtml; RSD / rsd.mtml; RSS / rss.mtml; アーカイブインデックス / archive_index.mtml; スタイルシート / styles.mtml; メインページ / main_index.mtml

アーカイブテンプレート: ウェブページ / page.mtml; ブログ記事 / entry.mtml; ブログ記事リスト / entry_listing.mtml

テンプレートモジュール: ウェブページの詳細 / page_detail.mtml; カテゴリ / categories.mtml; コメント / comments.mtml; コメント入力フォーム / comment_form.mtml; コメント詳細 / comment_detail.mtml; サイドバー / sidebar.mtml; サイドバー(2カラム) / sidebar_2col.mtml; サイドバー(3カラム) / sidebar_3col.mtml; タグ / tags.mtml; トラックバック / trackbacks.mtml; フッター / footer.mtml; ブログ記事のメタデータ / entry_metadata.mtml; ブログ記事の概要 / entry_summary.mtml; ブログ記事の詳細 / entry_detail.mtml; ヘッダー / header.mtml

システムテンプレート: コメントプレビュー / comment_preview.mtml; コメント完了 / comment_response.mtml; ダイナミックパブリッシングエラー / dynamic_error.mtml; ポップアップ画像 / popup_image.mtml; 検索結果 / search_results.mtml

これらのグループは、種別によって巧みに分けられています。これらファイルには、ひとつひとつ役割があります。

ページ先頭へ

タグ:Default,
File,
Template

モジュール化とは

2008年3月 2日 17:48 | Writer: apstar | 記事本文

Movable Type 4 のデフォルトテンプレートでは、細かいモジュール化が行われています。

モジュール化とは、「複数のテンプレートで同じコード記述がある場合、ひとつのパーツとしてまとめ、分割ファイル化する」ということです。モジュール化されたコードがテンプレートに必要になった場合、インクルードという方式でテンプレート内に埋め込むことができます。

例えば、デフォルトテンプレートで構築されたときにエントリタイトルの下へ表示される投稿日・投稿者・コメント・トラックバック情報は、メインインデックスページ、カテゴリページ、エントリページなどで同じように表示されます（下図）。

この部分のコードは、実際にXHTMLのソースコードを見てみると、同じようなものが使用されています。出力されたXHTMLページのコードを見てみると、大抵はこのようになっています。

<div class="asset-meta">
   <span class="byline vcard">
      <address class="vcard author"><a class="fn url" href="http://www.apstars.com/blog/">yoshi</a></address> (<abbr class="published" title="2008-02-23T19:14:08+09:00">2008&#24180;2&#26376;23&#26085; 19:14)
   </span>
   <span class="separator">|</span>
   <a class="permalink" rel="bookmark" href="http://www.apstars.com/default/2008/02/post.html">個別ページ</a>
      | <a href="http://www.apstars.com/default/2008/02/post.html#comments">コメント(0)</a>
      | <a href="http://www.apstars.com/default/2008/02/post.html#trackback">トラックバック(0)</a>
</div>

この部分のソース生成を行うのが、「ブログ記事のメタデータ」モジュールです。テンプレート中には、このXHTML生成コードは、「ブログ記事のメタデータ」モジュール一箇所にしか記述されていません。多くのテンプレートから共有されているのです。

<div class="asset-meta">
    <span class="byline vcard">
<MTIfNonEmpty tag="EntryAuthorDisplayName">
        <address class="vcard author"><$MTEntryAuthorLink show_hcard="1"$></address> (<abbr class="published" title="<$MTEntryDate format_name="iso8601"$>"><$MTEntryDate format="%x %X"$>)
<MTElse>
        <abbr class="published" title="<$MTEntryDate format_name="iso8601"$>"><$MTEntryDate format="%x %X"$></abbr>
</MTIfNonEmpty>
    </span>
    <span class="separator">|</span> <a class="permalink" rel="bookmark" href="<$MTEntryPermalink$>">個別ページ</a>
    <MTUnless name="hide_counts" eq="1">
        <MTIfCommentsActive>| <a href="<$MTEntryPermalink$>#comments">コメント(<$MTEntryCommentCount$>)</a></MTIfCommentsActive>
        <MTIfPingsActive>| <a href="<$MTEntryPermalink$>#trackback">トラックバック(<$MTEntryTrackbackCount$>)</a></MTIfPingsActive>
    </MTUnless>
</div>

なお、モジュール化は必須ではありません。複数テンプレートの間で共通コードがあるとき、これを無理にモジュール化せずとも、モジュール化した場合と同じ動作をします。

モジュール化によるメリット

モジュールの内容を一箇所書き換えれば、全てのテンプレートに適用される。楽で安全。
モジュール内で再構築時の変数制御を行えば、ページによってきめ細かい表示変更が可能。
上手なモジュール化はテンプレートコードの見通しがよくなる。

ページ先頭へ

タグ:Template

テンプレートごとの挙動の違い

2008年3月 2日 18:47 | Writer: apstar | 記事本文

Movable Type 4 では、役割により5種類のテンプレートで構成されます。

インデックステンプレート: そのブログにひとつしかないXHTMLファイルを出力する、またはそのブログにひとつしかないファイルのためのテンプレートです。
アーカイブテンプレート: 多数のXHTMLファイルを出力されるためのテンプレートです。例えば、エントリページが100枚あるとすると、それらは全て「ブログ記事」テンプレートで生成されます。全てのアーカイブテンプレートは、専用のアーカイブマッピングを持っています。
テンプレートモジュール: テンプレート間で共有するモジュールです。モジュール＝パーツですので、このファイル単独ではXHTMLを生成することはありません。テンプレートからインクルードされて使用されます。
システムテンプレート: システムが利用するテンプレートです。再構築はブログ利用者が検索やコメントをつけるときに行われるところが、他のテンプレートと異なります。
ウィジェット: サイドバーなどで利用するパーツを細かく部品化し、管理画面上でドラッグ・アンド・ドロップ操作で追加・削除が行えます。各テンプレートから共用できるパーツという点では、モジュールと似ています。

詳細は、Movable Type ドキュメントページ「テンプレートの種類と役割」も併せて参照してください。

ページ先頭へ

タグ:Template

インデックステンプレート

2008年3月 2日 22:48 | Writer: apstar | 記事本文

インデックステンプレートの解説です。インデックステンプレートとは、そのブログにひとつしかないXHTMLファイルを出力する、またはそのブログにひとつしかないファイルを生成するためのテンプレートです。

インデックステンプレートの名称と機能一覧

Atom: テンプレート名はatom.mtml、出力ファイル名はatom.xmlです。サイトを再構築時にサイトルートへAtomフィードファイルを出力しますが、そのテンプレートです。

JavaScript: テンプレート名はjavascript.mtml、出力ファイル名はmt.jsです。

RSD: テンプレート名はrsd.mtml、出力ファイル名はrsd.xmlです。サイトを再構築時にサイトルートへrsd.xmlファイルを出力しますが、そのテンプレートです。

RSS: テンプレート名はrss.mtml、出力ファイル名はrss.xmlです。サイトを再構築時にサイトルートへRSSフィードファイルを出力しますが、そのテンプレートです。

アーカイブインデックス: テンプレート名はarchive_index.mtml、出力ファイル名はarchives.htmlです。すべてのエントリ・カテゴリ・ウェブページ・月別アーカイブを一括して扱うことができます。カスタマイズしてサイトマップなどに用いる場合があります。このページには、専用の拡張子（このページをphp化する際は変更が必要）設定があります。

アーカイブインデックスのインクルード系統図

スタイルシート: テンプレート名はstyles.mtml、出力ファイル名はstyles.cssです。サイトの全てのページの外観を定義するCSSです。サイトの外観を変更する際は、カスタマイズが必須です。

メインページ: テンプレート名はmain_index.mtml、出力ファイル名はindex.htmlです。トップページのindex.html専用テンプレートです。このページには、専用の拡張子（このページをphp化する際は変更が必要）設定があります。トップページの構造・外観を変更する際は、カスタマイズが必要となります。

メインページのインクルード系統図

ページ先頭へ

タグ:index,
Template

アーカイブテンプレート

2008年3月 2日 23:10 | Writer: apstar | 記事本文

アーカイブテンプレートの解説です。アーカイブテンプレートとは、そのブログに複数あるXHTMLファイルを出力するためのテンプレートです。

アーカイブテンプレートの名称と機能一覧

ウェブページ

テンプレート名はpage.mtml、出力ファイル名は不定です。

Movable Type 4 より追加になった、ウェブページ生成用のテンプレートです。ウェブページにはカテゴリではなくフォルダを用います。フォルダもウェブページも、ファイル名生成は自動ではなく手動で行います。

時系列で増えるページではなく静的な「会社案内」などのページを作成するのに向いています。また、ウェブページを特に使う必要がない場合は、カスタマイズは必要ありません。

専用のアーカイブマッピングを持っています。

ウェブページのインクルード系統図

ブログ記事

テンプレート名はentry.mtml、出力ファイル名は不定です。Movable Type 3 の頃までは、「ブログ記事」は「エントリ」と呼ばれていました。

Movable Typeではエントリに関わるテンプレートタグは非常に多いです。

専用のアーカイブマッピングを持っています。

ブログ記事のインクルード系統図

ブログ記事リスト

テンプレート名はentry_listing.mtml、出力ファイル名は不定です。Movable Type 3 の頃までは、「ブログ記事リスト」は「カテゴリ」と呼ばれていました。このテンプレートは、単にカテゴリのみではなく、以下のようなアーカイブを作成することが可能です。

ブログ記事 (Individual)
ウェブページ (Page)
日別 (Daily)
週別 (Weekly)
月別 (Monthly)
年別 (Yearly)
ユーザー別 (Author)
ユーザー - 日別 (Author-Daily)
ユーザー - 週別 (Author-Weekly)
ユーザー - 月別 (Author-Monthly)
ユーザー - 年別 (Author-Yearly)
カテゴリ (Category)
カテゴリ - 日別 (Category-Daily)
カテゴリ - 週別 (Category-Weekly)
カテゴリ - 月別 (Category-Monthly)
カテゴリ - 年別 (Category-Yearly)

実際には、このリスト内の「カテゴリ」「月別」のみを用いることが多いです。

Movable Typeではカテゴリに関わるテンプレートタグは非常に多いです。

専用のアーカイブマッピングを持っています。

ブログ記事リストのインクルード系統図

ページ先頭へ

タグ:Archive,
Template

テンプレートモジュール

2008年3月 3日 00:10 | Writer: apstar | 記事本文

テンプレートモジュールの解説です。テンプレートモジュールのファイルは、そのファイル単体ではXHTMLファイルを作成することができません。テンプレートモジュールとは、テンプレートの部品として細分化されたモジュールであるからです。

テンプレートモジュールの名称と機能一覧

ウェブページの詳細: ウェブページの内容を表示するモジュールです。MTPageBodyテンプレートタグとMTPageMoreテンプレートタグが記述されており、ウェブページとして投稿された文章が全て取得できます。投稿日・投稿者情報などのメタデータは付きません。

カテゴリ: 「ブログ記事の詳細」モジュールからのみインクルードされるモジュールです。「ブログ記事の詳細」モジュールはエントリページからインクルードされます。このモジュールは、エントリページがどのカテゴリに属しているかの表示にのみ使用されているようです。

コメント: 「コメントプレビュー」テンプレートからは「コメント入力フォーム」モジュールのみ、「コメントプレビュー」テンプレート以外からは「コメント詳細」モジュールと「コメント入力フォーム」がインクルードされます。このモジュールをインクルードすると、インクルードもとのテンプレートにコメント周りの機能一式を追加することができます。

コメント入力フォーム

「コメント入力フォーム」モジュールは「コメント」モジュールからインクルードされる孫モジュールです。コメントの入力機能を追加することができます。

コードがやや複雑です。もしカスタマイズする場合の注意点ですが、formタグの「name="comments_form" id="comments-form"」記述です。このname属性とid属性にはアンダーバーとハイフンの相違点があります。記述を誤るとクッキーより投稿者情報を拾ってこなくなります。

コメント詳細: エントリにつけられたコメントの一覧を取得するモジュールです。「コメント」モジュールよりインクルードされる孫モジュールです。

サイドバー: サイドバー用のモジュールです。Movable Type 4.1からは、単に2カラムと3カラムのサイドバーモジュールを変数の値によってインクルード分岐させる中間モジュールのような位置づけとなっています。

サイドバー(2カラム): サイドバーのbetaブロックに記述するコードを記述します。

サイドバー(3カラム): サイドバーのgammaブロックに記述するコードを記述します。

タグ: 「ブログ記事の詳細」モジュールからのみインクルードされるモジュールです。「ブログ記事の詳細」モジュールはエントリページからインクルードされます。このモジュールは、エントリページがどのタグに属しているかの表示にのみ使用されているようです。

トラックバック: 「ブログ記事の詳細」モジュールからのみインクルードされるモジュールです。「ブログ記事の詳細」モジュールはエントリページからインクルードされます。このモジュールは、エントリページのトラックバックデータの表示にのみ使用されているようです。

フッター: フッターブロックに記述するコードを記述します。

ブログ記事のメタデータ: メインページ、カテゴリページよりインクルードされる「ブログ記事の概要」モジュールと、エントリページよりインクルードされる「ブログ記事の詳細」モジュールからインクルードされる孫モジュールです。投稿日や投稿者、コメント、トラックバックを表示します。

ブログ記事の概要: ブログ記事のMTEntryBodyテンプレートタグで取得できるブログ記事までを取得します。「ブログ記事のメタデータ」モジュールをインクルードしています。

ブログ記事の詳細: ブログ記事のMTEntryBodyテンプレートタグとMTEntryMoreテンプレートタグで取得できる完全なブログ記事を取得します。「ブログ記事のメタデータ」モジュールをインクルードしています。

ヘッダー: メタ宣言を含んだヘッダー情報を取得します。

ページ先頭へ

タグ:Template

システムテンプレート

2008年3月 3日 21:27 | Writer: apstar | 記事本文

システムテンプレートの解説です。システムテンプレートは、静的にサイトを再構築する際にもページは生成されません。サイト利用者が、検索をかけたり、コメントを投稿するときに、CGIが使用するテンプレートです。

これらのテンプレートで出力されるファイルは、サイトの出力ファイル拡張子をphpに設定している場合でも、常にhtmlで出力されます。

テンプレートモジュールの名称と機能一覧

コメントプレビュー: サイト利用者がコメントを投稿する際に、そのコメント内容を表示させ確認させるページを生成するテンプレートです。

コメント完了: サイト利用者のコメントの投稿が完了したとき、あるいはそのコメント投稿がエラーとなった場合にメッセージを表示するページを生成するテンプレートです。

ダイナミックパブリッシングエラー: ダイナミックパブリッシングでページ出力エラーとなった場合、その内容を表示します。サイトが静的構築の場合は使用されません。

ポップアップ画像: 画像をポップアップウィンドウで表示するときのレイアウトを行うためのテンプレートです。

検索結果: 検索結果を表示する時のレイアウトを行うためのテンプレートです。キーワード入力での検索と、タグ検索どちらも同じテンプレートが使用されます。

ページ先頭へ

タグ:Template

ウィジェット

2008年3月 3日 21:41 | Writer: apstar | 記事本文

ウィジェットとは、サイドバー用に、モジュール化された部品を集めて手軽に使用できるようにした機能です。デフォルトテンプレートに最初から装備されており、追加と選択解除がドラッグアンドドロップで行え、簡単な手続きで使用することができます。

機能を選択して保存→独自のウィジェットセットを作成して、<$MTWidgetSet name="ウィジェットセットの名前"$>というコードでサイドバー内にインクルードします。

ウィジェットパーツの名称と機能一覧

Powered by: Movable Typeによってサイトが構築されたことを表示します。
Technorati Search: Technoratiで検索を行うフォームを表示します。
ウェブページ一覧(ネスト): ウェブページを、そのウェブページのフォルダ階層にあわせて表示します。
カテゴリ一覧(ネスト): カテゴリを、サブカテゴリなどの階層構造をあわせて表示します。
カレンダー: エントリへのリンク付きカレンダーを表示します。
クリエイティブ・コモンズ: ブログでクリエイティブ・コモンズ・ライセンスを設定している場合、ライセンスに関する情報を表示します。
サインイン: Movable Type に登録されているユーザーがサインイン、サインアウト可能なリンクを表示します。
タグクラウド(サイドバー): タグクラウドを表示するウィジェットです。
フォト: 画像サムネイルリストを表示します。
日付ベースカテゴリアーカイブ: 日付ベースのカテゴリアーカイブページへのリンクリストを表示します。
日付ベースユーザーアーカイブ: 日付ベースのユーザーアーカイブページへのリンクリストを表示します。
最近のコメント: エントリにつけられた最近のコメント一覧を表示します。
最近のブログ記事: 最近のエントリリストを表示します。
月別アーカイブドロップダウン: 月別アーカイブのドロップダウンリストを表示します。
月別アーカイブリスト: 月別アーカイブページへのリンクリストを表示します。
検索フォーム: ブログ内検索を行う機能を表示します。
購読する: ブログのRSSフィードへのリンクを表示します。

ページ先頭へ

タグ:Template

再構築について

2008年3月 3日 21:59 | Writer: apstar | 記事本文

テンプレートを編集した場合は、再構築を行わなければ、変更部分はサイトに反映されません（ダイナミックパブリッシングを除く）。

通常は、管理画面右上にある「サイトを再構築」ボタンで再構築を行います。

再構築を行う対象を選択することができます。ページ数が多くなってくると、テンプレートの調整後に毎回全てのページを再構築していると、時間がかかり、Webサーバーに大きな負担をかけてしまいます。このような時は、「インデックスのみ」や「カテゴリアーカイブのみ」を選択して少ないページ数で再構築をかけ、再構築したファイルをを確認し、問題が無いのを確認してから、最後に「全てのファイル」を再構築するといいでしょう。

インデックステンプレートのみ、保存と再構築を同時に行うことができます。非常に便利です。

ページ先頭へ

タグ:Template

コンテキストとは

2008年3月 3日 22:12 | Writer: apstar | 記事本文

テンプレートのカスタマイズを行い、再構築したところ次のようなエラーが表示されることがあります。これはコンテキストを無視したテンプレートタグの記述が原因です。

このエラーは、MTEntryTitleというテンプレートタグは、MTEntriesブロックタグの中、あるいはエントリページのテンプレート（ブログ記事テンプレート）以外の場所で、いきなりMTEntryTitleテンプレートタグを用いた場合などによく目にします。

ファンクションタグに注意しましょう。ブロックタグ MTEntries 中にファンクションタグ MTEntryTitle を書けば、（たいていは）どこへ書いてもエラーにはなりません。これは、MTEntriesで得られる「エントリの集団」の中からMTEntryTitleで得られる「エントリのひとつ」は、必ず見つかるからです。

また、ブログ記事テンプレート中でいきなりMTEntryTitleファンクションタグでエントリをひとつ見つけようとした場合は、そのテンプレートで生成されるそのものがエントリであるために、EntryTitleは必ずひとつ見つかります。よって、エラーとはなりません。

これに対し、メインページ中やブログ記事リストにいきなりMTEntryTitleファンクションタグを書いてエントリをひとつ見つけようとした場合は、コンテキストエラーとなります。Movable Typeは、メインページやブログ記事リストのテンプレート中でMTEntryTitleテンプレートタグでエントリ名を要求されても、それがどのエントリであるかを判断できないからです。

ページ先頭へ

タグ:Template

アーカイブマッピングとは

2008年3月 3日 22:39 | Writer: apstar | 記事本文

アーカイブテンプレートのみ、専用のアーカイブマッピングを持っています。

アーカイブテンプレート: ウェブページ; ブログ記事; ブログ記事リスト

アーカイブマッピングとは、アーカイブテンプレートが多数のファイルの雛形となるために、これらファイルをどういうルールに従って出力させるかをあらかじめ決めておくことです。

もし、多数の出力ファイルを一箇所へ詰め込めば、ファイル名重複の恐れが発生しやすくなりますし、何よりディレクトリの概念によるスマートなファイル管理ができません。

これはブログ記事（エントリ）のアーカイブマッピングですが、多くの種類があります。使途に応じて選択すればいいと思います。

注意点ですが、サイトの運用中にアーカイブマッピングを変更すると、変更前まで生成されたページは管理されなくなりますので、サイトの公開前にアーカイブマッピングについての十分な検討が必要です。

ページ先頭へ

タグ:Template

モジュールの追加方法

2008年3月 3日 23:00 | Writer: apstar | 記事本文

モジュールは新しく作成することができ、そのモジュールをインクルードすることもできます。デフォルトテンプレートにない機能を追加することも可能です。

例として、XML宣言をモジュール化してインクルードする例を説明します。

テンプレートモジュールの一覧を表示します。

「モジュールテンプレートを作成」をクリックします。

モジュール名に「mdlXMLDec」と入れ、XML宣言のコードを記述します。

コード

<? echo('<?xml version="1.0" encoding="UTF-8"?>') ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

このモジュールをインクルードするテンプレートの先頭行へ、