コメント入力をリアルタイム表示

前後の記事

更新:2007年5月26日（土）

コメント入力をリアルタイム表示

ブログのコメント機能には、出力確認画面というのがあるが、あまり何度も送信ボタンを押して確認するのも辛い。それならば、入力した内容がそのまま本来投稿されるであろう部分に表示されるほうが良心的に思う。

そこで今回は、コメント欄に入力した内容をそのままリアルタイムでプレビューされるように出来るコメントライブプレビューを行う方法を説明する。

使用言語はJavaScriptなのでサーバーの環境に依存するような事はない。ここでは、ぶろぐんで使用する事を想定して説明しているが、機能自体はどのブログツールでも動く。

ちなみに、参考にしたブログは、stroll::blogさんの記事でこれを元に、投稿者の名前や投稿時間といったものも表示出来るようにしたのが下記のソース。

...を記述していましたが、どうにもBRタグが削られてしまうようですので、こちらから直接落して下さい。
下記の実際に動いているソースです。（右クリックリンク先を保存）

preview.jsに記述する内容



function doNamePreview(mode) {

var textAreaId = '

c_name

';

var previewAreaId = 'name_preview';

var initString = '投稿者 ';

if (!isDoNamePreview()) return;

if (!getElementNamePreview(textAreaId) || !getElementNamePreview(previewAreaId)) {

return;

} else if (null != mode && mode == 'init') {

getElementNamePreview(previewAreaId).innerHTML = initString;

return;

}

var s = getStringNamePreview(textAreaId);





if (getElementNamePreview(previewAreaId)) {

getElementNamePreview(previewAreaId).innerHTML = '<h4>'+initString + s + '#プレビュー</h4>';

}



if (null == s || '' == s || '

' == s || s == initString+initString) {

s = initString;

}



}

