[Movable Type]編集中のエントリー（記事）を一般公開する前に、本番通りの見た目でプレビューするプラグイン2点

ディレクターの八木です。

オンタイムで情報を公開できるブログツールは、ビジネスサイトの活性化にとても役立つものです。
当社ではブログツールの一つMovable Typeでの導入をお手伝いすることが多いのですが、ブログサイトをリリースしてご担当者が実際に投稿をはじめた頃によくいただくご相談があります。

「編集中のエントリー（記事）を一般公開する前に、本番通りの見た目でプレビューできないでしょうか？」

Wordや一太郎なら「書いたモノ＝見えるモノ」があたりまえの世界でしょうが、Movable Type（に限らずほとんどのブログツール）では入力画面と実際にユーザが見るページとは別モノです。もちろん標準で簡易プレビュー機能は用意されていますが、スタイルシート等のカスタマイズ内容が反映されないので、実際のところは一旦公開してみないとわからない。特にスタイルシートやテンプレートを大きくカスタマイズすることの多いビジネスブログでは、プレビューと実際の差が大きいのは悩ましいところです。


標準機能のプレビューと、実際の書き出しページでは見た目が違いすぎる！


公開してからちょこちょこっと修正できるのはブログの良いところですが、個人ブログならまだしもビジネスブログだと「短時間とはいえユーザにお見苦しいところを見せたくない」という気持ちが働くからでしょう、前述のような「ご相談」となるわけです。

改めて調べてみると解決方法がいくつかありました。ネタとして目新しいわけではないのですが、ビジネスブログならではの切実な問題ということでここでご紹介しようと思います。

■□
□■【その1】BigPAPI + mt-rebuild-previewでプレビューを実現するH.fujimotoさんの方法

H.fujimotoさんが開発されたBigPAPI対応Pluginです。ちなみにBigPAPIは管理画面をカスタマイズするPluginで、それ自体ではなに も起こらず、BigPAPI対応Pluginと組んで初めてチカラを発揮する、そんな縁の下の力持ち的存在です。

The Blog of H.Fujimoto > エントリーのプレビューを行うプラグイン(Movable Type 3.2対応＆BigPAPI対応）
http://www.h-fj.com/blog/archives/2005/08/22-221120.php


Blog上での表示を確認する方法として、「MT-Preview」というプラグインを使う方法が知られています。
ただ、このプラグインには、以下のような弱点があります。
　 ・個別アーカイブのプレビューしかできない
　 ・テンプレートをPHP化していると、PHPのスクリプトの部分が動作しない
そこで、より使い良いプラグインを作ってみました。

※「MT-Preview」はもう長いこと作者のサイトにアクセスできない状態が続いており、残念ながら実際に確認してみることはできませんでした。また以前は確かSix ApartのPlugins Directoryにも登録されていたのですが、今日見に行ったら抹消されているようでした。

さて、mt-rebuild-previewに話を戻します。導入手順をざっくり説明すると、

  1. BigPAPIとRealtime Previewをインストール（指定のフォルダにアップロードしてパーミッション設定）
  2. プレビュー用のテンプレート作成（本番用のテンプレートのコピーに若干のタグ変更・追加）
    例えばエントリー・アーカイブのプレビュー用テンプレートなら、エントリーアーカイブテンプレートのソースコピーを<MTPretendIndividualTemplate>～</MTPretendIndividualTemplate>で囲みます。
  3. プラグインの一覧から「Tags For Preview」Pluginを選び、
  4. 設定画面でプレビューに使いたいテンプレートを指定
  5. エントリー編集画面に「Preview on Blog」ボタンが現れるので、クリックすると、「プレビューの準備ができました」と書かれた小Windowが開いて、プレビュー可能な画面（[3]で指定したものエントリーやメインページなど）のリンクが一覧表示されます。
  6. 目的のプレビューのリンクをクリックすると、プレビューが表示されます。


この方法の一番の特徴としては、個別のエントリーページだけでなく、メインページやカテゴリ・アーカイブのプレビューもできることでしょう。また、プレビューページは固有のURLで吐き出されるので、公開前に誰かに確認してもらいたい時なども便利かと思います。


■□
□■【その2】BigPAPI＋Realtime Previewでプレビューを実現するぴろりさんによる方法
こちらはぴろりさんが公開されているBigPAPI対応Pluginです。 ここで紹介するPlugin版の他にブックマークレット版も下記ページに公開されています。

Open MagicVox > MovableTypeで編集中の記事をRealtimePreviewするプラグイン
http://www.magicvox.net/archive/2006/02071650.php

導入方法は上記に詳しく書いてありますのでそちらをご参照いただきたいのですが、 手順としては、

  1. BigPAPIとRealtime Previewをインストール（指定のフォルダにアップロードするだけ）
  2. エントリーアーカイブテンプレートに直接プレビュー用のタグを追加します。
    通常なら<$MTEntryBody$>と書くところを
    <$MTEntryBody$>という風にプレビュー用のタグで囲みます。
    要素など表示と関係ない場所には追加不要のようです。
  3. エントリー編集画面に「Realtime Preview」と「削除」ボタンの2つが現れます。

    ★ブログ内の全エントリーが下書き状態だと、このボタンが表示されなくなるようなので注意です。1つでも公開状態のものがあれば、他のエントリーは下書き状態でもちゃんとプレビューできました。
  4. 「Realtime Preview」をクリックすると、別Windowが開いて、プレビューが表示されます

前述のmt-rebuild-preview Pluginとの違いは

　・プレビューできるのは個別エントリーのみ
　・プレビュー用のテンプレートを別に用意しなくてよい。

です。特に2番目については、本番用とプレビュー用が別だと、テンプレート変更の際にバージョンを合わせる気遣いがありますのでその意味でこちらの方が管理が楽だと思いました。

Realtime Preview Pluginの場合は、<$MTEntryBody$>などの入力パーツ単位でプレビュー用のタグ囲みをすることになるので、例えばRightFields PlugInなどを使って追加のMTタグがある場合はどう書くのかなど、次回以降でもう少しつっこんで試してみたいと思います。