Slack の絵文字表示設定に「Emoji One Style」という選択肢があって、存在を知らなかったんだけど調べてみると良さげなツールだったのでメモ。
単なる「Webフォント」や「アイコン配布」でなく「ライブラリ」であるのがいまどき珍しいなと思った。
Emoji One 公式サイト
http://emojione.com/GitHubプロジェクトページ
https://github.com/Ranks/emojione
上記公式サイトのトップに書いてあることには主に2つの問題を解決します的な感じで、
1つは「モバイルでは表示されるけどデスクトップでは文字化け問題」。
もう一つは「表示できるとしてもデザインが違う問題」。
Emoji One はその2つの問題を解決する、とのこと。
基本的には文中にある絵文字っぽい記述を画像にして表示するというライブラリ。
昨今流行りのWebフォントなどは単色にせざるをえないのと、絵文字のように国際化したものは見た目も統一されているべきなので、個人的にはこの Emoji One の方法以上の解決方法はいまのところなさそうに思う。
使い方
使い方はおもに JavaScript での使用方法と PHP での使用方法がある。
文字列内に絵文字っぽいものがあれば自動変換してくれる。
以下の例は絵文字コードを画像に変換する例で、どちらも 「ねこ 
です」と出力される。
JavaScriptでの簡単な使い方
<!-- CSS と JavaScript ファイルを読み込み -->
<link rel="stylesheet" href="./assets/css/emojione.min.css">
<script src="./lib/js/emojione.min.js"></script>
<!-- 出力 -->
<script>document.write(emojione.toImage('ねこ :smile_cat: です'));</script>
ちなみに JavaScript での使用なら CDN が利用できる。
<!-- CSS -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/emojione/[バージョン]/assets/css/emojione.min.css">
<!-- JavaScript -->
<script src="//cdn.jsdelivr.net/emojione/[バージョン]/lib/js/emojione.min.js"></script>
PHPでの簡単な使い方
// Emoji One ライブラリの読み込み
require('emojione/lib/php/autoload.php');
// インスタンス作成
$client = new Emojione\Client(new Emojione\Ruleset());
// (オプション) 出力画像の形式を指定 (デフォルトは「png」)
$client->imageType = 'svg';
// (オプション) 画像のパスを指定
$client->imagePathSVG = './assets/svg/';
// 出力
echo $client->toImage('ねこ :smile_cat: です');
上の例では絵文字コードからの変換だけど、もちろんユニコードからの変換も可能。
パッケージマネージャーも
最近のこういうのはだいたい対応してますな。
# NPM
npm install emojione
# Bower
bower install emojione
# Composer
composer rewuire emojione/emojione
ブラウザ対応状況
公式サイトに言及がなく、すべては調べてないけど IE7でも表示できたのでわりと安全っぽい。
プラグインとか
公式サイトの開発者向けのページにあるように、RailsパッケージとかWordPressのプラグインとかもあるので便利そう。
ライセンス
CCライセンスは CC-BY-SA 4.0、
ソフトウェアライセンスは MITライセンス とのこと。
公式サイトのライセンス部分を引用すると以下のような感じ？
改変したり、自作のものに混ぜたり可。
ライセンス条件を変えての配布はダメ。
過去、ガラケーサイト全盛期に各キャリアで違う絵文字に四苦八苦した人には、少しなつかしい感じがするライブラリかもしれない。
この Emoji One はクライアントサイドでもサーバーサイドでも絵文字変換ができるので、必要ならガラケーサイトでもいけるはず（試してない）。