今日から始める XPages アプリケーション開発

1. 今日から始める
XPages アプリケーション開発！
ノーツコンソーシアム オープンセミナー 2016 ハンズオン
XPagesDay 出張セッション
2016/11/09
株式会社ソルクシーズ 吉田 武司
Ver. 1.0.2

2.  本資料の掲載内容は、できる限り正確を期するよう に努めてはおりますが、
いかなる明示または暗黙の 保証も責任も負いかねます。
 掲載情報は不定期に変更されることもあります。他 のメディア等に無断で転
載する事はご遠慮下さい。
 当資料をコピー等で複製することは、執筆者の承諾 なしではできません。
 当資料に掲載された製品名または会社名は それぞれの各社の商標または
登録商標です。
特記事項 2

3. 3
STEP 1
はじめに

4. これから XPages を始める方への取っ掛かりになるようハンズオ
ンにしたいと思います。
限られた時間のため、極力プログラミング要素を除外した仕様と
なっています。
 標準機能を積極的に使用
 事前に用意したノーツアプリケーションを XPages 化
 レイアウト以降は、オプションにしています。復習の際、お試しください。
XPages 開発に慣れてきたら、プログラミングを含めた次のステッ
プに挑戦してみてください。
本日の課題のレベル感 4

5. バージョン
 Domino 9.0.1 FP3 （FP5でも確認済み）
 Notes 9.0.1 FP5
資料およびアプリケーション（NSF）は公開しています。
 テキスト
• http://www.slideshare.net/chemp7/2016-xpagesday-2016
 アプリケーション（NSF）
• https://goo.gl/Q9WcjS
• 署名、適切なACL/ECLを設定してご利用ください。
• 検索機能を使うには、事前に全文索引を作成しておく必要があります。
• ファイル構成
 demo.nsf （XPages 化する前のアプリケーション）
 demo1.nsf （XPages 化途中のアプリケーション）
 demo2.nsf （XPages 化後のアプリケーション）
 demo3.nsf （XPages 化後、追加でカスタマイズしたアプリケーション）
環境 5

6. 本来ならば、CSS を使用した方が良いのですが、最初からすべて
を覚えるのは大変です。
 Cascading Style Sheets（CSS、カスケーディング・スタイル・シート、カス
ケード・スタイル・シート）とは、HTML や XML の要素をどのように修飾
（表示）するかを指示する、W3Cによる仕様の一つ。文書の構造と体裁を
分離させるという理念を実現する為に提唱されたスタイルシートの、具体
的な仕様の一つ。
Wikipedia 「Cascading Style Sheets」より要約 最終更新 2016年10月6日 (木) 18:15
よって、今回は直接的には CSS を使用しないで作成を行います。
 実際には、後述のテーマで間接的には利用しています。
その代わり、標準で用意されている「テーマ」と拡張ライブラリの
「アプリケーションレイアウト」を使用します。
前提：デザイン 6

7.  XPages は Notes アプリケーションにおける画面(GUI)を開発するための新たな
技術であり、Domino Designer を使用して開発する。
 NSF ファイルに新たな設計要素として XMLで表現される XPage が追加された。
 XPages は JavaServer Faces をベース技術として採用し、HTML、JavaScript、スタ
イルシートなどの標準的な Web のプログラミングモデルを取り入れてアプリ
ケーション開発を行える。
 Domino で実行されるサーバーサイド JavaScript (SSJS) も提供され、Notes アプ
リケーションのオブジェクトにアクセスすることも可能。
 Web ブラウザでの実行だけではなく Notes クライアントからも使用可能。
 XPages in Notes client (XPiNC)
 スタンダード版クライアントのみです
Wikipedia 「XPages」より要約 最終更新 2013年7月11日 (木) 16:54
XPages とは 7

8.  XPages は Notes アプリケーションにおける画面(GUI)を開発するための新たな
技術であり、Domino Designer を使用して開発する。
 NSF ファイルに新たな設計要素として XMLで表現される XPage が追加された。
 XPages は JavaServer Faces をベース技術として採用し、HTML、JavaScript、スタ
イルシートなどの標準的な Web のプログラミングモデルを取り入れてアプリ
ケーション開発を行える。
 Domino で実行されるサーバーサイド JavaScript (SSJS) も提供され、Notes アプ
リケーションのオブジェクトにアクセスすることも可能。
 Web ブラウザでの実行だけではなく Notes クライアントからも使用可能。
 XPages in Notes client (XPiNC)
 スタンダード版クライアントのみです
XPages とは 8
①
②
③
④

9. 本資料では、基本的に以下のように表現しています。
 他の資料では違う場合があります。ご了承ください。
 XPages
• XPages 技術、アプリケーションなど全般的な意味
 XPage
• データベース（アプリケーション）の設計要素である「XPage」
 ブラウザで表示する Web ページもこの設計要素です。
XPages と XPage 9

10. Domino Designer
 アプリケーションの開発
