Skip to main content

 

OutSystems 11オンラインヘルプ

 

モバイルアプリが対象
OutSystems

カスタムスプラッシュ画面の使用

デフォルトでは、モバイルアプリケーションには、アプリ作成ウィザードで定義したメインカラーを表示したカスタムスプラッシュ画面があります。このスプラッシュ画面が表示されるのは、OSがアプリを読み込んだ後(黒い画面)と、WebViewでコンテンツの読み込みが完了した後(白い画面)です。

ネイティブスプラッシュ画面をカスタマイズすると、アプリの読み込みが完了する前でも見た目を変更できます。こうすることで、黒い画面から白い画面への遷移を好きな画像に置き換えられるため、アプリを開いた瞬間からエンドユーザーに滑らかなエクスペリエンスを提供できます。

はじめに

カスタム画像をアプリのネイティブスプラッシュ画面として使用するには、すべてのAndroid/iOS用スプラッシュ画面のサイズに合わせて.png形式の画像を作成する必要があります。

ネイティブスプラッシュ画面のカスタマイズ

カスタム画像をアプリのネイティブスプラッシュ画面として使用するには、以下の手順を実行します。

  1. Android/iOSスプラッシュ画面の全サイズに合わせた.png形式のカスタム画像をすべて含むZIPファイルを作成します。

  2. アプリのメインモジュールの[Data]タブでResourcesフォルダを右クリックして、ZIPファイルをリソースとしてインポートします。

    Deploy ActionプロパティはDo Nothingのままにしてください。

  3. アプリケーションモジュールのプロパティで、スプラッシュ画面のJSONテンプレートExtensibility Configurationsプロパティに追加します。

  4. Extensibility Configurationsプロパティに追加したJSONテンプレートで、<path_to_resources_file>をZIPファイル名に、<path_to_splash_screen_image>をそれぞれZIPファイル内の対応するスプラッシュ画面の画像の場所に置き換えます。この手順の後、JSONは以下のようになります。

    現行のあらゆる画面サイズおよび密度に対してスプラッシュ画面および画像のパスを設定するようにしてください。そうしないと、モバイルアプリケーションを生成した際にエラーが発生します。

  5. この変更をユーザーに表示するには、新しいモバイルアプリケーションパッケージをパブリッシュ・生成して配布します。

デバイスの画面サイズおよび密度

Android用


(px)
高さ
(px)
密度
240 360 縦--ldpi(120 dpi)
320 480 縦-mdpi(160 dpi)
480 720 縦-hdpi(240 dpi)
640 960 縦-xhdpi(320 dpi)
960 1440 縦-xxhdpi(480 dpi)
1280 1920 縦-xxxhdpi(640 dpi)
360 240 横-hdpi(120 dpi)
480 320 横-mdpi(160 dpi)
720 480 横-hdpi(240 dpi)
960 640 横-xhdpi(320 dpi)
1440 960 横-xxhdpi(480 dpi)
1920 1280 横-xxxhdpi(640 dpi)

iOS用

iOSの場合、モバイルアプリパッケージの生成時に使用するMobile Apps Build Service(MABS)のバージョンによって、スプラッシュ画面サイズが変わります。

MABS 4.0以降

MABS 4.0以降を使用する場合、起動ストーリーボード画像に基づくスプラッシュ画面サイズを使用する必要があります。


(px)
高さ
(px)
デフォルトのファイル名
2732 2732 Default@2x~universal~anyany
1278 2732 Default@2x~universal~comany
1334 750 Default@2x~universal~comcom
2208 2208 Default@3x~universal~anyany
2208 1242 Default@3x~universal~anycom
1242 2208 Default@3x~universal~comany
1334 1334 Default@2x~iphone~anyany
750 1334 Default@2x~iphone~comany
1334 750 Default@2x~iphone~comcom
2208 2208 Default@3x~iphone~anyany
2208 1242 Default@3x~iphone~anycom
1242 2208 Default@3x~iphone~comany
2732 2732 Default@2x~ipad~anyany
1278 2732 Default@2x~ipad~comany

MABS 3.3

MABS 3.3を使用する場合、従来の起動画像に基づくスプラッシュ画面サイズを使用する必要があります。


