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