ブラウザまたはノーツクライアント（スタンダード版）
 アプリケーションの動作確認
Domino サーバー
 アプリケーションの実行
データベース（アプリケーション）
 本日のお題：アンケートDBの XPage 化
開発に必要なもの 10

11. XPage を利用するには、２つの方法があります。
 ノーツクライアント（スタンダード版）
 ブラウザ
利用方法 11
ブラウザ
ドミノサーバー
ノーツクライアント ノーツクライアント
ローカルにレプリカ

12. サーバー文書
 セキュリティ－可能なプログラムの制限
• 制限なしで署名または実行
• 呼び出したユーザーとして実行するエージェントとまたは XPage を署名
開発者のユーザーまたはグループを設定
 ノーツクライアント（スタンダード版）のみでもローカルで実行可能です。
• XPages in Notes client (XPiNC)
Domino サーバー上で利用するための設定 12

13.  ローカルノーツクライアントのみでも制限はありますが XPage は実行可能です。
 ACL に「Anonymous」を追加し、「作成者」以上の権限を付加します。
 Anonymous が設定されていない場合、プレビュー時に警告が表示されます。
ローカルでプレビューするための ACL 設定 13

14. 14
STEP 2
Domino Designer について

15. 「アンケート」 DB を選択して右クリック、メニューから「Designer で
開く」を選択します。
Domino Designer の起動 15

16. Designer の各枠は、「Eclipse ビュー」呼びます。
 ノーツの設計要素であるビューと紛らわしいため、今回のハンズオンで
は、便宜的に「枠」と呼ぶことにします。（例：アプリケーション枠）
 枠の並びは自由に変更できます。
Domino Designer の説明 16
コントロール
データパレット
アプリケーション
アウトライン
プロパティ
イベント
問題（エラー等）
設計
ソース

17. Domino Designer の説明：基本の流れ 17
② 部品を配置① 対象を選択
③ 対象を設定

18. 枠の表示
 ウィンドウ > Eclipse ビューの表示 > [枠]
Domino Designer の説明：枠と閉じてしまった場合 18

19. 19
STEP 3
XPages 化するアプリケーションについて

20. 社員に対して IT 機器のアンケートを実施するためのノーツアプリ
ケーションです。
 フォームが１つ、ビューが３つあります。
• 回答フォームには、３つの質問があります。
• 回答の結果はビュー（３種類）で確認できます。
アプリケーションの概要 20
ビュー
ビュー【ビュー】
すべてのアンケート
【フォーム】
アンケート

21. ACL（アクセス制御リスト）
• 本来のアンケートでは、自分以外の回答は非表示が望ましいですが、今回
は全データが閲覧できる仕様です。
• 変更は本人と管理者のみ可能です。
アプリケーションの ACL 21
ユーザー アクセス権 作成 削除 ロール 備考
管理者・サーバー 管理者 〇 〇 なし
一般（-Default-） 作成者 〇 〇 なし
Anonymous なし － － なし

22. 1. フォーム：アンケート
 フィールド
1. 回答日：回答時の日時
2. 回答者：回答者のユーザー名
3. 回答１：数値（デフォルト値：0）
4. 回答２：チェックボックス（3択）
5. 回答３：テキスト
 ボタン
1. 閉じる
2. 保存
3. 編集
アプリケーションの設計：フォーム 22

23. 1. ビュー：すべてのアンケート
 回答日順に表示
2. ビュー：回答１
 回答１をカテゴリ別に表示
3. ビュー：回答２
 回答２をカテゴリ別に表示
 各ビューには、アンケート入力を新規作成するアクションボタンがあります。
アプリケーションの設計：ビュー 23

24. 1. ビューのアクションボタンから新規に
アンケートを回答してみましょう。
2. Domino Designer を起動して設計を
確認してみましょう。
3. クラシック Web で表示してみましょう。
 フレームセット「メインフレームセット」を
Web ブラウザプレビューする。
アプリケーションの確認 24

25. Step 4 ～ 6
1. ビューの表示
2. ビューから文書を開く
XPage の完成イメージ（前半） 25

26. Step 7 ～ 11
 文書の作成、編集、削除
 レイアウト
 複数のビューの切り替え
XPage の完成イメージ（後半） 26

27. 27
STEP 4
データベースの設定

28. 1. 画面左の枠「アプリケーション」の「アン
ケート」をダブルクリック
2. 「アプリケーション構成」をダブルクリック
3. 「Xsp プロパティ」をダブルクリック
4. タブ「一般」をクリック
5. 「エラー処理」の「XPage 実行時エラー
ページを表示」を有効にする
6. 「テーマのデフォルト」の「アプリケーショ
ンのテーマ」で「OunUI V2.1」を選択
7. メニューバーから「ファイル > 保存」をク
リック
8. メニューバーから「ファイル > 閉じる」を
クリック
エラー処理とテーマの設定 28

29. 29
STEP 5
フォーム画面の作成

