【SAPUI5】Shell Controlでデバイスに合わせて幅を調整

はじめに

これまでに作ったアプリケーションはPCでの表示のみを想定していました。
このため、デバイスの幅が変わると文字が小さくて読めなかったりしました。

※注
Fiori Launchpadで実行するアプリの場合、Launchpadに Shell barが含まれるのでアプリ側にShell Controlをつける必要はありません。本記事は、スタンドアロンアプリを想定しています。

PCで表示した場合

iPoneXで表示した場合

※デバッグツールの"Toggle device tool bar"というボタンを押すと、さまざまなデバイスで実行した結果をシミュレーションできます

Shell Controlとは

sap.m.Shellというコントロールを使うと、デバイスに合わせて幅を自動調整することができます。
index.htmlファイルのattachInitメソッドの中でShellのインスタンスを作成すると、Shellがアプリケーションの一番外側のコントロールとして機能します。
これにより、ビュー側では幅を意識する必要がありません。

書き方

入門編の記事まとめで作成したアプリケーションを用意します。
index.htmlファイルのattachInitメソッドを以下のように変更します。

変更前

        <script>
           sap.ui.getCore().attachInit(function () {
                new sap.ui.core.ComponentContainer({
                    name : "test.helloworld"
              }).placeAt("content");      
           })
        </script>

変更後

        <script>
           sap.ui.getCore().attachInit(function () {
                new sap.m.Shell({
                    app : new sap.ui.core.ComponentContainer({
                        name : "test.helloworld"
                    })              
                }).placeAt("content");
           })
        </script>

もともとあった"new sap.ui.core.ComponentContainer"以降の記述を、sap.m.Shellで囲った形です。

実行結果

PCで表示した場合
あまり違いがわかりませんが、最上部に青いバーが表示されています。

iPoneXで表示した場合
文字が読める大きさで表示されるようになりました。

参考にしたページ

Get Started: Setup and Tutorials-Walkthrough-Step 12: Shell Control as Container