平成最後のセーフエリア対応の話をしよう。

# はじめに
この投稿は[CyberAgent Developers Advent Calendar 2018](https://adventar.org/calendars/2951) 6日目の記事です！

6日目は現在[AbemaTV](https://abema.tv/) iOSチームのメンバーの一人である[cokaholic](https://github.com/cokaholic)が担当します。

今回は今年の多数の新型iOSデバイスの登場によってさらに多様化した2018年12月現在でのセーフエリア対応について、わかったことや対応する際に気をつけることをTips形式で話していこうと思います。

# 改めてセーフエリアとは

- AppleがiOS11から導入した概念
- ナビゲーションバーやステータスバーなどの外側のUIに被らない安全な領域を取得できる
- iPhone Xなどの角丸なディスプレイに対しても安全にレイアウトできる領域を取得できる
- 使用するには**Xcode 9+、iOS 11+ SDK**が必要

<img width="750" alt="セーフエリア" src="https://qiita-image-store.s3.amazonaws.com/0/46227/21c48a5c-f168-ba4f-37e7-a41bc0379d6b.png">

> [【随時更新】iPhoneX完全対応マニュアル](https://qiita.com/cokaholic/items/6a8ee3852c8ed28ea2aa)より

# 新型iOSデバイスの登場

2017年9月12日のiPhone Xが発表され、セーフエリアの導入により、iOS開発者の間に激震が走り、[2018年4月以降に申請するiOSアプリはiPhone Xに対応することが必須化](https://9to5mac.com/2018/02/15/apple-require-new-apps-support-iphone-x/)され、そして、iPhone Xの発表からちょうど１年後である2018年9月12日、Appleは**iPhone XS, XS Max, XR**という３つの新たなiPhoneを発表しました。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/46227/f5fd528f-ccfa-06e3-749e-e0c99354489a.png)

そしてさらに、日本がハロウィンで大騒ぎしている最中である2018年10月30日、Appleは新型の**iPad Pro**を発表しました。ホームボタンが消えたそのフォルムを見た瞬間、私は新たなセーフエリア対応の幕開けを感じました。（新型iPad ProのsafeAreaInsetsの値についての記事は[コチラ](https://qiita.com/cokaholic/items/cac7434fbe92f89c42ad)）

![image.png](https://qiita-image-store.s3.amazonaws.com/0/46227/950544aa-aba0-20bd-d95e-3e5c63776cf3.png)

# 2018年12月現在でのセーフエリア対応Tips

## 1. isIphoneXはもう使えない

私が以前、[【随時更新】iPhoneX完全対応マニュアル](https://qiita.com/cokaholic/items/6a8ee3852c8ed28ea2aa)を書いた2017年10月時点では角丸なディスプレイに対応するセーフエリアを持ったiOSデバイスはiPhone Xのみでしたが、2018年12月現在、角丸なディスプレイに対応するセーフエリアを持ったiOSデバイスは以下の**5種類**にまで増えました。

- iPhone X (5.8 inch)
- iPhone XS (5.8 inch)
- iPhone XS Max (6.5 inch)
- iPhone XR (6.1 inch)
- iPad Pro (mid2018) (11 inch, 12.9 inch)

このことから、いままで [Ekhoo/Device](https://github.com/Ekhoo/Device) などで端末バージョンや画面サイズを使って `isIphoneX: Bool` なる判定を行うことができていましたが、もはやこれまで😇

## 2. iPadであっても角丸なディスプレイに対応するセーフエリアの考慮が必要
いままで角丸なディスプレイに対応するセーフエリアの考慮をしなくても良かったiPadですが、2018年10月30日に発表された下記画像のようにホームボタンを取り除き、`Home Indicator`を搭載した新型iPad Proの登場により、iPadでも角丸なディスプレイに対応するセーフエリアの考慮が必要になりました。
そのため、単純な`isPad: Bool`でのレイアウトに関する分岐などは見直す必要があります。
とはいえ、あらかじめAutolayoutで`top`と`bottom`のセーフエリアを考慮してレイアウトされたビューに関しては、特に修正する必要は無さそうです。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/46227/72be95b8-35bb-0830-2ad1-52c576383d52.png)

## 3. Xcode 10.1以降でビルドしないと、新型iPad Proではセーフエリアが使えない
Appleが ~~余計な~~ 気を利かせたのか、Xcode 10.1以降でビルドしていないアプリでは、新型iPad Proのセーフエリア部分である上下セーフエリアが**勝手に切り取られて**表示されてしまいます。
そのため、Xcode 10.1以降でビルドしないと、新型iPad Proのセーフエリアは確認できません。
以下の画像は、Xcode 10.1以降でビルドしていないアプリ（Chrome）の表示例です。上下のセーフエリア部分が黒塗りになってしまい、レイアウトから外されてしまっていることがわかります。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/46227/9d2e9168-5c6c-ee3d-0298-20ba5b6a033e.png)

また、Xcode 10.1以降でビルドしないと、`UIViewController`の`traitCollection`のオーバーライドが上手くいかないこともわかっております。
ですので、iPadに対応したアプリケーションは、新型iPad Proで正しい表示を行うためにも、できるだけ早くXcode 10.1以降でビルドしたアプリでアップデートを行うことをお勧めします。

#　最後に

今回のTipsはここまでとなります。
今年の9月に発表されたiPhone XS, XS Max, XRと今回発表された新型iPad Pro (2018) の流れを見る限り、今後のAppleの新デバイスはFace IDを活用したホームボタン無しのHome Indicatorを持ったデバイスがどんどん増えていくと思われます。
そのため、今後のiOSアプリ開発ではセーフエリアを考慮したレイアウトやデザインを意識することが必須となっていくのではないかと思いました。
そして、新型iPad Proはとても使いやすく、毎日重宝しております（個人的感想）。

以上です！
最後まで読んでいただき、ありがとうございました！