②「新しく記事を書く」ページが表示されている状態で、さきほどお気に入りに追加した「FC2 Blog絵文字入力支援スクリプト」をクリックします。
下図の様な表示が画面内に出現しますので、「絵文字設定」をクリックし、（１）で作成・アップロードした「画像定義スクリプト」のURLを指定します。
FC2BLOGの本文内、コメント欄でパンヤ絵文字を使うカスタマイズ方法をご紹介します。
記述例は私の作成したテンプレートを前提としていますが、
他のテンプレでも同じような記述をしていると思います。
参考記事
stroll::blog様 「■FC2 Blog絵文字入力支援スクリプト」、「■コメントにカスタマイズ絵文字入力機能 」
ぱにゃりす様 「FC2ブログをパンヤ仕様に（その２）」、「FC2ブログをパンヤ仕様に（その４）」、「FC2ブログをパンヤ仕様に（その５）」
作業を始める前に文字コードを指定して保存できるエディターを準備することをお勧めします。
FC2BLOG内で外部JavsScriptファイルを使用する場合は文字コードをEUCで保存する必要がありますが、
Windowsに付属のメモ帳では文字コード指定ができません。
このようなエディターをお持ちでない場合は、「EmEditor Free｣等のフリーのエディターを用意するといいと思います。
１．パンヤ絵文字の準備
２．記事内でパンヤ絵文字を使う
３．コメントでパンヤ絵文字を使う
追記１．記事内でカッコ付きのパンヤ絵文字を使用する方法
追記２．コメントでカッコ付きのパンヤ絵文字を使用する方法
改定履歴
2006.04.30 公開
2006.05.01 画像リスト出力スクリプトの一部に不具合があったものを修正。画像定義スクリプトのimgタグをHTML4.01用に修正。
まず最初にパンヤ絵文字を入手します。
入手先はパンヤ公式サイトの「ライブラリ」→「ファンサイトキット」のMSNメッセンジャーキットがよいでしょう。
クリックすると「pangya_icon.zip」がダウンロードできますので、
ダウンロード後、このZIPgファイルを解凍します。
”msn_pangya_icon”と”msn-pangya_emo”の二つのフォルダーが入っていますが、
パンヤ絵文字は”msn-pangya_emo”の方です。
６７個のGIFファイルが入っていますので、
FC2BLOGの管理メニュー「ファイルアップロード」を使って一つ一つをアップロードします。
FC2BLOGはFTPをサポートしていないので、これが一番面倒くさい作業かもｗ
また、韓国パンヤサイトにはアニメーション絵文字が配布されています。
http://www.pangya.com/new2/pds/pds_multimedia.asp
ただし、下記説明でダウンロードできるサンプルスクリプトにはアニメーション絵文字は記述していません。
なぜなら日本で正式公開されていないからです。
アニメーション絵文字をご使用の場合は、日本語名をご自分で決定して、追加してください。
下記形式の画像定義スクリプトを作成します。
function getEmojiArray() {
var emojiList = new Array();
// *************** 設定ここから ***************
emojiList[emojiList.length]='<img src="http://sample.com/001.gif" width="19" height="19" style="vertical-align:middle" alt="ピピン" />';
emojiList[emojiList.length]='<img src="http://sample.com/002.gif" width="19" height="19" style="vertical-align:middle" alt="ダンプー" />';
emojiList[emojiList.length]='<img src="http://sample.com/003.gif" width="19" height="19" style="vertical-align:middle" alt="ドルフ" />';
・
・ 省略
・
// *************** 設定ここまで ***************
return emojiList;
}
initCustomizeEmoji();
青字の部分は絵文字の数分定義します。
サンプルファイルを用意しましたので、ダウンロードしてご利用ください。
画像定義スクリプトサンプル EUCファイルです。右クリック、「対象をファイルに保存」でパソコン内に保存してください。
上記ファイルが文字化けする方はこちら
サンプルファイルのの４行目から７０行目までが絵文字の定義です。
下記青字の部分を実際の絵文字ファイルのURLに書き換えてください。
ファイル名を変えていなければ、sample.comの部分を一括変換すればOKだと思います。
私のBLOGの場合は以下の様になっています。
emojiList[emojiList.length]='<img src="http://blog-imgs-30.fc2.com/t/i/g/tigerwoos/001.gif" width="19" height="19" style="vertical-align:middle" alt="ピピン" />';
・
・ 省略
・
編集が完了したら、拡張子をjsにして適当な名前（日本語名不可）をつけてEUCファイルとしてファイルに保存します（xxxxx.js）。
保存したら、ファイルアップロードでアップロードします。
stroll::blog様の「■FC2 Blog絵文字入力支援スクリプト」の記事を参照し、
使い方の２に書かれている、「FC2 Blog EMOJI!」と書かれている所を右クリックして、お気に入りに追加してください。
①FC2BLOGで「新しく記事を書く」を選択します。
②「新しく記事を書く」ページが表示されている状態で、さきほどお気に入りに追加した「FC2
Blog絵文字入力支援スクリプト」をクリックします。
下図の様な表示が画面内に出現しますので、「絵文字設定」をクリックし、（１）で作成・アップロードした「画像定義スクリプト」のURLを指定します。
③下図の様に絵文字のリストが表示されるはずです。
後は、記事作成時に絵文字をクリックすれば、imgタグが自動挿入されるはずです。
※記事の「設定」部分の表示が崩れると思いますが、「FC2 Blog絵文字入力支援スクリプト」が現在の「新しい記事を書く」ページのレイアウトに対応していないためで、この件に関して私は技術サポートはできません。
この方法では、記事内にimgタグが挿入されます。
長いタグが挿入されるのが嫌な方は、追記でパンヤのチャットで使うような（）カッコつき入力の方法を説明しています。
下記形式の画像設定スクリプトを作成します。
<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>
青字の部分は画像数分記述します。
紫色部分は、変更したい場合のみで、通常はこのままでOKです。
サンプル定義ファイルを用意しましたので、ダウンロードしてご利用ください。
画像設定スクリプトサンプル EUCファイルです。右クリック、「対象をファイルに保存」でパソコン内に保存してください。
上記ファイルが文字化けする方は、こちら。
サンプルファイルの5行目から71行目までが絵文字の定義です。
下記青字の部分を実際の絵文字ファイルのURLに書き換えてください。
ファイル名を変えていなければ、sample.comの部分を一括変換すればOKだと思います。
私のBLOGの場合は以下の様になっています。
記述サンプル
list[list.length] = new Array('ピピン', 'http://blog-imgs-30.fc2.com/t/i/g/tigerwoos/001.gif');
・
・
・
編集が完了したら、テンプレートの</head>タグの上に、コピー＆ペーストして下さい。
下記スクリプトを、テンプレート中の画像リストを出力したい場所に設置します。
<script type="text/javascript">
<!--
// コメントにカスタマイズ絵文字入力機能：画像リスト出力
function writeCustmizeEmojiTagList() {
// コメントを入力するテキストエリアを指定
var textarea = 'document.comment_form.comment';
// ***************** 設定ここまで *****************
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>
コメント入力エリアの下に出力したい場合は、下記の場所に設置します。
<h4><a name="comment_post">COMMENT POST</a></h4>
<div class="entry_text" align="left">
<form method="post" action="./" name="comment_form">
<input type="hidden" name="mode" value="regist" />
<input type="hidden" name="comment[no]" value="<%pno>" />
<label for="subject">題名:</label><br />
<input id="subject" type="text" name="comment[title]" size="40" /><br />
<label for="name">名前:</label><br />
<input id="name" type="text" name="comment[name]" size="40" value="<%cookie_name>" /><br />
<label for="mail">Mail:</label><br />
<input id="mail" type="text" name="comment[mail]" size="60" value="" /><br />
<label for="url">Url:</label><br />
<input id="url" type="text" name="comment[url]" size="60" value="<%cookie_url>" /><br />
<label for="comment">Comment:</label><br />
<script type="text/javascript" src="http://blog36.fc2.com/load.js"></script><br />
<textarea id="comment" cols="50" rows="8" name="comment[body]"></textarea><br />
<script type="text/javascript">
<!--
// コメントにカスタマイズ絵文字入力機能：画像リスト出力
function writeCustmizeEmojiTagList() {
// コメントを入力するテキストエリアを指定
var textarea = 'document.comment_form.comment';
// ***************** 設定ここまで *****************
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>
<br />
<label for="pass">Pass:</label><br />
<input id="pass" type="password" name="comment[pass]" size="20" /><br />
<label for="himitu">Secret:</label><br />
<input id="himitu" type="checkbox" name="comment[himitu]" />管理者にだけ表示<br /><br />
<input type="submit" value="送信する" />
</form>
</div>
太字部分の紫字部分はコメント入力全体を囲むformタグのname属性を指定します。
<form method="post" action="./" name="comment_form">
オレンジ部分は、コメント本文を入力するtextareaタグのid属性。
<textarea id="comment" cols="50" rows="8" name="comment[body]"></textarea>
↓
var textarea = 'document.comment_form.comment';
FC2BLOGのテンプレートは概ねこの様な記述になっていると思います。
上記説明は個別記事ページでコメントを入力する部分への絵文字リスト出力ですが、コメント編集画面でも同様のカスタマイズを行います。
同じスクリプトを同様な場所に設置すればいいと思います。
下記スクリプトをコメントを出力している部分の<!--/comment-->の直下に設置します。
<script type="text/javascript">
<!--
// コメントにカスタマイズ絵文字入力機能：画像変換
function changeCustmizeEmojiTag() {
// （１）コメント全体のタグの id 属性
var commentAreaIdName = 'comment_area';
// （２）コメント全体のタグ名
var commentAreaTag = 'div';
// （３）各コメントの class 属性
var commentBodyClassName = 'comment_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>
設置例
<div class="entry">
<h4 id="com">COMMENT</h4>
<div id="comment_area">
<!--comment-->
<div class="comment_entry <%comment_name>">
<div class="comment_title"><a name="comment<%comment_no>"><strong><%comment_title></strong> (<%comment_no>)</a></div>
<div class="comment_body"><%comment_body></div>
<div class="comment_state">[ <%comment_year>.<%comment_month>.<%comment_day>(<%comment_youbi>) <%comment_hour>:<%comment_minute>] <a href="<%comment_url>" target="_blank">URL</a> | <%comment_mail+name> #<%comment_trip> | <a href="<%comment_edit_link>">EDIT</a> | <a href="#pagetop" title="Top">↑</a>
</div>
</div>
<hr />
<!--/comment-->
<script type="text/javascript">
<!--
// コメントにカスタマイズ絵文字入力機能：画像変換
function changeCustmizeEmojiTag() {
// （１）コメント全体のタグの id 属性
var commentAreaIdName = 'comment_area';
// （２）コメント全体のタグ名
var commentAreaTag = 'div';
// （３）各コメントの class 属性
var commentBodyClassName = 'comment_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>
</div>
（１）の値は、コメント全体を囲むタグのid属性を記述します。
<div id="comment_area">
（２）の値は、（１）のidを含むタグの種別。
<div id="comment_area">
（３）の値は、繰り返されるコメントを囲むタグのclass属性を記述します。
<div class="comment_body"><%comment_body></div>
以上でコメント入力の際にパンヤ絵文字が使用できるようになっていると思います。
これまでのカスタマイズで、記事内、コメント内でパンヤ絵文字の使用が可能になります。
以下のカスタマイズは、興味のある方のみで結構です。
項番３で説明したカスタマイズでは、絵文字をクリックすると[ひょえ]（かぎカッコ）の様なタグが挿入されます。
（１）パンヤプレイ中にチャットで使用するように全角カッコ付きの絵文字入力（（ひょえ）など）を行いたい場合は、項番３の（３）で設置したスクリプトに変更を加えることで実現できます。
スクリプトに赤字の部分を追加することにより、全角カッコ入力でも絵文字に変換されます。
<script type="text/javascript">
<!--
// コメントにカスタマイズ絵文字入力機能：画像変換
function changeCustmizeEmojiTag() {
// （１）コメント全体のタグの id 属性
var commentAreaIdName = 'comment_area';
// （２）コメント全体のタグ名
var commentAreaTag = 'div';
// （３）各コメントの class 属性
var commentBodyClassName = 'comment_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] + '">');
}
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>
（２）さらに絵文字をクリックした時に、全角カッコ付きで入力させたい場合は、３の（２）で設置したスクリプトを変更します。
下記赤字の様に、”["と”」”を”（”に”）”（全角カッコ）変更します。
<script type="text/javascript">
<!--
// コメントにカスタマイズ絵文字入力機能：画像リスト出力
function writeCustmizeEmojiTagList() {
// コメントを入力するテキストエリアを指定
var textarea = 'document.comment_form.comment';
// ***************** 設定ここまで *****************
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>
項番２の「記事内でパンヤ絵文字を使う」の方法では、記事内に下記の様な長いimgタグが挿入されます。
<img src="http://blog-imgs-30.fc2.com/t/i/g/tigerwoos/pangya_emoji_001.gif" width="19" height="19" style="vertical-align:middle" alt="ピピン" />
パンヤプレイ中にチャットで使用するようにカッコ付きの絵文字入力（（ひょえ）など）を行いたい場合は、追記１の（１）で説明した方法の応用で実現できます。
<div id="topentry_area">
<!--topentry-->
<div class="entry">
<h2><a href="<%topentry_link>" name="entry<%topentry_no>" id="entry<%topentry_no>" title="記事を参照"><%topentry_title> </a>
<script type="text/javascript">
<!--
nw(<%topentry_year>,<%topentry_month>,<%topentry_day>,<%topentry_hour>)
//-->
</script></h2>
・
・中略
・
<div class="entry_text">
<%topentry_body>
</div>
・
・中略
・
<!--
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/"xmlns:dc="http://purl.org/dc/elements/1.1/">
<rdf:Description
rdf:about="<%topentry_link>"
trackback:ping="<%url>tb.php/<%topentry_no>"
dc:title="<%topentry_title>"
dc:identifier="<%topentry_link>"
dc:subject="<%topentry_category>"
dc:description="<%topentry_discription>"
dc:creator="<%author_name>"
dc:date="<%topentry_year>-<%topentry_month>-<%topentry_day>T<%topentry_hour>:<%topentry_minute>:<%topentry_second>+09:00" />
</rdf:RDF>
-->
</div>
<br />
<!--/topentry-->
<script type="text/javascript">
<!--
// コメントにカスタマイズ絵文字入力機能：画像変換
function changeCustmizeEmojiTag() {
// （１）コメント全体のタグの id 属性
var commentAreaIdName = 'topentry_area';
// （２）コメント全体のタグ名
var commentAreaTag = 'div';
// （３）各コメントの class 属性
var commentBodyClassName = 'comment_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] + '">');
}
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>
</div>
①<!--topentry-->～<!--/topentry-->全体を囲むid属性を確認します。
<div id="topentry_area">
ない場合は、上記サンプルの赤字部分の様に設置してください。
追加する場合、id属性の重複は許されないので、必ずテンプレート内でユニークになるようにしてください。
②記事が繰り返される<!--topentry-->～<!--/topentry-->の中を囲むclass属性を確認します。
<div class="entry">
ない場合は、上記サンプルのオレンジ文字部分の様に設置してください。
③追記１の（１）で改変を加えたスクリプトを<!--/topentry-->の直下に設置します。
コメント全体のタグのid属性には①のid属性を、各コメントのclass属性には②のclass属性を設定します。
以上で記事内でもカッコ付き絵文字を使用できるようになります。
ただし、プレビューやリアルタイムプレビューでは変換されません。
Writen by こそっとゴルフ・パンヤ