入力テキストその場で確認！ライブコメントプレビュー
2007年2月25日
当ブログのコメント入力欄をちょっと改変しました。今まではコメントのプレビュー画面がなかったのですが、テキストエリアに入力した文字をその場で確認できる「ライブコメントプレビュー」機能を実装してみました。これはjQueryを用いてDOM操作で動的にコメントプレビューが見られるようになっています。文章で説明しても分かりづらいと思うので、実際に下のフォームにコメントを入力してみて下さい。
今回のスクリプトは、jQueryについて数多くのTipsを紹介しているLearning jQuery Blogで紹介されていたものを自分用にカスタマイズして使っています。この機能はJavaScriptを用いて実現していますので、JavaScriptを導入できる環境であればMovableTypeでも他のツールでも、静的なHTMLでも環境を選ばず実装することが可能です。以下導入方法についてです。
この機能はjQueryを用いているので、まずはjQueryをダウンロードしてきます。ダウンロードしたjsファイルを保存し、head内に以下のように記述します。
<head>
<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript">
// ここにライブコメントプレビューのコードを書きます
</script>
</head>
ライブコメントプレビューのコードはLearning jQuery Blogか、もしくはjQueryの公式サイトに掲載されています(サイト下のほうに”The Full Code”と書かれたものがあるので、それをコピペして下さい)。そのコードを上記の該当箇所へコピペし、フォームの<textarea>タグにid=”comment”と指定するだけ。素のコードでは動的にdiv要素が生成されて、その中にテキストエリアに入力されたものが表示されるようになっています。もしdiv要素以外のものにしたい場合は下記の場所を書き換えればOK
$('#comment').one("focus",function() {
$(this).parent().after('<div id="preview-box"><div class="comment-by">Live Comment Preview</div><div id="live-preview"></div></div>');
});
ちなみに私のブログではこの場所を下記のように書き換えています。
$('#comment-text').one('focus',function() {
$('#comment-text').parent().after('<dt class="comment-by">Live Comment Preview</dt><dd id="preview-box"><p id="live-preview"></p></dd>');
});
ライブコメントプレビューのスクリプトを外部ファイル化してjQueryのプラグインとして使うことも可能です。
追記
XSS(クロスサイトスクリプティング)は大丈夫なのか？というご質問を頂いたのですが、このスクリプトの開発元であるLearning jQuery Blogによると、XSSの対策が施されているみたいです。(本文中段、UPDATE以下にその記述があります)
なお、使用に関しては自己責任でお願いします。
現在このブログでは実装していません。
- このエントリーのトラックバックURL
- http://www.lllcolor.com/web/movabletype/54.html/trackback
- あいろん - 2007.02.26 -AM 12:03
なんかこれおもしろいですね（笑）リアルタイムでコメントプレビューできるって変な感じです。
JavaScriptがここまで出来る！って知るまでに結構な時間がかかりましたが、やっぱりAjaxのおかげでJSの人気が戻りつつあるんですね。形式としてはActionScriptとほっとんど変わらないのに、なぜか遠い存在のJavaScript。ブラウザを動かすよりFlashプレイヤーを動かす方が気が楽です。
- A.Kawashima - 2007.02.26 -PM 10:19
>あいろんさん
JavascriptもといjQueryは結構とっつきやすいよ。
書式がcssに似ている点があるので、cssが書けるひとならやりやすいと思います。FlashもJavaScriptも手段に過ぎないからね、
目的を見失わないようにしようと思う今日この頃(笑)
- Links
