【SAPUI5】Bootstrapとは？ #SAP

Bootstrapとは

Bootstrapは一般的には以下のように定義されています。

電源投入後あるいはリセットの後に、コンピューター上のメモリーに基本的なソフトウェアを読み込むことを指す。
出典: フリー百科事典『ウィキペディア（Wikipedia）』

SAPUI5では、ページが開かれたとき、最初にSAPUI5のライブラリやテーマなどを読み込むスクリプトのことを指します。
SAPUI5のアプリケーションとして動かすために必須なのですね。
（Bootstrapという名前のフレームワークがありますがそれとは別物です）

どこに書くのか

はじめに、前回の記事でご紹介した手順でHelloworldのページを作っておきます。
index.htmlのファイルは以下のようになっています。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
        <meta charset="UTF-8">
        <title>Hello World App</title>
    </head>
    <body>
        <p>Hello World</p>
    </body>
</html>

headタグの後に以下のようにコードを追加します。
ひとつ目のscriptタグの中がBootstrapです。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
        <meta charset="UTF-8">
        <title>Hello World App</title>
        <!--以下を追加-->
        <script
           id="sap-ui-bootstrap"
           src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" 
           data-sap-ui-theme="sap_belize"
           data-sap-ui-libs="sap.m"
           data-sap-ui-compatVersion="edge"
           data-sap-ui-preload="async" >
        </script>
        <script>
           sap.ui.getCore().attachInit(function () {
               alert("UI5 is ready");
           });
        </script>
        <!--以上を追加-->
    </head>
    <body>
        <p>Hello World</p>
    </body>
</html>

Bootstrapの中身

項目	指定するもの
id	固定値 "sap-ui-bootstrap"
src	SAPUI5 coreライブラリが格納されている場所
data-sap-ui-theme	UIのテーマ
data-sap-ui-libs	ページで使用するUIのライブラリ
data-sap-ui-compatVersion	"edge"を指定すると、SAPUI5の最新機能が使える（任意指定）
data-sap-ui-preload	ライブラリを同期で読み込むか(sync)、非同期で読み込むか(async)を指定する。パフォーマンス向上のためasyncを指定することが推奨されている

attachInitメソッドについて

data-sap-ui-preloadを"async"（非同期）とした場合、必要なライブラリがすべて読み込まれたタイミングをアプリケーションが知る必要があります。このためにattachInitメソッドを使用します。
今回は、attachInitメソッドの中でアラートを出力するようにしています。

実行結果

実行結果は以下のようになります。

参考にしたページ

Bootstrapping: Loading and Initializing
Get Started: Setup and Tutorials-Walkthrough-Step 2: Bootstrap