小粋空間  -  a cheap joke and a play on words site

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

The blog of H.Fujimoto でお馴染みの壱さんが作られた「エントリーのプレビューを行うプラグイン」のカスタマイズをご紹介します。

Movable Type のエントリーのプレビューは「確認」をクリックすることで出来栄えを見ることができますが、管理用のCSSを用いているため、またHTMLの構造も公開ページと異なるため、実際に公開した時に予想しない表示になっていて慌てて修正することがしばしばありました。
このプラグインは、メインページや各アーカイブと同じテンプレートを使って、いわゆる「隠しページ」を生成し、それを参照することで公開前に表示を確認できるというものです。

ちょっと前から使わせて頂いているのですが、段落・リスト・表・画像等の確認がじっくり行えます。今まではある意味勘で作成・修正していたので、かなり重宝しています。

ということで以下、カスタマイズ方法です。内容は壱さんのページと同じですが、とりあえずメインページのプレビューに着目して書いてみました。

１．プラグインのダウンロード
The blog of H.Fujimoto：エントリーのプレビューを行うプラグイン(その1）
より mt-rebuild-preview.zip のリンクをクリックしてプラグインアーカイブをダウンロードします。

２．ファイルのアップロード
アーカイブを解凍すると下記のファイルがあります。

mt-rebuild-preview.cgi

/extlib/FJ/RebuildPreview.pm

/plugins/TagsForPreview.pl

/tmpl/cms/rebuild_preview.tmpl

これらのファイルを、MTCGIPath をルートパスとして、同じ名称のディレクトリ配下にそれぞれアップロードします。例えば mt-rebuild-preview.cgi は mt.cgi と同じディレクトリに、TagsForPreview.pl は plugins ディレクトリ配下にアップロードします。存在しないディレクトリ（FJ）は新たに作成してください。mt-rebuild-preview.cgi のパーミッションは 755 等に変更してください。

３．メインページプレビュー用テンプレート作成
管理画面の「テンプレート」の右上にある「インデックステンプレートの作成」をクリックし、
次のページでそれぞれ以下のように設定します。

テンプレートの名前：メインページプレビュー（何でもいいです）

出力ファイル名：preview.html

再構築オプション：チェックを外す

テンプレートの中身：メインページの中身を丸ごとコピー

出力ファイル名はここでは preview.html としましたが、他の方に参照されない名称にしてください。またメインページが index.php の場合は preview.php としてください。

４．テンプレートの修正
プレビュー用テンプレートの下記の赤色部分 MTEntries を青色のように MTEntries WithDraft に変更します。

修正前

　　　　　：
<MTEntries lastn="5">
<$MTEntryTrackbackData$>
　　　　　：
</MTEntries>
　　　　　：

修正後

　　　　　：
<MTEntriesWithDraft lastn="5">
<$MTEntryTrackbackData$>
　　　　　：
</MTEntriesWithDraft>
　　　　　：

修正が終わったら、保存・再構築します。出力ファイル名を指定して表示されていればここまでの設定はOKです。

５．プレビュー用テンプレートの関連付け
３?４項で作成したテンプレートをプレビュー用テンプレートとして関連づける作業を行います。

メインメニュー下にある「利用可能なプラグインの設定」で Tags For Preview のリンクをクリックします。

複数のブログを作っている場合は、画像のようにブログ選択画面が表示されます。プレビュー表示したいブログを選択して「送信」ボタンをクリックします。

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

６．管理画面にプレビュー用の設定を追加
/tmpl/cms/edit_entry.tmpl を任意のエディタで開き、青色部分を追加します。各行数は追加した後の行数になっていますので、目安にしてください。2番目と3番目の追加は緑色の行で検索すると便利です。

5行目あたり

<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');
}
 
function listPreviousPings () {
    window.open('<TMPL_VAR NAME=SCRIPT_URL>?__mode=pinged_urls&entry_id=<TMPL_VAR NAME=ID>&blog_id=<TMPL_VAR NAME=BLOG_ID>', 'urls', 'width=370,height=250,resizable=yes,scrollbars=yes');
}

130行目辺り

<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">" />
<input type="submit" value="<MT_TRANS phrase="Save">" />
<TMPL_UNLESS NAME=NEW_OBJECT>
<input onclick="doRemoveItem('<TMPL_VAR NAME=ID>', 'entry&blog_id=<TMPL_VAR NAME=BLOG_ID>')" type="button" value="<MT_TRANS phrase="Delete Entry">" />
</TMPL_UNLESS>
</div>
</TMPL_IF>

330行目辺り

<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">" />
<input type="submit" tabindex="13" value="<MT_TRANS phrase="Save">" />
<TMPL_UNLESS NAME=NEW_OBJECT>
<input onclick="doRemoveItem('<TMPL_VAR NAME=ID>', 'entry&blog_id=<TMPL_VAR NAME=BLOG_ID>')" type="button" value="<MT_TRANS phrase="Delete Entry">" />
</TMPL_UNLESS>
</div>
</TMPL_IF>

ここまでの作業が終わればメインページのプレビューができる状態になります。

７．プレビューする

プレビューの方法は、編集したエントリーに「Preview on Blog」というボタンが現れるので、これをクリックします。「確認」ボタンはエントリー保存前の状態でも可能ですが、「Preview on Blog」の場合は実行前に必ず「保存」をクリックしてください。

「Preview on Blog」をクリックするとウィンドウが開きます。そのウィンドウにプレビュー用ページの再構築状態とプレビューページのリンク（例はメインページのみ）が表示されます。リンクをクリックすると新しい画面が開いてそこにプレビュー画面が表示されます。 ここで表示されるウィンドウを消さずにそのままにしておけば、修正・プレビューを繰り返す毎に同じウィンドウに表示されます（タブブラウザでは新しいウィンドウが開くようです）。

８．ボタンを日本語化する
「Preview on Blog」を「プレビュー」等の日本語に変更したい場合は、lib/MT/L10N/ja.pm の任意の行に下記を追加します。

'Preview on Blog' => 'プレビュー',

９．他のアーカイブページをプレビューする場合
アーカイブページ（カテゴリーアーカイブ／日付アーカイブ／個別エントリーアーカイブ）のプレビューも行いたい場合は各アーカイブテンプレートを３項と同じ手順で作ります。アーカイブテンプレートではなくインデックステンプレートとして作りますのでご注意ください。
出力ファイル名はそれぞれ異なる名称にしてください。そしてそれぞれの「ファイルの中身」を下記のタグでテンプレート全体を括ってください。

カテゴリーアーカイブ

<MTPretendCategoryTemplate> ? </MTPretendCategoryTemplate> 

月別アーカイブ（日付アーカイブをコピー）

<MTPretendDateTemplate archive_type="Monthly"> ? </MTPretendDateTemplate>

週別アーカイブ（日付アーカイブをコピー）

<MTPretendDateTemplate archive_type="Weekly"> ? </MTPretendDateTemplate>

日別アーカイブ（日付アーカイブをコピー）

<MTPretendDateTemplate archive_type="Daily"> ? </MTPretendDateTemplate>

個別エントリーアーカイブ

<MTPretendIndividualTemplate> ? </MTPretendIndividualTemplate>

上記はデフォルトのアーカイブ設定状態を想定しています。例えば週別アーカイブテンプレートや・日別アーカイブテンプレートを月別アーカイブテンプレートと別に新しく作っている場合はそちらからコピーしてください。
設定後、５項の作業を行い、新しく作ったインデックステンプレートをプレビュー用としての関連付けを行います。

以上です。

2005.08.19 追記
８項にボタンの日本語化の項目を追加しました。