エントリーのプレビューを行うプラグイン

エントリーのプレビューを行うプラグイン

Posted at August 18,2005 11:56 PM
Tag:[Customize, Entry, MovableType, Plugin, Preview]

The blog of H.Fujimoto でお馴染みの壱さんが作られた「エントリーのプレビューを行うプラグイン」のカスタマイズをご紹介します。

Movable Type のエントリーのプレビューは「確認」をクリックすることで出来栄えを見ることができますが、管理用のCSSを用いているため、またHTMLの構造も公開ページと異なるため、実際に公開した時に予想しない表示になっていて慌てて修正することがしばしばありました。
このプラグインは、メインページや各アーカイブと同じテンプレートを使って、いわゆる「隠しページ」を生成し、それを参照することで公開前に表示を確認できるというものです。

ちょっと前から使わせて頂いているのですが、段落・リスト・表・画像等の確認がじっくり行えます。今まではある意味勘で作成・修正していたので、かなり重宝しています。

ということで以下、カスタマイズ方法です。内容は壱さんのページと同じですが、とりあえずメインページのプレビューに着目して書いてみました。

1.プラグインのダウンロード
The blog of H.Fujimotoエントリーのプレビューを行うプラグイン(その1)
より mt-rebuild-preview.zip のリンクをクリックしてプラグインアーカイブをダウンロードします。

2.ファイルのアップロード
アーカイブを解凍すると下記のファイルがあります。

mt-rebuild-preview.cgi
/extlib/FJ/RebuildPreview.pm
/plugins/TagsForPreview.pl
/tmpl/cms/rebuild_preview.tmpl

これらのファイルを、MTCGIPath をルートパスとして、同じ名称のディレクトリ配下にそれぞれアップロードします。例えば mt-rebuild-preview.cgi は mt.cgi と同じディレクトリに、TagsForPreview.pl は plugins ディレクトリ配下にアップロードします。存在しないディレクトリ(FJ)は新たに作成してください。mt-rebuild-preview.cgi のパーミッションは 755 等に変更してください。

3.メインページプレビュー用テンプレート作成
管理画面の「テンプレート」の右上にある「インデックステンプレートの作成」をクリックし、
次のページでそれぞれ以下のように設定します。

テンプレートの名前:メインページプレビュー(何でもいいです)
出力ファイル名:preview.html
再構築オプション:チェックを外す
テンプレートの中身:メインページの中身を丸ごとコピー

出力ファイル名はここでは preview.html としましたが、他の方に参照されない名称にしてください。またメインページが index.php の場合は preview.php としてください。

4.テンプレートの修正
プレビュー用テンプレートの下記の赤色部分 MTEntries を青色のように MTEntries WithDraft に変更します。

修正前

     :
<MTEntries lastn="5">
<$MTEntryTrackbackData$>
     :
</MTEntries>
     :

修正後

     :
<MTEntriesWithDraft lastn="5">
<$MTEntryTrackbackData$>
     :
</MTEntriesWithDraft>
     :

修正が終わったら、保存・再構築します。出力ファイル名を指定して表示されていればここまでの設定はOKです。

5.プレビュー用テンプレートの関連付け
3?4項で作成したテンプレートをプレビュー用テンプレートとして関連づける作業を行います。

Tags For Preview のリンクメインメニュー下にある「利用可能なプラグインの設定」で Tags For Preview のリンクをクリックします。
ブログ選択画面複数のブログを作っている場合は、画像のようにブログ選択画面が表示されます。プレビュー表示したいブログを選択して「送信」ボタンをクリックします。
インデックステンプレート一覧表示画面クリックするとインデックステンプレート一覧表示画面に遷移します。ここでプレビュー用のテンプレートを選択し、「保存」ボタンをクリックします。複数のプレビュー用テンプレートを作っている場合は、Windowsの場合は Ctrlキーを押しながらクリックすることで複数のテンプレートを選択することができますので、すべてを選択してください。

6.管理画面にプレビュー用の設定を追加
/tmpl/cms/edit_entry.tmpl を任意のエディタで開き、青色部分を追加します。各行数は追加した後の行数になっていますので、目安にしてください。2番目と3番目の追加は緑色の行で検索すると便利です。

5行目あたり

<script type="text/javascript">
<!--
 
function doRebuildPreview () {
    window.open('mt-rebuild-preview.cgi?__mode=start_rebuild&blog_id=<TMPL_VAR NAME=BLOG_ID>&entry_id=<TMPL_VAR NAME=ID>', 'doRebuildPreview', 'width=400,height=250,resizable=yes,scrollbars=yes');
}
 
function listPreviousPings () {
    window.open('<TMPL_VAR NAME=SCRIPT_URL>?__mode=pinged_urls&entry_id=<TMPL_VAR NAME=ID>&blog_id=<TMPL_VAR NAME=BLOG_ID>', 'urls', 'width=370,height=250,resizable=yes,scrollbars=yes');
}

