Four Seasons

コメントに絵文字機能を追加

前からやってみたかったのだけれど、重くなるから・・・と思い見送ってました。でも、やっぱりあると楽しいので思い切って設置しました。参考にしたのはチームニゴイでございます。のこの記事です。以下、私用の覚え書きです。ほとんど記事に書いてあるとおりです。

まず、このブログで使うアイコンを入れるフォルダを新たに作成して、適当な場所に置きます。
フォルダ名は「icon_image」にしました♪
テンプレートモジュール（テンプレートページ下部）で新しくテンプレートを３つ作ります。
モジュールを使わない場合は、所定の位置に直接追加します。

一つ目・・・「CommentEmojiA」としました。

<script type="text/javascript">
<!--
// コメントにカスタマイズ絵文字入力機能：画像設定
function getCommentEmojiList() {
var list = new Array();
// 画像名、画像URLの設定

list[list.length] = new Array('ふつう', '<$MTBlogURL$>icon_image/00.gif');
list[list.length] = new Array('にこっ', '<$MTBlogURL$>icon_image/01.gif');
list[list.length] = new Array('えーん', '<$MTBlogURL$>icon_image/02.gif');
list[list.length] = new Array('びっくり', '<$MTBlogURL$>icon_image/03.gif');
list[list.length] = new Array('あせ', '<$MTBlogURL$>icon_image/04.gif');
list[list.length] = new Array('むかっ', '<$MTBlogURL$>icon_image/05.gif');
list[list.length] = new Array('はて？', '<$MTBlogURL$>icon_image/06.gif');
list[list.length] = new Array('はれ', '<$MTBlogURL$>icon_image/07.gif');
list[list.length] = new Array('あめ', '<$MTBlogURL$>icon_image/08.gif');
list[list.length] = new Array('くもり', '<$MTBlogURL$>icon_image/09.gif');
list[list.length] = new Array('はれくもり', '<$MTBlogURL$>icon_image/10.gif');
list[list.length] = new Array('ゆき', '<$MTBlogURL$>icon_image/11.gif');
list[list.length] = new Array('ねこ', '<$MTBlogURL$>icon_image/12.gif');
list[list.length] = new Array('いぬ', '<$MTBlogURL$>icon_image/13.gif');
list[list.length] = new Array('ぱんだ', '<$MTBlogURL$>icon_image/14.gif');
list[list.length] = new Array('うさぎ', '<$MTBlogURL$>icon_image/15.gif');
list[list.length] = new Array('えんぴつ', '<$MTBlogURL$>icon_image/16.gif');
list[list.length] = new Array('けしごむ', '<$MTBlogURL$>icon_image/17.gif');
list[list.length] = new Array('はな', '<$MTBlogURL$>icon_image/18.gif');
list[list.length] = new Array('はーと', '<$MTBlogURL$>icon_image/19.gif');
list[list.length] = new Array('・・・', '<$MTBlogURL$>icon_image/pp_00.gif');
list[list.length] = new Array('はあと', '<$MTBlogURL$>icon_image/pp_01.gif');
list[list.length] = new Array('あせ・・', '<$MTBlogURL$>icon_image/pp_02.gif');
list[list.length] = new Array('さーっ', '<$MTBlogURL$>icon_image/pp_03.gif');
list[list.length] = new Array('むかっ！', '<$MTBlogURL$>icon_image/pp_04.gif');
list[list.length] = new Array('♪', '<$MTBlogURL$>icon_image/pp_05.gif');
list[list.length] = new Array('？', '<$MTBlogURL$>icon_image/pp_06.gif');
list[list.length] = new Array('！', '<$MTBlogURL$>icon_image/pp_07.gif');
list[list.length] = new Array('あせ×２', '<$MTBlogURL$>icon_image/pp_08.gif');
list[list.length] = new Array('むっ！', '<$MTBlogURL$>icon_image/pp_09.gif');
list[list.length] = new Array('ぱきっ', '<$MTBlogURL$>icon_image/pp_10.gif');
list[list.length] = new Array('らぶ', '<$MTBlogURL$>icon_image/pp_11.gif');
list[list.length] = new Array('どくろ', '<$MTBlogURL$>icon_image/pp_12.gif');
return list;
}

function getCustmizeEmojiAttribute() {
// 画像タグに含める属性値（alt属性以外）
var att = 'border="0" style="vertical-align:middle"';

// ***************** 設定ここまで *****************
att = (att != '') ? (' ' + att) : '';
return att;
}
// -->
</script>

保存します♪　そして、

<$MTInclude module="CommentEmojiA"$>

を、個別エントリーアーカイブの</head>の上に入れます。

二つ目・・・「CommentEmojiB」としました。

<script type="text/javascript">

<!--

// コメントにカスタマイズ絵文字入力機能：画像リスト出力

function writeCustmizeEmojiTagList() {

// コメントを入力するテキストエリアを指定

var textarea = 'document.comments_form.text';

// ***************** 設定ここまで *****************
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;
}
}
writeCustmizeEmojiTagList();
// -->
</script>

保存します♪　そして、

<$MTInclude module="CommentEmojiB"$>

を、絵文字サンプルを表示させたい場所に入れます。

<p><label for="text">コメント:</label><br /><br />
<$MTInclude module="CommentEmojiB"$>

<p><label for="text">コメント:</label> <MTIfAllowCommentHTML>
(書式を変更するような一部のHTMLタグを使うことができます)</MTIfAllowCommentHTML><br /><br />
<$MTInclude module="CommentEmojiB"$>

という具合にです♪

三つ目・・・「CommentEmojiC」としました。

<script type="text/javascript">
<!--
// コメントにカスタマイズ絵文字入力機能：画像変換
function changeCustmizeEmojiTag() {
// （１）コメント全体のタグの id 属性
var commentAreaIdName = '';
// （２）コメント全体のタグ名
var commentAreaTag = 'div';
// （３）各コメントの class 属性
var commentBodyClassName = 'commentbody';

// ***************** 設定ここまで *****************
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;
}
changeCustmizeEmojiTag();
// -->
</script>

保存します♪
そして、個別エントリーアーカイブのコメント表示部分を修正します。

<$MTInclude module="CommentEmojiC"$>

を・・・

<$MTInclude module="CommentEmojiC"$>
</MTEntryIfCommentsOpen>
</MTEntryIfAllowComments>

のように追加します。次に・・・

<div id="c<$MTCommentID$>">

を以下のように変更します。こうしないと表示されないそうです。

<div id="c<$MTCommentID$>" class="commentbody">

同じようにコメントリスト、コメントプレビューテンプレートも修正します。

<MTComments>のすぐ下に
<div class="commentbody">
を、
</MTComments>のすぐ上に
</div>
<$MTInclude module="CommentEmojiC"$>
を追加します。

<MTComments>
<div class="commentbody">
　　　　・
　　　　・
　　　　・
</div>
<$MTInclude module="CommentEmojiC"$>
</MTComments>

プラグインを使う方法も検討したのですが、使い勝手などからjavascriptを使うことにしました。
無事設置できてほっと一安心(´▽｀) ホッ　どうぞ使ってみてください(o^-^o)

ゆこりん : 09:44 | コメント (4) | Blog