こそっとゴルフ・パンヤ

１．まずコメント本文を入力するtextareaタグをテンプレから探します。
ほとんどのテンプレは<--/comment-->の下あたりに配置されていると思います。
このテンプレの場合は、下記の赤字部分です。

　・
　・
　・
<h4 id="comment_post">COMMENT POST</h4>
<div class="entry_text" align="left">
<form method="post" action="./" name="comment_form">
<input type="hidden" name="mode" value="regist" />
<input type="hidden" name="comment[no]" value="<%pno>" />
<label for="subject">題名:</label><br />
<input id="subject" type="text" name="comment[title]" size="40" /><br />
<label for="name">名前:</label><br />
<input id="name" type="text" name="comment[name]" size="40" value="<%cookie_name>" /><br />
<label for="mail">Mail:</label><br />
<input id="mail" type="text" name="comment[mail]" size="60" value="" /><br />
<label for="url">Url:</label><br />
<input id="url" type="text" name="comment[url]" size="60" value="<%cookie_url>" /><br />
<label for="comment">Comment:</label><br />
<script type="text/javascript" src="http://blog36.fc2.com/load.js"></script>
<textarea id="comment" cols="50" rows="8" name="comment[body]"></textarea><br />
<div style="color:red;">パンヤ絵文字入力の際、全角括弧”(にこ)など”で入力してもOKです。</div>
<div id="pangya_emojilist">
<!-- コメントにカスタマイズ絵文字入力機能：画像リスト出力 -->
<script src="http://blog-imgs-30.fc2.com/t/i/g/tigerwoos/pangya_emoji_comennt_listshow.js" type="text/javascript"></script>
<!-- コメントにカスタマイズ絵文字入力機能：画像リスト出力 ここまで-->
</div>
<br />
<label for="comment_preview" id="com_preview_label">Comment Preview:</label><br />
<div class="comment_body" id="comment_preview">ご利用のブラウザ、設定ではご利用になれません。</div>
<label for="pass">Pass:</label><br />
<input id="pass" type="password" name="comment[pass]" size="20" /><br />
<label for="himitu">Secret:</label><br />
<input id="himitu" type="checkbox" name="comment[himitu]" />管理者にだけ表示<br /><br />
<input type="submit" value="送信する" />
</form>

２．このtextareaタグに、以下赤字の様にスクリプトを追加します。

<textarea id="comment" cols="50" rows="8" name="comment[body]" onkeyup="doCommentPreview()" onblur="doCommentPreview()"></textarea>

３・コメントプレビューを表示したい場所に、下記のHTMLタグを追加します。

<label for="comment_preview">comment preview:</label><br />
<div class="comment_body" id="comment_preview">ご利用のブラウザ、設定ではご利用になれません。</div><br />

σ(・_・)は、パスワードを入力するエリアの上に付けてみました。
緑字のクラス属性は、<!--comment-->〜<!--/comment-->の中にある<%comment_body>変数を囲っているdivタグで指定されているclass属性を指定します。
このテンプレの場合は、

<!--comment-->
〜
<div class="comment_body"><%comment_body></div>
〜
<!--/comment-->

こうなっているので、”comment_body”を指定します。
これは、表示の体裁をコメント表示に会わせるための指定なので、
無かったらclass="〜”は無くてもいいかもしれません。

４．コメントプレビューするか否かのチェックボックスの追加
チェックボックスを設置したい場所に、以下のスクリプトを追加。
・デフォルトでプレビューを行わない場合

<input type="checkbox" name="checkboxCommentPreview" value="" onClick="changeCommentPreview()" /> コメントをプレビューする？

・デフォルトでプレビューを行う場合

<input type="checkbox" name="checkboxCommentPreview" value="" onClick="changeCommentPreview()" checked /> コメントをプレビューする？

σ(・_・)は、コメント入力エリアの上、絵文字入力ボタンの横に設置してみました。

<script type="text/javascript" src="http://blog36.fc2.com/load.js"></script><input type="checkbox" name="checkboxCommentPreview" value="" onclick="changeCommentPreview()" /> コメントをプレビューする？<br />

５．最後に以下のスクリプトを<!--/comment_area-->の直前に置く。

