（iOSアプリ開発）Xcodeで画像をドラッグ・アンド・ドロップせずアイコン画像を設定する方法

はじめに

通常、開発中のiOSアプリにアイコンを設定するときはプロジェクトナビゲーターを開いてAssets.xcassetsを選択し、AppIconにアイコン画像をドラッグ・アンド・ドロップします。

しかし、VoiceOver（スクリーンリーダー）でXcodeを操作するとアイコン画像をドラッグできません。「dimmed collection」と読み上げされてVoiceOverカーソルを移動できないのです。

そこで、この記事ではアイコン画像をドラッグ・アンド・ドロップせずに設定する方法を紹介します。

環境

以下の環境で動作検証しました。

• macOS 10.15.7
• Xcode Version 12.2 (12B45b)

手順

ここからアイコン画像の設定手順について説明します。

Step 1 ... AppIcon.appiconsetディレクトリの作成

まずはAppIcon.appiconsetを作成します。Terminal.appを開いて以下のコマンドを実行してください。

cd $HOME
mkdir AppIcon.appiconset

（補足）作業するディレクトリはどこでも構いません。ここでは例としてホームディレクトリで作業しています。

Step 2 ... アイコン画像の生成

アイコン用の画像として、縦横の解像度が1024 x 1024ピクセルのIcon.pngを用意してください。その後、以下のコマンドを実行してアイコン画像を生成します。

cd $HOME
git clone https://github.com/smallmuou/ios-icon-generator
cd ios-icon-generator
./ios-icon-generator.sh Icon.png ../AppIcon.appiconset

AppIcon.appiconsetディレクトリの中に各種サイズのアイコン画像が作成されたら成功です。

Step 3 ... Content.jsonの作成

AppIcon.appiconsetディレクトリの中にContents.jsonを作成します。使用するテキストエディタは何でも構いません。以下の内容をコピペしてください。

{
  "images": [
    {
      "filename": "[e-mail]",
      "idiom": "iphone",
      "scale": "2x",
      "size": "20x20"
    },
    {
      "filename": "[e-mail]",
      "idiom": "iphone",
      "scale": "3x",
      "size": "20x20"
    },
    {
      "filename": "[e-mail]",
      "idiom": "iphone",
      "scale": "2x",
      "size": "29x29"
    },
    {
      "filename": "[e-mail]",
      "idiom": "iphone",
      "scale": "3x",
      "size": "29x29"
    },
    {
      "filename": "[e-mail]",
      "idiom": "iphone",
      "scale": "2x",
      "size": "40x40"
    },
    {
      "filename": "[e-mail]",
      "idiom": "iphone",
      "scale": "3x",
      "size": "40x40"
    },
    {
      "filename": "[e-mail]",
      "idiom": "iphone",
      "scale": "2x",
      "size": "60x60"
    },
    {
      "filename": "[e-mail]",
      "idiom": "iphone",
      "scale": "3x",
      "size": "60x60"
    },
    {
      "filename": "Icon-20.png",
      "idiom": "ipad",
      "scale": "1x",
      "size": "20x20"
    },
    {
      "filename": "[e-mail]",
      "idiom": "ipad",
      "scale": "2x",
      "size": "20x20"
    },
    {
      "filename": "Icon-29.png",
      "idiom": "ipad",
      "scale": "1x",
      "size": "29x29"
    },
    {
      "filename": "[e-mail]",
      "idiom": "ipad",
      "scale": "2x",
      "size": "29x29"
    },
    {
      "filename": "Icon-40.png",
      "idiom": "ipad",
      "scale": "1x",
      "size": "40x40"
    },
    {
      "filename": "[e-mail]",
      "idiom": "ipad",
      "scale": "2x",
      "size": "40x40"
    },
    {
      "filename": "Icon-76.png",
      "idiom": "ipad",
      "scale": "1x",
      "size": "76x76"
    },
    {
      "filename": "[e-mail]",
      "idiom": "ipad",
      "scale": "2x",
      "size": "76x76"
    },
    {
      "filename": "[e-mail]",
      "idiom": "ipad",
      "scale": "2x",
      "size": "83.5x83.5"
    },
    {
      "filename": "Icon-1024.png",
      "idiom": "ios-marketing",
      "scale": "1x",
      "size": "1024x1024"
    }
  ],
  "info": {
    "author": "xcode",
    "version": 1
  }
}

Step 4 ... AppIconの設定

Xcodeを起動してAppIconを設定します。以下、手順はVoiceOverが起動している前提で説明します。VOはVoiceOverキー（CapslockまたはCommand + Option）を意味します。

1. VoiceOverのカーソルをnavigator groupに移動してProject radio buttonを押します。
2. その状態でキーボードの下矢印キーを押します。するとファイルの一覧にVoiceOverカーソルが移動します。上下矢印キーを押すとファイル名が読み上げられるので「Assets.xcassets」が聞こえるまで矢印キーを押します。
3. VoiceOverカーソルを移動します。navigator group→vertical splitter→editor area group→Jump Bar group→Assets.xcassets groupの順にVoiceOverカーソルを移動します。
4. 「Assets table No selection.」と読み上げられたら、上下矢印キーを押してAppIconを選択します。その状態でVO + Shift + Mを押してメニューを開き、Deleteを実行します。
5. AppIconを削除したら、VO + 右矢印キーを何度か押してAdd a group or image set menu buttonに移動します。ボタンを押すとメニューが開くので、下矢印キーを何度か押してImportを選択します。
6. ファイル選択の画面が開きます。Command + Shift + Hを押してホームディレクトリを選択します。その後、VoiceOverカーソルを移動してファイルの一覧画面から先ほど作成したAppIcon.appiconsetを選択します。
7. VoiceOverカーソルをAssets tableに移動します。上下矢印キーを押して「AppIcon」が読み上げされたら成功です。

手順は以上です。この状態でCommand + BあるいはCommand + Rを実行すればビルドが成功するはずです。

おわりに

誤字脱字や内容の誤りを見つけた時はコメントいただけると助かります。