30.  XPages アプリケーション開発では以下の設計要素をよく使用します。
 設計要素とは、ノーツアプリケーション開発で使用するフォームやビュー、フレー
ムセット、ページなどのことです。
 上記以外にもリソース（ファイル、スタイルシート、テーマ）やスクリプトライブラ
リなども必要に応じて使用します。
設計要素
XPages アプリケーション ノーツアプリケーションで例えると…
XPage フォーム
カスタムコントロール サブフォーム
イメージ イメージ（同じ）
30

31.  XPages には、ノーツの文書およびビューに簡単にアクセスするための機能が
あります。
 アクセスするためには、「データソース」を定義します。
 Domino 文書
 Domino ビュー
 フォームのフィールドデータを XPages のコントロールと関連付ける場合、デー
タソースのフィールドをバインド先として指定します。
 データの参照・作成・変更などが行えます。
データソース、バインド 31

32.  後々の作業を考え、今回はフォームおよびビュー部分を「カスタムコントロー
ル」で作成します。
 作成したカスタムコントロールを XPage に貼り付けます。
 「カスタムコントロール」は、XPage の部品のようなものです。ノーツアプリケー
ションの「サブフォーム」をイメージすればわかりやすいかと思います。
基本構成 32
XPage
カスタム
コントロール
フォーム
サブフォーム

33. 33
STEP 5.1
フォーム「アンケート」を表示する「カスタムコントロール」の作成
XPage
カスタム
コントロール

34. 1. 画面左の枠「アプリケーション」の「アンケート」をダブルクリック
2. 「カスタムコントロール」をダブルクリック
3. 「新規カスタムコントロール」をクリック
4. 「名前」を入力
5. 「OK」をクリック
フォーム：新規カスタムコントロール 34
項目 設定値
名前 ccFormTopic

35. 1. 画面右の枠「データパレット」をクリック
2. 「データソース」で「データソースの定義」を選択
3. ダイアログ「データソースの定義」が開く
4. 「データソース」で「Domino 文書」を選択
フォーム：データソースのバインド（１） 35
• 設定は次頁を参照
POINT
「データソース」を定義するこ
とで文書のデータにアクセス
できるようになります。

36. 1. ダイアログ「データソースの定義」で下記を設定
2. 「OK」をクリック
フォーム：データソースのバインド（２） 36
項目 設定値
フォーム アンケート - Topic
フォーム検証の実行 文書ロード時
POINT
「フォームの検証の実行」
指定したタイミングでフォーム
のフィールドが計算されます。
• 文書のロード時
• 文書保存時
• 両方

37.  [コントロールの選択]ダイアログボックスが使用可能になっていることを確認
フォーム：[コントロールの選択]の確認 37
使用可能：
使用不可：
POINT
「使用可能」の場合、
フィールドを貼り付ける際に
コントロールを選択できます。

38. 1. データパレットに表示されているフィールドの名前をすべて選択
 Ctrl を押しながらマウスでクリック
2. 選択した状態で画面中央の枠「設計」にドラッグ＆ドロップ
3. ダイアログ「データバインドコントロールの選択」が開く
フォーム：フィールドの貼り付け 38

39. 1. ダイアログ「データバインドコントロールの選択」で下記を設定
2. 「OK」をクリック
フォーム：データバインドコントロールの選択 39
フィールド ラベル コントロール
CreatedDate 回答日 計算結果
フィールド
Author 回答者 計算結果
フィールド
Answer01 質問１ 編集ボックス
Answer02 質問２ リストボックス
Answer03 質問３ テキスト領域

40. 1. 「Answer02」フィールドを選択
2. 画面下部の枠「プロパティ」のタブ「値」を選択
3. ボタン「項目の追加」から下記の選択肢を設定
フォーム：リストボックスの選択肢の設定 40
ラベル 値
iPhone iPhone
Android Android
その他 その他

41. 1. メニューバーから「ファイル > 保存」をクリック
• タブ名の「*」 が表示されている場合、未保存状態
フォーム：カスタムコントロールの保存 41

42. 42
STEP 5.2
フォーム「アンケート」を表示する「XPage」の作成
XPage
カスタム
コントロール

43. 1. 画面左の枠「アプリケーション」の「アンケート」をダブルクリック
2. 「XPage」をダブルクリック
3. 「新規 XPage」をクリック
4. 「名前」を入力
5. 「OK」をクリック
フォーム：新規 XPage 43
項目 設定値
名前 xpFormTopic

44. 1. 画面右の枠「コントロール」を選択
2. カスタムコントロールをクリックして展開
3. カスタムコントロール「ccFormTopic」を「設計」にドラッグ＆ドロップ
フォーム：カスタムコントロールの貼り付け 44

45. 1. メニューバーから「ファイル > 保存」をクリック
フォーム：XPage の保存 45

46.  保存時に、下図のダイアログが表示されることがあります。
 メニューバーから「プロジェクト > 自動にビルド」を有効にしてください。
フォーム：補足：自動ビルドがオフになりました 46

