Skip to main content

 

OutSystems 11オンラインヘルプ

 

モバイルアプリが対象
OutSystems

アプリアイコンの修正

モバイルアプリケーションを作成すると、アプリ生成ウィザードによりアプリのアイコンが自動的に生成されます。このアイコンは、デバイス内のアプリを認識するのに使用されます。その際、デバイス画面の密度や画面サイズ、またはアイコンが表示される場所のサイズといった点で、デバイスやコンテキストのすべての側面に合うよう自動的に補正されます。

アプリのカスタムアイコンの定義

デフォルトのアイコンを変更して好きなアイコン画像を使用するには、アイコンのコンテキスト、デバイスの画面サイズおよび密度ごとに複数のバージョンを用意して、以下の手順を実行します。

  1. 未作成の場合zipファイルを作成し、すべてのAndroid/iOSアイコン(.png画像形式)を追加します。

  2. 主アプリケーションモジュールを開き、新規または更新済みのzipファイルをリソースフォルダにインポートします。

  3. アプリケーションモジュールを選択してプロパティに移動し、Extensibility Configurationsプロパティを開きます。

  4. 未作成の場合、Extensibility Configurations値のウィンドウで、使用するアイコンに関するすべての情報を指定するためのJSONオブジェクトを作成します。未指定の場合、まずアイコンを格納しているリソースファイルを指定します。

  5. アプリケーションに独自のアイコンを使用する意思を示すために、JSONに「icons」タグを追加します。

  6. 各モバイル プラットフォームについて、サイズ(iOS)や密度(Android)、および対応するアイコンのzipフォルダ内での位置を指定します。使用される可能性のあるすべてのサイズおよび密度についてアイコンを確実に定義します。そうしない場合、エラーが発生します(下記はあくまで参考です)。アイコンのJSONテンプレートを確認すると、間違いを防げます。

  7. この変更をユーザーが利用できるようにするために、新しいモバイルアプリケーションをパブリッシュ・生成し、配布します。

アイコンのサイズおよび密度{ #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"
        }]
    }
}
  • Was this article helpful?