(px)
高さ
(px)
デバイス
320 480 すべての非Retina型iPhoneおよびiPod
640 960 iPhone 4/4s(縦)
640 1136 iPhone 5/5s/SE(縦)
750 1334 iPhone 6/6s/7/8(縦)
1242 2208 iPhone 6+/6s+/7+/8+(縦)
2208 1242 iPhone 6+/6s+/7+/8+(横)
1125 2436 iPhone X(縦)
2436 1125 iPhone X(横)
768 1024 すべての非Retina型iPad(縦)
1024 768 すべての非Retina型iPad(横)
1536 2048 すべてのRetina型iPad(縦)
2048 1536 すべてのRetina型iPad(横)

スプラッシュ画面のJSONテンプレート

以下の2つのテンプレートをコピーして、モジュールのExtensibility Configurationsプロパティに貼り付けることができます。モバイルアプリパッケージの生成時に使用するMobile Apps Build Service(MABS)のバージョンに応じていずれかのテンプレートを選択し、全体をコピーしてください。テンプレートにはAndroid用およびiOS用の両方の定義が含まれています。

各テンプレートで、<path_to_resources_file>はZIPファイルへのパス、<path_to_splash_screen_image>はそれぞれ特定のスプラッシュ画面サイズ向けの.png形式のカスタム画像へのパスです。

  • "splashcreens"タグ内部のスニペットは、両方のプラットフォーム("android"および"ios")について、スプラッシュ画面全サイズに対応するスプラッシュ画面画像のZIPファイル内での場所を定義します。


テンプレートの最後の部分では、"preferences"タグを使用して新しい設定"SplashScreenDelay"を行います。この設定は両方のモバイルプラットフォームに適用され("global"タグ)、ネイティブスプラッシュ画面を3秒間表示した後、自動的に非表示になります。"SplashScreenDelay"のデフォルト値は0のため、ネイティブスプラッシュ画面を表示できるようにするには、この設定を定義する必要があります。

MABS 4.0以降使用時のAndroidおよびiOS用JSONテンプレート

{
    "resource": "<path_to_resources_file>",
    "splashscreens": {
        "android": [{
            "resource": "<path_to_splash_screen_image>",
            "density": "port-ldpi"
        },
        {
            "resource": "<path_to_splash_screen_image>",
            "density": "port-mdpi"
        },
        {
            "resource": "<path_to_splash_screen_image>",
            "density": "port-hdpi"
        },
        {
            "resource": "<path_to_splash_screen_image>",
            "density": "port-xhdpi"
        },
        {
            "resource": "<path_to_splash_screen_image>",
            "density": "port-xxhdpi"
        },
        {
            "resource": "<path_to_splash_screen_image>",
            "density": "port-xxxhdpi"
        },
        {
            "resource": "<path_to_splash_screen_image>",
            "density": "land-ldpi"
        },
        {
            "resource": "<path_to_splash_screen_image>",
            "density": "land-mdpi"
        },
        {
            "resource": "<path_to_splash_screen_image>",
            "density": "land-hdpi"
        },
        {
            "resource": "<path_to_splash_screen_image>",
            "density": "land-xhdpi"
        },
        {
            "resource": "<path_to_splash_screen_image>",
            "density": "land-xxhdpi"
        },
        {
            "resource": "<path_to_splash_screen_image>",
            "density": "land-xxxhdpi"
        }],
        "ios": [{
            "resource": "<path_to_splash_screen_image>",
            "defaultName": "Default@2x~universal~anyany"
        },
        {
            "resource": "<path_to_splash_screen_image>",
            "defaultName": "Default@2x~universal~comany"
        },
        {
            "resource": "<path_to_splash_screen_image>",
            "defaultName": "Default@2x~universal~comcom"
        },
        {
            "resource": "<path_to_splash_screen_image>",
            "defaultName": "Default@3x~universal~anyany"
        },
        {
            "resource": "<path_to_splash_screen_image>",
            "defaultName": "Default@3x~universal~anycom"
        },
        {
            "resource": "<path_to_splash_screen_image>",
            "defaultName": "Default@3x~universal~comany"
        },
        {
            "resource": "<path_to_splash_screen_image>",
            "defaultName": "Default@2x~iphone~anyany"
        },
        {
            "resource": "<path_to_splash_screen_image>",
            "defaultName": "Default@2x~iphone~comany"
        },
        {
            "resource": "<path_to_splash_screen_image>",
            "defaultName": "Default@2x~iphone~comcom"
        },
        {
            "resource": "<path_to_splash_screen_image>",
            "defaultName": "Default@3x~iphone~anyany"
        },
        {
            "resource": "<path_to_splash_screen_image>",
            "defaultName": "Default@3x~iphone~anycom"
        },
        {
            "resource": "<path_to_splash_screen_image>",
            "defaultName": "Default@3x~iphone~comany"
        },
        {
            "resource": "<path_to_splash_screen_image>",
            "defaultName": "Default@2x~ipad~anyany"
        },
        {
            "resource": "<path_to_splash_screen_image>",
            "defaultName": "Default@2x~ipad~comany"
        }]
    },
    "preferences": {
        "global": [
            {
                "name": "SplashScreenDelay",
                "value": "3000"
            }
        ]
    }
}

