iOSアプリのスプラッシュ画面の作成と設定（注：Xcodeでクラッシュ発生）

> この記事は、[iOSアプリ開発から公開までの流れ](https://qiita.com/manabapp/private/6ae317682c5e161957ab) の第7章です。

<font color=red>- 注意 -
Xcodeがクラッシュする現象を確認しています。
(2020/11/21)
クラッシュ時のコメントに以下を添えて Apple 社に提示済み。
修正または回避手順が確認できれば記事を更新します。
(2020/12/14 追記)
Life Cycle を変更すると回避できました。
[Xcodeプロジェクトの作成](https://qiita.com/manabapp/private/596d1acd45ece0499d73) の手順3.の設定画面で Life Cycle 項目を **SwiftUI App** から **UIKit App Delegate** に変更すると現象は発生しなくなりました。また、後述の手順 11. 〜 16. が不要になりました。
そもそも Life Cycle が何なのかわかりませんが、回避できたのでこの設定で進めます。
</font>



> 再現手順は以下のとおりです。再現性があることを確認しています。私の環境では100%発生します。修正または回避策のご提示をお願いいたします。
>
> クラッシュ手順：
> 1) 以下のサイトにまとめた手順に従い設定します
> https://qiita.com/manabapp/items/1c6b8259ed9f5b8db4ad
> 2) インスペクタを表示します
> 
> 環境：
> MacBook Air M1 256MB / macOS 11.0.1 / Xcode 12.2

本稿では、iOS アプリのスプラッシュ画面の作成および設定の手順を記載します。

スプラッシュ画面とはアプリ起動処理中に表示されるアレです。
今回は、アプリアイコンを真ん中に配置しただけのシンプルな画面を作ります。

##### 1. Keystone を起動し、背景を塗りつぶしなしにします
サイズは、[アプリアイコンの作成と設定](https://qiita.com/manabapp/private/7147f4976ea63d93a335)の手順と同様に正方形サイズにします。
<img alt="1.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/844861/2ea3c7ce-f04b-52b4-b33e-1059a85ff8b1.jpeg" width="600">

##### 2. オリジナル画像を挿入し、インスタントアルファを押します
**フォーマット** > **イメージ**タブ > **インスタントアルファ**ボタン 
<img alt="2.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/844861/5a1fda9c-dfb3-7582-f149-879554714ccc.jpeg" width="600">

##### 3. 背景をクリックして水色になったら終了
<img alt="3.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/844861/2cc33781-3057-a462-0718-964aa00b9558.jpeg" width="600">

##### 4. イメージで書き出します
<img alt="4.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/844861/bb3cf398-70b8-f80b-4f68-a6f3edceb17d.jpeg" width="600">

##### 5. PNG フォーマットを選択して次へ
**透明な背景で書き出す** をチェックすること。
<img alt="5.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/844861/2e23074d-327e-e77e-2800-165c503b5d93.jpeg" width="350">

##### 6. 任意のファイル名を入力して書き出す
<img alt="6.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/844861/30dd4e79-9a57-d79d-2265-f3f56ab3d8e0.jpeg" width="500">

##### 7. 透過画像(下の方)が出来上がり
<img alt="7.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/844861/04e981fd-248f-6cc8-c9ca-09ea970d8055.jpeg" width="400">

##### 8. Assets.xcassets でフッター部分の ＋ で Image Set を選択します
<img alt="8.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/844861/8f201043-5286-d6a1-f7d8-181fe4048e41.jpeg" width="600">

##### 9. 任意の名前を入力します
例：SplashImage
<img alt="9.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/844861/b480ca69-3c9f-e1c7-31fd-9fdde90a4454.jpeg" width="600">

##### 10. 作成した透過画像を枠にセットします
1x, 2x, 3x の使い分けが判らないため、全部同じ画像を Drag & Drop します。
<img alt="10.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/844861/4b512657-72c3-edd0-bcfc-fbec382c8789.jpeg" width="600">

##### 11. ソースフォルダにファイルを追加します
<img alt="11.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/844861/caaf3b30-35aa-6f02-bb25-8c46b9c55f24.jpeg" width="600">

#### 12. Launch Screen テンプレートファイルを指定して Next
<img alt="12.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/844861/ff0033a0-86df-7972-1e7a-77bfc714227d.jpeg" width="600">

##### 13. 任意のファイル名を入力して Create
私はデフォルトのままにしました。
<img alt="13.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/844861/fae2e3f7-915d-23df-e336-83b1b51f5449.jpeg" width="300">

##### 14. iPhone 画面が現れました
デフォルトでアプリ名のラベルが付いているので、私は削除します。
<img alt="14.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/844861/9101896d-98ca-b383-7269-390bbddaee48.jpeg" width="600">

##### 15. General タブの Launch Screen File で追加したファイルを設定します
<img alt="15.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/844861/312bc2c8-4959-c5b0-8920-d1814640e0b7.jpeg" width="600">

##### 16. 元に戻り、インスペクタで背景を変更します
右から3番目の **Attributes inspector** タブ > **Background** で System Background Color を選択します。
ダークモードで黒い背景にしたいので。
<img alt="16.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/844861/bd141f02-8825-da1c-9bdb-745ba34d728f.jpeg" width="600">

##### 17. 右上の ＋ ボタンを押して先ほど登録した透過画像を iPhone 画面に Drag & Drop でセットします
<img alt="17.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/844861/d68a4cee-b816-582e-dad9-1c60f33ffb72.jpeg" width="600">

##### 18. 画像を縦横同サイズのまま縮小して右下3番目のボタンをクリック
**Width** と **Height** をチェックして、**Add 2 Constraints** をクリックします。
縦横サイズが固定化されるため、いい感じのサイズにしましょう。
小さすぎると、Pro Max な iPhone では豆粒に見えてしまいます。
あと、画像はちょうど真ん中に配置しておくこと。
<img alt="18.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/844861/6b2906d0-ce56-ce54-3194-058892705dae.jpeg" width="350">

##### 19. 次に、右下2番目のボタンをクリック
**Horizontally in Constrainer** と **Vartically in Constrainer** をチェックして、**Add 2 Constraints** をクリックします。

<img alt="19.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/844861/e7989104-47d3-78d4-82c4-bbe8564f1394.jpeg" width="350">

##### 20. 下にある View as iPhone XX (wR hC) をクリック
横向き / ダークモード / 他機種でも真ん中に画像が配置されるか確認します。
<img alt="20.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/844861/87c712cf-9868-3751-55a9-33259e95a92b.jpeg" width="500">

##### 21. シミュレータで確認します
<img alt="21.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/844861/d24bf54e-94dd-a137-5e4c-8b765179736e.jpeg" width="400">

##### 22. 念のため、横向きダークモードでも確認します
<img alt="22.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/844861/3cd31422-62d7-e932-25f6-141a22f40af3.jpeg" width="600">

終わり。