記事一覧

Web Diary Proのコメント欄に絵文字をつける

タグが使えないコメント欄でも絵文字を可能にする
「stroll::blog」さんのスクリプトです。
それに「6畳一間に魚とカメとヒト2人」さんの解説を元に、
Web Diary Proのコメント欄につける場合をメモ。

※使用にあたっての注意など、「stroll::blog」さんの記述を
 ご覧になってお使い下さい。
 また、参考にしました両サイト様に感謝です。

参考≫
 stroll::blog | コメントにカスタマイズ絵文字入力機能
 迷える子羊 | Ver4.10 絵文字入力機能設置方法

■コメント欄に絵文字を追加する■

1.画像設定スクリプトの設定
  「skin>header.html」を開き、<head>~</head>内に次の
  スクリプトを記入する。

<script type="text/javascript">
<!--
// コメントにカスタマイズ絵文字入力機能:画像設定
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;
}
// -->
</script>

 ※太文字部分をそれぞれ書き換えてください。
  「画像名」がそのまま絵文字のalt属性になります。
  その他追記したい属性は「画像タグに含める属性値」へ。
  ここの属性はそのまま弄らなくとも問題ありません。

2.「skin>comment.html」を開き、28行目あたりにある
  formタグに次の箇所を追加。

<form action="${INFO_PATH}" method="post"
id="comment_form">
<fieldset>
<legend>投稿フォーム</legend>
  ↓
<form action="${INFO_PATH}" method="post"
id="comment_form" name="comform">
<fieldset>
<legend>投稿フォーム</legend>

3.画像リスト出力スクリプトを入れる
  同じく「skin>comment.html」内のURL用フォーム近くに
  次のソースを入れる。

<dt>URL</dt>
<dd><input type="text" name="url" size="30" value="${FORM_URL}" /></dd>

<!-- コメント欄に絵文字を追加 -->
<dt>絵文字</dt>
<dd><script type="text/javascript">
<!--
// コメントにカスタマイズ絵文字入力機能:画像リスト出力
function writeCustmizeEmojiTagList() {
// コメントを入力するテキストエリアを指定
var textarea = 'document.comform.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>
</dd>
<!-- コメント欄に絵文字を追加 ここまで -->

 ※太字部分は「stroll::blog」さんのところのスクリプトを
  Web Diary Pro用に書き換えてあるところです。
  スキンによってidが異なる場合は書き換えが必要ですが、
  普通ならば上記のままでOKです。

4.画像変換スクリプトの設定
  「skin>footer.html」を開き、次のソースを</body>の直前に
  入れる。

<!-- コメント絵文字用スクリプト -->
<script type="text/javascript">
<!--
// コメントにカスタマイズ絵文字入力機能:画像変換
function changeCustmizeEmojiTag() {
// (1)コメント全体のタグの id 属性
var commentAreaIdName = 'comment';
// (2)コメント全体のタグ名
var commentAreaTag = 'div';
// (3)各コメントの class 属性
var commentBodyClassName = 'text';

// ***************** 設定ここまで *****************
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>
<!-- コメント絵文字用スクリプトここまで -->

  ※太文字の部分が「stroll::blog」さんと
   「6畳一間に魚とカメとヒト2人」さんの説明とは異なる部分です。
   コメント欄にこのスクリプトを適用するので
   'comment'となっています。

これでコメント欄に絵文字が追加されました。
ただし、このスクリプトはコメント数が多くなると、
「画像への変換処理に時間がかかり、
 また、登録した画像の数が多すぎても同様」
とのことですので、絵文字の登録しすぎに気をつけてください。

+ + + + + + + + + + + + + + + + + + + + + + + + + +

■「コメント一覧を表示する」にすると絵文字がでません。

「コメント一覧でも絵文字を表示」をご覧下さい。

■「タグエディタで絵文字を挿入」と併用できる?

問題なく使用できます。
 スクリプトを沢山入れると、それぞれが影響して使えないものが
 でてくる場合がありますが、私が実験したところどちらも
 問題なく利用できます。

 「6畳一間に魚とカメとヒト2人」さんではタグエディタ絵文字の代わりとして
 このスクリプトを利用していましたが、その場合では
 管理人の書いた日記の内容のみしか絵文字が変換されませんでした。
 設定の仕方によっては両方ともこのスクリプトで絵文字が
 追加できるかもしれませんが、自分にはちょっと分からないです。

 ※追記:「迷える子羊」さんで
  絵文字機能を管理者&コメント欄に併用する方法が公開されました。
  管理画面で絵文字imgタグがずらずら描き込まれるのが嫌だ!
  という方にはおすすめの機能です。 

TRACKBACK

未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2014/07/16(水)03時40分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2014/07/17(木)22時29分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2014/07/18(金)16時19分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2014/07/25(金)08時32分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2014/07/27(日)22時17分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/09/12(土)15時32分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/09/21(月)02時38分 受信

COMMENT

■まっさー ... 2007/01/19(金) edit・delete

絵文字入力機能を使わせて頂いております。
設置はローカルサーバ内のため、URLがない事ご容赦下さい。

1つ不具合があるのですが、記事一覧にてコメントを[表示する]にすると[画像XX]等と表示され、絵文字に変換されません。
コメント一覧ではきちんと表示されるのですが・・・。

こちらはどのように対処すれば一覧画面でも表示できるようになるのでしょうか?

■kiriji [H] ... 2007/01/20(土) edit・delete

>まっさーさん
ご来訪ありがとうございます。
「コメント一覧を表示する」をONにした場合、
新たに追加すべきカスタマイズ方法があります。

【Web Diary Pro:コメント一覧でも絵文字を表示】
http://brutzero.s22.xrea.com/rb/archives/113.html
↑こちらの記事を参照なさってください。

■桜買うたか? [M] [H] ... 2007/05/16(水) edit・delete

お忙しいところすみません。

コメント欄にも絵文字を使えるように、こちらの説明を参考に設置しました。

「Web Diary Pro:コメント一覧でも絵文字を表示」での追加のカスタマイズも試みて、何度も間違いが無いか、確認したのですが、どうしてもコメント一覧表示で絵文字画像が表示されません。

当方、初心者の為、どこをどう見ていいものか分からず困っています。
アドバイス等、何かありましたら、教えていただけないでしょうか?

宜しくお願い致します。m(__)m

■桜買うたか? ... 2007/05/18(金) edit・delete

お騒がせいたしまして、申し訳ございません。

あれからいろいろと扱ってみましたところ、無事、絵文字画像が表示され、設置が完了致しました[!]
どうも、エンコードの問題だったようです。

お忙しいところ、お騒がせしてしまい、申し訳ありませんでした。
ありがとうございました。

■未承認 ... 2014/07/22(火) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2014/07/24(木) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2014/07/31(木) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2015/01/21(水) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2015/01/24(土) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2015/02/25(水) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2015/05/07(木) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2015/05/08(金) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2015/06/18(木) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2015/06/18(木) edit・delete

管理者に承認されるまで内容は表示されません。