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

Posted by
ぴろり
Posted at
2006/01/05 23:36
Trackbacks
関連記事 (2)
Comments
コメント (1)
Post Comment
コメントできます
Category
MovableType カテゴリ
　 の編集画面には、編集中の内容をプできる確認ボタンがありますが、 やスタイルシートを派手にしている場合、 このプと実際に出力されたページの見栄えが大きく異なってしまいます。
　そこで今回、編集中の内容を実際の見栄えに極めて近い状態で リアルタイムにプできるようにしてみました。 これをユーザサイドで動作する Bookmarklet として提供することで、 別途を導入するなどの手間を省き、プの度に負荷をかけない 快適な WYSIWYG(What You See Is What You Get)編集を実現しています。
この記事をはてなブックマークに追加する この記事のはてなブックマーク数 | この記事をlivedoorクリップに追加する この記事のlivedoorクリップ数 | この記事をYahooブックマークに追加する この記事のYahoo!ブックマーク数 | この記事をdel.icio.usに追加する | Twitterにポストする

    背景

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

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

    特徴

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

    使い方

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

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

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

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

    Bookmarklet を登録する

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

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

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

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

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

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

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

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

    トラブルシューティング

    プウィンドゥが開かない
    のポップアップブロックが動作していないか確認してください
    に指定されたページのURLが正しいか確認してください
    Bookmarklet を開くと "Previewing Failure." とメッセージが表示される
    のエントリ編集画面を開いている状態で Bookmarklet を実行してください
    の将来のバージョンでは動作しないかもしれません
    編集内容がプに反映されない
    Bookmarklet を登録する前に、それぞれのフォームの ID を正しく設定してください
    mt.cgi とプ用のページが同じドメインであるか確認してください
    もう一度 Bookmarklet を開いてみてください。編集の結果は最新のプウィンドゥに反映されます
    が落ちることがある
    記事がタグを含む場合、編集過程で不正なの状態でページがレンダリングされるためと考えられます。意識的に閉じタグから先に書くことで、に優しい場合があります

    雑記

    この記事を読んだ人はこんな記事も読んでいます 記事リコメンデーションについて

    その他の関連する記事

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

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

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

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

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

    Posted by
    ぴろり
    at
    2006/01/07 16:23
    ID
    9YbtGFm.

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

    全てのコメントを見る (全 1 件)

    コメントを投稿する

     
     (匿名可/必須/公開)
     (匿名可/必須/非公開)
     (必須)
    コメントスパム防止のため投稿前に ランダムな数字 CAPTCHAについて を入力してから投稿してください。お手数ですがご協力のほど宜しくお願いいたします。
     
    MovableType, NovableType, JovableType, KovableType, MIvableType, M9vableType, M0vableType, MPvableType, MLvableType, MKvableType, MoCableType, MoFableType, MoGableType, MoBableType, MovQbleType, MovWbleType, MovSbleType, MovZbleType, MovaVleType, MovaGleType, MovaHleType, MovaNleType, MovabKeType, MovabOeType, MovabPeType, MovablWType, Movabl3Type, MovablRType, MovablDType, MovablSType, MovableRype, Movable5ype, Movable6ype, MovableYype, MovableGype, MovableFype, MovableTTpe, MovableT6pe, MovableT7pe, MovableTUpe, MovableTHpe, MovableTGpe, MovableTyOe, MovableTy0e, MovableTy-e, MovableTyLe, MovableTypW, MovableTyp3, MovableTypR, MovableTypD, MovableTypS Hack, Gack, Yack, Uack, Jack, Nack, Back, HQck, HWck, HSck, HZck, HaXk, HaDk, HaFk, HaVk, HacJ, HacI, HacO, HacL, HacM Ajax, Qjax, Wjax, Sjax, Zjax, AHax, AUax, AIax, AKax, AMax, ANax, AjQx, AjWx, AjSx, AjZx, AjaZ, AjaS, AjaD, AjaC JavaScript, HavaScript, UavaScript, IavaScript, KavaScript, MavaScript, NavaScript, JQvaScript, JWvaScript, JSvaScript, JZvaScript, JaCaScript, JaFaScript, JaGaScript, JaBaScript, JavQScript, JavWScript, JavSScript, JavZScript, JavaAcript, JavaWcript, JavaEcript, JavaDcript, JavaXcript, JavaZcript, JavaSXript, JavaSDript, JavaSFript, JavaSVript, JavaScEipt, JavaSc4ipt, JavaSc5ipt, JavaScTipt, JavaScFipt, JavaScDipt, JavaScrUpt, JavaScr8pt, JavaScr9pt, JavaScrOpt, JavaScrKpt, JavaScrJpt, JavaScriOt, JavaScri0t, JavaScri-t, JavaScriLt, JavaScripR, JavaScrip5, JavaScrip6, JavaScripY, JavaScripG, JavaScripF ブックマークレット