はじめに
先日、Twitter社が872種類の絵文字をオープンソース化し「Twemoji」としてGitHubに公開しました。
GItHubのリポジトリにはWebページにTwemojiを表示させるスクリプトとTwemojiの絵文字データ(.png, .svg, .ai)が含まれています。
前者にはMITライセンスが、後者にはCC BY 4.0が適用されています。
今回はこの絵文字データを使ってAndroidで使用できる絵文字フォントを生成してみます。
カラー絵文字について
現在カラー絵文字の規格はバラバラで次のようなものがあげられます。
- Appleの絵文字
iOS、OS Xで使われている。
sbixというテーブルを定義してPNG画像を埋め込んでいる。
- Googleの絵文字
Android4.4からNotoColorEmoji.ttfで使われている。
CBDT/CBLCというテーブルを定義してPNG画像を埋め込んでいる。
Appleのものとは違い、フォントのビルド方法が公開されている。
- Microsoftの絵文字
Windows8.1から使われている。
色を設定したアウトラインを重ねて描画する方式である。
今回作成するAndroidの絵文字はビルド方法がこちらに公開されており、国内携帯キャリアから4.4以降のAndroid端末ではこの方法でビルドされたカラーフォントがシステムにプリインストールされています。
例えば… auEmoji.ttf、DcmColorUniEmoji.ttf、SbmColorUniEmoji.ttf など。
環境
OS
- OS X Yosemite
必要なもの
- FontTools
ttf(バイナリファイル)とttx(XMLファイル)を相互変換するツールです。
こちらのサイトを参考にAFDKOでインストールしました。
- librsvg
svgを描画・変換するライブラリです。
今回、rsvg-convertコマンドを使ってsvgファイルをpngファイルに変換するために使います。
Macのパッケージ管理システム「brew」を使ってインストールします。
入っていない場合はこちらを参考にしてインストールします。
$ brew update && brew upgrade $ brew install librsvg $ ln -s /usr/local/bin/rsvg-convert /usr/local/bin/rsvg
参考: Converting SVG to PNG online and in your terminal | The blog of Max Glenister
その他にも必要な物があったかもしれません…
絵文字フォントの作成
Android4.4から搭載されているカラーフォント「NotoColorEmoji」のソースコードは
Noto に公開されています。
Notoというのは「No Tofu(豆腐文字、すなわち□と表示される文字を取り除く)」という意味があります。
Notoはすべての言語をサポートすることを目指してGoogleがオープンソースで開発しているフォントパッケージです。
そのパッケージにNotoColorEmojiが含まれています。
NotoColorEmojiのビルドはcolor_emoji フォルダに移動してmakeすると始まります。
※ これには、平面の国旗からウェーブさせた国旗画像を出力するプログラムなども含まれているのでビルドするには他にもライブラリを追加する必要がある可能性があります。(ライブラリを揃えてもなぜか自分の環境ではビルドがうまく行かなかったのでPythonコードを一部改変してなんとかビルドできました)
今回はそのような処理は必要ないので先ほどあげたライブラリでビルドができると思います。
https://code.google.com/p/color-emoji/ に3つのカラー絵文字のサンプルがあります。
FruityGirlとFunksterはPNGファイルがあるのでそれをビルドしています。
PhantomOpenEmojiはsvgで提供されているものを128x128のpngに変換してからビルドしています。
今回のTwemojiのビルドはPhantomOpenEmojiと同じようにsvgをpngに変換してビルドをします。
※ Twemojiはpngでも提供されていますが16x16,36x36,72x72となっており現在必要な128x128のpngにはできないのでsvgから128x128のpngに変換します。
今回Twemojiのビルドに使用するツール一式をGitHubに上げました。
GitHub - tetsu31415/Twemoji4Android
ダウンロードした後、このディレクトリーで
$ make
するとsvgをpngに変換し、Twemoji.ttfが作成されるようになっています。
また、ビルドされたttfフォントはttf/Twemoji4Android.ttfに入っているのでダウンロードしたい方はこちらからどうぞ。
注意点
- 囲い文字や国旗表示に対応していますが数字や#が表示されません。
囲い文字とは
文字と囲いを並べることでそれを結合して一文字として扱う文字です。
同様に国旗表示も2つの国旗用アルファベットを組み合わせて1つの文字を作っています。
Android4.4と5.0のカラー絵文字を比較してみます。
4.4では 日本の国旗が「JP」、1の囲い文字が「1□」のように表示されていますが、5.0では結合されて1つの文字になっているのがわかります。
※ちなみにAndroid4.1からのモノクロの絵文字フォントは囲い文字に対応しています。
たとえば、1の囲い文字を使用するためには「1(U+0032)」と「囲い(U+20E3)」と「1の囲い文字(U+0032とU+20E3)」の3つの文字を定義する必要があります。
しかし、Twemojiの絵文字データには「1(U+0031)」や「囲い(U+20E3)」は存在しません。
今回は囲い文字を定義するために「1(U+0031)」や「囲い(U+20E3)」を空のグリフとして無理やり追加したので囲い文字に使っている数字(1から9および#)が表示されなくなります。予めご了承ください。
- 4.4での表示が微妙
カラー絵文字の囲い文字・国旗表示の対応はAndroid5.0のNotoColorEmojiからですが、4.4でもこの5.0のカラー絵文字を読み込むことで囲い文字・国旗表示の対応が一応出来ました。
しかし、囲い文字・国旗が正常に表示できたのはTextView#setTypeface()で指定したときで、Android4.4の端末(LGL22)をroot化してsystemにフォントをインストールした場合は囲い文字・国旗が結合されませんでした。原因はわかっていません(詳しく調べていない)
