[OutSystems]モバイルのカスタムスプラッシュ画面を試す

OutSystemsのモバイル画面を開くと、

1. 黒い画面：OSがアプリを読み込む
2. 白い画面：手元のアプリだと確認できませんが、WebViewにコンテンツを読み込む際の画面だそうです
3. アプリのメインカラー一色の画面：スプラッシュ画面
4. Common/Splash 画面：モバイルアプリケーション作成時に自動作成される初期表示画面
5. アプリケーションの初期表示画面

という流れで画面遷移します。
この内の、3. に相当する画面をカスタマイズする方法です。

3の画面例（メインカラー：#1F4788）：

4の画面例：

参考ドキュメント

公式ドキュメント：カスタムスプラッシュ画面を使用する

以下の手順で出てくるJSON設定の項目名や用意するべき画像サイズなどが出てきます。

環境情報

Personal Environment(Version 11.9.0 (Build 16900))
Service Studio(Version 11.8.6)
Android端末(SH-M08 Androidバージョン9)

テストはAndroid端末で行いました。

画像を用意する

iOS/Androidそれぞれに対して、定義されたいくつかの画面サイズの画像をPNG形式で用意します。
用意しなければならない画像サイズのリストは以下を参照（ちょっと翻訳するべきでない部分を翻訳してしまっているっぽいので英語のページにしておきました）。
Android
iOS

用意した画像をフォルダにまとめて配置し、zip圧縮します。
zipファイル内でのパスを後で指定しなければいけないので、iOSとAndroid用画像を別のフォルダに配置して置いたほうが良さそうです。

例：
splash-screen/iOS/<ファイル名>.png
splash-screen/android/<ファイル名>.png

検証をAndroidで行うため、上の表のdensity列の値をファイル名として以下のように準備してみました。

モジュールに画像を登録する

用意したzipファイルをResourceとして登録します。
Dataタブ > Resourcesフォルダ > 右クリックしてImport Resource > zipファイルを選択。
また、登録したファイルのDeploy Actionは「Do Nothing」に。

カスタムスプラッシュ画面利用設定を行う

参考ドキュメントに設定用JSONのテンプレートがあるのでこれを適当に変更して利用しました。
Service Studioの各タブを選択して表示されるツリーの一番上がモジュールです。このモジュールを選択して表示されるプロパティの「Extensibility Configurations」に作成したJSONを貼り付けます。

私の設定したJSONは以下の通り。

{
    "resource": "splash-screen.zip",
    "splashscreens": {
        "android": [{
            "resource": "/splash-screen/android/port-ldpi.png",
            "density": "port-ldpi"
        },
        {
            "resource": "/splash-screen/android/port-mdpi.png",
            "density": "port-mdpi"
        },
        {
            "resource": "/splash-screen/android/port-hdpi.png",
            "density": "port-hdpi"
        },
        {
            "resource": "/splash-screen/android/port-xhdpi.png",
            "density": "port-xhdpi"
        },
        {
            "resource": "/splash-screen/android/port-xxhdpi.png",
            "density": "port-xxhdpi"
        },
        {
            "resource": "/splash-screen/android/port-xxxhdpi.png",
            "density": "port-xxxhdpi"
        },
        {
            "resource": "/splash-screen/android/land-ldpi.png",
            "density": "land-ldpi"
        },
        {
            "resource": "/splash-screen/android/land-mdpi.png",
            "density": "land-mdpi"
        },
        {
            "resource": "/splash-screen/android/land-hdpi.png",
            "density": "land-hdpi"
        },
        {
            "resource": "/splash-screen/android/land-xhdpi.png",
            "density": "land-xhdpi"
        },
        {
            "resource": "/splash-screen/android/land-xxhdpi.png",
            "density": "land-xxhdpi"
        },
        {
            "resource": "/splash-screen/android/land-xxxhdpi.png",
            "density": "land-xxxhdpi"
        }]
    },
    "preferences": {
        "global": [
            {
                "name": "SplashScreenDelay",
                "value": "10000"
            }
        ]
    }
}

設定のポイント

• resourceに登録したzipファイル名を記述する
• Androidビルドをする際は、Android用設定のみでよい
• Android項目配下の配列について
  • resourceには、zipファイル内での対象ファイルまでのパスを書く
  • densityには、「画像を用意する」のAndroidに貼ったリンクの表にあるdensity列の値を設定する
• SplashScreenDelay項目はこのカスタムスプラッシュ画面を表示する時間をミリ秒単位で指定する（確認しやすいように10秒を設定）

動作確認

3のステップで以下の画面表示がされるようになりました。

このあとはちゃんと4のCommon/Splash画面が元の青系の色のまま表示されます。

トラブルシュート

以下のケースでは、モバイルの生成（Publish後に行われるネイティブアプリの生成）に失敗します。
zipファイルを登録し忘れると

　Error: No resources file found. Please check your extensibility configurations and try again.

というエラーに。

また、参考ドキュメントにある表の全画像が必要です。登録忘れがあると、

　Error: There is a splash screen missing in your extensibility configuration with density port-ldpi.

というエラーになりました。