群馬県地域経済発展のためのプロジェクト | iPhoneアプリ開発講座 | コワーキングスペース | 起業家支援 | 企業誘致 | 地域活性化

ホーム画面の「アイコン」と「アプリ名」の設定

ホーム画面の「アイコン」を設定する

シミュレーターでホーム画面を確認する

完成したアプリをiOSシミュレーターを起動して確認します。「⌘+Shift+H」でホーム画面が表示されます。
まだ、アプリの「アイコン」を設定していないので下記のような表示です。

icon_00

アイコンのPNG画像を用意する

Photoshop等で「PNG画像」を作成します。サイズは「1024×1024ピクセル」で「透明なし」です。

icon1024x1024

サイズ別のアイコンを生成する

サイズ別のアイコンを生成してくれるWebサービスを利用します。下記リンクをクリックします。

Makeappicon – Generate app icons of all sizes with a click!

デスクトップにある「PNG画像」をトースターにドラッグ&ドロップします。

icon_01

しばらくすると、ページが切り替わり「サイズ別のアイコン」が生成されます。iPnoneアプリの場合は6個の画像が必要です。

icon_02

ページ上に生成された「アイコン」をドラッグ&ドロップして、デスクトップに保存します。

「Icon-40@3x.png」というファイルはありません。「Icon-60@2x.png」がひとつあればOKです。

icon_03

Xcodeに画像を取り込む

Xcodeの一番左下にある「+」をクリックして、「Add Files to “xxx”」を選択する

icon_04

取り込む画像を選択して「Copy items if needed」をチェックして「Add」をクリックする
※チェックを入れると「コピーした画像」を使用することになります。忘れずに!

icon_05

画像がプロジェクトに取り込まれました。

icon_06

Images.xcassets の設定

Images.xcassetsを選択する。一番上の「AppIcon」を選択する。

取り込んだ「PDF画像」を任意の「点線の四角」にドラッグ&ドロップする
※クリックすると画面が変わってしまうので注意!

icon_07

プレビューの左から

  • Icon-Small@2x.png
  • Icon-Small@3x.png
  • Icon-40@2x.png
  • Icon-60@2x.png(※下のIcon-60@2x.pngと共用)
  • Icon-60@2x.png
  • Icon-60@3x.png

icon_08

App Icon Source を確認する

左側の「プロジェクト名」をクリックします。「Gneneral」タブをクリックします。

「App Icon Source」の項目が、先ほど設定したImages.xcassetsの「AppIcon」が選択されていればOKです。

icon_13

シミュレーターでホーム画面を確認する

「⌘+Shift+H」でホーム画面が表示されます。設定した「アイコン」が表示されます。

icon_09

まだアプリ名が「プロジェクト名」のままですね。次で「アプリ名」を日本語に設定します。

ホーム画面の「アプリ名」を設定する

左側の「プロジェクト名」をクリックします。「info」タブをクリックします。

「Bundle name」の項目が「$(PRODUCT_NAME)」となっています。これは「アプリ名」に「プロジェクト名」がそのまま表示されている状態です。

icon_10

フィールドの「$(PRODUCT_NAME)」を消して、日本語の「アプリ名」を入力します。

文字数に気をつけましょう。長すぎるとアプリ名が「…」と省略されてしまいます。

  • 全角(日本語):6文字まで
  • 半角英数:7〜36文字まで(※文字の幅・表示機種により増減。平均は12文字程度)

icon_11

シミュレーターでホーム画面を確認する

「⌘+Shift+H」でホーム画面が表示されます。設定した「アプリ名」が表示されます。

icon_12

  • Facebook
  • Hatena
  • twitter
  • Google+
PAGETOP
Copyright © Cross-i Project BrainFarm Inc. All Rights Reserved.