7
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

【SAPUI5】Bootstrapとは?

Last updated at Posted at 2018-11-22

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メソッドの中でアラートを出力するようにしています。

実行結果

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

参考にしたページ

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

7
4
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?