« 見たことない『やきそば弁当』 | トップページ | ポッドキャストが気になる »

2006.02.07

本文でも絵文字を使う

KOROPPYさんのところで
ココログ本文で絵文字を使う方法
という記事を読んで
早速、導入してみました![→◇←]

ただ、あまり同じようなスクリプトを増やしたくなかったのと
1つのHTMLに同じ関数名が複数あるときの
JavaScriptの動きがどうなるか不安だったので
(よく考えたら、やってみれば分かるのに・・・)
もともとKOROPPYさんのところの記事を読んで導入していた
テンプレートをいじらずにコメント欄で絵文字を使う方法
にある手順4のスクリプトをコピーするのではなく
手順4のスクリプトを改良する方法にしてみました。

KOROPPYさんのところの手順4のスクリプトとの相違点は
「★ここを追加」とある次の命令のところだけです。
KOROPPYさんのところの2つの記事の差分から修正したので
たぶん修正箇所は問題ないと思います。

<script type="text/javascript">
<!--
// ◆コメントにカスタマイズ絵文字入力機能:画像変換
function changeCustmizeEmojiTag() {
// (1)コメント全体のタグの id 属性
var commentAreaIdName = 'center';
// (2)コメント全体のタグ名
var commentAreaTag = 'div';
// (3)各コメントの class 属性
var commentBodyClassName = 'comment-body';
//★ここを追加
var entryBodyTextClassName = 'entry-body-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];
//★ここを追加
if (classComArea[i].className == entryBodyTextClassName) 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>

なお、2つめの「★ここを追加」は、
説明しやすいように、このようにしましたが

if (classComArea[i].className == commentBodyClassName || classComArea[i].className == entryBodyTextClassName) objComBody[objComBody.length] = classComArea[i];

と2つのif文を1つにまとめても良いかもしれません。

また、KOROPPYさんの記事の【追記】にあるように
IE6.0 → ○
Opera → ○
firefox1.5 → ×
Netscape7.1 → ×
なようです。

残念ながら、かげさんのマシンには
IE系のLunascapeというブラウザしか
入っていないので他のブラウザでは確認できてません。

2006/02/08追記
KOROPPYさんの最新記事によると
URL Breaker Plusというものと相性が悪かったようです。



| | コメント (2) | トラックバック (1)

このエントリーへのリンク

このエントリーのリンクを入れるHTML:

トラックバック

この記事へのトラックバックの一覧です: 本文でも絵文字を使う:

» ココログ本文で絵文字を使う方法(改訂版) [KOROPPYの本棚から]
前回の「ココログ本文で絵文字を使う方法」は、全てのブラウザに対応できなかったので、新しい方法にしました。 注意点としては、URL Breaker Plusを外すことです。 こちらは相性が悪いようで、firefoxやNetscapeで絵文字が表示できなくなってしまいます。 「テンプレートをいじらずにコメント欄で絵文字を使う方法」を導入していることが前提です。 1.手順4のスクリプトの「各コメントの class 属性」を「entry」へ変更します。 // (3)各コメントの class 属性 var c... 続きを読む

受信: 2006/02/08 10:14:41

コメント

このブログの新着コメントをRSSリーダに登録する為のxml

トラバは上手く受信できていなかったようで、
お手数をおかけして申し訳ありません[→V←]
こちらでつなげておきました。

こちらの方法はスマートですね~[☆_☆]
IEもFirefoxも表示できてます。

ご指摘のように、ただ同じものを貼り付けたのでは、
全てのブラウザ対応にはならないようです[冷や汗]

改めて別の方法にしたところ、成功しているようなので、
後ほど記事にまとめなおしたいと思っています。
そのときかげさんの方法も併せてご紹介させていただきますね。

投稿者: KOROPPY (2006/02/08 7:38:19)

To:KOROPPYさん
> トラバは上手く受信できていなかったようで、
> お手数をおかけして申し訳ありません[→V←]
> こちらでつなげておきました。

対応、ありがとうございます![☆_☆]

> IEもFirefoxも表示できてます。

Firefoxでも表示できるんですね。
かげさんは、ほかのブラウザを入れてないんで
貴重な情報です。
確認していただきありがとうございます。

> 改めて別の方法にしたところ、成功しているようなので、
> 後ほど記事にまとめなおしたいと思っています。
> そのときかげさんの方法も併せてご紹介させていただきますね。

わーい、ありがとうございます!

投稿者: かげさん (2006/02/09 1:47:04)




←名前とメールアドレスは必須です。
URLも記入すれば、URLのみが公開されます。
メールアドレスのみですと、メールアドレスが公開されてしまいますので、御注意ください。

↓コメント本文では、「a href」「b」「i」「br/」「p」「strong」「em」「ul」「ol」「li」「blockquote」「pre」のタグが使えます。絵文字をクリックすると、本文にタグを挿入できます。