エントリーのプレビューを行うプラグイン(その2）

8.プレビュー用テンプレートの指定

Movable Typeの管理画面（mt.cgi）にログインして、「利用可能なプラグインの設定」の部分で「Tags For Preview」を探し、そのリンクをクリックします。

複数のBlogを管理している場合は、Blogを選ぶ画面が表示されます。プレビュー表示できるようにするBlogを選んで、「送信」ボタンをクリックします。

次に、インデックステンプレートの名前が一覧表示されます。プレビュー用のテンプレートを選択して、「保存」ボタンをクリックします。
プレビュー用テンプレートを複数作った場合は、それらすべてを選択してください。Windowsなら、Ctrlキーを押しながらクリックすることで、複数のテンプレートを選択することができます。

9.edit_entry.tmplにJavaScriptを追加する

次に、エントリーの編集画面のテンプレートに、JavaScriptを追加します。
MTのディレクトリ→tmplディレクトリ→cmsディレクトリの中に、「edit_entry.tmpl」というファイルがあります。
その先頭の方に、JavaScriptのタグ（<script type="text/javascript"><!--）がありますので、その直後に以下のスクリプトを追加します。

function doRebuildPreview () {
window.open('mt-rebuild-preview.cgi?__mode=start_rebuild&blog_id=<TMPL_VAR NAME=BLOG_ID>&entry_id=<TMPL_VAR NAME=ID>', 'doRebuildPreview', 'width=400,height=250,resizable=yes,scrollbars=yes');
}

10.edit_entry.tmplにPreviewボタンを追加する

次に、edit_entry.tmplに、「Preview on Blog」のボタンを追加します。

まず、edit_entry.tmplの中で、以下の部分を検索します。

<TMPL_IF NAME=POSITION_BUTTONS_TOP>
<div id="button-bar">
<input type="submit" name="preview_entry" value="<MT_TRANS phrase="Preview">" />

この部分を以下のように書き換えます（赤字が追加する部分）。

<TMPL_IF NAME=POSITION_BUTTONS_TOP>
<div id="button-bar">
<TMPL_UNLESS NAME=NEW_OBJECT>
<input class="button" onClick="doRebuildPreview()" type="button" value="<MT_TRANS phrase="Preview on Blog">">  
</TMPL_UNLESS>
<input type="submit" name="preview_entry" value="<MT_TRANS phrase="Preview">" />

次に、以下の部分を検索します。

<TMPL_IF NAME=POSITION_BUTTONS_BOTTOM>
<div id="button-bar">
<input type="submit" name="preview_entry" value="<MT_TRANS phrase="Preview">" />

この部分を以下のように書き換えます（赤字が追加する部分）。

<TMPL_IF NAME=POSITION_BUTTONS_BOTTOM>
<div id="button-bar">
<TMPL_UNLESS NAME=NEW_OBJECT>
<input class="button" onClick="doRebuildPreview()" type="button" value="<MT_TRANS phrase="Preview on Blog">">  
</TMPL_UNLESS>
<input type="submit" name="preview_entry" value="<MT_TRANS phrase="Preview">" />

書き換えが終わったら、edit_entry.tmplファイルを、MTのディレクトリ→tmplディレクトリ→cmsディレクトリにアップロードします。

11.プレビューを行う

エントリー編集画面で、下書きにしたエントリーを開きます。
すると、「保存」や「確認」などのボタンの左に、「Preview on Blog」のボタンが表示されます。
そのボタンをクリックすると、8.で指定したテンプレートが自動的に再構築されます。
しばらくすると、「プレビューの準備ができました」と表示され、その下にプレビュー用テンプレートの名前が一覧表示されます。
各テンプレートの名前をクリックすると、別ウィンドウが開き、そのテンプレートのプレビューが表示されます。
これ以後は、エントリーを新規作成して下書きで保存し、11.の作業を行えば、エントリーをプレビューすることができます。

なお、プレビューは以下のように表示されます。

カテゴリーアーカイブと日付アーカイブのページでは、エントリーは通常は日付順で表示されます。
プレビューするエントリーよりも日付の新しいエントリーがある場合は、それも含めて日付順になります。
そのため、プレビューするエントリーがページの先頭に来ない場合もあります。

12.注意事項

このプラグインでは、インデックステンプレートを、各種のアーカイブテンプレートのように動作させるという手法をとっています。
すべてのテンプレートタグで動作を確認したわけではありませんので、中には動作しないタグがあるかも知れません。

なお、Movable Type標準のテンプレートと、小粋空間様のテンプレートでは、当方の環境では動作することを確認しています。