FCafe　 コメント絵文字入力 2

　　当blogのコメント欄を御覧になった方は既にお気付きの事かと思いますが、「絵文字タグ」の入力形式を　「外部窓」を呼び出す方式から「頁内選択」方式へ変更しました。
従来の「外部窓」方式はＦＣ２のシステムファイルをblogの固別記事モードから利用する方式であった訳ですが、

• 別窓がblog本体窓で隠れてしまい易い
• Firefoxでは２頁目から入力できない

という問題がありました （ 後者はＩＥではＯＫ ）。　　一方「頁内選択式」は当blogで最初にお示しした方法ですが、ソースが長大で設置が面倒になってしまうきらいがあったわけです。
この度可及的にソースの短縮化を行い、特にコメント入力部への設置が簡便となるよう試みてみましたので発表します。（学会報告風）

【 設置方法 】　head領域に以下のソースを貼り付けます。 <script type="text/javascript"><!-- var ca="v"; function del(n) { document.getElementById(n).style.display="none"; } function shw(n) { document.getElementById(n).style.display="block"; } function SetMap(u1,u2,u3,u4,u5) { w=0; h=0; for(i=u1;i<=u2;i++){ if (w>=u3){w=0;h=h+u5} document.write(p1+w+','+h+','+(w+u4)+','+(h+u5)+p2+i+p3+i+p4); w=w+u4; } document.write('</map>'); } function clk(n) { ca="v";if (n>2){ca="e";if (n<4) ca="i"} for (i=1;i<=5;i++) {del('m'+i)} shw('m'+n) } function WRT(no){ document.comment.body.value += '['+ca+no+']'; } function Emoji() { sv="<%url>".replace( /(http:\/\/)\w+\.(\w+\.fc2\.com\/)/, '<img src="$1$2admin\/image\/' ); p1='<area shape="rect" coords="'; p2='" href="javascript:WRT('; p3=')" title=" '; p4=' ">'; p5='icon.gif" title=" '; p6=' border="0" onclick="clk('; p7='.gif" border="0" usemap="#m'; p8='" id="m'; p9='"><map name="m'; document.write(sv+'v'+p7+'1'+p8+'1'+p9+'1">'); SetMap(1,275,225,15,15); document.write(sv+'v2'+p7+'2'+p8+'2'+p9+'2">'); SetMap(276,545,225,15,15); document.write(sv+'i'+p7+'3'+p8+'3'+p9+'3">'); SetMap(1,282,240,12,12); document.write(sv+'e'+p7+'4'+p8+'4'+p9+'4">'); SetMap(1,260,210,14,15); document.write(sv+'e2'+p7+'5'+p8+'5'+p9+'5"><br />'); SetMap(261,518,210,14,15); document.write(sv+'v'+p5+'V 絵文字 1"'+p6+'1)">'); document.write(sv+'v'+p5+'V 絵文字 2"'+p6+'2)">'); document.write(sv+'i'+p5+'I 絵文字"'+p6+'3)">'); document.write(sv+'e'+p5+'E 絵文字 1"'+p6+'4)">'); document.write(sv+'e'+p5+'E 絵文字 2"'+p6+'5)">'); } //--></script>　　 ( 右 click で「全選択」し、</head> タグの手前にコピペされて下さい ）

　　ＣＳＳに以下を追加 #m1,#m2,#m3,#m4,#m5 {display:none}

　　コメント入力部を以下の様にします　（例） <form method="post" action="./" name="comment" id="comment">
　　（ 他の入力欄 ）
<script type="text/javascript">Emoji()</script>
<textarea id="body" name="comment[body]" cols="△" rows="▽">
絵文字が使えます！ </textarea >
　　（ 他の入力欄 ）
コメント入力 form 、 textarea に name と id を付加し textarea 付近にスクリプト関数を書きます
.

【 使用法 】　５つ並んだアイコンをclickすると 対応する各キャリアの絵文字選択表が表示されます （ ”close”は実使用上特に必要無しと判断し省略しました ）。　操作方法は別窓方式（記事投稿時）と変わりません。　入力されるのは「短縮絵文字タグ」です（ 当blogのコメント入力欄を参照 ）
.

【 解 説 】　「絵文字入力部分」を一行スクリプトにしました。　コメント入力 form 内のアイコン群は全てスクリプトで書き出されます。（スクリプトoff環境ではアイコンは表示されません）
textareaの名前やIDもデフォルトのままで使うようにしました。
★コメント表示部分にはあらかじめ別記事の「絵文字表示スクリプト」を実装しておいて下さい