Movable TypeのテンプレートをDreamweaverで効率よく作成する

Web サイトのコンテンツ管理システム（CMS）である「Movable Type（以下 MT）」は、多くの企業サイトへ導入されています。今やMT を Web サイトへ組み込むテクニックは、Web 制作に従事する者にとって必要な知識といえます。その中でも、ページデザインを指定する MT テンプレートのカスタマイズは特に重要な作業です。本記事では、Dreamweaver を使って効率よくオリジナルの MT テンプレートをコーディングする方法を紹介します。

MT テンプレートは、雛形となる Web ページを用意し、そこにMTシステムに登録したデータを出力するための MT 独自のタグ（以下 MTML ）を埋め込む方法で作成します。そのため、普段ページ制作で使用している Dreamweaver でのコーディング環境をそのまま生かして作業することができます。また、MTML を扱うための Dreamweaver 拡張機能や、CS5 で導入された新しいライブビューを使うことでより効率がアップします。

※この記事では、2つのソフトを使ってMT テンプレートをカスタマイズする手順を中心に解説するため、MT 管理画面や MTML の基本文法について細かく解説しません。公式サイトなどで確認してください。

作業前の準備

サーバーにMTをインストール

サーバーに MT をインストールし、ブログを作成します。また、必要な記事を書き込んでおきましょう。本記事では、Web サイトの新着ニュースを管理するためのブログを作成し、ニュース記事を3件登録した状態にしています。

雛形となる Web ページの作成

雛形となる Web ページを作成します（以下、MT テンプレート用ページ）。MT システムに登録したデータが出力される部分（ここでは「最新ニュース」）は、適当な仮データ を入れておきます。他のページ用データと混ざらないように、テンプレートデータ専用のフォルダ（ここでは tplフォルダ内）に保存します。

また、各ページで共通に使用する外部データ（背景や飾り用の画像ファイルや CSS ファイルなど）は、ローカルサイトの直下に作成します（ここでは CSS ファイルは直下、画像ファイルは img フォルダ内）。

拡張機能のインストール

Dreamweaver のコードヒントに MTML を表示する拡張機能をインストールします。リンク先の説明を読んでお好みの方を使ってください。

• Movable Type タグライブラリ(MT5 対応版)
  http://gabs.cc/blog/bun/topic20100205-1000.php
• MovableType5 用の Dreamweaver タグライブラリー
  http://dwlog.net/2009/12/movabletype5dreamweaver.html

準備が整ったら、MTテンプレートをカスタマイズしましょう。

MT テンプレートのカスタマイズの手順

ステップ1 MT テンプレート用ページを公開フォルダへアップロード

Dreamweaver で作成した MT テンプレート用ページを、サーバー上にあるブログの公開フォルダ内へアップロードします。この時、［サイト設定］ダイアログの［ルートディレクトリ］や［Web URL］を「ブログの公開フォルダ」をルートとして指定すると、この後の作業が楽に行えます。

ステップ2 MT テンプレート用ページと MT 管理画面を繋く

MTでは、管理画面のテンプレートの［ファイルへのリンク］に、サーバー内の外部ファイルのパスを指定することで、外部から MT テンプレートのソースコードを読み込むことができます。ここでは、 Dreamweaver で作成し、ステップ1でサーバーにアップロードしたMT テンプレート用ページを外部ファイルとして指定します。

MT 管理画面の［デザイン］-［テンプレート］メニューを実行し、［ブログテンプレート］から「メインページ」の詳細画面へ進みます。［テンプレートの設定］の［ファイルへのリンク］項目に、アップロードした MT テンプレート用ページをブログパスからの相対パスで指定して保存します。

※ブログパスは、MT 管理画面の［設定］-［全般］メニューの公開パスで確認ができます。

この時点で再構築をかけてトップページを確認すると、外部データのリンクはすべて切れています。なぜなら、MT テンプレート用ページから外部データを見たときのパスと、再構築の結果出力されたトップページから外部データを見たときのパスが異なるためです。

ステップ3 外部ファイルのパスの書き換え

ステップ2で外部データがリンク切れした状態を解決しましょう。MT テンプレート用ページにある外部データ（画像ファイルや CSS ファイルなど）のパスをサイトルートパス（/ブログ公開フォルダ/～）に書き換えます。この時、［検索/置換］機能を使うと便利です。

MT テンプレート用ページを再度アップロードし、再構築を行って確認すると外部データ部分が正しく表示されています。

MTテンプレートから参照する外部データのパスは、ブログの URL （サイト URL）を「http://」から始まる絶対 URL で出力する MTML タグ<$mt:BlogURL$>を使って指定を行うのが一般的です。しかし、外部データのパスに MTML タグを使用するとDreamweaver 上で外部データが閲覧できなくなるため、サイトルートパスを使用しています。

ステップ4 登録データを出力するための MTML の埋め込み

MT テンプレート用ページに、必要な登録データを MTシステムから呼び出すための MTML タグを埋め込みます。今回は以下のコード を埋め込みました。

MT テンプレート用ページを再度アップロードし、再構築を行って確認すると登録データが表示されています。

知っておくと便利なワンポイント機能

ライブビュー

ライブビューに切り替えると、ページに埋め込んだ MTML タグが表示されます。MTML タグの部分に CSS を指定する場合などに、通常のテキストと同じように作業することができます。例えば、MTML タグの部分を選択し、［CSS スタイル］パネルから新規セレクターを作成する場合などに便利です。

ブラウザーナビゲーション

ライブビュー時にブラウザーナビゲーションバーのオプションの「ドキュメントソースにテストサーバーを使用」と「ドキュメントのリンクにローカルファイルを使用」を指定した後に、アドレスに MT から出力されたページの URL を入力すると、ローカルに存在しない Web ページに適応されているローカルの外部 CSS ファイルの編集が行えます。

上記のようにするには、サイト定義のサーバー指定で［Web URL］の指定を行い、テストサーバーにチェックを入れる必要があります。

関連記事
MTDDC Tokyo テーマ編 「テーマ機能を使って、便利にテンプレートを管理しよう!」フォローページ
http://www.r360studio.com/mtddc100731/