はじめに

AWSだ！クラウドだ！AIだ！と言われている昨今ですが、隠れキリシタンのようにNotesやXPagesを活用されている方々に向けて、連続講座を始めることにしました。
理解を深めるために意図的に回り道する作り方をしていたりするので、順番に読み進めてもらった方が良いかと思います。
この講座が、何かの参考になったり、お客様の笑顔を増やすことに貢献できれば幸いです。

作るものと完成イメージ

この連続講座では、掲示板アプリケーションをテーマに、Bootstrap5とXPageを組み合わせたアプリケーションの作り方を学びます。

【画面の構成】

• ビュー(全文検索あり)
• フォーム
• ナビゲーション
• ヘッダー

完成ビュー画面イメージ	完成フォーム画面イメージ

【主な機能】

1. ビューから新規文書を作成する
2. 文書保存時に入力チェックを行う
3. 文書の削除を行う
4. ビューから文書を開き、戻ると元いたビュー、元いたページ数に戻る
5. 全文検索で文書を検索する

【学べる内容】

• Bootstrapを使った標準的な画面構成の作り方
• 画面、画面用コードの分割方法、命名規則
• フォーム上の計算式が実行されるタイミング、実行される場所の違い
• @式、LotusScript用Notesクラスと、サーバーサイドJavaScript(以下、SSJS)用@式、Notesクラスを違い

対象読者

この連続講座は下記のユーザーを対象としています。

• @式、LotusScriptを使ってNotesアプリケーションが作れる
• HTML、CSS、JavaScriptの文法、基本を知っていて、サンプルページを作ったことがある

動作環境

このブログでは、下記の環境で動作確認を行っています。
OS：Windows10 Pro
Domino：Domino9.0.1 FP7

今後の予定

明日以降、下記の内容で更新していきます。

【目次】

1. Bootstrap5で作るXPageアプリSeason1始まります　←今ココ
2. 前準備：フォームとビューを作る
3. 前準備：Bootstrapの組み込み
4. 前準備：ブラウザの開発者ツールを使う
5. ビューを作る①：レイアウトの作成
6. ビューを作る②：検索機能、アクションボタンの作成
7. CSSを書いてみる
8. フォームを作る①：フォームのレイアウト
9. フォームを作る②：ボタンの実装
10. ビューとフォームを関連付ける
11. 表示モードのレイアウトを調整する
12. ヘッダーを作る
13. 左ナビゲーションを作る
14. フォームを作る③：入力チェックの実装
15. 補足：動かない時はどうする？