function getStringNamePreview(e) {

var s = '';

s = getElementNamePreview(e).value;

s = s.split('&').join('&');

s = s.split('<').join('<');

s = s.split('>').join('>');

s = s.split(''').join('"');

s = s.split('n').join('

');

//'

return s;

}

function getElementNamePreview(e, f) {

var l = (document.layers) ? 1 : 0;

if(l) {

f=(f) ? f : self;

var a = f.document.layers;

if (a[e]) return a[e];

for (var w = 0; w < a.length;) {

return getElementNamePreview(e, a[w++]);

}

}

if (document.all) return document.all[e];

return document.getElementById(e);

}

function isDoNamePreview() {

var ua = navigator.userAgent;

var doNotAgentList = [

ua.indexOf('Opera/6') != -1,

ua.indexOf('Mac') != -1 && ua.indexOf('MSIE 5') != -1

]

for (var i = 0; i < doNotAgentList.length; i++) {

if (doNotAgentList[i]) return false;

}

return true;

}

doNamePreview('init');



function doCommentPreview(mode) {

var textAreaId = '

c_mes

';

var previewAreaId = 'comment_preview';

var initString = 'ここにコメントのプレビューが表示されます。';

if (!isDoCommentPreview()) return;

if (!getElementCommentPreview(textAreaId) || !getElementCommentPreview(previewAreaId)) {

return;

} else if (null != mode && mode == 'init') {

getElementCommentPreview(previewAreaId).innerHTML = initString;

return;

}

var s = getStringCommentPreview(textAreaId);

if (null == s || '' == s || '

' == s) {

s = initString;

}



if (getElementCommentPreview(previewAreaId)) {

 mydate=new Date();

 Ye=' 　' + mydate.getFullYear()+"年";

 Mo=mydate.getMonth()+1+"月";

 Da=mydate.getDate()+"日, ";

 Day=mydate.getDay();

 d_Hour = mydate.getHours();

 d_Min = mydate.getMinutes();

 d_Half ='';



if(d_Hour >= 13){

        d_Hour = d_Hour-12;

		d_Half =' PM';

}

else

{

		d_Half =' AM';

}

if(d_Hour < 10){

        d_Hour = "0"+d_Hour;

}

if(d_Min < 10){

        d_Min = "0"+d_Min;

}

getElementCommentPreview(previewAreaId).innerHTML = '

<p>' + s + '<p><p>[ EMAIL | URL | ' + Ye + Mo + Da + d_Hour+":"+d_Min + d_Half +' ]</p>

';

}

}

function getStringCommentPreview(e) {

var s = '';

s = getElementCommentPreview(e).value;

s = s.split('&').join('&');

s = s.split('<').join('<');

s = s.split('>').join('>');

s = s.split(''').join('"');

s = s.split('n').join('

');

//'

return s;

}

function getElementCommentPreview(e, f) {

var l = (document.layers) ? 1 : 0;

if(l) {

f=(f) ? f : self;

var a = f.document.layers;

if (a[e]) return a[e];

for (var w = 0; w < a.length;) {

return getElementCommentPreview(e, a[w++]);

}

}

if (document.all) return document.all[e];

return document.getElementById(e);

}

function isDoCommentPreview() {

var ua = navigator.userAgent;

var doNotAgentList = [

ua.indexOf('Opera/6') != -1,

ua.indexOf('Mac') != -1 && ua.indexOf('MSIE 5') != -1

]

for (var i = 0; i < doNotAgentList.length; i++) {

if (doNotAgentList[i]) return false;

}

return true;

}

doCommentPreview('init');

赤色で表示してある場所は、ぶろぐん(Blogn)でそのまま利用出来るようにc_nameと記述しているが、ここを書き換える事で、NucleusやMovableTypeといった他のブログでも使用可能になる。

ちなみに、Nucleusでは、投稿者用のIDはnucleus_cf_nameコメント欄のIDはnucleus_cf_body

MovableTypeならば名前に該当する部分をcomment-authorとし、コメント欄はcomment-textとしよう。

そうすると、WordPressは？と聞かれる可能性が出て来るので
その時は、名前の部分をauthorとし、３つ目の赤色の部分はcommentと書き換えよう。

要するに、コメントフォーム内にある、名前を入れるinputタグとコメントを入れるtextareaタグの中にあるIDと同じものを上記のソースにある赤色の部分に入れればよい。

もう一つ赤色でダラダラと記述しているものがあるが、ここにあるタグを書き換えれば、自分のテンプレートに合わせた表示のされ方に出来るので各自にあった記述方法に変更しよう。

テンプレートのhead内に記述する内容

<script type="text/javascript" src="js/preview.js"></script>

preview.jsの作成が完了し、無事にアップが終われば、次は先程のファイルをアクセスする時に読み込ませる必要がある。そこで上記のように、メタタグ付近に1行追記してさっきにpreview.jsを読み込ませよう。ここでは、js/というディレクトリ内にあるpreview.jsを読んでいる。

今度は名前欄の部分と、コメント欄の入力フォームの場所を探し、そこに情報が書き込まれればアクションが起きるようにjavascriptを記述する。
フォーム追記する内容

名前：

<input id="c_name" tabindex="1" name="blogn_cname" value=""

onkeyup="doNamePreview()" onblur="doNamePreview()"

/>

コメント：

<textarea id="c_mes" style="width: 100%" tabindex="4" name="blogn_cmes" rows="10" cols="30"

onkeyup="doCommentPreview()" onblur="doCommentPreview()"

></textarea>

ちなみに赤色で表示された部分がそれぞれ今回追記したJavascriptである。

最後に、プレビュー表示させたい部分に



<p id="name_preview"></p>

<p id="comment_preview"></p>

と記述すれば、投稿者や、コメント文を記入しようとした時にリアルタイムでコメント文等が表示されるようになる。

これで、コメントを入れてくれる方が、書き込みが終わった後に、変な所で改行が入ったり記述ミスをして後悔してしまうといった確率が軽減されるようになる・・・と、思う。

無料ブログ比較検証 : ハッスル寅男

最初はランキングサイトで訪問者を増やそう

伸び悩んでいる方は、ランキングを科学するを参照

[ 05:27 PM | comments (2) | trackback (0) ]

[後でまた読む]

記事貼り付け

投稿者 nawo

当方のブログにお越しいただきありがとうございました。
実は参考にさせていただいたこの記事ですが、スクリプトがうまく動作しません。
勉強不足なのでどの部分がというのはわからないのですが、30行辺りからが少しおかしいのではと思います。(記事に起こすときにHTMLタグが消えてしまった?)

メールでお知らせしようかと思いましたが、アドレスが見当たらなかったためコメント欄より失礼しました。このコメントが不要になりましたら削除してくださって結構ですので。

このスクリプトの存在を知り、本当に感謝しています。これからもこのサイトを参考にさせていただきますね。

[ URL | 2008年3月18日, 11:09 PM ]

投稿者ハッスル寅男

いえいえ、こちらこそ。ご報告感謝致します。

早速、筆者が現在実際に使用している生のソースpreview.jsを記事内でダウンロード出来るように致しました。原因は、古いバージョンのblognではBRが含まれていると勝手に改行をしてしまう点にありました。

普通に日記を書く分には何ら問題はないのですが、ソースをお見せする際は注意が必要ですね。

[ URL | 2008年3月20日, 05:08 PM ]