naoKの
「ホイきたー！」

いよいよスクリプトの設置になるのですが，stroll:blogさんは，恐らく皆がソースを見て分かりやすいようにスクリプトをテンプレート内に記述されています。確かにサイトのソースを見てみると非常に見易い。ただ，詳しい反面それが煩わしいと感じることもあるわけで。私は出来ればシンプルスマートにできればそれに越したことはない主義なので，スクリプトを外部ファイルに書くことにしました。

ppBlogではjavascriptの定義ファイルがあります。script.jsという非常に分かりやすいファイルがそれです。今回もそれに追加してゆきます。

<script type="text/javascript">
<!--

// -->
</script>

// コメントにカスタマイズ絵文字入力機能：画像設定
function getCommentEmojiList() {
var list = new Array();
// 画像名、画像URLの設定
list[list.length/] = new Array('画像名', '画像URL');
list[list.length/] = new Array('画像名', '画像URL');
list[list.length/] = new Array('画像名', '画像URL');
return list;
}
function getCustmizeEmojiAttribute() {
// 画像タグに含める属性値（alt属性以外）
var att = 'border="0" style="vertical-align:middle"';
// ***************** 設定ここまで *****************
att = (att != '') ? (' ' + att) : '';
return att;
}

list[list.length/] = new Array('ニコッ', 'Images/au/au_001.gif');

// コメントにカスタマイズ絵文字入力機能：画像リスト出力
function writeCustmizeEmojiTagList() {
// コメントを入力するテキストエリアを指定
var textarea = 'document.comform.c_com';
// ***************** 設定ここまで *****************
var list = getCommentEmojiList();
var att = getCustmizeEmojiAttribute();
for (var i = 0; i < list.length; i++) {
window.document.write('<a href="javascript:;"
onClick="addCustmizeEmoji(' + textarea + ', '' + list[i/][0/] +
'');"><img src="' + list[i/][1/] + '"' + att + ' alt="' +
list[i/][0/] + '" /></a>');
}
}
// reference from jugem.jp (c)
function addCustmizeEmoji(obj, tag) {
var item = '[' + tag + '/]';
if (document.selection) {
obj.focus();
sel = document.selection.createRange();
sel.text = item;
} else if (obj.selectionStart || obj.selectionStart == '0') {
var startPos = obj.selectionStart;
var endPos = obj.selectionEnd;
obj.value = obj.value.substring(0, startPos)
+ item + obj.value.substring(endPos, obj.value.length);
} else {
obj.value += item;
}
}

<form method="post" action="index.php">

<form name="comform" method="post" action="index.php">

<textarea name="c_com" id="c_com" cols="70" rows="5" style="width:97%;background:#f7f7f7;"></textarea><br />

// コメントを入力するテキストエリアを指定
var textarea = 'document.comform.c_com';

<script type="text/javascript">writeCustmizeEmojiTagList();</script>

<div class="content">

…ここまで，大丈夫でしょうか?絵文字が表示されない，またはクリックしても反応がない場合はどこか間違っています。もう一度見直してみましょう。

// コメントにカスタマイズ絵文字入力機能：画像変換
function changeCustmizeEmojiTag() {
// （１）コメント全体のタグの id 属性
var commentAreaIdName = '';
// （２）コメント全体のタグ名
var commentAreaTag = '';
// （３）各コメントの class 属性
var commentBodyClassName = 'body';
// ***************** 設定ここまで *****************
var list = getCommentEmojiList();
var att = getCustmizeEmojiAttribute();
var objComArea;
var classComArea;
var objComBody = new Array();
if (commentAreaIdName != '') {
objComArea = document.getElementById(commentAreaIdName);
if (!objComArea || !objComArea.innerHTML) return;
classComArea = objComArea.getElementsByTagName(commentAreaTag);
} else {
classComArea = document.getElementsByTagName('*');
}
for (var i = 0; i < classComArea.length; i++) {
if (classComArea[i/].className == commentBodyClassName)
objComBody[objComBody.length/] = classComArea[i/];
}
for (var i = 0; i < objComBody.length; i++) {
objComBody[i/].innerHTML = getStringCustmizeEmojiTag(list,
objComBody[i/].innerHTML, att);
}
}
function getStringCustmizeEmojiTag(list, s, att) {
for (var i = 0; i < list.length; i++) {
s = s.split('[' + list[i/][0/] + '/]').join('<img src="' + list[i/][1/] + '"' + att + ' alt="' + list[i/][0/] + '" />');
}
return s;
}

％＿body＿％

<script type="text/javascript">changeCustmizeEmojiTag();</script>

<div id="column-center" class="body">

return $DIVISION['body'/] = $body.$_com.NL.$header.NL.'<p class="center">'.$back.NL.' '.$main.'</p>'.NL;

return $DIVISION['body'/] = $body.$_com.NL.$header.'<script type="text/javascript">changeCustmizeEmojiTag();</script>'.NL.'<p class="center">'.$back.NL.' '.$main.'</p>'.NL;

$link = "|＜a href=\"#\" title=\"$ttl\" onclick='return ToClipBoard(\"\",\"$url?UID=$id\")'>LinkMe</a>n ";

$link = "|<a href=\"#\" title=\"$ttl\"$copy>LinkMe</a>n ";

ふぅ。これでコメント欄での絵文字使用が可能になったはず，であります。がしかし，がしかし。naoK，これを記事にも表示できるようにしてみました。しかしながら，それには更にファイルをいじらなくてはならないので，記事を分けて書きますね。とりあえず今回はここまで。記事本文に絵文字を表示させたい方はこちらをご覧ください。