【5】Xcodeでの編集作業(2)アイコン設定 編
シミュレーターで動かしてみて、アプリ名とアイコンがデフォルトのままになっているのに気がついたと思います。それらを自分で作ったアプリ名・アイコンに変更していきたいと思います。
アプリ名の変更は前回できたので、今回はアイコンの設定を行っていきたいと思います。
![](https://first-azarashi.com/wp-content/uploads/2021/12/TBap17-1024x620.jpg)
アイコンにしたい画像を用意する
まず大前提として、アプリ用のアイコンはiPhoneやiPadの各世代によってサイズが変わってしまうので、それぞれのデバイスに適したサイズのアイコンを用意する必要があります。
一つ一つ手動でサイズを調整していっても良いですが大変なので、今回は筆者が気に入っているMakeAppIconという画像をiOSアプリ化に必要な全サイズに一括リサイズしてくれるサービスを使っていきたいと思います。(無料)
最初にアイコンに使いたい画像を用意します。サイズは1536 x1536 pixelで、 ファイル形式はjpg、png、psd のいずれかにします。
サイズ変更の仕方が分からない場合はこちらの記事を参考にしてください。
今回はガーリー素材というサイトでダウンロードさせていただきサイズ調整したこちらの画像を使って、実際にアイコン用画像を作っていきます⬇︎
![](https://first-azarashi.com/wp-content/uploads/2021/12/yuru_neko6_l-1024x1024.jpeg)
MakeAppIconで一括リサイズ
まずはMakeAppIconを開きます。(⬅︎からジャンプもできるし、Google検索から開いてもOK)
![](https://first-azarashi.com/wp-content/uploads/2021/12/f090d0d6adddcf8cf89c4322f3e29bef-1024x731.jpg)
真ん中のトースターのところに、先ほどサイズ調整したアイコン画像をドラッグ&ドロップして入れます。または「Choose file…」から選んでもOKです。
![](https://first-azarashi.com/wp-content/uploads/2021/12/e2ec2106486183e4339ffb638c28f02f-1024x724.jpg)
このまましばらく待ちます。
![ねこ](https://first-azarashi.com/wp-content/uploads/2021/12/yuru_neko7_2.jpg)
トーストされてる…
でも可愛い…
こんな画面が出てくればOK。「Next」を押していきます。(入力は任意)
![](https://first-azarashi.com/wp-content/uploads/2021/12/TBap34-1024x685.png)
![](https://first-azarashi.com/wp-content/uploads/2021/12/TBap35-1024x808.jpg)
この画面に切り替わったら、①必要に応じてチェックを外し、②アイコン画像を送って良いメールアドレスを入力し、③ダウンロードボタンを押します。
アイコン画像はサイトから直接ダウンロードするのではなく、入力したアドレスへメールで送信されます。
![](https://first-azarashi.com/wp-content/uploads/2021/12/TBap36.png)
メールが届いていました。
これをダウンロードして解凍します。
解凍したフォルダを開き、「ios」>「 AppIcon.appiconset」のフォルダを開きます。
![](https://first-azarashi.com/wp-content/uploads/2021/12/TBap37-1024x304.png)
![ねこ](https://first-azarashi.com/wp-content/uploads/2021/12/yuru_neko7_2.jpg)
一瞬で全サイズのアイコンができてる…
すごい…
![](https://first-azarashi.com/wp-content/uploads/2021/12/TBap38-1024x649.png)
これで、iOSアプリに必要な全サイズのアイコン画像を用意することができました。
アイコン画像をXcode内に配置する
次に、準備したアイコン画像をXcode内に配置していきます。
「TyranoPlayerFramework_ios_v200」>「TyranoPlayerFramework」>「Assets .xcassets」>「AppIcon.appiconset」を開きます。
![](https://first-azarashi.com/wp-content/uploads/2021/12/TBap39-1024x429.png)
開けたら、先ほどMakeAppIconからダウンロードしたフォルダ内の「AppIcon .appiconset」をドラッグ&ドロップで「Assets.xcassets」の中に移動します。「同じ名前のものがあります。置き換えますか?」と聞かれるので、置き換えてください。
![](https://first-azarashi.com/wp-content/uploads/2021/12/TBap40-978x1024.jpg)
![](https://first-azarashi.com/wp-content/uploads/2021/12/TBap19.png)
この状態で、Xcodeに戻ります。
※既にシミュレーターを動かしている場合は左上に停止ボタン(■)が出ているので一旦停止してから、
もう一度再生ボタン(▶︎)を押します。
![](https://first-azarashi.com/wp-content/uploads/2021/12/TBap16.png)
起動したシミュレーターのホームボタンを押して、ホーム画面を表示させると…
![](https://first-azarashi.com/wp-content/uploads/2021/12/TBap41.jpg)
アイコンがデフォルトのものから先ほど用意したものに変わっています。
![ねこ](https://first-azarashi.com/wp-content/uploads/2021/12/yuru_neko7_2.jpg)
やったね!
おわりに
アイコンとアプリ名が入るともう本物のアプリみたいですね。
次回からはアプリの起動画面(LaunchScreen)の設定をしていきたいと思います。
コメント