Facebookのように、顔文字を絵文字に変換するjQueryのプラグインと、絵文字の作成、共有が出来るサービス

Ads

参考になったのでついでにシェア。
顔文字を絵文字の画像に置換する
プラグインです。Facebookで特定
の顔文字を入力すると絵文字に自動
で変換されますが、そんな機能を
加える事が出来ます。

特定の文字を指定してそれに見合った画像に置換する、というライブラリになりますので割と使えるんじゃないでしょうか。ローカル店舗のような小規模案件なんかでもよく仕様の一つにかわいい絵文字が使えるように、と言われます。WPでも任意の顔文字に出来ますが、こちらの方が楽ですね。

Facebook Style Emotions


指定した顔文字を絵文字に変換します。変換する画像は指定したフォルダから呼び出します。使いやすそうです。

コード

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script type="text/javascript" src="jquery.emotions.js"></script>

本体とプラグインを読み込んで

$(document).ready(function(){
$("foo").emotions();
});

セレクタ書く。これで、指定した顔文字が絵文字に置換されます。

以下がデフォルト値です。

$.fn.emotions.defaults = {
  a : "emotions-fb/",//画像の格納されたフォルダ
  b : new Array(//絵文字画像のファイル名の配列
    "angel",
    "colonthree",
    "confused",
    "cry",
    "devil",
    "frown",
    "gasp",
    "glasses",
    "grin",
    "grumpy",
    "heart",
    "kiki",
    "kiss",
    "pacman",
    "smile",
    "squint",
    "sunglasses",
    "tongue",
    "unsure",
    "upset",
    "wink"),
  s : new Array(//絵文字に置換する顔文字の配列
    "o:)",
    ":3",
    "o.O",
    ":'(",
    "3:)",
    ":(",
    ":O",
    "8)",
    ":D",
    ">:(",
    "<3",
    "^_^",
    ":*",
    ":v",
    ":)",
    "-_-",
    "8|",
    ":p",
    ":/",
    ">:O",
    ";)"),
  c : "gif"//拡張子
};

オリジナルにしたいならこのデフォルト値と絵文字を変えればいいですね。

スクリプトのDLにはRSSフィード登録が必要です。

Facebook Style Emotions

絵文字の作成、共有が可能なエモジバ


おまけです。変換しようにも絵文字がないと不可能ですよね。かといって作成してもらう予算をあてる余裕は無い、という場合はクライアントさん側で自作して貰うのもアリでしょうか。

エモジバは絵文字の作成と共有が可能なWebサービスです。無料で利用できますよ。

使い方は大丈夫ですよね。リンクはTOPページの右上にあります。


出来たら右クリックで保存すればいいだけです。

以前の案件でご要望があったんですが、自作できたらするのに、みたいな事を仰っていたのでこちらのサービスを伝えたらいろいろ満足してくれました。

経費かけても費用対効果が期待できないので少し抵抗はあるものだと思うし、作成する側としても単価取れない割りに面倒そうですし。クライアントさんが自作してくれるのが愛着も湧くだろうし、納得もしてくれるので一番かなって個人的には思いました。

エモジバ