130行目辺り

<TMPL_IF NAME=POSITION_BUTTONS_TOP>
<div id="button-bar">
<TMPL_UNLESS NAME=NEW_OBJECT>
<input class="button" onClick="doRebuildPreview()" type="button" value="<MT_TRANS phrase="Preview on Blog">">  
</TMPL_UNLESS>
<input type="submit" name="preview_entry" value="<MT_TRANS phrase="Preview">" />
<input type="submit" value="<MT_TRANS phrase="Save">" />
<TMPL_UNLESS NAME=NEW_OBJECT>
<input onclick="doRemoveItem('<TMPL_VAR NAME=ID>', 'entry&blog_id=<TMPL_VAR NAME=BLOG_ID>')" type="button" value="<MT_TRANS phrase="Delete Entry">" />
</TMPL_UNLESS>
</div>
</TMPL_IF>

330行目辺り

<TMPL_IF NAME=POSITION_BUTTONS_BOTTOM>
<div id="button-bar">
<TMPL_UNLESS NAME=NEW_OBJECT>
<input class="button" onClick="doRebuildPreview()" type="button" value="<MT_TRANS phrase="Preview on Blog">">  
</TMPL_UNLESS>
<input type="submit" name="preview_entry" value="<MT_TRANS phrase="Preview">" />
<input type="submit" tabindex="13" value="<MT_TRANS phrase="Save">" />
<TMPL_UNLESS NAME=NEW_OBJECT>
<input onclick="doRemoveItem('<TMPL_VAR NAME=ID>', 'entry&blog_id=<TMPL_VAR NAME=BLOG_ID>')" type="button" value="<MT_TRANS phrase="Delete Entry">" />
</TMPL_UNLESS>
</div>
</TMPL_IF>

ここまでの作業が終わればメインページのプレビューができる状態になります。

7.プレビューする

「Preview on Blog」ボタン プレビューの方法は、編集したエントリーに「Preview on Blog」というボタンが現れるので、これをクリックします。「確認」ボタンはエントリー保存前の状態でも可能ですが、「Preview on Blog」の場合は実行前に必ず「保存」をクリックしてください。
プレビュー用のリンク「Preview on Blog」をクリックするとウィンドウが開きます。そのウィンドウにプレビュー用ページの再構築状態とプレビューページのリンク(例はメインページのみ)が表示されます。リンクをクリックすると新しい画面が開いてそこにプレビュー画面が表示されます。 ここで表示されるウィンドウを消さずにそのままにしておけば、修正・プレビューを繰り返す毎に同じウィンドウに表示されます(タブブラウザでは新しいウィンドウが開くようです)。

8.ボタンを日本語化する
「Preview on Blog」を「プレビュー」等の日本語に変更したい場合は、lib/MT/L10N/ja.pm の任意の行に下記を追加します。

'Preview on Blog' => 'プレビュー',

9.他のアーカイブページをプレビューする場合
アーカイブページ(カテゴリーアーカイブ/日付アーカイブ/個別エントリーアーカイブ)のプレビューも行いたい場合は各アーカイブテンプレートを3項と同じ手順で作ります。アーカイブテンプレートではなくインデックステンプレートとして作りますのでご注意ください。
出力ファイル名はそれぞれ異なる名称にしてください。そしてそれぞれの「ファイルの中身」を下記のタグでテンプレート全体を括ってください。

カテゴリーアーカイブ

<MTPretendCategoryTemplate> ? </MTPretendCategoryTemplate> 

月別アーカイブ(日付アーカイブをコピー)

<MTPretendDateTemplate archive_type="Monthly"> ? </MTPretendDateTemplate>

週別アーカイブ(日付アーカイブをコピー)

<MTPretendDateTemplate archive_type="Weekly"> ? </MTPretendDateTemplate>

日別アーカイブ(日付アーカイブをコピー)

<MTPretendDateTemplate archive_type="Daily"> ? </MTPretendDateTemplate>

個別エントリーアーカイブ

<MTPretendIndividualTemplate> ? </MTPretendIndividualTemplate>

上記はデフォルトのアーカイブ設定状態を想定しています。例えば週別アーカイブテンプレートや・日別アーカイブテンプレートを月別アーカイブテンプレートと別に新しく作っている場合はそちらからコピーしてください。
設定後、5項の作業を行い、新しく作ったインデックステンプレートをプレビュー用としての関連付けを行います。

以上です。

2005.08.19 追記
8項にボタンの日本語化の項目を追加しました。

関連記事
zenback
人気エントリー
トラックバックURL


トラックバック

PHPでモジュール化しててもOKの「まんまプレビュー」 from やむやむ
以前、「エントリの投稿画面に個別アーカイブのまんま状態でプレビューできるボタン装... [続きを読む]

