• 更新:
  • 投稿:
  • カテゴリィ:

実際に公開するデザインでプレビュー

The blog of H.Fujimoto:エントリーのプレビューを行うプラグイン(MT3.2/3.3対応版) で公開されているプラグインを導入しました。これは、実際に公開する記事のデザインでプレビューできる MT 用プラグインです。

いままで導入していなかったのが悔やまれるほど、便利なプラグインです。導入も「プラグインディレクトリにぶっこみんぐ & CGI のパーミッション変更~」と簡単──といいたいところですが、プレビュー専用のテンプレートを作成する必要があります。

The blog of H.Fujimoto:エントリーのプレビューを行うプラグイン(その1) の 5 番の作業がテンプレート作成になります。要するに、プレビューを行いたいテンプレートをコピーして、専用タグで挟み込むだけです。

自分の場合、<head>……</head> の中にある CSS へのリンクや記事を挟み込む <div>……</div> など、必要なところだけを残して、ナビゲーション部分などは削除しました。

自動的にプレビューを表示

記事を下書き状態のまま保存すると、「プレビュー」ボタンが現れます。このボタンを押すと新しくウィンドウが開き、プレビュー用のテンプレートが再構築されます。再構築が終わると、プレビュー画面へのリンクが現れます。

しかし、どうせなら自動的に開く方が便利なので、3 分間ハッキングしてみました。

3 分間ハッキング

mtdir/plugins/RebuildPreview/tmpl/rebuildpreview.tmpl を開き、下記の行(35 行めくらい)を見つけます。

<TMPL_IF NAME=FUNC_END_REBUILD>
<!-- 再構築終了メッセージ 開始 -->
<h4 class="message">プレビューの準備ができました</h4>
<p>
<TMPL_LOOP NAME=TEMPLATE_LOOP>
<a href="<TMPL_VAR NAME=TEMPLATE_URL>" target="mt_preview_template"><TMPL_VAR NAME=TEMPLATE_NAME></a><br />
</TMPL_LOOP>
</p>
<!-- 再構築終了メッセージ 終了 -->
</TMPL_IF>

そして、次のように変更します。リンクのすぐ上に JavaScript を入れるだけですね。

<TMPL_IF NAME=FUNC_END_REBUILD>
<!-- 再構築終了メッセージ 開始 -->
<h4 class="message">プレビューの準備ができました</h4>
<p>
<TMPL_LOOP NAME=TEMPLATE_LOOP>
<script language="javascript" type="text/javascript">
<!--
function doRedirectPreview () {
    window.location = "<TMPL_VAR NAME=TEMPLATE_URL>";
}
setTimeout('doRedirectPreview()', 200);
-->
</script>
<a href="<TMPL_VAR NAME=TEMPLATE_URL>"><TMPL_VAR NAME=TEMPLATE_NAME></a><br />
</TMPL_LOOP>
</p>
<!-- 再構築終了メッセージ 終了 -->
</TMPL_IF>

これで、「プレビュー」ボタンを押してから実際にプレビューが表示されるまでが自動になりました。便利!

文法チェックプラグインとの融合(?)

MovableTypeで編集中の記事をお手軽文法チェックするプラグイン - Open MagicVox.netAnother HTML-lint を利用した (X)HTML 文法のチェックを行う MT プラグインが公開されています。

エントリープレビュープラグインと文法チェックプラグインが一体化したら、もの凄く便利そう。プレビューするだけで、文法チェックも同時に行うわけですね。

まぁ──年明けあたりに挑戦してみよう、かな(叙述トリック──何年かは書いていない)。

[2] このページの一番上へ戻る