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