友人のblogのコメント入力欄に、プレビュー機能がある。
それも、よくあるような、確認ボタンを押して別画面で確認するのではなくて、
書いた側から、入力フォームの下に表示されるんである。
WYSIWYGなインターフェイス。
...これ、欲しいなぁ...
そういうわけで、ドリコムブログをHackしてみました。
(つまり要するにパクリ)

導入方法

1. JavaScriptプログラムセットの導入。

Comment Preview JavaScript Pack(SJIS / EUC-JP)

これを解凍し、自分のblogにあった文字コードのものを適当な場所にアップ。
(ちなみに、popup.jsだけは必要ない)


2. コメント入力欄を修正

まず、頭に、JavaScriptプログラムへのリンクを記述。
<head>?</head>の適当な場所に以下の文字列を挿入。

<script src="http://hoge/js/prev.js" type="text/javascript"></script> <script src="http://hoge/js/cookie_util.js" type="text/javascript"></script> <script src="http://hoge/js/tags.js" type="text/javascript"></script> <script src="http://hoge/js/render.js" type="text/javascript"></script> <script src="http://hoge/js/select.js" type="text/javascript"></script> <script src="http://hoge/js/insert_tags.js" type="text/javascript"></script> <script src="http://hoge/js/comment_edit.js" type="text/javascript"></script>


次に、コメントフォーム部分をカスタマイズ。
重要なのは3点。

・formとtextareaの名前をチェック。
・イベント捕捉のための空<div>要素を入れる。
・プレビュー場所の指定。

・formとtextareaの名前をチェック。
テンプレート内の、form/textareaの名前が、それぞれ、 comment_edit.js内の、 COMMENT_FORM_NAME/COMMENT_TEXTAREA_NAME と 一致していることを確認。 とりあえず、MovableTypeのデフォルトの値(comments_form/text)になっていますが これを変えている人、MT以外のヒトはこれを変更のこと。
・イベント補足のための空<div>要素を入れる。
<form>?</form>内のどこかに、次の行を挿入。
<div id="emoji" onclick="renderPreviewAll(gCommentForm);"></div>
・プレビュー場所の指定。
プレビューさせたい場所に、次の行を挿入。 見栄えは適当にCSSなどでいじってください。
<div id="comment_preview"></div>


以上で保存して、再構築すれば完成。

注意点としては、プログラムファイルや、関数名などが、かぶっていると動作しないばかりか
予期せぬ動作をしかねないので十分にチェックを。
また、文字コードが違っていると動作しません。正しいものを入れてください。

あ、あと、お決まりの文句ですが、すべて自己責任で行ってください。
ドリコムに問い合わせたりもしないように。