この記事の内容は、時間経過およびプログラムやシステムのバージョン アップなどの事情によって、現状に正しくそぐわない内容、またはそれどころか、場合によっては問題を引き起こす可能性があります。参考程度に留め、関連記事アーカイブを検索してみてください。

MovableType で編集中の記事を Realtime Preview するプラグイン:RealtimePreview

Posted by
ぴろり
Posted at
2006/02/07 16:50
Trackbacks
関連記事 (3)
Comments
コメント (4)
Post Comment
コメントできます
Category
プラグイン カテゴリ

 スタイルシートやテンプレートを大きくカスタマイズしている場合でも、実際の見た目に近いプレビューを得られるブックマークレットを、今回、MovableType のプラグインとして更にお手軽便利に使えるようにしてみました。
 ブックマークレット版は環境を選ばずに手軽に試せるという点がメリットに挙げられますが、その一方で、プレビューのために URL を入力したり、個別アーカイブのテンプレートを書き換えたりと導入に際してイケてない部分が多々ありました。快適な WYSIWYG(What You See Is What You Get)環境をできるだけ簡単に導入でき、更にスマートにお使い頂けるようにしています。

このエントリーをはてなブックマークに追加  

特徴と使い方

  • スタイルシートやテンプレートをカスタマイズしている場合でも、実際の見た目でプレビューできます
  • MovableType のテキストエリアに入力したその瞬間にプレビューできます
  • 従来のように"確認"ボタンを押す必要がありません
  • プレビューの度にサーバに問い合わせないのでサクサク快適です
  1. "Realtime Preview"ボタンを押します
  2. 新しくプレビュー用ウィンドゥが開きます
  3. 気にせず MovableType で記事を編集します
  4. プレビュー用ウィンドゥに変化が…!!

動作環境

  • MovableType 3.2ja2 以上、あるいは MovableType 3.16 以上
  • BigPAPI 1.04 以上が正しく導入されていること
  • perl 5.8 以上を推奨(perl 5.0x は未検証)

導入方法

  1. メニューから BigPAPI プラグイン がインストール済みであることを確認します
  2. パッケージに含まれるファイルを MovableType の plugins にコピーします
  3. メニューから Realtime Preview プラグインが追加されていることを確認します
  4. エントリの編集画面の "確認" ボタンの隣に "Realtime Preview" ボタンが追加されます
  5. 個別アーカイブテンプレートを修正します(次章を参照ください)
  6. 導入完了

ブログに公開されている記事が一つも無い場合、プラグインは動作しません。

個別アーカイブの修正

 残念ながらプラグインファイルをコピーしただけでは使えません。 お手数ですが個別アーカイブのテンプレートについても忘れずに修正をお願いいたします。

書換え前書換え後
<$MTEntryTitle$> <MTRealtimePreview field="title"><$MTEntryTitle$></MTRealtimePreview>
<$MTEntryBody$> <MTRealtimePreview field="text"><$MTEntryBody$></MTRealtimePreview>
<$MTEntryMore$> <MTRealtimePreview field="text_more"><$MTEntryMore$></MTRealtimePreview>
<$MTEntryKeywords$> <MTRealtimePreview field="text"><$MTEntryKeywords$></MTRealtimePreview>
<$MTEntryExcerpt$> <MTRealtimePreview field="excerpt"><$MTEntryExcerpt$></MTRealtimePreview>

 その後、個別アーカイブ(エントリアーカイブ)全部を再構築しておきます。

テンプレートタグの詳細

MTRealtimePreviewID タグ
MovableType の編集画面で入力された内容が、リアルタイムに反映される領域のためのユニークな ID 文字列を返します。 後述の MTRealtimePreview コンテナタグを使う方が簡単な場合があります。 field 属性が必須です。
<div id="<$MTRealtimePreviewID field="title"$>"><$MTEntryTitle$></div>
MTRealtimePreview コンテナタグ
MovableType の編集画面で入力された内容が、リアルタイムに反映される領域を指定します。 具体的には、このタグに含まれる領域が <span id="..."></span> で括られるだけです。 この span 領域は見た目に影響を与えません。 field 属性が必須です。
<MTRealtimePreview field="title"><$MTEntryTitle$></MTRealtimePreview>

MTRealtimePreview、MTRealtimePreviewID は何度でも使えます。

MTRealtimePreview をネストすることはできません。

