MovableTypeで編集中の記事をリアルタイムにプレビューする

Posted by
ぴろり
Posted at
2006/01/05 23:36
Trackbacks
関連記事 (2)
Comments
コメント (1)
Post Comment
コメントできます
Category
MovableType カテゴリ

 MovableType の編集画面には、編集中の内容をプレビューできる確認ボタンがありますが、テンプレートやスタイルシートを派手にカスタマイズしている場合、このプレビューと実際に出力されたページの見栄えが大きく異なってしまいます。
 そこで今回、編集中の内容を実際の見栄えに極めて近い状態でリアルタイムにプレビューできるようにしてみました。これをユーザサイドで動作する Bookmarklet として提供することで、別途プラグインを導入するなどの手間を省き、プレビューの度にサーバ負荷をかけない快適な WYSIWYG (What You See Is What You Get) 編集を実現しています。

この記事を Delicious に追加する   このエントリーをはてなブックマークに追加  

背景

 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 で動作確認済み
この記事を Delicious に追加する   このエントリーをはてなブックマークに追加  



関連記事/トラックバック (全 2 件中、最新 5 件まで表示しています)

Open MagicVox.net のスクリーンショット
タイトル
MovableTypeで編集中の記事をRealtimePreviewするプラグイン
Trackbacked at
2006/02/07 16:53
from
Open MagicVox.net
概要
 スタイルシートやテンプレートを大きくカスタマイズしている場合でも、 実際の見た目に近いプレビューを得られるブックマークレットを、 今回、MovableType...

Open MagicVox.net のスクリーンショット
タイトル
mixiで執筆中の日記をリアルタイムにプレビューする
Trackbacked at
2006/01/08 12:48
from
Open MagicVox.net
概要
 mixi のプレミアム会員になると、 自分の日記でフォントのサイズや色を変えたりできるようになります。 色々とフォント弄りをした場合、その見栄えがどのようにな...

この記事にトラックバックを送るには?

寄せられたコメント (全 1 件中、最新 5 件まで表示しています)

Posted by
ぴろりぴろり
at
2006/01/07 16:23
ID
9YbtGFm.
当サイトの"最近の注目記事(左サイドバー部分)"のように、
各記事へのアクセスログから hot entry を抽出している場合など
管理者のプレビューがこれらの集計結果に影響を与える場合があります。
そういう場合、プレビュー用のダミー記事を static に生成しておき
そちらをプレビュー用のページとして指定してやれば回避できます。

コメントを投稿する

 
 (必須, 匿名可, 公開, トリップが使えます)
 (必須, 匿名可, 非公開, Gravatar に対応しています)
 (必須)
スパム コメント防止のため「投稿確認」欄に ランダムな数字 CAPTCHAについて を入力してから送信してください。お手数ですがご協力のほど宜しくお願いいたします。