47. 1. メニューバーから「設計 > Web ブラウザでプレビュー > Internet Explorer」を
クリック
• ツールバーからもプレビュー可能
フォーム：XPage のプレビュー 47

48. 48
STEP 6
ビュー画面の作成

49. 49
XPage
カスタム
コントロール
STEP 6.1
ビュー「すべてのアンケート」を表示する「カスタムコントロール」
の作成

50. 1. 画面左の枠「アプリケーション」の「アンケート」をダブルクリック
2. 「カスタムコントロール」をダブルクリック
3. 「新規カスタムコントロール」をクリック
4. 「名前」を入力
ビュー：新規カスタムコントロール 50
項目 設定値
名前 ccViewAll

51. 1. 画面右の枠「データパレット」をクリック
2. 「データソース」で「データソースの定義」を選択
3. ダイアログ「データソースの定義」が開く
4. 「データソース」で「Domino ビュー」を選択
5. 「ビュー」で「すべてのアンケート - all」を選択
6. 「OK」をクリック
ビュー：データソースのバインド 51

52. 1. データパレットに表示されている列の名前をすべて選択
 Ctrl を押しながらマウスでクリック
2. 選択した状態で画面中央の枠「設計」にドラッグ＆ドロップ
3. ダイアログ「データバインドコントロールの選択」が開く
4. 「OK」をクリック
ビュー：ビューパネルの貼り付け 52

53. 1. ビューパネルを選択
 枠「アウトライン」からだと簡単に選択できます。
2. 「プロパティ」のタブ「表示」を選択
3. 「実行時に、選択した文書を開くために使用」で「xpFormTopic」を設定
ビュー：文書を開く時のフォーム（XPage）の設定 53

54. 1. ビューの列「viewColumn1」を選択（回答日）
2. 「プロパティ」のタブ「表示」を選択
3. 「列の値をリンクとして表示する」をチェック
4. 文書を開くモードは「読み取り専用」を選択
ビュー：列に文書を開くリンクを設定 54

55. 1. メニューバーから「ファイル > 保存」をクリック
ビュー：カスタムコントロールの保存 55

56. 56
STEP 6.2
ビュー「すべてのアンケート」を表示する「XPage」の作成
XPage
カスタム
コントロール

57. 1. 画面左の枠「アプリケーション」の「アンケート」をダブルクリック
2. 「XPage」をダブルクリック
3. 「新規 XPage」をクリック
4. 「名前」を入力
5. 「OK」をクリック
ビュー：新規 XPage 57
項目 設定値
名前 xpViewAll

58. 1. 画面右の枠「コントロール」を選択
2. カスタムコントロールをクリックして展開
3. カスタムコントロール「ccViewAll」を「設計」にドラッグ＆ドロップ
ビュー：カスタムコントロールの貼り付け 58

59. 1. メニューバーから「ファイル > 保存」をクリック
ビュー：XPage の保存 59

60. 1. メニューバーから「設計 > Web ブラウザでプレビュー > Internet Explorer」を
クリック
2. 回答日のリンクをクリックすると文書が開くことを確認
ビュー：XPage のプレビュー 60

61. 61
STEP 7
ボタンの作成

62. ボタン：仕様 62
名前 動作（アクション） ボタンの
種類
ボタンの
アイコン
可視 可視の条件
JavaScript
閉じる すべてのアンケー
トビューを開く
キャンセル actn027.gif 常時 － 設定なし －
編集 文書を編集モード
にする
ボタン/送信 actn083.gif 読み込み !(document1.isEditable());
保存し
て閉じる
保存後、
すべてのアンケー
トビューを開く
ボタン/送信 actn117.gif 編集 document1.isEditable();
削除 文書を削除する ボタン/送信 actn004.gif 読み込み !(document1.isEditable());
 今回使用するアイコンの画像は、あらかじめリソースにインポート済みです。

63. 1. カスタムコントロール「ccFormTopic」を開く
2. 枠「設計」の上端に改行を１つ入力
 矢印キーでカーソルを移動し、改行を入力します。
3. 枠「コントロール」の「コアコントロール」をクリックして展開
4. ボタンをドラッグ＆ドロップして上端に４つ並べて貼り付け
ボタン：コントロールの貼り付け 63
POINT
開くのは
カスタムコントロール
の方です。

64. 1. ボタンを選択
2. 「イベント」を選択
3. タブ「イベント」で「マウス – onclick 」を選択
4. タブ「サーバー」で「シンプルアクション」をチェック
5. ボタン「アクションの追加…」をクリック
6. ダイアログ「シンプルアクションの追加」でアクションを選択
7. 「OK」をクリック
 上記を基本とし、共通の操作でイベントを設定します。
ボタン：イベント（シンプルアクション）設定方法 64
POINT
シンプルアクションを使用すると
基本動作を簡単に設定できます。

65. 1. ボタンを選択
2. 「プロパティ」のタブ「ボタン」を選択
3. 「可視」でコントロールの表示/非表示を制御
1. チェックあり：常に表示
2. チェックなし：常に非表示
3. 計算済み：条件で表示
 条件の設定方法
