2005年05月18日

Seesaaでコメントに絵文字を使えるようにする

Seesaaでは、記事には絵文字わーい(嬉しい顔)が使えますが
コメント欄でも使えるようにカスタマイズしてみました。

お世話になったのはstroll::blogさんの
コメントにカスタマイズ絵文字入力機能です。

ただし、コメント確認画面で、どうしても不具合があったので
コメント確認を削除してしまいました。
それでもよければ使ってみてください。




まず、当然ながら絵文字画像が必要になります。
私はstroll::blogさんでもおすすめしていた
SWEETSさんの素材をお借りしました。

画像をアップしたら、画像設定スクリプトの編集をします。

はじめはstroll:blogさんのまま使ってみたのすが
この画像は11X11と小さくて、間がないと非常に見づらかったので
間を空けるために少し書き換えてあります。
青字部分が書き換え箇所です)

その設定でよければ、
以下の画像設定スクリプトをコピーしてメモ帳に貼り付けて
赤字部分を編集します。

list[list.length] = new Array('画像名', '画像URL');
は画像の数だけ増やして下さい。(これが結構大変ですあせあせ(飛び散る汗)

<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" hspace="2" vspace="2"';



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

では、編集したらそれをコピーして
デザイン→HTMLを開いて
今までHTMLを編集したことのない方はHTMLの追加をクリックして
HTML名をつけ、その画面を編集します。

</head>
を探して、その前に、先ほどの画像設定スクリプトを貼り付けます。

HTMLの編集はここまでなので、これを保存して
この新しいHTMLを適用させます。

続いてデザイン→コンテンツ→記事HTML編集画面を開いて
ここに画像リスト出力スクリプトと画像変換スクリプトを記述します。

まず、画像リスト出力スクリプトですが
stroll::blogさんのものをSeesaa用に書き換えた以下のものをコピーしてください。
青字部分が書き換えた箇所です)
<script type="text/javascript">
<!--
// コメントにカスタマイズ絵文字入力機能:画像リスト出力
function writeCustmizeEmojiTagList() {
// コメントを入力するテキストエリアを指定
var textarea = 'document.comform.article_child__body';

// ***************** 設定ここまで *****************
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>


これを絵文字を表示したい部分に貼り付けるのですが
私の場合は、コメントテキストエリアの上に表示したかったので
<textarea name="article_child__body" rows="10" cols="50">
の上に貼り付けました。

それで、コメントテキストエリアはスタイルシートで見ると350pxだったので
その上にきれいに収まるように
この画像出力スクリプトを

<div style="width:350px;"></div>
で囲んで
3列きれいに並ぶように絵文字の数を調節してみました。

pxの値はスタイルシートによって違うかもしれないので
自分の環境に合わせて変えてください。


それから

<form action="/pages/user/comments2/regist/input" method="post">
を探して、これを

<form name="comform"
action="/pages/user/comments2/regist/input" method="post">
と書き換えます。


続いて画像変換スクリプトですが
これもSeesaa用に書き換えた以下のものをコピーしてください。
青字部分が書き換えた箇所です)

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

これを

</form>
</div>
<% /if -%>
<% if:page_name eq 'search' -%>
の前に貼り付けます。

以上で保存して記事ページを再構築すれば完了です。


