この記事は、iOSアプリ開発から公開までの流れ の第7章です。
- 注意 -
Xcodeがクラッシュする現象を確認しています。
(2020/11/21)
クラッシュ時のコメントに以下を添えて Apple 社に提示済み。
修正または回避手順が確認できれば記事を更新します。
(2020/12/14 追記)
Life Cycle を変更すると回避できました。
Xcodeプロジェクトの作成 の手順3.の設定画面で Life Cycle 項目を SwiftUI App から UIKit App Delegate に変更すると現象は発生しなくなりました。また、後述の手順 11. 〜 16. が不要になりました。
そもそも Life Cycle が何なのかわかりませんが、回避できたのでこの設定で進めます。
再現手順は以下のとおりです。再現性があることを確認しています。私の環境では100%発生します。修正または回避策のご提示をお願いいたします。
クラッシュ手順:
- 以下のサイトにまとめた手順に従い設定します
https://qiita.com/manabapp/items/1c6b8259ed9f5b8db4ad- インスペクタを表示します
環境:
MacBook Air M1 256MB / macOS 11.0.1 / Xcode 12.2
本稿では、iOS アプリのスプラッシュ画面の作成および設定の手順を記載します。
スプラッシュ画面とはアプリ起動処理中に表示されるアレです。
今回は、アプリアイコンを真ん中に配置しただけのシンプルな画面を作ります。
1. Keystone を起動し、背景を塗りつぶしなしにします
サイズは、アプリアイコンの作成と設定の手順と同様に正方形サイズにします。
2. オリジナル画像を挿入し、インスタントアルファを押します
フォーマット > イメージタブ > インスタントアルファボタン
3. 背景をクリックして水色になったら終了
![3.jpeg](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F844861%2F2cc33781-3057-a462-0718-964aa00b9558.jpeg?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=72ec782d676ff27ab9e7d9a09493133f)
4. イメージで書き出します
![4.jpeg](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F844861%2Fbb3cf398-70b8-f80b-4f68-a6f3edceb17d.jpeg?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=941881a53d872852cc7b32145396cd85)
5. PNG フォーマットを選択して次へ
6. 任意のファイル名を入力して書き出す
![6.jpeg](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F844861%2F30dd4e79-9a57-d79d-2265-f3f56ab3d8e0.jpeg?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=d63c4a992e4d620819137e98af6b9835)
7. 透過画像(下の方)が出来上がり
![7.jpeg](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F844861%2F04e981fd-248f-6cc8-c9ca-09ea970d8055.jpeg?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=e017449a38a7a51ff8254a3a9875fb2d)
8. Assets.xcassets でフッター部分の + で Image Set を選択します
![8.jpeg](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F844861%2F8f201043-5286-d6a1-f7d8-181fe4048e41.jpeg?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=6b2859196b6f3322f4bc45a5ec6004a3)
9. 任意の名前を入力します
10. 作成した透過画像を枠にセットします
1x, 2x, 3x の使い分けが判らないため、全部同じ画像を Drag & Drop します。
11. ソースフォルダにファイルを追加します
![11.jpeg](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F844861%2Fcaaf3b30-35aa-6f02-bb25-8c46b9c55f24.jpeg?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=15b2ba5e9b76b69b42802278bdf0a96d)
12. Launch Screen テンプレートファイルを指定して Next
![12.jpeg](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F844861%2Fff0033a0-86df-7972-1e7a-77bfc714227d.jpeg?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=8159613c4f47c4e3a164ca50d230407f)
13. 任意のファイル名を入力して Create
14. iPhone 画面が現れました
デフォルトでアプリ名のラベルが付いているので、私は削除します。
15. General タブの Launch Screen File で追加したファイルを設定します
![15.jpeg](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F844861%2F312bc2c8-4959-c5b0-8920-d1814640e0b7.jpeg?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=8ec958e5aeae15f09f8df8fa4bafbad5)
16. 元に戻り、インスペクタで背景を変更します
右から3番目の Attributes inspector タブ > Background で System Background Color を選択します。
ダークモードで黒い背景にしたいので。
17. 右上の + ボタンを押して先ほど登録した透過画像を iPhone 画面に Drag & Drop でセットします
![17.jpeg](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F844861%2Fd68a4cee-b816-582e-dad9-1c60f33ffb72.jpeg?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=c07fcec615f44ba40b8e2dea18837347)
18. 画像を縦横同サイズのまま縮小して右下3番目のボタンをクリック
Width と Height をチェックして、Add 2 Constraints をクリックします。
縦横サイズが固定化されるため、いい感じのサイズにしましょう。
小さすぎると、Pro Max な iPhone では豆粒に見えてしまいます。
あと、画像はちょうど真ん中に配置しておくこと。
19. 次に、右下2番目のボタンをクリック
Horizontally in Constrainer と Vartically in Constrainer をチェックして、Add 2 Constraints をクリックします。
![19.jpeg](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F844861%2Fe7989104-47d3-78d4-82c4-bbe8564f1394.jpeg?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=e56ce8e7ec7cb8bf144913d9d252f2de)
20. 下にある View as iPhone XX (wR hC) をクリック
横向き / ダークモード / 他機種でも真ん中に画像が配置されるか確認します。
21. シミュレータで確認します
![21.jpeg](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F844861%2Fd24bf54e-94dd-a137-5e4c-8b765179736e.jpeg?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=c530e0673c7a9e1e56591ab3d858a57c)
22. 念のため、横向きダークモードでも確認します
![22.jpeg](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F844861%2F3cd31422-62d7-e932-25f6-141a22f40af3.jpeg?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=f001e46ea8bcab12617509135c9fd024)
終わり。