MovableType の編集画面には、編集中の内容をプレビューできる確認ボタンがありますが、テンプレートやスタイルシートを派手にカスタマイズしている場合、このプレビューと実際に出力されたページの見栄えが大きく異なってしまいます。
そこで今回、編集中の内容を実際の見栄えに極めて近い状態でリアルタイムにプレビューできるようにしてみました。これをユーザサイドで動作する Bookmarklet として提供することで、別途プラグインを導入するなどの手間を省き、プレビューの度にサーバ負荷をかけない快適な WYSIWYG (What You See Is What You Get) 編集を実現しています。
MovableType の記事編集画面から実際の出力に近い見栄えでプレビューを行うために、エントリーのプレビューを行うプラグインを導入してプレビュー機能を拡張する方法や、またWYSIWYGという点から、Movable Typeで使えるWYSIWYGエディタを導入するなどの hack が既に幾つか公開されています。しかしながら、これらの方法を見ると、新しくプラグインを導入したり、プレビュー用のテンプレートを別に用意したり、MovableType のバージョンに依存したりと、誰もが手軽に導入するには少し敷居が高いように思えます。後者のWYSIWYGエディタについても、文字装飾の効果をその場で確認できるものの、サイト上で最終的に得られる見栄えについては対応しきれません。
先日、"[ajax]quickedit - HTMLリアルタイム編集(ブックマークレット)"という記事で、子ウィンドゥの編集結果を JavaScript を使って親ウィンドゥに反映するアイディアを目にしたのですが、これと同じように――今度は逆に――親ウィンドゥ(MTの記事編集画面)の編集操作を子ウィンドゥ(プレビューウィンドゥ)に反映できないだろうか、と思い立ったのが事の始まりです。
この記事で紹介している方法では現在、エントリの内容(body)と追記(extend)のみプレビュー可能で、タイトルやカテゴリなどの変更はプレビューに反映されません。それは、実際の見栄えを確認しながら編集作業を行いたい部分を思い浮かべてみると、上記二つの編集内容がプレビューできれば十分に思えるからです。
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の場合)
上で入力されたダブルクォート(")およびシングルクォート(')のサニタイズを行っていません。
寄せられたコメント (全 1 件中、最新 5 件まで表示しています)
各記事へのアクセスログから hot entry を抽出している場合など
管理者のプレビューがこれらの集計結果に影響を与える場合があります。
そういう場合、プレビュー用のダミー記事を static に生成しておき
そちらをプレビュー用のページとして指定してやれば回避できます。