背景

　MovableType の記事編集画面から実際の出力に近い見栄えでプレビューを行うために、 エントリーのプレビューを行うプラグイン を導入してプレビュー機能を拡張する方法や、また WYSIWYG という点から、 Movable Typeで使えるWYSIWYGエディタを導入するなどの hack が既に幾つか公開されています。 しかしながら、これらの方法を見ると、新しくプラグインを導入したり、プレビュー用のテンプレートを別に用意したり、 MovableType のバージョンに依存したりと、誰もが手軽に導入するには少し敷居が高いように思えます。 後者のWYSIWYGエディタについても、文字装飾の効果をその場で確認できるものの、 サイト上で最終的に得られる見栄えについては対応しきれません。

　先日、 "[ajax]quickedit - HTMLリアルタイム編集（ブックマークレット）"という記事で、 子ウィンドゥの編集結果を JavaScript を使って親ウィンドゥに反映するアイディアを目にしたのですが、 これと同じように――今度は逆に―― 親ウィンドゥ(MTの記事編集画面)の編集操作を子ウィンドゥ(プレビューウィンドゥ)に反映できないだろうか、 と思い立ったのが事の始まりです。
　この記事で紹介している方法では現在、 エントリの内容(body)と追記(extend)のみプレビュー可能で、 タイトルやカテゴリなどの変更はプレビューに反映されません。 それは、実際の見栄えを確認しながら編集作業を行いたい部分を思い浮かべてみると、 上記二つの編集内容がプレビューできれば十分に思えるからです。

特徴

• 最終的なサイト上の見栄えに極めて近いプレビューが可能です
• 編集操作がリアルタイムにプレビューに反映されます
• そのため、プレビューの度に確認ボタンを押すなどの操作を一切必要としません
• 既にページに埋め込まれた JavaScript や PHP などのコードはプレビューに反映されます
• Bookmarklet として動作するので、別途プラグインを導入するなどの手間がかかりません
• そのため、(今のところ) MovableType のバージョンに依存しません
• 更には、MovableType 以外の CMS にも流用できる可能性があります(誰か作って)
• 加えて、プレビューの際にサーバ負荷を生じません
• テキストを置換/整形するようなフィルタプラグインの結果が反映されません

使い方

1. 記事プレビュー用の Bookmarklet をブックマークに登録します(後述)
2. MovableType のエントリーの編集画面を開きます
3. 1. でブックマークした Bookmarklet を開きます
4. 新しくプレビューウィンドゥが開きます
5. エントリーの編集画面で記事を編集すると、その結果がプレビューウィンドゥに反映されます

Bookmarklet は一度だけ開いてください

プレビューウィンドゥを閉じた時は、再度 Bookmarklet を開いてください

エントリを保存した時は、再度 Bookmarklet を開いてください

Bookmarklet を登録する

　Bookmarklet はそれぞれの環境に応じて異なったものになります。 登録に先立って、以下のフォームをあなたの MovableType やサイトに合わせて適切に設定してください。 フォームの内容に応じた Bookmarklet が自動的に生成されます。

記事の出力結果を確認するためのページのURL(テンプレート)：

… プレビューのテンプレートとして使用するページのURLを指定します。 具体的には、あなたのサイトの何れかの記事のパーマリンク URL です。 ここで指定されたページの body 部分と extend(more) 部分に編集中の内容を流し込むことで、 実際の出力結果に近い見栄えを得ることができます。

編集画面のエントリーの内容(body)部分をテンプレートで確認する
 ┗ テンプレート中のID：
… body 部分のプレビューを行う場合にチェックしてください。 そして次に、上で指定したページの中で body 部分が流し込まれる要素(例えばdivやp)の ID を指定してください。 body 部分に ID の指定が無い場合、お手数ですがエントリアーカイブテンプレートを修正して頂く必要があります。
例えば、あなたのサイトのエントリアーカイブテンプレートに以下の様にあった場合、 テンプレート中のIDには MyIdOfBody と指定してください。 ： <div id="MyIdOfBody"> <$MTEntryBody$> </div> ：

編集画面の追記(extend)部分をテンプレートで確認する
 ┗ テンプレート中のID：
… extend(more) 部分のプレビューを行う場合にチェックしてください。 そして次に、上で指定したページの中で extend(more) 部分が流し込まれる要素(例えばdivやp)の ID を指定してください。 extend(more) 部分に ID の指定が無い場合、お手数ですがエントリアーカイブテンプレートを修正して頂く必要があります。

　上のフォームが適切に設定されたら、この Bookmarkletへのリンクをあなたのブックマークに追加してください。 なお、登録される Bookmarklet の内容は以下の通りです。

Bookmarklet を登録するには、上のリンクを右クリック→[このリンクをブックマーク]で行えます(Firefoxの場合)

上で入力されたダブルクォート(")およびシングルクォート(')のサニタイズを行っていません。

トラブルシューティング

プレビューウィンドゥが開かない

ブラウザのポップアップブロックが動作していないか確認してください

テンプレートに指定されたページのURLが正しいか確認してください

Bookmarklet を開くと "Previewing Failure." とメッセージが表示される

MovableType のエントリ編集画面を開いている状態で Bookmarklet を実行してください

MovableType の将来のバージョンでは動作しないかもしれません

編集内容がプレビューに反映されない

Bookmarklet を登録する前に、それぞれのフォームの ID を正しく設定してください

mt.cgi とプレビュー用のページが同じドメインであるか確認してください

もう一度 Bookmarklet を開いてみてください。編集の結果は最新のプレビューウィンドゥに反映されます

ブラウザが落ちることがある

記事がHTMLタグを含む場合、編集過程で不正なHTMLの状態でページがレンダリングされるためと考えられます。意識的に閉じタグから先に書くことで、ブラウザに優しい場合があります

雑記

• Windows 2000 上の Firefox 1.x、IE 6.0 で動作確認済み
• MovableType 3.151ja、3.2ja2 で動作確認済み