Help us understand the problem. What is going on with this article?

絵文字ライブラリ「Emoji One」がなかなか良さげ

More than 5 years have passed since last update.

Slack の絵文字表示設定に「Emoji One Style」という選択肢があって、存在を知らなかったんだけど調べてみると良さげなツールだったのでメモ。
単なる「Webフォント」や「アイコン配布」でなく「ライブラリ」であるのがいまどき珍しいなと思った。

Emoji One 公式サイト
http://emojione.com/

GitHubプロジェクトページ
https://github.com/Ranks/emojione

2015-09-04_164003.png

上記公式サイトのトップに書いてあることには主に2つの問題を解決します的な感じで、
1つは「モバイルでは表示されるけどデスクトップでは文字化け問題」。
もう一つは「表示できるとしてもデザインが違う問題」。
Emoji One はその2つの問題を解決する、とのこと。

基本的には文中にある絵文字っぽい記述を画像にして表示するというライブラリ
昨今流行りのWebフォントなどは単色にせざるをえないのと、絵文字のように国際化したものは見た目も統一されているべきなので、個人的にはこの Emoji One の方法以上の解決方法はいまのところなさそうに思う。

使い方

使い方はおもに JavaScript での使用方法と PHP での使用方法がある。
文字列内に絵文字っぽいものがあれば自動変換してくれる。

以下の例は絵文字コードを画像に変換する例で、どちらも 「ねこ です」と出力される。

JavaScriptでの簡単な使い方

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 が利用できる。

EmojiOne公式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での簡単な使い方

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ライセンス とのこと。

公式サイトのライセンス部分を引用すると以下のような感じ?

:thumbsup: 改変したり、自作のものに混ぜたり可。
:thumbsup: 商用でも非商用でも可。
:thumbsup: 印刷物に使っても可。

:x: ライセンス条件を変えての配布はダメ。
:x: 所有権とライセンスだけを保持するのはダメ。


過去、ガラケーサイト全盛期に各キャリアで違う絵文字に四苦八苦した人には、少しなつかしい感じがするライブラリかもしれない。
この Emoji One はクライアントサイドでもサーバーサイドでも絵文字変換ができるので、必要ならガラケーサイトでもいけるはず(試してない)。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away