MovableTypeの遅いプレビュー画面を高速化する３つの超絶テクニック
私は記事の見ばえが気になるので、記事を書くときに何回もプレビューします。
10回プレビューすると合計140秒も待たされます。
プレビューするたびに思考が寸断されて記事を書くモチベーションが失われてしまうことがよくあります。
ずっと悩みの種でした。
サーバがDTIのVPS(月490円のやつ)なので、最初はサーバのせいかと思いました。
CGIだから遅いのかなと思いました。
でも、実験してみてわかりました。
遅いのはサーバのせいじゃない。
CGIがPHPより遅いからでもない。
MovableTypeのプログラムが遅い。
そこで、プレビュー画面を超絶高速化する超絶テクニックを３つご紹介します。
方法１：記事画面をローカルに保存して、ローカルでHTMLを編集
・ブラウザでブログ記事を一つ表示します。(いわゆる"パーマリンク"をクリックすると出る画面)・↓ブラウザのメニューから「名前を付けて保存」します。
・保存したHTMLファイルをエディタで編集します。
・そのHTMLファイルをブラウザで開くとプレビューできます。
・記事を本投稿するときは、ローカルで書いたHTMLを管理画面にコピペして投稿します。
メリット
・誰でもすぐできる。・プレビューが一瞬である。
デメリット
・リッチテキストエディタを使えない。(HTMLタグを手書き)・PCが変わると環境構築のやり直しが必要。
・画像を使うときは結局管理画面のプレビューを使うことになる。
・タグ、カテゴリの設定ができない。
方法２：JavaScriptでリアルタイムプレビュー画面を作る
まずはこちらをご覧ください。 → 瞬速プレビューブラウザでフォームのテキストを編集すると、リアルタイムでプレビューできます。
プレビュー画面がWeb上にあるのがミソです。
ここで文章を書いたら、あとはMT管理画面を開いてコピペするだけです。
メリット
・どのPCからでもすぐ使える。・プレビューが一瞬である。
デメリット
・リッチテキストエディタを使えない。(がんばれば実装できる)・画像を使うときは結局管理画面のプレビューを使うことになる。
・タグ、カテゴリの設定ができない。
方法３：CGIでプレビュー画面を作る
上記の欠点をすべて克服した究極のソリューションがこれです。まずはこちらをご覧ください。 → CGIによるプレビュー画面
これは、管理画面の記事編集画面で「自動保存」された文章をプレビューしています。
記事を書いてる途中に自動保存されたデータをDBから取り出して表示しています。
この方法であれば、管理画面の入力画面をそのまま使えますので、 WYSIWYGエディタも使えますし画像挿入・タグ・カテゴリ設定もできます。
つまり、MTのプレビュ―機能を完全に置き換えることができるのです。
そして、
表示にかかる時間はわずか0.2秒！
(※Google Chromeのデベロッパーツールで"Document"のロードが終わるまでの時間を測定)３５倍高速化！！
メリット
・どのPCからでもすぐ使える。・プレビューが速い。
・記事入力を管理画面でできる。
実装方法は、DBのmt_sessionの値を取り出して表示しているだけです。
CGIのソースコードは今のところ非公開ですが、要望があれば公開したいと思います。
twitter・はてぶ・コメント欄などでご意見いただければ幸いです。
まとめ
プレビュー画面を速くする方法を３つ紹介しました。プレビューの遅さに不満がある場合は、どれかを試してみてはいかがでしょうか？
カテゴリ:
MovableType