Tracked on August 19, 2005 10:14 AM

本当の「確認」 from チームニゴイでございます。
MovableType。記事を書いたときの「確認」、これあくまでも文字の確認や画... [続きを読む]

Tracked on August 20, 2005 5:31 AM

エントリーのプレビュープラグイン from grumble...
エントリーの編集のとき一応確認するんだけど文字の大きさや画像との間隔が 全く違っていて、プレビューなんだろうけど全くプレ... [続きを読む]

Tracked on August 27, 2005 3:16 PM

拡張日記2 from Ars longa vita brevis.
・ファイルのアップロードで上書きを有効にする ・エントリーのプレビューを行うプラ... [続きを読む]

Tracked on November 22, 2005 6:45 AM

エントリーのプレビューを行うプラグイン from showry's Blog
MovableTypeのカスタマイズです。 エントリー投稿時の確認ボタンでのプレビュー表示は画像とかは表示されないため、実際のWeb表示イメージがつかめま... [続きを読む]

Tracked on April 25, 2006 9:31 PM

エントリーのプレビュー from PARADISE BLOG
Movable Type に搭載されているプレビュー機能は、正確な表示がされない... [続きを読む]

Tracked on May 18, 2006 12:21 AM

MT3.2 WYSIWYG from 東風Ex
ちょっと前に「BigPAPIが絡むWYSIWYGプレビューはMT3.3が出るまで... [続きを読む]

Tracked on June 20, 2006 11:47 PM