【追記】
以前の記事では、HTMLにも3つのスクリプトを記述して
確認画面の不具合があったので、確認部分を削除すると書きましたが
HTML部分には画像設定スクリプトのみを記述して
記事HTMLに画像リスト出力スクリプト画像変換スクリプト
を記述すれば、確認画面の不具合は出ませんでした。
ただし、確認画面では絵文字ではなくタグなんですけど・・・もうやだ〜(悲しい顔)
posted by みえにゃん
at 14:36 |Comment(19) |TrackBack(7) | カスタマイズ | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
はじめまして。
カテゴリーを見ていて何かのご縁で
お会い出来ました!
ちょうどブログでそんな話をしてたので・・・。
ちなみにこれってOS は関係ないんですよね?
blog petを雑誌で見てやりたいなぁーと思ってたんですが
何せWinしか出来ないって[え〜ん]
是非教えて下さい。
ちなみに私犬飼ってるんですが猫が好きなんです。
って言うと[いぬ]怒るかなぁ?
でもうちの[いぬ]は[ねこ]みたいに手を折り曲げて
体の下に入れています。とっても[ねこ]っぽい子です。
Posted by ざくろ at 2005年05月18日 19:02
[はぁと2]ざくろさん、いらしゃいませ[おんぷ]
さっそくぴあのちゃん[いぬ]に会ってきました!
めちゃくちゃかわいい[拍手]
BlogPetはOSは関係ないはずでよ。
U^ェ^U ワン!ちゃんもいるから、きっと楽しいですよ[さくらんぼ]
Posted by みえにゃん at 2005年05月18日 23:04
はじめまして!
何度も何度もチャレンジして出来なかった
”コメントに絵文字を使えるようにする”
出来ました!![はぁと1]
ほんっとほんっとありがとうございました。。
ものすごく嬉しいです!
m(=_ _=)mペコリ…
Posted by 茶ぁ at 2005年06月06日 17:10
茶ぁさん、お役に立ててうれしいです!!
TBもありがとうございます。
Posted by みえにゃん at 2005年06月07日 19:39
初めまして[!!]ぱーこと申します。
みえにゃん様のおかげで、無事カスタマイズ出来ました[はぁと1]
ありがとうございます[!!]
後ほどトラックバックさせて頂きますね[おんぷ]
Posted by ぱーこ at 2005年07月31日 20:59
[いちご]ぱーこさん[いちご]
コメント&TBありがとうございました。
お役に立ててうれしいです。
カスタマイズってはまると楽しいですよね[にこ]
Posted by みえにゃん at 2005年08月01日 00:43
はじめまして[にこ]
ここの記事を参考にして絵文字機能を挑戦してみたのですが、右サイドバーが下に落ちてしまいました[ダウン]
自分でもあれこれ試してみたのですが直らなくて。
このような症状の場合はどうやったら直るのでしょうか?
Posted by at 2005年08月30日 15:45
[ソフト]龍さんへ[ソフト]
お返事遅くなりました。
サイドバーが落ちてしまうのは
絵文字部分の幅が広すぎるためかと思いますので
&lt;div style="width:350px;"&gt;画像リスト出力スクリプト&lt;/div&gt;
としてみてください。
Posted by みえにゃん at 2005年09月01日 07:41
[にこ]ありがとうございました。
絵文字部分の幅が広すぎるんですか。
なんだかよく分からないのですが上手く設置できちゃいました[はぁと1]
もう上手く設置出来なくて頭が膿んじゃってました[ふぇ〜ん]
とにかく設置できて良かったです[にこ]
Posted by at 2005年09月01日 07:59
[ケーキ]龍さん[ケーキ]
そちらへお邪魔したところ、無事設置できていたようでおめでとうございます[ぱん]
Posted by みえにゃん at 2005年09月03日 01:55
はじめまして。
今日、1日かかってコメントに絵文字を表示させようと頑張りましたが、結局成功しませんでした。
いろんな方々のブログを参考にしたのですが、どうも表示されません。
もう何が間違えているのかもわからず・・・
よろしければ、アドバイスいただけませんか?
Posted by at 2006年01月30日 00:58
私も、コメント欄に絵文字を表示させようと頑張ったのですが、うまくいきませんでした。javaがまったくわからないので、どうなっているのかわかりません[ふぇ〜ん]
…難しい。
Posted by ひらそる at 2006年02月28日 15:24
初めまして。
今日からこちらの方でブログの方を始めたので、
この他にも色々と参考にさせて頂きました。
無事、設置できました。
ありがとうございました。
Posted by Haruhi at 2006年03月03日 18:26
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

この記事へのトラックバックURL
http://blog.seesaa.jp/tb/15935463

この記事へのトラックバック

アイコン
Excerpt: ここのブログはカキコには絵文字あるけど、コメントには ついてません。でも同じブログ使ってるMにゃんが 絵文字つけれるようにするの知ってるので教わりました。 でもアイコン1個1個アップロードして、URL..
Weblog: ひとりごと
Tracked: 2005-05-28 01:48

コメントにもアイコンが使えるようになりました♪
Excerpt: (サムネイル♪) もうかなり前に一度チャレンジして断念_(”;)_していた ”コメントでもアイコン表示” 再度チャレンジしてや〜〜〜〜〜っと成功しました&amp;#63890; stroll::b..
Weblog: ** tyaxa's BLOG..のほほんのほほん **
Tracked: 2005-06-06 17:18

コメント欄にドコモの絵文字を追加
Excerpt: コメント欄にドコモの絵文字&amp;#63893;を追加しましたぁ&amp;#63911; 絵文字はこれから増やしていきます&amp;#63911; 今日は32コで断念しました・・&amp;#638..
Weblog: ネイルんるん
Tracked: 2005-06-13 11:39

ブログカスタマイズ4【続:コメントに絵文字を使う】他7件
Excerpt: ■コメントに絵文字を使う ・表示の幅、どうにか調整できないものかな〜と思っていたら紹介されてました&amp;#63903; BlogPetはじめよう!(Seesaa編)さま http://blogpe..
Weblog: □LOVE BEST□
Tracked: 2005-06-21 10:47

コメントにもアイコンを!
Excerpt: コメント入力部分にもアイコンを!と、考えた三十三であったが、どうすればイイのかもワカラナイ始末。さぁどうする!?その時一筋の光明が・・・
Weblog: 清い川の記憶
Tracked: 2005-07-14 06:02

コメント部分にも絵文字☆
Excerpt: 本日のカスタマイズその2。 stroll::blogさんの『コメントにカスタマイズ絵文字入力機能』と、 Blogであそぼう!さんの『Seesaaでコメントに絵文字を使えるようにする』を参考に、 コメン..
Weblog: ぱーこ日記
Tracked: 2005-07-31 22:12

コメントに絵文字を使う
Excerpt: コメントにSeesaaの絵文字を使う方法です。 Seesaaブログでコメントに絵文字を使えるようにする方法が Blogであそぼう!(Seesaa編)さんに掲載されています。 このBlogであそぼう..
Weblog: ブログ? カスタマイズ? アフィリエイト?
Tracked: 2006-02-12 04:49
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。