Teaprog.com

とあるエンジニアの日々の記録。エンジニアと関係のないようなことも書きます。

iPhoneアプリ作成:アイコンの設定

f:id:tk0137:20210704022508j:plain

イメージ

目次

はじめに

 

アプリのアイコンを設定するのとしないのではどのような差が出てくるのでしょうか。

 

下にアイコン画像を設定する前と後の画像を示します。

 

   f:id:tk0137:20210704014343p:plain      f:id:tk0137:20210704014401p:plain

 

アイコンを設定する前は、白の背景に黒の罫線が引かれています。

 

しかし、アイコンは右の画像で示したように、自分で好きなように設定する事ができます。

 

今日は、自身で作成したアプリのアイコンを設定する方法を書いてみましたので、ご参考にしていただければ幸いです。

 

 参考書籍

著者:森巧尚さん

 

手順

 

以下に、iPhoneアプリのアイコンを載せるまでの簡単な手順を示させていただきます。

 

なお、今回はアイコンのデザインに関しては、簡略化させていただきましたので、何卒ご了承ください。

 

 アイコン画像の形式

 

アイコン画像に求められるサイズやファイル形式についてです。

 

以下の画像は、xcodeで開いたアプリ編集画面です。

 

「Assets.xcassets」から「AppIcon」を開くと、点線で示された四角形がずらりと現れます。

 

その四角形の中に「40×40px」のように必要な画像サイズが示されています。

 

f:id:tk0137:20210703201310j:plain

図1

全ての必要な画像サイズは以下のようになっています。

  • 20×20px
  • 29×29px
  • 40×40px
  • 58×58px
  • 60×60px
  • 76×76px
  • 80×80px
  • 87×87px
  • 120×120px
  • 152×152px
  • 167×167px
  • 280×180px
  • 1024×1024px

 

実行する端末に合わせ、様々なサイズのアイコン画像を登録しなければならないようです。

 

また、登録できる画像ファイル形式はPNGファイルとなっています。

 

なので、今回は下になるアイコン画像を1つ作成し、それをもとに指定のサイズのアイコン画像を作成するという手順で進めていきます。

 

 簡単なアイコンの作成

 

まず下に示したように、簡単にテスト用のアイコン画像を作成しました。

 

これは「befunky」というアプリ(無料版)を使用して作成しています。

 

「befunky」の公式サイトへのリンク↓↓↓↓↓

 

Photo Editor | BeFunky: Free Online Photo Editing and Collage Maker

 

f:id:tk0137:20210703193405j:plain

図2

 アイコン画像のリサイズ

 

この画像を次は正方形に直します。

 

Macbookにある「写真」アプリで正方形に直せます。

 

「写真」アプリで「編集」を選択します。

 

そうしたら、以下の図のような編集画面になります。

 

「切り取り」をクリックし、「カスタム」で比率を1:1にしてクリックします。

 

すると、正方形の切り取り線が表示されるので、その状態で右上の「完了」をクリックします。

 

f:id:tk0137:20210704012049j:plain

図3

 

次に、上で作成した正方形のアイコンの画像をもとに、リサイズしていきます。

 

リサイズには下に示させていただいた、Web上のアプリで行いました。

 

画像のリサイズアプリ↓↓↓↓↓

 

画像や写真のサイズを変更(拡大・縮小・リサイズ)する : オンラインイメージエディタ | 無料で画像を加工できるサイト PEKO STEP

 

使い方は、簡単です。

 

まず、画面の中央部に「ここに画像をドロップしてください」と表示されている部分がありますので、ここに先ほど正方形に切り取ったアイコン画像をドラッグします。

 

f:id:tk0137:20210704013623j:plain

図4

 

すると、中央部にドラッグした画像が表示されます。

 

その画像の下に「画像のサイズ変更」という項目がありますので、ここに、指定の画像サイズを入力していきます。

 

このとき「画像を拡大縮小する」というチェックボックスにはチェックを入れておいてください。

 

入力し終わったら、「サイズ変更」というボタンをクリックします。

 

f:id:tk0137:20210704013648p:plain

図5

 

「サイズ変更」のボタンを押したら、画像を右クリックして「名前をつけて保存」をクリックします。

 

すると、以下のような画像が出てきます。

 

xcodeに登録する画像ファイル形式はPNGでなければならないので、保存するファイル形式もPNGになっていることを確認してください。

 

f:id:tk0137:20210704013724p:plain

図6

 アイコン画像の登録

 

リサイズが終了し、画像の保存ができたら、xcodeにアイコン画像を登録していきます。

 

アイコン画像を、指定されたサイズのものを指定の場所にドラッグします。

f:id:tk0137:20210704013800p:plain

図7

 

なお、画像のサイズが間違っている場合は、以下の図のように警告マークが出ます。

 

その場合は、警告の内容に従って、アイコンをドラッグし直してください。

 

f:id:tk0137:20210704013817j:plain

図8

 

以上の容量で、全ての空白にアイコン画像をドラッグしていきます。

 

以下の図は全てアイコンをドラッグし終えた様子です。

 

f:id:tk0137:20210704013832p:plain

図9

 

ここまでの作業でアイコン画像の設定は終了です。

 

実際にアプリを実行し、端末上でアイコンが反映されているかどうかを確かめてみてください。

 

最後に

 

今回は久しぶりにiPhoneのアプリ作成に関する内容を書いてみました。

 

参考書籍を示させていただいておりますが、実はその書籍の内容は大方実践し終わりました。

 

なので、今はもう一冊、別の書籍を手元に置いていて、近々それをもとにアプリ作成にさらなる磨きをかけていきたいと思っております。

 

実は、その参考させていただいた書籍の内容で、実践できないものがありました。

 

それはMaster-Detailアプリというものです。

 

詳しい説明は割愛いたしますが、xcodeのバージョン更新でそのテンプレートが使用できなくなってしまい、すぐには実践する事ができませんでした。

 

なので、今後何らかの形で、このMaster-Detailアプリの作成をしてみたいと思います。

 

少し、やり切れなさを感じざるを得ない今日この頃でした。

 

以上、最後までありがとうございました。