今度のiPhone Xは我々開発者をどれほど苦しめるのか #okamoba

[当日のSlide](https://speakerdeck.com/takahashiikki/jin-du-falseiphone-xhawo-kai-fa-zhe-wotorehotoku-simerufalseka-number-okamoba)

随分キャッチーなタイトルですが、 [岡山モバイルアプリ開発もくもく会](https://okmoku.connpass.com/event/) で 先日、LTの発表をさせて頂きました。

**iPhone X** 発表されたけど・・・
・ **ホームボタン廃止！！？？**
・ **メニューバー!!??**
・ **iPhonePlusより大きい画面サイズ！！？？**

次は何を対応すれば良いのだろう、という事で発表させて調べて頂きました。

# LTのテーマ
## ははーーん、 そんな感じか って思ってもらう事。

そもそも岡山モバイルアプリ開発もくもく会自体、初心者向けのイベントなので、なるべく分かりやすく概要をまとめました。
(なので、お手柔らかにお願いします。)

# iPhone X の端末サイズについて

まずは端末のサイズですね。  
死ぬほどざっくりとしたサイズを比較出来るようにまとめてみました。 

![Untitled(1).png](https://qiita-image-store.s3.amazonaws.com/0/66498/29c19811-c4e2-9c5d-fa95-7d28c8bd570d.png)

今回のiPhoneXの特徴としては、
画面の横幅・縦幅： iPhone7 < iPhoneX < iPhone7 Plus なのに
画面サイズは iPhone7 < **iPhone7 Plus < iPhone X**
って所でしょうか。

# iPhone X の描画可能サイズについて

次に`描画可能サイズ`についてです。
便宜的に ステータスバーを含む画面サイズ の事を `描画可能サイズ`と定義してます。
以下のコードで取得してます。

```swift
// 幅
UIScreen.main.bounds.size.width

// 高さ
UIScreen.main.bounds.size.height
```

![Untitled(2).png](https://qiita-image-store.s3.amazonaws.com/0/66498/d3f77aad-38dc-9a7b-f12c-9f352bff0e32.png)

こちらも特徴としては
画面の横幅は iPhone7 = iPhoneX < iPhone7 Plus ですが
画面の縦幅は iPhone7 < **iPhone7 Plus < iPhone X** である所でしょうか。

# iPhone X で予想される懸念事項

・ iPhone7 と `width` は同じなのに、 `height` は 150px程 大きいとかつらみあるんじゃないの？
・ iPhone7 Plus より `height` は大きいけど、 `width`は小さいとか何かとつらみあるんじゃないの？

とか思ってました。

# iPhone X Simulator で確認してみた。

![Untitled(4).png](https://qiita-image-store.s3.amazonaws.com/0/66498/ca65d377-ae42-f2fb-31a4-bba10d56cba3.png)

あれ？

![Untitled(5).png](https://qiita-image-store.s3.amazonaws.com/0/66498/d3589420-5cf9-48fd-e3db-de7e7f338351.png)

何か大丈夫そう。
※ あ！！ ちなみに２枚目のアプリは僕の作ったアプリです！！

詳しくはこちらを見てねｗ ↓↓ 
[初めてアプリをリリースした話](http://ikkitang1211.hatenablog.jp/entry/2016/09/29/230047)

# 何で大丈夫だったのか。

次の図を見て頂ければ、と思います。

![Untitled(3).png](https://qiita-image-store.s3.amazonaws.com/0/66498/2955a7cb-d379-9a44-2931-fe113a133f1e.png)

## Top Layout Guide と Buttom Layout Guide

iPhoneアプリを作る時のこれまでの概念は、右図の概念でした。
`Top Layout Guide` と `Buttom Layout Guide` という概念です。
(Top Layout Guide....画像だと・・StatusBar除かれてる、ごめんなさい。。。ｗ)

まあ、ざっくりいうと、TopLayoutGuideを考慮して画面を作る事で、折角作った画面が `StatusBar`や`NavigationBar`に被ってしまう事を防ぐ事が出来ました。

## Safe Area Layout Guide

iPhone X（正確には iOS11 から） は右の概念は廃止され、左図のようになります。
この`Safe Area Layout Guide` は `Status Bar`や`Navigation Bar`に被らない事が保障されています。

これまでは開発者が`Top Layout Guide`や`Buttom Layout Guide`に注意を払って開発して行かなくてはいけなかったのですが、iPhone X では Apple が 予め `Safe Area Layout Guide` という枠内でを教えてくれていて、画面を定義してくれ、という概念に変わったわけですね。

# Safe Area Layout Guide を有効にするには

XCode9 で StoryBoardを開いて各ViewControllerに設定する事が出来ます。

<img width="688" alt="スクリーンショット 2017-09-17 14.02.26.png" src="https://qiita-image-store.s3.amazonaws.com/0/66498/3cb5bb0a-8e0a-a6e5-1253-24a8353373f5.png">

# やったか！？

これで iPhone X の対応は終わったと言っても良いでしょう。
簡単ですよね。 

でも、**iPhone Xは未来の端末**なのです。

<img width="703" alt="スクリーンショット 2017-09-20 23.56.15.png" src="https://qiita-image-store.s3.amazonaws.com/0/66498/698937b8-5530-74b6-e59a-c33d10ab2b1a.png">

<img width="703" alt="スクリーンショット 2017-09-20 23.56.30.png" src="https://qiita-image-store.s3.amazonaws.com/0/66498/b00cd5ec-d4d2-014f-865a-ece68c4cb9bf.png">

僕は上記のような問題があると思ってます。

# 一番伝えたかった事

<img width="703" alt="スクリーンショット 2017-09-20 23.59.56.png" src="https://qiita-image-store.s3.amazonaws.com/0/66498/7b8dc366-6a13-8c24-417d-f1ef78e6f7cc.png">

iPhone X の画面への対応は簡単だと思います。
でも、`旧式の端末`で使い古したUIを未来の端末に適用させてしまって良いでしょうか。

・ ホームに戻りたかったのに、アプリの何かが動いちゃった。
・ アプリの何かを動かしたかったのに、ホームに戻っちゃった。

変な所でユーザーにストレスを感じさせたくないですよね。

新しい未来の端末については、 Appleさんは一言物申してくれていて、それを僕達は簡単に読む事が出来ます。
（※ 英語さえ読めれば・・・・・）

[iPhone X Human Interface Guidelines](https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/)

`iPhone X`を機会に画面レイアウトについて、もう一度考えましょう！
`Human Interface Guidelines` 読みましょう！ って話ですね。ｗ

・・ さて、これは **苦しみ？辛み？** それとも・・ **楽しみ？** 

以上
**今度のiPhone Xは我々開発者をどれほど苦しめるのか** でした^^

# 後述

あー、iPhone X 楽しみだなー。

買わないけど。 皆様のレビュー楽しみにしてます！！

拙い長文、お読み頂きありがとうございましたー！