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

Posted by
ぴろり
Posted at
2006/02/07 16:50
Trackbacks
関連記事 (2)
Comments
コメント (4)
Post Comment
コメントできます
Category
プラグイン カテゴリ
　スタイルシートやを大きくしている場合でも、 実際の見た目に近いプレビューを得られるブックマークレットを、 今回、 のとして更にお手軽に使えるようにしてみました。
　版は環境を選ばずに手軽に試せるという点がメリットに挙げられますが、 その一方で、プのために URL を入力したり、個別アーカイブのを書き換えたり と導入に際してイケてない部分が多々ありました。 快適な WYSIWYG(What You See Is What You Get)環境を できるだけ簡単に導入でき、更にスマートにお使い頂けるようにしています。
この記事をはてなブックマークに追加する この記事のはてなブックマーク数 | この記事をlivedoorクリップに追加する この記事のlivedoorクリップ数 | この記事をYahooブックマークに追加する この記事のYahoo!ブックマーク数 | この記事をdel.icio.usに追加する | Twitterにポストする

特徴と使い方

  1. "Realtime Preview"ボタンを押します
  2. 新しくプ用ウィンドゥが開きます
  3. 気にせず で記事を編集します
  4. プ用ウィンドゥに変化が…!!

動作環境

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

導入方法

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

に公開されている記事が一つも無い場合、は動作しません。

個別アーカイブの修正

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

書換え前書換え後
<$ntryTitle$> <MTRealtimePreview field="title"><$ntryTitle$></MTRealtimePreview>
<$ntryBody$> <MTRealtimePreview field="text"><$ntryBody$></MTRealtimePreview>
<$ntryMore$> <MTRealtimePreview field="text_more"><$ntryMore$></MTRealtimePreview>
<$ntryKeywords$> <MTRealtimePreview field="text"><$ntryKeywords$></MTRealtimePreview>
<$ntryExcerpt$> <MTRealtimePreview field="excerpt"><$ntryExcerpt$></MTRealtimePreview>

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

タグの詳細

MTRealtimePreviewID タグ
の編集画面で入力された内容が、リアルタイムに反映される領域のためのユニークな ID 文字列を返します。 後述の MTRealtimePreview コンテナタグを使う方が簡単な場合があります。 field 属性が必須です。

MTRealtimePreview コンテナタグ
の編集画面で入力された内容が、リアルタイムに反映される領域を指定します。 具体的には、このタグに含まれる領域が <span id="..."> と </span> で括られるだけです。 この span 領域は見た目に影響を与えません。 field 属性が必須です。

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

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

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

Realtime Preview 　new
e983605f25caa819cfcdedc3c55162b1
ver.1.20, '06/06/14, 4765 bytes, 3.2ja2 + BigP,

最新版のやバグレポートはRealtimePreview の trac レポジトリでも行っています。

注意事項

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

トラブルシューティング

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

使用許諾条件

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

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

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

その他の関連する記事

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

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

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

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

寄せられたコメント (全 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 プラグインはＭＴ自体に組み込まれているということでインストールしていないのですが、これが原因でしょうか？
RealtimePreview.plはPluginフォルダの直下に置いています。ブログの文字コードはEUC-JPですが、plは(日本語もないので)原本のまま置いてみました。
システムメニューのプラグインメニューで、｢利用可｣となっていますが、ボタンは表示されません。考えられる原因を教えていただけると幸いです。よろしくお願いします。

Posted by
sontoku
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/

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

コメントを投稿する

 
 (匿名可/必須/公開)
 (匿名可/必須/非公開)
 (必須)
コメントスパム防止のため投稿前に ランダムな数字 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 プラグイン ダウンロード 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 MT3, NT3, JT3, KT3, MR3, M53, M63, MY3, MG3, MF3, MT2, MT4, MTE, MTW