4. 「可視」の右の◇マークをクリックし、「値の計算…」を選択
5. ダイアログ「スクリプトエディタ」で条件（JavaScript 等）を記述
6. 「OK」をクリック
ボタン：可視（表示/非表示）の設定方法 65

66. ボタン：可視（表示/非表示）の設定例 66
編集モード時のみ表示
document1.isEditable();
読み込みモード時のみ表示
!(document1.isEditable());
文書の
データソース
文書が編集モードかどうか？
True : 編集モード
False : 読み込みモード
True / Flase を反転させる
文書が編集モードかどうか？
True : 編集モード
False : 読み込みモード
POINT
ノーツの非表示式とは
逆のため注意が必要です。

67. 67
STEP 7.1
ボタン「閉じる」の設定

68. 1. ボタン「閉じる」に下記を設定
ボタン：閉じる：設定 68
項目 設定値
ラベル 閉じる
ボタンの種類 キャンセル
ボタンのイメージを選択 チェックあり
アイコン actn027.gif
可視 チェックあり

69. 1. ダイアログ「シンプルアクションの追加」
で下記を設定
ボタン：閉じる：イベント 69
項目 設定値
カテゴリ 基本
アクション ページを開く
開くページの名前 xpViewAll

70.  メニューバーから「ファイル > 保存」をクリック
 一通りボタンの動きを確認する
 アイコン
 名前
 動作
ボタン：閉じる：プレビューで確認 70

71. 71
STEP 7.2
ボタン「編集」の設定

72. 1. ボタン「編集」に下記を設定
ボタン：編集：設定 72
項目 設定値
ラベル 編集
ボタンの種類 ボタン
ボタンのイメージを選択 チェックあり
アイコン actn083.gif
可視 計算済み （◇値の計算…から設定）
JavaScript !(document1.isEditable());

73. 項目 設定値
カテゴリ 文書
アクション 文書モードの変更
文書モード 編集モード
データソース名 document1
1. ダイアログ「シンプルアクションの追加」
で下記を設定
ボタン：編集：イベント 73

74. 74
STEP 7.3
ボタン「保存して閉じる」の設定

75. 1. ボタン「保存して閉じる」に下記を設定
ボタン：保存して閉じる：設定 75
項目 設定値
ラベル 保存して閉じる
ボタンの種類 ボタン
ボタンのイメージを選択 チェックあり
アイコン actn117.gif
可視 計算済み （◇値の計算…から設定）
JavaScript document1.isEditable();

76.  ２つのアクションを設定します。
1. ダイアログ「シンプルアクションの追加」で下記を設定
2. ダイアログ「シンプルアクションの追加」で下記を設定
項目 設定値
カテゴリ 文書
アクション 文書の保存
データソース名 document1
ボタン：保存して閉じる：イベント 76
項目 設定値
カテゴリ 基本
アクション ページを開く
開くページの名前 xpViewAll

77. 77
STEP 7.4
ボタン「削除」の設定

78. 1. ボタン「削除」に下記を設定
ボタン：削除：設定 78
項目 設定値
ラベル 削除
ボタンの種類 ボタン
ボタンのイメージを選択 チェックあり
アイコン actn004.gif
可視 計算済み （◇値の計算…から設定）
JavaScript !(document1.isEditable());

79. 項目 設定値
カテゴリ 文書
アクション 文書の削除
次に開くページの名前 xpViewAll
確認テキスト 削除しますか？
データソース名 document1
1. ダイアログ「シンプルアクションの追加」で
下記を設定
ボタン：削除：イベント 79

80. 80
STEP 7.5
ボタンの動作確認

81.  メニューバーから「ファイル > 保存」をクリック
 一通りボタンの動きを確認する
 アイコン
 名前
 動作
 可視（表示/非表示）
ボタン：プレビューで確認 81
読み込みモード 編集モード

82. 82
STEP 8
起動プロパティの設定

83.  Web ブラウザでアクセスした場合、指定した XPage で開く設定を行います。
1. 画面左の枠「アプリケーション」の「アンケート」をダブルクリック
2. 「アプリケーション構成」をダブルクリック
3. 「アプリケーションのプロパティ」をダブルクリック
4. タブ「起動」をクリック
5. 「Web ブラウザの起動」の「起動」で「指定した XPage を開く」を選択
6. 「Web ブラウザの起動」の「XPage」で「xpViewAll」を選択
7. メニューバーから「ファイル > 保存」をクリック
8. メニューバーから「ファイル > 閉じる」をクリック
起動プロパティの設定 83

84.  「IBM Notes クライアントの起動」で「XPage」を指定することで、ノーツクライア
ント（スタンダード版）からも「XPage」が利用できます。
 但し、使用する内部ブラウザの関係から動作・デザインが異なる場合があり
ます。よって、テストは別途必要です。
起動プロパティの設定（補足） 84

