本日のゴール

今日はBootstrapの組み込みを行います。
Bootstrapの組み込みでキモとなるのは、AMD((Asynchronous Module Definition－非同期モジュール定義)の停止と開始です。
AMDはDomino9から実装された読み込みを高速化する機能ですが、これが外部JavaScriptライブラリを読み込む際に悪さをするので、一時的に停止し、JavaScriptライブラリ読み込み後、再開します。
この方法は以前IBMの方に教えていただいた方法なので、半分公式だと思って良いと考えています。
【完成イメージ】

Bootstrapのダウンロードとインポート

Bootstrapのサイトからライブラリをダウンロードし、NotesDB内に組み込みます。

1	Bootstrapの本家サイトに行き、 Download ボタンをクリックする。
2	ダウンロードページで Download ボタンをクリックする。
3	ダウンロードしたzipファイルから下記のファイルを解凍し、適当なフォルダに保存する。 js\bootstrap.bundle.js js\bootstrap.bundle.js.map css\bootstrap.css css\bootstrap.css.map 【解説】 圧縮版(min付き)は、バージョンによって読み込みがうまくいかない場合があるので、無圧縮版を利用します。
4	データベースを開き、リソース＞ファイルを選択する。 「ファイルリソースのインポート」 ボタンをクリックする。
5	解凍したJavaScriptファイルを選択し、開くボタンをクリックする。bootstrap.bundle.js bootstrap.bundle.js.map
6	jsファイルには先頭にjs/を追加する。 ※特に追加しなくても良いが、ファイルが増えた場合に、ファイル種別ごとに分けられるので管理しやすい気がする。
7	リソース＞スタイルシートを選択する。 「スタイルシートのインポート」 ボタンをクリックする。
8	そのままでは拡張子cssのファイルしか表示されないので、ファイル名の部分に 「*」 を入力し、改行キーをクリックし、すべてのファイルを表示する。
9	解凍したCSSファイルを選択し、開くボタンをクリックする。 bootstrap.css bootstrap.css.map
10	cssファイルには先頭にcss/を追加する。

諸悪の根源：AMD停止、開始jsの作成

Domino9以降ではdojoの読み込みを高速化するためのAMD(Asynchronous Module Definition－非同期モジュール定義)という仕組みが入っています。

しかし、このAMDがjQueryなど他のJavaScriptとの相性問題を起こすため、単純に外部ライブラリを呼び出すだけでは使えないという状況を生み出しました。

相性問題を改善するにはJavaScript読み込み時にAMDを停止し、JavaScriptを読み込み後、AMDを再開するためのJavaScriptを作成します。

1	テキストエディタ(VSCodeなど)を利用して、下記のファイルを作成する。 amd_stop.js amd_start.js ソースは【amd_stop.jsソース】【amd_start.jpソース】を参照
2	リソース＞ファイルを選択する。 「ファイルリソースのインポート」 ボタンをクリックする。
3	作成した2つのファイルをインポートする。
4	jsファイルには先頭にjs/を追加する。 ※特に追加しなくても良いが、リソースファイルが増えた場合に、ファイル種別ごとに分けられるので管理しやすくなる。

【amd.stop.jsソース】

if (define && define.amd) {
  // undefine define.amd while loading jquery modules so as not to use amd loader
  var tempAmd = define.amd;
  define.amd = undefined;
}

【amd.start.jsソース】

if (define && tempAmd) {
  // restore define.amd object
  define.amd = tempAmd;
  delete tempAmd;
}

XPagesへの組み込みと表示テスト

XPageを作成し、Bootstrap、AMD停止モジュールを組み込み、表示テストを行います。

1	アプリケーション構成＞Xspプロパティを選択し、下記の設定を行う。 アプリケーションのテーマ Web標準 XPage実行時エラーページを表示 (チェックをつける) ※「XPage実行時エラーページを表示」にチェックをつけると、エラー発生時にブラウザ上にエラーが出力され、デバッグが容易になる。運用を開始後、エラーメッセージを出したくない場合は、チェックを外して良い。
2	XPageを選択し 「新規XPage」 ボタンをクリックする。
3	XPageに名前をつけ、OKボタンをクリックする。 名前 subjectsort_vw コメント
4	ソースタブを開き、インポートしたbootstrapと、amd停止・実行のファイルを読み込むソースを書き込む。 ソースは、【リソースファイルの読み込み①】を参照。
5	Bootstrapが読み込まれていることを確認するため、BootstrapのWebサイトのヘッダーで 「Docs」 を選択する。 左ナビゲーションで 「Components＞Dropdowns」 を選択し、一つ目のサンプルソースをコピーする。 (右上のCopyボタンをクリックすれば、クリップボードにコピーできる。) 【解説】 ドロップダウンをサンプルに利用するのは、CSSの読み込みとJavaScriptの読み込みが同時に確認できるためです。 JavaScriptが読み込まれなかった場合、ドロップダウンは動作しません。
6	先ほど書き込んだファイルリソース読み込みソースの下にコピーしたHTMLを追加する。 ソースは、【ドロップダウンHTML】を参照。
7	アイコンメニューからブラウザアイコンをクリックし 「デフォルトブラウザ」 をクリックし、プリビューを行う。
8	ブラウザでドロップダウンボタンが表示され、クリックしてドロップダウンメニューが表示されることを確認する。 【解説】 クリックしてもドロップダウンメニューが表示されない場合、JavaScriptが動作していません。 うまく動かない場合は、次章 「前準備：ブラウザのデバッグモードを使う」 を参照し、CSSファイル、JavaScriptファイルが正しく読み込まれているか？を確認して下さい。

【リソースファイルの読み込み①】

<xp:this.resources>
  <xp:styleSheet href="css/bootstrap.css"></xp:styleSheet>
  <xp:script src="js/amd_stop.js" clientSide="true"></xp:script>
  <xp:script src="js/bootstrap.bundle.js" clientSide="true"></xp:script>
  <xp:script src="js/amd_start.js" clientSide="true"></xp:script>
</xp:this.resources> 

【ドロップダウンHTML】

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

Bootstrapを使う際の開発方針

Bootstrapなど外部CSSライブラリを使う場合は、なるべくオリジナルのCSSは定義せずに、可能な限りBootstrapで定義されているCSSクラスを利用します。
CSSクラスの定義の無駄を減らし、定義のバッティングによるバグなどを減らすことが目的です。
BootstrapのUtilitisクラスには余白などがされており、ほとんどのレイアウトをBootstrapで定義されたCSSクラスで実現できます。
どうしてもオリジナルのCSSクラスを定義する場合には、「なぜ必要なのか？」「本当に必要なのか？」をもう一度調査して考えて下さい。

補足：プレビューブラウザの追加

プレビューブラウザにChrome、Edge、Firefoxなどを追加するには、下記の手順でブラウザのexeファイルを指定します。

1	ファイルメニューから 「プリファレンス」 を選択する。
2	一般＞Webブラウザーを選択し、 「新規」 ボタンをクリックする。
3	ブラウザの「名前」と「ロケーション(exeファイルのパス)」を指定し、OKボタンをクリックする。 ロケーションは、【Chromeインストールパス】【Edgeインストールパス】を参照。
4	OKボタンをクリックし、プリファレンスを閉じる。
5	DominoDesignerを再起動する。
6	再起動後、XPageを表示し、ブラウザプリビューボタンにブラウザが追加されていることを確認する。

【Chromeインストールパス】
C:\Program Files\Google\Chrome\Application\chrome.exe

【Edgeインストールパス】
C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe

※インストールパスはご自身のPC環境に合わせて下さい。