【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