それも、よくあるような、確認ボタンを押して別画面で確認するのではなくて、
書いた側から、入力フォームの下に表示されるんである。
WYSIWYGなインターフェイス。
…これ、欲しいなぁ…
そういうわけで、ドリコムブログをHackしてみました。
（つまり要するにパクリ）
導入方法
1. JavaScriptプログラムセットの導入。
Comment Preview JavaScript Pack(SJIS / EUC-JP)
これを解凍し、自分のblogにあった文字コードのものを適当な場所にアップ。
（ちなみに、popup.jsだけは必要ない）
これを解凍し、自分のblogにあった文字コードのものを適当な場所にアップ。
（ちなみに、popup.jsだけは必要ない）
2. コメント入力欄を修正
まず、頭に、JavaScriptプログラムへのリンクを記述。
<head>?</head>の適当な場所に以下の文字列を挿入。
次に、コメントフォーム部分をカスタマイズ。
重要なのは3点。
・formとtextareaの名前をチェック。
・イベント捕捉のための空<div>要素を入れる。
・プレビュー場所の指定。
<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以外のヒトはこれを変更のこと。
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などでいじってください。
見栄えは適当にCSSなどでいじってください。
<div id="comment_preview"></div>
以上で保存して、再構築すれば完成。
注意点としては、プログラムファイルや、関数名などが、かぶっていると動作しないばかりか
予期せぬ動作をしかねないので十分にチェックを。
また、文字コードが違っていると動作しません。正しいものを入れてください。
あ、あと、お決まりの文句ですが、すべて自己責任で行ってください。
ドリコムに問い合わせたりもしないように。