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

はじめに

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の画像を用意してください。その後、以下のコマンドを実行してアイコン画像を生成します。

cd $HOME
git clone https://github.com/smallmuou/ios-icon-generator
cd ios-icon-generator

# デスクトップにAppIcon.pngがある想定
./ios-icon-generator.sh ~/Desktop/AppIcon.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」が読み上げされたら成功です。

手順は以上です。

おわりに

誤字脱字や内容の誤りがあればコメントいただけると助かります。