85. 85
STEP 9
オプション：アプリケーションレイアウト

86.  簡単にレイアウトを整えることができるコントロール「アプリケーションレイアウ
ト」を使ってみましょう。
レイアウト：拡張ライブラリのアプリケーションレイアウト 86
バナー
タイトルバー
プレースバー
フッター
リーガル
コンテンツ領域（左） コンテンツ領域（中央）
※ ここにカスタムコントロール貼り付け

87. 1. XPage にアプリケーションレイアウトのカスタムコントロールを貼り付け
2. その上にフォームやビューのカスタムコントロールを貼り付け
レイアウト：構成 87
XPage
カスタムコントロール
アプリケーションレイアウト
カスタムコントロール
フォーム/ビュー

88. 88
XPage
カスタム
コントロール
STEP 9.1
「アプリケーションレイアウト」を使用した「カスタムコントロール」
の作成

89. 1. 画面左の枠「アプリケーション」の「アンケート」をダブルクリック
2. 「カスタムコントロール」をダブルクリック
3. 「新規カスタムコントロール」をクリック
4. 「名前」で「ccLayout」を入力
レイアウト：新規カスタムコントロール 89

90. 1. 画面右の枠「コントロール」を選択
2. 拡張ライブラリをクリックして展開
3. 「アプリケーションレイアウト」を「設計」にドラッグ＆ドロップ
レイアウト：アプリケーションレイアウトの貼り付け 90

91. 1. ダイアログ「アプリケーションレイアウト用パラメータの設定」で下記を設定
2. 「OK」をクリック
レイアウト：パラメータの設定 91
項目 設定値
構成 OneUI アプリケーション構成
バナー [チェックあり]
タイトルバー [チェックあり]
プレースバー [チェックあり]
フッター [チェックあり]
リーガル [チェックあり]
アプリケーション
のテーマ
OneUI V2.1

92. 1. タブ「アプリケーションレイアウト」を選択
2. コンテンツ領域の「中央の列」をチェック
レイアウト：コンテンツ領域の設定 92

93. 1. タブ「バナー」を選択
2. ロゴの「イメージ」で「xpagesday_logo_banner.png」を選択
レイアウト：バナーの設定 93

94. 1. タブ「バナー > アプリケーションリンク」を選択
2. ボタン「項目の追加」をクリック、メニューから「ページリンク
ノード」を選択
3. 画面右のプロパティ「label」で「ホーム」を入力
4. 画面右のプロパティ「page」で「xpViewAll」を選択
レイアウト：バナーの設定（アプリケーションリンク） 94

95. 1. タブ「タイトルバー」を選択
2. 「タイトルテキスト」の右の◇マークをクリックし、
「値の計算…」を選択
3. 以下の JavaScript を入力 （DBタイトルを表示）
@DbTitle()
レイアウト：タイトルバーの設定 95

96.  検索機能を利用するためには、事前に全文索引の作成が必要です。
1. タブ「タイトルバー > 検索」を選択
2. 「検索コントロール（オプションドロップダウン、編集ボックス、検索アイコン）
を表示」をチェック
3. 「ページ名」で「xpViewAll」を設定
レイアウト：検索の設定 96

97. 1. タブ「プレースバー」を選択
2. ボタン「項目の追加」をクリック、メニューから「ページリンクノード」を選択
3. 画面右のプロパティで下記を設定
レイアウト：プレースバーの設定 97
プロパティ 設定値
image /actn089.gif
labal アンケート入力
page /xpFormTopic.xsp 新規フォームボタン

98. 1. タブ「フッター」を選択
2. 「リンク」の「コンテナノード > 基本ノード」を選択
3. 画面右のプロパティ「href」「ラベル」を設定
 今回は時間の関係からデフォルトのまま使用します。
 余裕がある方は設定してみてください。
レイアウト：フッターの設定 98

99. 1. タブ「リーガル」を選択
2. リーガルの「イメージ」で「xpagesday_logo_legal.png」を選択
3. 「テキスト」で「Copyright c XPagesDay All Rights Reserved.」
を入力
レイアウト：リーガルの設定 99

100. 1. 画面右の枠「コントロール」を選択
2. 拡張ライブラリをクリックして展開
3. 「ナビゲータ」を「設計」にドラッグ＆ドロップ
レイアウト：ナビゲータの貼り付け 100

101. 1. タブ「ナビゲーション項目」を選択
 コントロール「ナビゲータ」にあります。
2. ボタン「項目の追加」から「ページリンクノード」を追加
3. 画面右のプロパティで下記を設定
レイアウト：ナビゲータの設定 101
プロパティ 設定値
image /actn120.gif
labal すべて
page /xpViewAll.xsp

102.  カスタムコントロール「ccLayout」を保存して閉じます。
レイアウト：カスタムコントロールの保存 102

103. 103
STEP 9.2
「アプリケーションレイアウト」を使用した「XPage」の作成
XPage
カスタム
コントロール

