【iOS 12】フラットな絵文字 EmojiOne を iOS で使ってみる

iOS 標準の絵文字をこんなかんじのフラットな絵文字に置き換えてみます。

| iOS 標準の絵文字 | EmojiOne の絵文字 |
| :--: | :--: |
| <img width="320" alt="スクリーンショット 2019-02-03 18.35.38.png" src="https://qiita-image-store.s3.amazonaws.com/0/63842/7efbc2f0-bcfa-62bf-6a3a-f3bb2351932c.png"> | <img width="320" alt="スクリーンショット 2019-02-03 18.35.05.png" src="https://qiita-image-store.s3.amazonaws.com/0/63842/daec9017-97a3-61df-8e44-c3169e76efef.png"> |

この絵文字は、[EmojiOne](https://www.emojione.com/) によって無料で提供されているものです。
iOS 12 以降では、EmojiOne をカンタンにアプリに組み込むことができるみたいです。

## iOS 12 から OpenType-SVG をサポートしたらしい

iOS 12 から OpenType-SVG 形式のカラーフォントをサポートしたみたいです。
UIKit や TextKit に関する公式なアナウンスは見つけることが出来なかったのですが、[What’s New in Safari](https://developer.apple.com/safari/whats-new/) には次の記載がありました。

> + OpenType SVG
>   + Added support for defining letterforms in OpenType fonts using SVG.

WebKit は CoreText に依存しているらしいので、もしかしたら CoreText レベルでの変更によって、TextKit にも影響がでたのかもしれません。

ところで、OpenType-SVG とは、

> OpenType-SVG は、OpenType フォントの字形のすべてまたはほんの一部が SVG（Scalable Vector Graphics）アートワークとして表されるフォント形式です。これにより、1 つの字形で複数のカラーおよびグラデーションを表示できます。こうした機能から、OpenType-SVG フォントを「カラーフォント」とも呼んでいます。
> 
> [OpenType-SVG カラーフォント](https://helpx.adobe.com/jp/fonts/using/ot-svg-color-fonts.html) – Adobe

とのことで、１文字に複数のカラーを表示することできるフォントみたいです。

## EmojiOne フォントをアプリに組み込む

アプリにカスタムフォントをバンドルすることで EmojiOne を利用することが出来ます。
まずは EmojiOne フォントをダウンロードします。

[EmojiOne SVG-based Color Fonts](https://github.com/emojione/emojione/tree/4.0.0/extras/fonts#emojione-svg-based-color-fonts) で Open Type Font: emojione-svg.otf のリンクからダウンロードします。

<img width="640" alt="スクリーンショット_2019-02-03_21_40_19.png" src="https://qiita-image-store.s3.amazonaws.com/0/63842/59fd289f-e01d-1dfe-bdf5-b2e65a8cb83b.png">

ダウンロードした emojione-svg.otf を Xcode プロジェクトにドラッグ&ドロップします。
次のようにチェックして、リソースに追加します。

<img width="640" alt="AppDelegate_swift.png" src="https://qiita-image-store.s3.amazonaws.com/0/63842/b3d718fb-a391-8367-ec24-483a537e0545.png">


これで、アプリ内で EmojiOne を利用できるようになります。

## インターフェースビルダーから使用する

フォントを次のように指定します。

+ Font: Custom
+ Family: EmojiOne

<img width="565" alt="スクリーンショット_2019-02-03_21_58_47.png" src="https://qiita-image-store.s3.amazonaws.com/0/63842/2b1fa293-0f02-4ff5-8b23-189e4041bfb5.png">

## コードからは使用できない？

PostScript名 を指定して、

```swift
label.font = UIFont(name: "EmojiOneColor", size: 38)
```

あるいは、フォントファミリーを指定して

```swift
label.font = UIFont(name: "EmojiOne", size: 38)
```

これで動くはず。
と思ったのですが、なぜかシステムフォントにフォールバックしてしまいました。
なので、今回はコードからのフォントの設定は諦めました。

## iOS 11 で実行すると？

OpenType-SVG はカラーのベクタデータだけでなく、モノクロのベクタデータも持っています。
iOS 11 の場合はモノクロのフォントにフォールバックするようです。

| iOS 12 | iOS 11 |
| :--: | :--: |
| <img width="320" alt="スクリーンショット 2019-02-03 18.35.05.png" src="https://qiita-image-store.s3.amazonaws.com/0/63842/daec9017-97a3-61df-8e44-c3169e76efef.png"> | <img width="320" alt="スクリーンショット 2019-02-03 18.33.50.png" src="https://qiita-image-store.s3.amazonaws.com/0/63842/8853b15b-d74c-f0f4-4fff-115e9f801bc2.png">
 |

## EmojiOne の使用許諾契約について

クリエイティブ・コモンズ・ライセンスです。
リンクを貼ることで利用できます。

> EmojiOne's graphics are free to use for any project, commercial or personal, under a free culture Creative Commons License (CC-BY 4.0). Proper attribution (link back) is required for the rights to use the emoji in commercial projects.

こちらの絵文字は [EmojiOne](https://www.emojione.com/) によって無料で提供されているものを利用しました。