隠居のMT:RebuildPreview MT3.3対応インストール from Atelier Shuhei Weblog
 藤本壱さんが、エントリーのプレビューを行うプラグインを昨日(2006/7/11... [続きを読む]

Tracked on July 12, 2006 8:28 AM

編集中エントリーのプレビュー from Tree eyes good.
Movable Type には編集中のエントリーをプレビューする機能があります... [続きを読む]

Tracked on June 23, 2007 1:26 PM

MTで公開前にエントリーのプレビューを行うプラグイン from caraldo.net | MT Blog
Movable Typeのエントリーのプレビューは「確認」をクリックで出来栄えを... [続きを読む]

Tracked on July 25, 2007 1:06 AM
コメント

おはようございます。
以前、MT-Preview を使ってプレビューする方法を導入したのですが
記事の本文もモジュール化してるので、表示されなくて今ひとつだったんです。
これなら、丸々 エントリ後の状態を見ることができるので、助かります。

[1] Posted by さえら : August 19, 2005 8:02 AM

yujiroさん!おはようございます。

これこれ!やってみたかったんですよぉ?
でも、なんだか難しそうで戸惑っていました(笑)

こちらを読んで、やっぱりやってみよう意欲がわいてきました。
今日は1日、このカスタマイズしたいと思いますっ!

[2] Posted by ミッチ : August 19, 2005 8:24 AM

yujiroさん、こんにちは。
>今まではある意味勘で作成・修正していたので
まさに私も「the勘」(私語?)頼り、いつもドキドキで「保存」してました(笑)。
さっそく導入してみたいと思いました。でも、肝心のエントリー内容が、
導入後も大して見栄え変わってないじゃんチャンチャン♪ということにならないようにせねば^^;

[3] Posted by mai : August 19, 2005 10:45 AM

再びこんにちは。
壱さんよりコメントで教えていただいたのですが、
記事の本文をモジュール化したままでは、プレビューできないんですね。
てことで、プレビュー用のテンプレートは モジュール化をやめました。

[4] Posted by さえら : August 19, 2005 10:54 AM

こんにちは。

プレビューのプラグインをご紹介いただき、ありがとうございます。
また、ボタンの表記の日本語化についても書いていただき、ありがとうございます。

なお、今の版ではedit-entry.tmplを書き換えることが必要ですが、最近出た「BigPAPI」を組み合わせると、edit-entry.tmplをプラグインから動的に書き換えることができそうです。
いずれそのカスタマイズも行ってみたいと思います。

[5] Posted by : August 19, 2005 11:14 PM

>さえらさん
こんばんは。
早速のご利用ありがとうございます(モジュール化まで解除くださって!)。
うまくできたようで良かったです!

>ミッチさん
こんばんは。
コメントありがとうございます。
私の長編を読まれてカスタマイズされる方の気持ちが良くわかりました。(笑)
お暇な時に取り組んでやってください。

>maiさん
こんばんは。
コメントありがとうございます。
皆さん、保存・公開される時の気持ちは同じですね。(笑)
段落の使い方とかちょっとしたところでも確認できるのでなかなかいいですよ。

>壱さん
こんばんは。
コメントありがとうございました。
素晴らしいカスタマイズ提供くださりありがとうございます。

BigPAPIは初耳でした。こちらも楽しみにしています。

[6] Posted by yujiro : August 19, 2005 11:30 PM

こんにちは。
いつもお世話になります。

早速導入してみました。これ、”微妙”な確認ができてとてもありがたいですよね(^_^)b

[7] Posted by くんぞ? : August 20, 2005 5:38 AM

>くんぞ?さん
こんばんは。
記事参照&トラックバックありがとうございます。

はい、私も大変重宝しております。
最近プレビューに頼り過ぎて推敲後のタグの確認をかなり怠ってます。(笑)

[8] Posted by yujiro : August 21, 2005 1:29 AM

こんばんば、yujiroさん 
プレビューのプラグインも、導入したので
記事を参考に、させて頂きました。

今までは、何回も確認作業を繰り返していたけど
今度から確認がスムーズになりました。(笑)

ご丁寧な説明、大変参考になりました
ありがとうございます。

[9] Posted by mituru : May 18, 2006 1:34 AM

>mituruさん
こんにちは。
記事参照ありがとうございます。
このプラグインは私も重宝しています。
ではでは!

[10] Posted by yujiro : May 18, 2006 2:57 PM

いつもお世話になります。
MT3.2では壱さんのエントリープレビューを重宝していたのですが、MT3.3にバージョンアップして、BigPAPIともども再インストールしたのですがうまく動きません。やはり、3.3とは相性が悪いのでしょうか。

[11] Posted by n_shuhei : July 10, 2006 3:48 AM

>n_shuheiさん
こんばんは。
ご質問の件ですが、とりあえず配布元にコメントしておきました。
そのうち改修されることを期待したいと思います。
ではでは!

[12] Posted by yujiro : July 11, 2006 2:02 AM

 >yujiroさん
早速の対応ありがとうございました。
昨日(2006/7/11)に、壱さんが対応していただいたようです。今日試してみることにします。とりあえず!

[13] Posted by n_shuhei : July 12, 2006 5:56 AM

>yujiroさん
壱さんのMT3.3対応改修版を早速インストールしました。私には珍しくすんなりいきました。ありがとうございました。
TBさせてもらいました。

[14] Posted by n_shuhei : July 12, 2006 8:34 AM

>n_shuheiさん
こんにちは。
ご連絡ありがとうございました。
すぐにリリースくださったようで良かったです。
ではでは!

[15] Posted by yujiro : July 12, 2006 2:21 PM

お世話になっております。インストール後、プレビューができるようになり、とても助かっています。しかし、ひとつだけどうしても気になることがあるので、なんとか直したく思っているのですが「5.プレビュー用テンプレートの関連付け」の作業を2度行ってしまったためか、エントリーの編集画面に「プレビュー」ボタンが2つできてしまっています。どちらの「プレビュー」ボタンも正常に動作するのですが、どうしても1つにしたいのです。。。pluginsフォルダの下のRebuildPreviewフォルダごと、一旦削除して、サーバーにアップしなおしましたが、それだけでは直りませんでした。どうしたらよいのでしょうか?よろしくお願い致します。

[16] Posted by へま : May 8, 2007 2:30 PM

>へまさん
こんにちは。このプラグインを作った壱です。

ご質問の件ですが、現在配布しているプラグインでは、プレビューボタンを追加する処理も、プラグインが自動的に行うようになっています。
そのため、このエントリーの「6.管理画面にプレビュー用の設定を追加」の手順を行うと、ボタンが2つ表示されてしまうことになります。
6.で追加した部分を削除して元に戻せば、ボタンは1つになるはずです。

[17] Posted by : May 8, 2007 8:49 PM

>へまさん
壱さんのご回答の通りでお願い致します。
過去の記事で申し訳ありませんでした。

>壱さん
ご回答ありがとうございました!
プラグインの記事は見直します…

[18] Posted by yujiro : May 9, 2007 1:08 AM

壱さん、yujiroさん

ご回答いただき、ありがとうございました。
試してみたのですが、なぜだかpreviewボタンが消えてくれず、今回は時間的に、使うのをあきらめることにしました。。。
また、時間があるときにTryしてみます。ありがとうございました!

[19] Posted by へま : May 12, 2007 1:38 PM

壱さん、yujiroさん

できました。どうやら、plugins/MailFormの下と、plugins/RebuildPreviewの下にひとつずつmt-rebuild-preview.cgiがあったようで(私のアップロードミスです。)plugins/MailFormの下にあったmt-rebuild-preview.cgiを消したら、プレビューボタンがひとつになりました。お騒がせしました。ありがとうございました!

[20] Posted by へま : May 12, 2007 1:56 PM

>へまさん
こんにちは。
ご連絡ありがとうございました。
無事に直ったようで良かったです。
ではでは!

[21] Posted by yujiro : May 14, 2007 1:15 PM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)