ボタンに絵文字を貼りたい

rails jpmobile

さて、jpmobile のおかげで簡単に携帯サイトを作れるのですが、昨今のソーシャルゲームをやっていても

のようなボタンをよく見ます。

なんで の絵文字を使わないんでしょうか？とっても気持ち悪かったので調べてみました。

プロジェクト作成

jpmobile-demo プロジェクトを立ち上げます

rails new jpmobile-demo

Gemfile

vi Gemfile
@@ -28,3 +28,5 @@
 # group :development, :test do
 #   gem 'webrat'
 # end
+gem "jpmobile", "0.1.2"
+

bundler

bundle show
bundle install

jpmobile を有効化

vi config/application.rb
@@ -38,5 +38,7 @@

     # Configure sensitive parameters which will be filtered from the log file.
     config.filter_parameters += [:password]
+
+    config.jpmobile.mobile_filter
   end
 end

controller

rails g controller top index

view

さて、いよいよ絵文字部分です。

まずは普通に絵文字を表示します。

vi app/views/top/index.html.erb


これを DoCoMo の UserAgent でアクセスして表示すると……

あははーｗ 外字の設定できてないや(笑) ソースから  の記述はなくなってるのでまぁちゃんと動いてるっぽいです。

続いて form の submit に貼ってみます。

<%= form_tag(:controller => "top", :action => "index") do %>
  <%= submit_tag "&#xE63E;" %>
<% end %>

これを表示すると、きちんと絵文字として認識されません。

ソースを眺めてみるとこういう HTML が返されています。

<form accept-charset="UTF-8" action="/top/index" method="post"><div style="margin:0;padding:0;display:inline"> <input name="authenticity_token" type="hidden" value="NtXRGo95g+0XeDQ5r9rGNXjHufo0LiXjI0YnWIDKnyU=" /></div> 
  <input name="commit" type="submit" value="&amp;#xE63E;" /> 
</form>

あ。一発で分かっちゃったかも。

結論

view をこうしたら良いんですね。

<%= form_tag(:controller => "top", :action => "index") do %>
  <%= submit_tag "&#xE63E;".html_safe %>
<% end %>

はい、お疲れさまでしたー。

ただ、FireMobileSimurator では表示が崩れちゃうんですよねー。

これはもう仕方ないのかな(>_<)