104. 1. 画面左の枠「アプリケーション」の「アンケート」をダブルクリック
2. 「XPage」をダブルクリック
3. 「xpViewAll」をダブルクリック
レイアウト：すべてのアンケートビュー用 XPage の修正 104

105. 1. 既に貼り付けてあるカスタムコントロール「ccViewAll」を削除
 アウトラインから選択して右クリック、「削除」を選択
2. 枠「コントロール」の「カスタムコントロール」をクリックして展開
3. 「ccLayout」を「設計」にドラッグ＆ドロップ
レイアウト：すべてのアンケートビュー用 XPage の設定（１） 105
XPage
カスタムコントロール
アプリケーションレイアウト
カスタムコントロール
フォーム/ビュー
↓ この部分

106. 1. 前頁で貼り付けた「ccLayout」の中央の列「●」にカスタムコントロール
「ccViewAll」をドラッグ＆ドロップ
レイアウト：すべてのアンケートビュー用 XPage の設定（２） 106
XPage
カスタムコントロール
アプリケーションレイアウト
カスタムコントロール
フォーム/ビュー
↓ この部分

107. 1. 画面左の枠「アプリケーション」の「アンケート」をダブルクリック
2. 「XPage」をダブルクリック
3. 「xpFormTopic」をダブルクリック
レイアウト：フォーム用 XPage の修正 107

108. 1. 既に貼り付けてあるカスタムコントロール「ccFormTopic」を削除
 アウトラインから選択して右クリック、「削除」を選択
2. 枠「コントロール」の「カスタムコントロール」をクリックして展開
3. 「ccLayout」を「設計」にドラッグ＆ドロップ
レイアウト：フォーム用 XPage の設定（１） 108
XPage
カスタムコントロール
アプリケーションレイアウト
カスタムコントロール
フォーム/ビュー
↓ この部分

109. 1. 前頁で貼り付けた「ccLayout」の中央の列「●」にカスタムコントロール
「ccFormTopic」をドラッグ＆ドロップ
レイアウト：フォーム用 XPage の設定（２） 109
XPage
カスタムコントロール
アプリケーションレイアウト
カスタムコントロール
フォーム/ビュー
↓ この部分

110.  XPage「xpViewAll」をプレビューで開き、一通りの動きを確認する
 バナー、アイコン
 アプリケーション名
 リンク、ボタン
レイアウト：プレビューで確認 110
バナー
検索
リンク
リーガル
新規作成ボタン
リンク
バナー
ビュー/フォーム画面
ビュー
切り替え

111. 111
STEP 10
オプション：デザインの調整

112. 112
STEP 10.1
フォームのデザインの調整

113. 1. 対象のコントロールを選択
2. 対象のコントロールを選択して、枠「プロパティ」のタブ「スタイル」で設定
 フォント
 背景
 余白
 本来は CSS で設定する方が望ましいので、慣れてきたら CSS へ切り替えましょう。
デザイン：スタイル 113

114. 1. 対象のコントロールを選択
2. 枠「プロパティ」の [最上段のタブ] の「幅」 「単位」で設定
 ピクセル
 パーセント
 自動
デザイン：コントロールの幅 114

115. 1. 対象のコントロールを選択
2. 枠「プロパティ」のタブ「表のセル」のオプションで設定
 セルの横位置
 セルの縦位置
デザイン：表のセルの位置 115
例）セルの中のラベル「質問１：」を上付きにした場合

116.  下図を参考にフォームのデザインを自由に変更してみましょう。
デザイン：演習問題（１） 116
幅 100ピクセル
高さ 70ピクセル
幅 100パーセント
セルの幅 50ピクセル
セルの縦位置「上」
直接テキストを入力
表の幅 100パーセント

117. 117
STEP 10.2
ビューのデザインの調整

118. 1. 対象の「ビューの列」を選択
2. 枠「プロパティ」のタブ「データ」の表示タイプで「日付/時刻」を設定
 表示形式：日付と時刻
 日付スタイル：デフォルト
 時刻スタイル：デフォルト
デザイン：列の設定（表示タイプ：日付/時刻） 118
注意：
列のプロパティを操作していると、「ビューの列のヘッダー」のラ
ベルが勝手に変更される場合があります。
変更された場合、手動で直して保存してください。

119. 1. 対象の「ビューの列」を選択
2. 枠「プロパティ」のタブ「データ」の表示タイプで「数値」を設定
 表示形式：小数点
 整数のみ：チェック
デザイン：列の設定（表示タイプ：数値（整数のみ）） 119

120.  下図を参考にビューのデザインを自由に変更してみましょう。
デザイン：演習問題（２） 120
表示タイプ：日付/時刻
ビューパネル 幅 100パーセント
表示タイプ：数値（整数のみ）

121. 121
STEP 11
オプション：ビューの追加

122.  今までの作業を参考に以下の２つのビューを追加してみましょう。
 回答１
 回答２
