携帯絵文字をPCで表示するためのフィルタをつくってみた

id:darashiさんが開発している、Railsで携帯向けアプリケーションを構築する時に便利なRailsプラグインJpmobile」の機能を拡張するプラグインです。

Jpmobileにおいて、携帯の絵文字はUnicodeの私的領域にマッピングされます。そしてアクセスがあるとユーザの使用する携帯端末に合わせて変換後、送出されます。(after_filterなので、もちろんフラグメントキャッシュは利用できます。)
しかしながら、現在のところPCでのアクセスのためのフィルタは用意されてなく、PCで閲覧した場合何も表示されないか、ブラウザによっては文字化けします。

そこで、このプラグインの出番です。(いいすぎだったらごめんなさい)

特徴

よいとおもうところ
  • after_filterの段階で変換を行うので、HTMLタグのエスケープで悩むことがない(「h」つけてOK)
  • TypePadがCC2.1で公開している絵文字画像を対象としているのでライセンス的にだいぶ安心
  • すでに導入済みのシステムに対してもビューの変更などが不要
よくないとおもうところ
  • after_filterの段階で変換を行うので、アクション毎に変換が必要→きっと重い

インストール

プラグインのインストール
script/plugin install http://taslam-plugins.googlecode.com/svn/trunk/jpmobile_emoticon_filter
絵文字画像の配置

SixApartが公開している絵文字画像を使います。
必ずライセンスに目を通して、それにしたがって利用してください。

解凍すると、emoticonsというフォルダができ、その中に絵文字画像が沢山入ってます。
これをそのままRAILS_ROOT/imagesにコピーします。(RAILS_ROOT/images/emoticons/*.gifという感じになります)

なお、今回一番時間がかかったし大変だったのは、この絵文字画像との変換テーブルの作成でした・・疲れた。
※TypeCastのconfにyamlで入ってました。なんという無駄な努力orz

コントローラにemoticon_filterを書き加える
class SampleController < ApplicationController
  emoticon_filter
end

実際には、mobile_filterを使用する携帯用コントローラで継承するための抽象クラスと別に、PC用コントローラで継承するための抽象クラスをつくり、そこで呼ぶことになるでしょう。適当に応用してください。

インストールは、これだけです。

emoticon_filterのオプション
:classname => 'emoticon'  # 絵文字IMG要素のクラス名
:path      => 'emoticons' # 絵文字画像のパス(imagesからの相対パス)

追記

少し修正した。

  • フィルタのクラス名を変更した。ついでに、Jpmobile::Filter::Baseのサブクラスにした。
  • 入力時に絵文字画像のIMGタグから、内部コードに変換するようにした。
  • 数値実体参照を絵文字画像に変換するようにした。(※hを使うと&が&amp;にエスケープされてしまうため、微妙。思案中。)
  • あんまり使い道なさそうだったし、入力の変換でややこしそうだったので:only,:exceptオプション削除。

追記 2008.8.8

  • html及びjavascript以外でのレスポンスの場合、フィルタを適用しないようにした。
  • javascriptでのレスポンスの際、ダブルクォーテーションをエスケープするように修正。