アプリアイコンの修正
モバイルアプリケーションを作成すると、アプリ生成ウィザードによりアプリのアイコンが自動的に生成されます。このアイコンは、デバイス内のアプリを認識するのに使用されます。その際、デバイス画面の密度や画面サイズ、またはアイコンが表示される場所のサイズといった点で、デバイスやコンテキストのすべての側面に合うよう自動的に補正されます。
アプリのカスタムアイコンの定義
デフォルトのアイコンを変更して好きなアイコン画像を使用するには、アイコンのコンテキスト、デバイスの画面サイズおよび密度ごとに複数のバージョンを用意して、以下の手順を実行します。
-
未作成の場合、ZIPファイルを作成し、すべてのAndroid/iOSアイコン(.png画像形式)を追加します。
-
主アプリケーションモジュールを開き、新規または更新済みの:ファイルをリソースフォルダにインポートします。
-
アプリケーションモジュールを選択してプロパティに移動し、Extensibility Configurationsプロパティを開きます。
-
未作成の場合、Extensibility Configurations値のウィンドウで、使用するアイコンに関するすべての情報を指定するためのJSONオブジェクトを作成します。未指定の場合、まずアイコンを格納しているリソースファイルを指定します。
-
アプリケーションに独自のアイコンを使用する意思を示すために、JSONに「icons」タグを追加します。
-
各モバイル プラットフォームについて、サイズ(iOS)や密度(Android)、および対応するアイコンのzipフォルダ内での位置を指定します。使用される可能性のあるすべてのサイズおよび密度についてアイコンを確実に定義します。そうしない場合、エラーが発生します(下記はあくまで参考です)。アイコンのJSONテンプレートを確認すると、間違いを防げます。
-
この変更をユーザーが利用できるようにするために、新しいモバイルアプリケーションをパブリッシュ・生成し、配布します。
アイコンのサイズおよび密度{ #icon-sizes-and-densities }
iOS用
幅 | 高さ | 表示場所 |
---|---|---|
20 | 20 | iPad通知(iOS 7~11) |
29 | 29 | iPhone Spotlight検索(iOS 5、6) iPhone設定(iOS 5~11) iPad設定(iOS 5~11) |
40 | 40 | iPhone通知(iOS 7~11) iPad通知(iOS 7~11) iPad Spotlight検索(iOS 7~11) |
48 | 48 | Apple Watch通知センター |
50 | 50 | iPad Spotlight検索(iOS 5、6) |
55 | 55 | Apple Watch通知センター |
57 | 57 | iPhoneアプリ(iOS 5、6) |
58 | 58 | iPhone Spotlight検索(iOS 5、6) iPhone設定(iOS 5~11) iPad設定(iOS 5~11) |
60 | 60 | iPhone通知(iOS 7~11) |
72 | 72 | iPadアプリ(iOS 5、6) |
76 | 76 | iPadアプリ(iOS 7~11) |
80 | 80 | iPhone Spotlight検索(iOS 7~11) iPad Spotlight検索(iOS 7~11) |
87 | 87 | iPhone Spotlight検索(iOS 5、6) iPhone設定(iOS 5~11) |
88 | 88 | Apple Watch Long Look |
100 | 100 | iPad Spotlight検索(iOS 5、6) |
114 | 114 | iPhoneアプリ(iOS 5、6) |
120 | 120 | iPhone Spotlight検索(iOS 7~11) iPhoneアプリ(iOS 7~11) |
144 | 144 | iPadアプリ(iOS 5、6) |
152 | 152 | iPadアプリ(iOS 7~11) |
167 | 167 | iPad Proアプリ(iOS 9~11) |
172 | 172 | Apple Watch Short Look |
180 | 180 | iPhoneアプリ(iOS 7~11) |
196 | 196 | Apple Watch Short Look |
1024 | 1024 | アプリストアiOS |
Android用
幅 | 高さ | 密度 | 表示場所 |
---|---|---|---|
36 | 36 | ldpi | 通知アイコン |
48 | 48 | mdpi | ランチャーアイコン アクションバー、ダイアログおよびタブアイコン 小さいコンテキストアイコン |
72 | 72 | hdpi | ランチャーアイコン 通知アイコン |
96 | 96 | xhdpi | ランチャーアイコン アクションバー、ダイアログおよびタブアイコン 通知アイコン |
144 | 144 | xxhdpi | ランチャーアイコン |
192 | 192 | xxxhdpi | ランチャーアイコン |
アイコンのJSONテンプレート{ #icons-json-template }
{ "resource": "<path_to_resource_file>", "icons": { "android": [{ "resource": "<path_to_icon_image>", "density": "ldpi" }, { "resource": "<path_to_icon_image>", "density": "mdpi" }, { "resource": "<path_to_icon_image>", "density": "hdpi" }, { "resource": "<path_to_icon_image>", "density": "xhdpi" }, { "resource": "<path_to_icon_image>", "density": "xxhdpi" }, { "resource": "<path_to_icon_image>", "density": "xxxhdpi" }], "ios": [{ "resource": "<path_to_icon_image>", "width": "20", "height": "20" }, { "resource": "<path_to_icon_image>", "width": "29", "height": "29" }, { "resource": "<path_to_icon_image>", "width": "40", "height": "40" }, { "resource": "<path_to_icon_image>", "width": "48", "height": "48" }, { "resource": "<path_to_icon_image>", "width": "50", "height": "50" }, { "resource": "<path_to_icon_image>", "width": "55", "height": "55" }, { "resource": "<path_to_icon_image>", "width": "57", "height": "57" }, { "resource": "<path_to_icon_image>", "width": "58", "height": "58" }, { "resource": "<path_to_icon_image>", "width": "60", "height": "60" }, { "resource": "<path_to_icon_image>", "width": "72", "height": "72" }, { "resource": "<path_to_icon_image>", "width": "76", "height": "76" }, { "resource": "<path_to_icon_image>", "width": "80", "height": "80" }, { "resource": "<path_to_icon_image>", "width": "87", "height": "87" }, { "resource": "<path_to_icon_image>", "width": "88", "height": "88" }, { "resource": "<path_to_icon_image>", "width": "100", "height": "100" }, { "resource": "<path_to_icon_image>", "width": "114", "height": "114" }, { "resource": "<path_to_icon_image>", "width": "120", "height": "120" }, { "resource": "<path_to_icon_image>", "width": "144", "height": "144" }, { "resource": "<path_to_icon_image>", "width": "152", "height": "152" }, { "resource": "<path_to_icon_image>", "width": "167", "height": "167" }, { "resource": "<path_to_icon_image>", "width": "172", "height": "172" }, { "resource": "<path_to_icon_image>", "width": "180", "height": "180" }, { "resource": "<path_to_icon_image>", "width": "196", "height": "196" }, { "resource": "<path_to_icon_image>", "width": "1024", "height": "1024" }] } }