SAPUI5 Bootstrapとは？index.htmlで読み込む設定を解説

SAPUI5でいうBootstrapは、アプリを表示する前にUI5ランタイムを読み込み、テーマやモジュールの設定を初期化する処理です。CSSフレームワークのBootstrapとは別物です。

単体起動するアプリの例

単独のindex.htmlから起動するアプリでは、scriptタグでsap-ui-core.jsを読み込みます。例えば次のように設定します。

<script id="sap-ui-bootstrap" src="resources/sap-ui-core.js"
  data-sap-ui-theme="sap_horizon"
  data-sap-ui-async="true"
  data-sap-ui-resource-roots='{"my.app":"./"}'
  data-sap-ui-on-init="module:sap/ui/core/ComponentSupport">
</script>

srcはUI5ランタイムの位置、themeは画面テーマ、asyncは非同期読み込み、resource-rootsはアプリ名前空間とファイル位置の対応を表します。実際のテーマ・パスは利用環境に合わせてください。ComponentSupportを使う場合は、HTML内のコンポーネント宣言も必要です。

Fiori Launchpad上では

Fiori Launchpadから起動するアプリでは、通常はLaunchpadがBootstrapを実行します。単体起動のサンプルをそのまま貼り付けて、アプリごとに重複読み込みしないようにします。

表示されないときの切り分け

1. ブラウザの開発者ツールでsap-ui-core.jsの取得失敗がないか確認する。
2. アプリの名前空間とresource-roots、manifest.jsonのパスを照合する。
3. コンソールのモジュール読み込みエラーとサービス接続エラーを区別する。
4. 利用中のUI5バージョンで設定値やAPIが使えるか確認する。

参考・関連記事

• SAPUI5とは：画面開発の全体像
• インテリジェントエンタープライズ：業務アプリの位置付け