MABS 3.3使用時のAndroidおよびiOS用JSONテンプレート

{
    "resource": "<path_to_resources_file>",
    "splashscreens": {
        "android": [{
            "resource": "<path_to_splash_screen_image>",
            "density": "port-ldpi"
        },
        {
            "resource": "<path_to_splash_screen_image>",
            "density": "port-mdpi"
        },
        {
            "resource": "<path_to_splash_screen_image>",
            "density": "port-hdpi"
        },
        {
            "resource": "<path_to_splash_screen_image>",
            "density": "port-xhdpi"
        },
        {
            "resource": "<path_to_splash_screen_image>",
            "density": "port-xxhdpi"
        },
        {
            "resource": "<path_to_splash_screen_image>",
            "density": "port-xxxhdpi"
        },
        {
            "resource": "<path_to_splash_screen_image>",
            "density": "land-ldpi"
        },
        {
            "resource": "<path_to_splash_screen_image>",
            "density": "land-mdpi"
        },
        {
            "resource": "<path_to_splash_screen_image>",
            "density": "land-hdpi"
        },
        {
            "resource": "<path_to_splash_screen_image>",
            "density": "land-xhdpi"
        },
        {
            "resource": "<path_to_splash_screen_image>",
            "density": "land-xxhdpi"
        },
        {
            "resource": "<path_to_splash_screen_image>",
            "density": "land-xxxhdpi"
        }],
        "ios": [{
            "resource": "<path_to_splash_screen_image>",
            "width": "320",
            "height": "480"
        },
        {
            "resource": "<path_to_splash_screen_image>",
            "width": "640",
            "height": "1136"
        },
        {
            "resource": "<path_to_splash_screen_image>",
            "width": "640",
            "height": "960"
        },
        {
            "resource": "<path_to_splash_screen_image>",
            "width": "750",
            "height": "1334"
        },
        {
            "resource": "<path_to_splash_screen_image>",
            "width": "1242",
            "height": "2208"
        },
        {
            "resource": "<path_to_splash_screen_image>",
            "width": "2208",
            "height": "1242"
        },
        {
            "resource": "<path_to_splash_screen_image>",
            "width": "1125",
            "height": "2436"
        },
        {
            "resource": "<path_to_splash_screen_image>",
            "width": "2436",
            "height": "1125"
        },
        {
            "resource": "<path_to_splash_screen_image>",
            "width": "768",
            "height": "1024"
        },
        {
            "resource": "<path_to_splash_screen_image>",
            "width": "1024",
            "height": "768"
        },
        {
            "resource": "<path_to_splash_screen_image>",
            "width": "1536",
            "height": "2048"
        },
        {
            "resource": "<path_to_splash_screen_image>",
            "width": "2048",
            "height": "1536"
        }]
    },
    "preferences": {
        "global": [
            {
                "name": "SplashScreenDelay",
                "value": "3000"
            }
        ]
    }
}

スプラッシュ画面の動作のさらなるカスタマイズ

以下の構文を使用してExtensibility Configurationsに新しい設定を追加することで、ネイティブスプラッシュ画面の動作をさらにカスタマイズできます。

{
    "preferences": {
        "<target-platform>": [
            {
                "name": "<preference>",
                "value": "<preference-value>"
            }
        ]
    }
}

<target-platform>は対象となるモバイルプラットフォームであり、globalandroid、またはiosに設定できます。以下の表は<preference>および<preference-value>で使用可能な値の一覧です。

設定 可能な値 対応プラットフォーム
AutoHideSplashScreen True or False iOSおよびAndroid
SplashScreenDelay Number iOSおよびAndroid
FadeSplashScreen True or False iOSおよびAndroid
FadeSplashScreenDuration Number iOSおよびAndroid
SplashMaintainAspectRatio True or False Android
SplashShowOnlyFirstTime True or False Android

スプラッシュ画面で使用できる設定の説明を読むと、どのように機能するかを確認できます。

スプラッシュ画面の設定をエンドユーザーに表示するには、必ず新しいモバイルアプリケーションパッケージをパブリッシュ・生成して配布するようにしてください。