絵文字入力パッドを作ってみた
仕事で必要になったので、PCのブラウザー上で絵文字を入力パッドを作ってみました。jQueryを使ったので簡単でした。
ただし、いつものように IE対応(IE6, IE7で動きます)には時間がかかりました ^^);
入力フィールドの右にあるアイコンをクリックすると絵文字入力パッドが表示されます、
mixiの絵文字入力パッドと似てますが ^^; 入力パッドの位置はドラックして移動できます。
コード
<html> <head> <title>PC 絵文字入力</title> <link rel="stylesheet" type="text/css" href="/css/pc_emoji.css"> <script src="/js/jquery-1.3.1.js" type="text/javascript"></script> <script src="/js/ui.core.js" type="text/javascript"></script> <script src="/js/ui.draggable.js" type="text/javascript"></script> <script src="/js/jquery.bgiframe.js" type="text/javascript"></script> </head> <body> <div id="emoji_palette" class="emoji_palette" style="display:none;"> <div class="emoji_palette_title"> <div class="emoji_palette_title_left">絵文字</div> <div class="emoji_palette_title_right"> <span class="emoji_palette_close">閉じる</span> </div> </div> <table> <tr> <td id='em_E63E'><img src='/img/emoticons/sun.gif'></td> <td id='em_E63F'><img src='/img/emoticons/cloud.gif'></td> <td id='em_E640'><img src='/img/emoticons/rain.gif'></td> .... 省略 <td id='em_E754'><img src='/img/emoticons/horse.gif'></td> <td id='em_E755'><img src='/img/emoticons/pig.gif'></td> <td id='em_E756'><img src='/img/emoticons/wine.gif'></td> <td id='em_E757'><img src='/img/emoticons/shock.gif'></td> <td class="null_emoji"> </td> <td class="null_emoji"> </td> <td class="null_emoji"> </td> <td class="null_emoji"> </td> <td class="null_emoji"> </td> <td class="null_emoji"> </td> <td class="null_emoji"> </td> <td class="null_emoji"> </td> </tr> </table> </div> <script type="text/javascript" charset="utf-8"> var emoji_entry_name = ''; $(document).ready(function(){ $("img.emoji_entry").bind("click", function(e){ emoji_entry_name = this.id.replace("em_", ""); $("div.emoji_palette").bgiframe().css("top", e.pageY + 30).css("left", 50).show("normal").draggable(); }); $(".emoji_palette_close").bind("click", function(){ $(".emoji_palette").hide("normal"); }); $("div.emoji_palette td").bind("click", function(){ if (!this.id) return; var input_tag = "input[name='" + emoji_entry_name + "']"; $(input_tag).val($(input_tag).val() + "[em:" + this.id.replace("em_", "") + "]"); }); $("div.emoji_palette td").hover( function(){ if (this.id) $(this).css("background-color","#999"); }, function(){ if (this.id) $(this).css("background-color","#FFF"); } ); }); </script> <form> 名前：<input type="text" name="nickname"> <img src="/img/emoticons/pc_emoji.gif" class="emoji_entry" id="em_nickname"><br> コメント：<input type="text" name="comment" size="40"> <img src="/img/emoticons/pc_emoji.gif" class="emoji_entry" id="em_comment"> </form> </body> </html>
まず、絵文字の画像ですが TypePadの絵文字アイコン画像と、携帯表示モジュールをフリー（自由）ライセンスで公開 を利用しています。 ありがとうございます！
画像毎にTDタグのIDに em ＋ 文字コード を設定して画像とコードの対応を取っています。
jQUeryの部分は、
- 入力フィールド右のアイコン(img)をクリックされたら入力パッドを表示する部分
- 入力フィールドのnameをアイコンのidで与えています(あまりスマートではないですね ^^;)
- 入力パッドはマウスのクリックされた位置から少し下に表示されるようにtopを設定しています。
- draggable() はjQUery UI のドラック機能の設定です。これだけでドラック出来るようになります、素晴らしい！
- bgiframe() は IE6のバグ(!?)に対応する為の jQUery 用ライブラリーです、IE6では IFRAME を使うようです・・・ 詳しくは http://plugins.jquery.com/project/bgiframe
- 入力パッドの画像をクリックした際に絵文字のコードを入力フィールドに送る部分
- 特に解説はいらないですね・・・
- 入力パッドを閉じる処理
- hide("normal") で簡単なエフェクトを付けています
- 入力パッドの画像上でマウスを移動した際に画像をハイライトする部分
CSS は
div.emoji_palette { position: absolute; top: 100px; left: 100px; border: 1px solid #FC6; z-index: 5; width: 370px; background-color: #FFF; } div.emoji_palette_title { background-color: #FC6; color: #FFF; height: 1.5em; cursor: crosshair; } div.emoji_palette_title_left { float: left; text-align: left; width: 100px; padding-left: 4px; } div.emoji_palette_title_right { margin-left: 100px; text-align: right; padding-right: 10px; } span.emoji_palette_close { color: #FFF; font-size: 80%; text-decoration: none; cursor: pointer; } div.emoji_palette table { border-collapse: collapse; margin: 2px 4px; } div.emoji_palette td { padding: 1px; cursor: pointer; } div.emoji_palette td.null_emoji { background-color: #FFF; padding: 1px; cursor: default; } img.emoji_entry:hover { border: 1px solid #FC6; cursor: pointer; } img.emoji_entry { border: 1px solid #FFF; cursor: pointer; }
絵文字画像のテーブル部分は、TypePadの絵文字表示モジュールにある emoticon.yaml から下のようなプログラムで作っています。
EMOJI = YAML::load(IO.read('emoticon.yaml')) n = 0 puts "<tr>" EMOJI['docomo'].keys.sort.each do |code| puts "<td id='em_#{code}'><img src='/ma2/img/emoticons/#{EMOJI['docomo'][code]}.gif'></td>" n += 1 puts "</tr><tr>\n" if (n % 20 == 0) end while (n % 20 != 0) n += 1 puts "<td class='null_emoji'> </td>" end puts "</tr>"