<script type="text/javascript">
<!--
// コメントプレビューを制御
// ↓コメントプレビューをデフォルトでONにする場合は 1 、OFFにする場合は 0
var isCommentPreview = 0;
function changeCommentPreview() {
isCommentPreview = (isCommentPreview == 0) ? 1 : 0;
doCommentPreview();
}
// コメントプレビュー
function doCommentPreview(mode) {
// コメント入力テキストエリアのid属性
var textAreaId = 'comment';
// プレビューを表示するタグのid属性
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 || '<br />' == s) {
s = initString;
}

if (getElementCommentPreview(previewAreaId)) {
getElementCommentPreview(previewAreaId).innerHTML = s;
}
}

function getStringCommentPreview(e) {
var s = '';
s = getElementCommentPreview(e).value;
s = s.split('&').join('&amp;');
s = s.split('<').join('&lt;');
s = s.split('>').join('&gt;');
s = s.split('\'').join('&quot;');
s = s.split('\n').join('<br />');
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');
//-->
</script>

青文字の部分は、２のtextareaタグで指定されているid属性を、
紫文字の部分は、３で追加したプレビューを表示するタグのid属性を、
太文字の部分は、コメントプレビュースクリプトが実行できる場合に、コメントプレビュー欄にデフォルト表示する文字 または、画像タグ。

σ(・_・)は、このスクリプトは外部ファイルにしました。

で、出来上がったHTMLがこちら。赤字部分が追加したところです。

・
・
・
<!--/comment-->
<!-- コメントにカスタマイズ絵文字入力機能：画像変換 -->
<script src="http://blog-imgs-30.fc2.com/t/i/g/tigerwoos/pangya_emoji_input_img_chenge1.js" type="text/javascript"></script>
<!-- コメントにカスタマイズ絵文字入力機能：画像変換 ここまで-->
</div>

<h4 id="comment_post">COMMENT POST</h4>
<div class="entry_text" align="left">
<form method="post" action="./" name="comment_form">
<input type="hidden" name="mode" value="regist" />
<input type="hidden" name="comment[no]" value="<%pno>" />
<label for="subject">題名:</label><br />
<input id="subject" type="text" name="comment[title]" size="40" /><br />
<label for="name">名前:</label><br />
<input id="name" type="text" name="comment[name]" size="40" value="<%cookie_name>" /><br />
<label for="mail">Mail:</label><br />
<input id="mail" type="text" name="comment[mail]" size="60" value="" /><br />
<label for="url">Url:</label><br />
<input id="url" type="text" name="comment[url]" size="60" value="<%cookie_url>" /><br />
<label for="comment">Comment:</label><br />
<script type="text/javascript" src="http://blog36.fc2.com/load.js"></script>
<input type="checkbox" name="checkboxCommentPreview" value="" onclick="changeCommentPreview()" /> コメントをプレビューする？<br />
<textarea id="comment" cols="50" rows="8" name="comment[body]" onkeyup="doCommentPreview()" onblur="doCommentPreview()"></textarea><br />
<div style="color:red;">パンヤ絵文字入力の際、全角括弧”(にこ)など”で入力してもOKです。</div>
<div id="pangya_emojilist">
<!-- コメントにカスタマイズ絵文字入力機能：画像リスト出力 -->
<script src="http://blog-imgs-30.fc2.com/t/i/g/tigerwoos/pangya_emoji_comennt_listshow.js" type="text/javascript"></script>
<!-- コメントにカスタマイズ絵文字入力機能：画像リスト出力 ここまで-->
</div>
<br />
<label for="comment_preview" id="com_preview_label">Comment Preview:</label><br />
<div class="comment_body" id="comment_preview">ご利用のブラウザ、設定ではご利用になれません。</div>
<label for="pass">Pass:</label><br />
<input id="pass" type="password" name="comment[pass]" size="20" /><br />
<label for="himitu">Secret:</label><br />
<input id="himitu" type="checkbox" name="comment[himitu]" />管理者にだけ表示<br /><br />
<input type="submit" value="送信する" />
</form>
</div>
</div>
</div>
<!-- コメントプレビュー ここから -->
<script type="text/javascript" src="http://blog-imgs-30.fc2.com/t/i/g/tigerwoos/comment_preview.js"></script>
<!-- コメントプレビュー ここまで -->
<!--/comment_area-->

このスクリプトを利用してのテンプレの公開は、著作権の問題はなさそうなので、
近いうちに公開したいと思います。
デザインはどうするかなぁ。

※この記事が参考になったら、トラックバックしていただけたら幸いです。