3分でできる。12.9-inch iPad Pro (第3世代) (2018) 全画面対応法


Appleは2019/03/27から
`iPhone XS Max`と`12.9-inch iPad Pro (3rd generation)`の
全画面対応を**必須**にすると発表しました。
[Upcoming App Store Submission Requirements](https://developer.apple.com/news/?id=03202019a)

**iPad Pro (2018版)対応は後回し**にしていたので
**「リリースできねーよ！」**って青くなっている方も多いんじゃないでしょうか？

製品が発表されてからすぐに対応してれば良かったのにね。

[Appの提出](https://developer.apple.com/jp/app-store/submissions/)
> 2019年3月以降、 App Storeに提出されるすべてのiOS Appは、
> iOS 12.1以降のSDKでビルドされ、
> iPhone XS Maxまたは12.9インチ iPad Pro（第3世代）の
> オールスクリーンのデザインをサポートする必要があります。

(October 30, 2018)から言ってたでしょ。
##現状
いにしえより開発をしていたので**LaunchImage**で起動画面を表示しています。
![old_launchImage.png](https://qiita-image-store.s3.amazonaws.com/0/95033/59201d57-d2df-85a5-0c06-176eb62e979f.png)
Launch Screen Fileは空欄。
![old_proj.png](https://qiita-image-store.s3.amazonaws.com/0/95033/c1ca3a88-23db-7af2-9886-bc2c91ca7dbc.png)

もうこの方法では**12.9-inch iPad Pro (3rd gen)の全画面に対応できません。**

このままアプリを起動すると以下のようになります。

###[起動画面]
<img width="320" alt="old_launch.png" src="https://qiita-image-store.s3.amazonaws.com/0/95033/b902782e-3215-090d-e2fc-a507f386de11.png">

###[アプリ画面]
<img width="320" alt="old_Screen.png" src="https://qiita-image-store.s3.amazonaws.com/0/95033/147b56ef-a944-95c3-c6d8-8ecd00e7c374.png">

**おわかりいただけただろうか？**
アプリ画面の周囲に黒い枠が付いています。

##対策

### 1.プロジェクトにLaunchScreen用のstoryboardを追加する。
1.Xcodeのメニューから `File > New > File...` を選択する。
2.`User Interface > Launch Screen` を選択する。
![addNewFile.png](https://qiita-image-store.s3.amazonaws.com/0/95033/cce0641c-a5d3-9902-bbed-a72c3b3de18e.png)
3. こんな感じになる。(起動画面で表示するロゴも追加しといた)
    ![addedFiles.png](https://qiita-image-store.s3.amazonaws.com/0/95033/64ceb438-635d-e1cc-c0a7-f49bb44172dd.png)

### 2.LaunchScreen用のstoryboardを編集する。
1. デフォルトで変なレイアウト設定が付いているので、がっつり変更する。
![launchScreenLayout.png](https://qiita-image-store.s3.amazonaws.com/0/95033/e1738446-c901-e796-13ec-309dc836bafa.png)
2. Use as Launch Screenにチェックが入ってるのが重要みたいよ。

　　![asLaunchScreen.png](https://qiita-image-store.s3.amazonaws.com/0/95033/724d6077-0db2-3889-8fe7-aae5ea32cade.png)

### 3.Projectファイルの変更
1. Launch Screen Fileに先ほどのstoryboardを設定する。
2. Launch Images Sourceはもう使わないので`Don't use asset catalogs`を選択する。
    ![new_proj.png](https://qiita-image-store.s3.amazonaws.com/0/95033/faec5e75-ccb5-b902-97d2-e13cc6cb817a.png)

### 4.LaunchImageの削除
1. Assets.xcassetsからLaunchImageを削除する。
![delete_launchimage.png](https://qiita-image-store.s3.amazonaws.com/0/95033/9485d772-7818-a839-8dce-d4481f97b26a.png)

2. フォルダ Assets.xcassets > LaunchImage.launchimageを削除する。

えっ？！LaunchImageを表示してるViewControllerがあるって？
起動を頑張ってる感を演出したいって？！
(そこは各自で考えてくれ:confounded:)
## 起動してみよう
###[起動画面]
<img width="320" alt="new_launch.png" src="https://qiita-image-store.s3.amazonaws.com/0/95033/3eac1f85-3db5-37f6-8199-8f056aa02e08.png">
祝え！**12.9-inch iPad Pro (3rd gen)に対応した起動画面** 表示の瞬間である。
(黒枠がないことに注目)

###[アプリ画面]
<img width="320" alt="new_Screen.png" src="https://qiita-image-store.s3.amazonaws.com/0/95033/3bf0ae63-5b18-3ef5-e0b4-355c980aeea0.png">
(黒枠がないことに注目)
おやおや、都合良くはいかないようだね。
(ピンク色の領域も全画面になって欲しかった...:frowning2:)

`12.9-inch iPad Pro (3rd gen)`の全画面に対応することで画面サイズが変化します。
レイアウト設定を固定値で作ってあったりすると、画面表示が崩れることが発生します。

地道に全画面表示チェックとレイアウト修正をがんばるしかありません。
storyboardの`Use Safe Area Layout Guides`にチェックを入れるのをお忘れなく。
100画面あるアプリだったら、3人15日でできるかな？:weary:

「画面表示が崩れているのに見逃すかもしれない。。。」
**開発者の美的感覚が疑わしい**場合はデザイナーも巻き込んで作業することになります。

##keyWindowサイズを変更する
「全画面チェックとレイアウト修正なんかやってられない。」
「なんとしても2019/3月中にリリース」という場合は、
以下のようなコードをアプリ初期化と画面回転時に入れて、
keyWindowをiPadの画面サイズに変更してしまうことも考えられます。
具体的にどこに入れるかはアプリの構造によるので省略します。

すでにkeyWindowをいじっているアプリでは動かないかもしれません。

```swift
override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {

    let shorterSide: CGFloat = 768
    let longerSide:  CGFloat = 1024
        
    if UIDevice.current.orientation.isLandscape {
        resizeKeyWindow(CGSize(width: longerSide, height: shorterSide))
    } else {
        resizeKeyWindow(CGSize(width: shorterSide, height: longerSide))
    }
}

/// Resizes the keyWindow.
///
/// - parameter size: Size of the keyWindow.
func resizeKeyWindow(_ size: CGSize) {
    guard let keyWindow = UIApplication.shared.keyWindow else {
        return
    }

    var frame = keyWindow.frame

    frame.size.width  = size.width
    frame.size.height = size.height
    
    let screenSize = UIScreen.main.bounds
    frame.origin.x = (screenSize.width  - frame.width)  / 2
    frame.origin.y = (screenSize.height - frame.height) / 2

    keyWindow.frame = frame
}
```
<img width="512" alt="keyWindow.png" src="https://qiita-image-store.s3.amazonaws.com/0/95033/3f8a0333-77e6-ca9a-b8af-d56945468980.png">
表示した結果はこうなります。黒枠が更に大きくなりました。:confused:
これでユーザーは満足するのか？
AppStoreの評価やブランドイメージも考慮して実施してください。

##iPad対応をやめる
この機会にiPad対応をやめるのも選択肢の１つです。
作業としてはUniversalアプリだったのを
![universal.png](https://qiita-image-store.s3.amazonaws.com/0/95033/98d46ea0-2d4e-0da1-6182-9e765ed45b73.png)
iPhone専用にするだけです。
![iPhone_only.png](https://qiita-image-store.s3.amazonaws.com/0/95033/a2bc5413-cd47-9b1e-46f6-6141de247926.png)

iPadで使っていたユーザーにはiPhoneアプリを再インストールしてもらうことになります。
<img width="512" alt="iPhone_iPad.png" src="https://qiita-image-store.s3.amazonaws.com/0/95033/6f122b8f-c5a0-a503-7cb3-8aaa261037dd.png">

`12.9-inch iPad Pro (3rd gen)`での表示イメージはこうなります。
拡大ボタンがあるとはいえ、ここまでやるならiPhoneで使いたいですよね。
保存データをiPhoneへ移行する仕組みが必要になると思われます。

iPadユーザーを切り捨てても問題ないか？
関連部署やエラい人と協議が必要かもしれませんね。

##現状
ここまで書いておいてアレですが、全画面対応していなくてもApple審査を通過しています。
`12.9-inch iPad Pro (3rd gen)`用のスクリーンショットは黒い枠が付いた状態でOKです。
(2019/08/07現在)

##注
ここで紹介したアプリは個人制作のサンプルアプリです。
特定のアプリについて言及しているわけではありません。:smiley:

同じ方法で**11-inch iPad Pro (2018)**にも対応できます。