オプション：演習問題（３－１） 122
設計要素 名前 データソース
（タイプ）
データソース
（名称）
貼り付ける
カスタムコントロール
カスタム
コントロール
ccViewAns1 Domino ビュー 回答１ - q1 －
XPage xpViewAns1 － － ccLayout
ccViewAns1
設計要素 名前 データソース
（タイプ）
データソース
（名称）
貼り付ける
カスタムコントロール
カスタム
コントロール
ccViewAns2 Domino ビュー 回答２ - q2 －
XPage xpViewAns2 － － ccLayout
ccViewAns2

123.  今までの作業を参考にナビゲータへ２つのビューのリンクを追加してみましょう。
1. カスタムコントロール「ccLayout」を開く
2. コントロール「ナビゲータ」を選択
3. 枠「プロパティ」のタブ「ナビゲーション項目」を選択
4. ボタン「項目の追加」から下記の項目を追加
オプション：演習問題（３－２） 123
種類 image label page
ページリンクノード /actn120.gif 回答１ /xpViewAns1
ページリンクノード /actn120.gif 回答２ /xpViewAns2

124.  XPage「xpViewAll」をプレビューで開き、一通りの動きを確認する
 アイコン
 ナビゲータ
 ビュー
オプション：プレビューで確認 124
ビュー
切り替え

125. 125
STEP 12
オプション：テーマの変更

126. 1. 画面左の枠「アプリケーション」の「アン
ケート」をダブルクリック
2. 「アプリケーション構成」をダブルクリック
3. 「Xsp プロパティ」をダブルクリック
4. タブ「一般」をクリック
5. 「テーマのデフォルト」の「アプリケーショ
ンのテーマ」で「OunUI V3.0.2」を選択
6. メニューバーから「ファイル > 保存」をク
リック
7. メニューバーから「ファイル > 閉じる」を
クリック
テーマの変更 126

127. テーマの変更：プレビューで確認 127
OneUI V2.1
OneUI V2
OneUI V3.0.2

128. 128
補足資料
設計要素の構成および設定

129. 設計要素の構成（Step 8 まで） 129
【XPage】
xpFormTopic
【カスタムコントロール】
ccFormTopic
【XPage】
xpViewAll
【カスタムコントロール】
ccViewAll
フォーム「アンケート」 ビュー「すべてのアンケート」

130. 設計要素の構成（Step 9 から）（１） 130
【XPage】
xpFormTopic
【カスタムコントロール】
アプリケーションレイアウト
ccLayout
【カスタムコントロール】
ccFormTopic
【XPage】
xpViewAll
【カスタムコントロール】
アプリケーションレイアウト
ccLayout
【カスタムコントロール】
ccViewAll
フォーム「アンケート」 ビュー「すべてのアンケート」

131. 設計要素の構成（Step 9 から）（２） 131
【XPage】
xpViewAns1
【カスタムコントロール】
アプリケーションレイアウト
ccLayout
【カスタムコントロール】
ccViewAns1
【XPage】
xpViewAns2
【カスタムコントロール】
アプリケーションレイアウト
ccLayout
【カスタムコントロール】
ccViewAns2
ビュー「回答１」 ビュー「回答２」

132. 設計要素の設定 132
設計要素 名前 データソース
（タイプ）
データソース
（名称）
貼り付ける
カスタムコントロール
XPage xpFormTopic － － ccLayout
ccFormTopic
カスタム
コントロール
ccFormTopic Domino 文書 アンケート - Topic －
XPage xpViewAll － － ccLayout
ccViewAll
カスタム
コントロール
ccViewAll Domino ビュー すべてのアンケート - all －
XPage xpViewAns1 － － ccLayout
ccViewAns1
カスタム
コントロール
ccViewAns1 Domino ビュー 回答１ - q1 －
XPage xpViewAns2 － － ccLayout
ccViewAns2
カスタム
コントロール
ccViewAns2 Domino ビュー 回答２ - q2 －
カスタム
コントロール
ccLayout － － －

133. フォームのボタンの設定 133
名前 動作（アクション） ボタンの
種類
ボタンの
アイコン
可視 可視の条件
JavaScript
閉じる すべてのアンケー
トビューを開く
キャンセル actn027.gif 常時 － 設定なし －
編集 文書を編集モード
にする
ボタン/送信 actn083.gif 読み込み !(document1.isEditable());
保存し
て閉じる
保存後、
すべてのアンケー
トビューを開く
ボタン/送信 actn117.gif 編集 document1.isEditable();
削除 文書を削除する ボタン/送信 actn004.gif 読み込み !(document1.isEditable());

134. 134
参考サイト

135. XPages.JP Project
 XPagesの普及のためさまざまな活動を行っています。
 http://xpages.jp/
 http://www.facebook.com/XPages.JP
XSnippets 日本版
 XPages, LotusScript などサンプルソースの登録サイト
 http://xpages.jp/XSnippetsJ.nsf/
qa9 for ICS(Lotus) Developers
 QAサイト
 http://qa.xpages.jp/QA/qa.nsf/
参考資料 135