MTRealtimePreview はプレビューのための エレメントを生成しますが、 これが問題になる場合は MTRealtimePreviewID で個別に回避してください。

ダウンロード

注意事項

  • ブラウザのポップアップブロック機能により、プレビューウィンドゥが開かない場合があります
    →ポップアップブロック機能をオフにしてください
  • JavaScriptが有効になっていない場合、プレビュー機能が使用できません

トラブルシューティング

"Realtime Preview"ボタンがありません
  • 別途、BigPAPI プラグイン が正常にインストールされているか確認してください
  • 他サイトで紹介されているカスタマイズ(特に *.tmpl を書き換えるもの)が併用されていないか確認してください
  • ブログで公開されている記事が 1 つ以上あるか確認してください
タイプした内容がプレビューウィンドゥに反映されません
  • 個別アーカイブテンプレートが正しく修正されているか確認してください
  • 個別アーカイブがその後、再構築されているか確認してください
  • MovableType 管理画面(mt.cgi)と個別アーカイブページが同じドメイン(http://www.example.com/の部分)にあるか確認してください
タイプした部分が全部見えなくなりました
  • HTML タグを入力している最中など、タグが閉じられない状態が一時的に発生するためです

使用許諾条件

 このソフトウェアパッケージの内容については完全に無保証です。 このソフトウェアパッケージの配布や改変に関する条件は、 GPL ライセンス(GNU General Public License; GNU 一般公衆利用許諾契約書 原文(英語)) に準じるものとし、これに従う限り自由にすることができます。

 商用利用をお考えの企業様向けに、別途、 商用ライセンスをご案内させて頂いております。

このエントリーをはてなブックマークに追加  



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

Junnama Online (Mirror) のスクリーンショット
タイトル
MovableTypeのプレビュー機能を改良する(StylePreviewプラグイン)。
Trackbacked at
2007/03/19 04:12
from
Junnama Online (Mirror)
概要
これもまぁ、同種のものもあるし今後はきっと標準で実装されるだろうから必要なケース...

アークウェブ ビジネスブログ のスクリーンショット
タイトル
[Movable Type]編集中のエントリー(記事)を一般公開する前に、本番通りの見た目でプレビューするプラグイン2点
Trackbacked at
2006/06/27 16:30
from
アークウェブ ビジネスブログ
概要
ディレクターの八木です。 オンタイムで情報を公開できるブログツールは、ビジネスサ...

PC・MT覚え書 のスクリーンショット
タイトル
エントリーの入力中に表示を確認する
Trackbacked at
2006/04/03 05:27
from
PC・MT覚え書
概要
4つのブログを運営していて、それぞれ記事の横幅が違って 思わぬところで改行してし...

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

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

Posted by
中村中村
at
2009/10/28 11:54
ID
pbWk0Fis
ピロリさま
BigPAPI プラグインをMT3.3にイントールしてみましたが、
「Realtime Preview」ボタンがエントリー画面に表示されません。
エントリー記事が実在するブログですので、考えられるのは、
 *.tmpl を書き換えるカスタマイズが併用されているかどうか、ということですが、
これは管理画面を書き換えるカスタマイズのことですよね?すると心当たりがありません。お知恵を拝借できれば幸いです。よろしくお願いします。
Posted by
中村中村
at
2009/10/27 21:15
ID
MtPz1MVI
ピロリさま
お世話になっております。
当方、相変わらずMT3.3ですが、「Realtime Preview"ボタンがありません 」
となっております。MT3.3では BigPAPI プラグインはMT自体に組み込まれているということでインストールしていないのですが、これが原因でしょうか?
RealtimePreview.plはPluginフォルダの直下に置いています。ブログの文字コードはEUC-JPですが、plは(日本語もないので)原本のまま置いてみました。
システムメニューのプラグインメニューで、「利用可」となっていますが、ボタンは表示されません。考えられる原因を教えていただけると幸いです。よろしくお願いします。
Posted by
sontokusontoku
at
2006/04/04 00:12
ID
wzlJGi9E
こういうのがあればいいなぁと思っていました。
使わせていただきます♪
Posted by
ぴろりぴろり
at
2006/03/13 18:52
ID
ajZx2MGQ
どんな感じで使えるのか体験できるよう、サンプルページを作ってみました。
http://www.magicvox.net/archive/2006/src/RealtimePreviewPlugin/

コメントを投稿する

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