今日から始める xpages アプリケーション開発!(オープンセミナー 2016...
TRANSCRIPT
![Page 1: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/1.jpg)
今日から始めるXPagesアプリケーション開発!
ノーツコンソーシアムオープンセミナー 2016 ハンズオンXPagesDay 出張セッション
2016/11/09
株式会社ソルクシーズ 吉田武司
Ver. 1.0.2
![Page 2: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/2.jpg)
本資料の掲載内容は、できる限り正確を期するように努めてはおりますが、いかなる明示または暗黙の保証も責任も負いかねます。
掲載情報は不定期に変更されることもあります。他のメディア等に無断で転載する事はご遠慮下さい。
当資料をコピー等で複製することは、執筆者の承諾なしではできません。
当資料に掲載された製品名または会社名はそれぞれの各社の商標または登録商標です。
特記事項 2
![Page 3: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/3.jpg)
3
STEP 1はじめに
![Page 4: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/4.jpg)
これから XPages を始める方への取っ掛かりになるようハンズオンにしたいと思います。
限られた時間のため、極力プログラミング要素を除外した仕様となっています。 標準機能を積極的に使用
事前に用意したノーツアプリケーションを XPages 化
レイアウト以降は、オプションにしています。復習の際、お試しください。
XPages 開発に慣れてきたら、プログラミングを含めた次のステップに挑戦してみてください。
本日の課題のレベル感 4
![Page 5: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/5.jpg)
バージョン 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
![Page 6: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/6.jpg)
本来ならば、CSSを使用した方が良いのですが、最初からすべてを覚えるのは大変です。
Cascading Style Sheets(CSS、カスケーディング・スタイル・シート、カスケード・スタイル・シート)とは、HTML や XML の要素をどのように修飾(表示)するかを指示する、W3Cによる仕様の一つ。文書の構造と体裁を分離させるという理念を実現する為に提唱されたスタイルシートの、具体的な仕様の一つ。
Wikipedia 「Cascading Style Sheets」より要約 最終更新 2016年10月6日 (木) 18:15
よって、今回は直接的には CSS を使用しないで作成を行います。 実際には、後述のテーマで間接的には利用しています。
その代わり、標準で用意されている「テーマ」と拡張ライブラリの「アプリケーションレイアウト」を使用します。
前提:デザイン 6
![Page 7: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/7.jpg)
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
![Page 8: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/8.jpg)
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 とは 8
①
②
③
④
![Page 9: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/9.jpg)
本資料では、基本的に以下のように表現しています。 他の資料では違う場合があります。ご了承ください。
XPages• XPages 技術、アプリケーションなど全般的な意味
XPage• データベース(アプリケーション)の設計要素である「XPage」
ブラウザで表示するWeb ページもこの設計要素です。
XPages と XPage 9
![Page 10: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/10.jpg)
Domino Designer アプリケーションの開発
ブラウザまたはノーツクライアント(スタンダード版) アプリケーションの動作確認
Domino サーバー アプリケーションの実行
データベース(アプリケーション) 本日のお題:アンケートDBの XPage 化
開発に必要なもの 10
![Page 11: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/11.jpg)
XPage を利用するには、2つの方法があります。 ノーツクライアント(スタンダード版)
ブラウザ
利用方法 11
ブラウザ
ドミノサーバー
ノーツクライアント ノーツクライアント
ローカルにレプリカ
![Page 12: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/12.jpg)
サーバー文書 セキュリティ-可能なプログラムの制限
• 制限なしで署名または実行
• 呼び出したユーザーとして実行するエージェントとまたは XPage を署名
開発者のユーザーまたはグループを設定
ノーツクライアント(スタンダード版)のみでもローカルで実行可能です。• XPages in Notes client (XPiNC)
Domino サーバー上で利用するための設定 12
![Page 13: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/13.jpg)
ローカルノーツクライアントのみでも制限はありますが XPage は実行可能です。
ACL に「Anonymous」を追加し、「作成者」以上の権限を付加します。
Anonymous が設定されていない場合、プレビュー時に警告が表示されます。
ローカルでプレビューするための ACL 設定 13
![Page 14: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/14.jpg)
14
STEP 2Domino Designer について
![Page 15: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/15.jpg)
「アンケート」 DB を選択して右クリック、メニューから「Designer で開く」を選択します。
Domino Designer の起動 15
![Page 16: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/16.jpg)
Designer の各枠は、「Eclipseビュー」呼びます。 ノーツの設計要素であるビューと紛らわしいため、今回のハンズオンでは、便宜的に「枠」と呼ぶことにします。(例:アプリケーション枠)
枠の並びは自由に変更できます。
Domino Designerの説明 16
コントロールデータパレット
アプリケーション
アウトライン
プロパティイベント問題(エラー等)
設計ソース
![Page 17: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/17.jpg)
Domino Designerの説明:基本の流れ 17
②部品を配置①対象を選択
③対象を設定
![Page 18: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/18.jpg)
枠の表示 ウィンドウ > Eclipse ビューの表示 > [枠]
Domino Designerの説明:枠と閉じてしまった場合 18
![Page 19: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/19.jpg)
19
STEP 3XPages 化するアプリケーションについて
![Page 20: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/20.jpg)
社員に対して IT 機器のアンケートを実施するためのノーツアプリケーションです。 フォームが1つ、ビューが3つあります。
• 回答フォームには、3つの質問があります。
• 回答の結果はビュー(3種類)で確認できます。
アプリケーションの概要 20
ビュービュー【ビュー】
すべてのアンケート
【フォーム】
アンケート
![Page 21: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/21.jpg)
ACL(アクセス制御リスト)
• 本来のアンケートでは、自分以外の回答は非表示が望ましいですが、今回は全データが閲覧できる仕様です。
• 変更は本人と管理者のみ可能です。
アプリケーションの ACL 21
ユーザー アクセス権 作成 削除 ロール 備考
管理者・サーバー 管理者 〇 〇 なし
一般(-Default-) 作成者 〇 〇 なし
Anonymous なし - - なし
![Page 22: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/22.jpg)
1. フォーム:アンケート フィールド
1. 回答日:回答時の日時
2. 回答者:回答者のユーザー名
3. 回答1:数値(デフォルト値:0)
4. 回答2:チェックボックス(3択)
5. 回答3:テキスト
ボタン1. 閉じる
2. 保存
3. 編集
アプリケーションの設計:フォーム 22
![Page 23: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/23.jpg)
1. ビュー:すべてのアンケート 回答日順に表示
2. ビュー:回答1 回答1をカテゴリ別に表示
3. ビュー:回答2 回答2をカテゴリ別に表示
各ビューには、アンケート入力を新規作成するアクションボタンがあります。
アプリケーションの設計:ビュー 23
![Page 24: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/24.jpg)
1. ビューのアクションボタンから新規にアンケートを回答してみましょう。
2. Domino Designer を起動して設計を確認してみましょう。
3. クラシックWeb で表示してみましょう。 フレームセット「メインフレームセット」を
Web ブラウザプレビューする。
アプリケーションの確認 24
![Page 25: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/25.jpg)
Step 4~ 61. ビューの表示
2. ビューから文書を開く
XPage の完成イメージ(前半) 25
![Page 26: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/26.jpg)
Step 7 ~ 11 文書の作成、編集、削除
レイアウト
複数のビューの切り替え
XPage の完成イメージ(後半) 26
![Page 27: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/27.jpg)
27
STEP 4データベースの設定
![Page 28: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/28.jpg)
1. 画面左の枠「アプリケーション」の「アンケート」をダブルクリック
2. 「アプリケーション構成」をダブルクリック
3. 「Xsp プロパティ」をダブルクリック
4. タブ「一般」をクリック
5. 「エラー処理」の「XPage 実行時エラーページを表示」を有効にする
6. 「テーマのデフォルト」の「アプリケーションのテーマ」で「OunUI V2.1」を選択
7. メニューバーから「ファイル > 保存」をクリック
8. メニューバーから「ファイル > 閉じる」をクリック
エラー処理とテーマの設定 28
![Page 29: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/29.jpg)
29
STEP 5フォーム画面の作成
![Page 30: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/30.jpg)
XPages アプリケーション開発では以下の設計要素をよく使用します。
設計要素とは、ノーツアプリケーション開発で使用するフォームやビュー、フレームセット、ページなどのことです。
上記以外にもリソース(ファイル、スタイルシート、テーマ)やスクリプトライブラリなども必要に応じて使用します。
設計要素
XPagesアプリケーション ノーツアプリケーションで例えると…
XPage フォーム
カスタムコントロール サブフォーム
イメージ イメージ(同じ)
30
![Page 31: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/31.jpg)
XPages には、ノーツの文書およびビューに簡単にアクセスするための機能があります。
アクセスするためには、「データソース」を定義します。 Domino 文書
Domino ビュー
フォームのフィールドデータを XPages のコントロールと関連付ける場合、データソースのフィールドをバインド先として指定します。
データの参照・作成・変更などが行えます。
データソース、バインド 31
![Page 32: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/32.jpg)
後々の作業を考え、今回はフォームおよびビュー部分を「カスタムコントロール」で作成します。
作成したカスタムコントロールを XPage に貼り付けます。
「カスタムコントロール」は、XPage の部品のようなものです。ノーツアプリケーションの「サブフォーム」をイメージすればわかりやすいかと思います。
基本構成 32
XPage
カスタムコントロール
フォーム
サブフォーム
![Page 33: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/33.jpg)
33
STEP 5.1フォーム「アンケート」を表示する「カスタムコントロール」の作成
XPage
カスタムコントロール
![Page 34: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/34.jpg)
1. 画面左の枠「アプリケーション」の「アンケート」をダブルクリック
2. 「カスタムコントロール」をダブルクリック
3. 「新規カスタムコントロール」をクリック
4. 「名前」を入力
5. 「OK」をクリック
フォーム:新規カスタムコントロール 34
項目 設定値
名前 ccFormTopic
![Page 35: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/35.jpg)
1. 画面右の枠「データパレット」をクリック
2. 「データソース」で「データソースの定義」を選択
3. ダイアログ「データソースの定義」が開く
4. 「データソース」で「Domino 文書」を選択
フォーム:データソースのバインド(1) 35
• 設定は次頁を参照
POINT
「データソース」を定義することで文書のデータにアクセスできるようになります。
![Page 36: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/36.jpg)
1. ダイアログ「データソースの定義」で下記を設定
2. 「OK」をクリック
フォーム:データソースのバインド(2) 36
項目 設定値
フォーム アンケート - Topic
フォーム検証の実行 文書ロード時
POINT「フォームの検証の実行」
指定したタイミングでフォームのフィールドが計算されます。• 文書のロード時• 文書保存時• 両方
![Page 37: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/37.jpg)
[コントロールの選択]ダイアログボックスが使用可能になっていることを確認
フォーム:[コントロールの選択]の確認 37
使用可能:
使用不可:
POINT「使用可能」の場合、
フィールドを貼り付ける際にコントロールを選択できます。
![Page 38: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/38.jpg)
1. データパレットに表示されているフィールドの名前をすべて選択 Ctrl を押しながらマウスでクリック
2. 選択した状態で画面中央の枠「設計」にドラッグ&ドロップ
3. ダイアログ「データバインドコントロールの選択」が開く
フォーム:フィールドの貼り付け 38
![Page 39: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/39.jpg)
1. ダイアログ「データバインドコントロールの選択」で下記を設定
2. 「OK」をクリック
フォーム:データバインドコントロールの選択 39
フィールド ラベル コントロール
CreatedDate 回答日 計算結果フィールド
Author 回答者 計算結果フィールド
Answer01 質問1 編集ボックス
Answer02 質問2 リストボックス
Answer03 質問3 テキスト領域
![Page 40: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/40.jpg)
1. 「Answer02」フィールドを選択
2. 画面下部の枠「プロパティ」のタブ「値」を選択
3. ボタン「項目の追加」から下記の選択肢を設定
フォーム:リストボックスの選択肢の設定 40
ラベル 値
iPhone iPhone
Android Android
その他 その他
![Page 41: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/41.jpg)
1. メニューバーから「ファイル > 保存」をクリック• タブ名の「*」 が表示されている場合、未保存状態
フォーム:カスタムコントロールの保存 41
![Page 42: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/42.jpg)
42
STEP 5.2フォーム「アンケート」を表示する「XPage」の作成
XPage
カスタムコントロール
![Page 43: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/43.jpg)
1. 画面左の枠「アプリケーション」の「アンケート」をダブルクリック
2. 「XPage」をダブルクリック
3. 「新規 XPage」をクリック
4. 「名前」を入力
5. 「OK」をクリック
フォーム:新規 XPage 43
項目 設定値
名前 xpFormTopic
![Page 44: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/44.jpg)
1. 画面右の枠「コントロール」を選択
2. カスタムコントロールをクリックして展開
3. カスタムコントロール「ccFormTopic」を「設計」にドラッグ&ドロップ
フォーム:カスタムコントロールの貼り付け 44
![Page 45: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/45.jpg)
1. メニューバーから「ファイル > 保存」をクリック
フォーム:XPage の保存 45
![Page 46: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/46.jpg)
保存時に、下図のダイアログが表示されることがあります。
メニューバーから「プロジェクト > 自動にビルド」を有効にしてください。
フォーム:補足:自動ビルドがオフになりました 46
![Page 47: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/47.jpg)
1. メニューバーから「設計 > Web ブラウザでプレビュー > Internet Explorer」をクリック
• ツールバーからもプレビュー可能
フォーム:XPage のプレビュー 47
![Page 48: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/48.jpg)
48
STEP 6ビュー画面の作成
![Page 49: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/49.jpg)
49
XPage
カスタムコントロール
STEP 6.1ビュー「すべてのアンケート」を表示する「カスタムコントロール」の作成
![Page 50: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/50.jpg)
1. 画面左の枠「アプリケーション」の「アンケート」をダブルクリック
2. 「カスタムコントロール」をダブルクリック
3. 「新規カスタムコントロール」をクリック
4. 「名前」を入力
ビュー:新規カスタムコントロール 50
項目 設定値
名前 ccViewAll
![Page 51: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/51.jpg)
1. 画面右の枠「データパレット」をクリック
2. 「データソース」で「データソースの定義」を選択
3. ダイアログ「データソースの定義」が開く
4. 「データソース」で「Domino ビュー」を選択
5. 「ビュー」で「すべてのアンケート - all」を選択
6. 「OK」をクリック
ビュー:データソースのバインド 51
![Page 52: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/52.jpg)
1. データパレットに表示されている列の名前をすべて選択 Ctrl を押しながらマウスでクリック
2. 選択した状態で画面中央の枠「設計」にドラッグ&ドロップ
3. ダイアログ「データバインドコントロールの選択」が開く
4. 「OK」をクリック
ビュー:ビューパネルの貼り付け 52
![Page 53: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/53.jpg)
1. ビューパネルを選択 枠「アウトライン」からだと簡単に選択できます。
2. 「プロパティ」のタブ「表示」を選択
3. 「実行時に、選択した文書を開くために使用」で「xpFormTopic」を設定
ビュー:文書を開く時のフォーム(XPage)の設定 53
![Page 54: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/54.jpg)
1. ビューの列「viewColumn1」を選択(回答日)
2. 「プロパティ」のタブ「表示」を選択
3. 「列の値をリンクとして表示する」をチェック
4. 文書を開くモードは「読み取り専用」を選択
ビュー:列に文書を開くリンクを設定 54
![Page 55: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/55.jpg)
1. メニューバーから「ファイル > 保存」をクリック
ビュー:カスタムコントロールの保存 55
![Page 56: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/56.jpg)
56
STEP 6.2ビュー「すべてのアンケート」を表示する「XPage」の作成
XPage
カスタムコントロール
![Page 57: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/57.jpg)
1. 画面左の枠「アプリケーション」の「アンケート」をダブルクリック
2. 「XPage」をダブルクリック
3. 「新規 XPage」をクリック
4. 「名前」を入力
5. 「OK」をクリック
ビュー:新規 XPage 57
項目 設定値
名前 xpViewAll
![Page 58: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/58.jpg)
1. 画面右の枠「コントロール」を選択
2. カスタムコントロールをクリックして展開
3. カスタムコントロール「ccViewAll」を「設計」にドラッグ&ドロップ
ビュー:カスタムコントロールの貼り付け 58
![Page 59: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/59.jpg)
1. メニューバーから「ファイル > 保存」をクリック
ビュー:XPage の保存 59
![Page 60: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/60.jpg)
1. メニューバーから「設計 > Web ブラウザでプレビュー > Internet Explorer」をクリック
2. 回答日のリンクをクリックすると文書が開くことを確認
ビュー:XPage のプレビュー 60
![Page 61: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/61.jpg)
61
STEP 7ボタンの作成
![Page 62: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/62.jpg)
ボタン:仕様 62
名前 動作(アクション) ボタンの種類
ボタンのアイコン
可視 可視の条件JavaScript
閉じる すべてのアンケートビューを開く
キャンセル actn027.gif 常時 -設定なし-
編集 文書を編集モードにする
ボタン/送信 actn083.gif 読み込み !(document1.isEditable());
保存して閉じる
保存後、
すべてのアンケートビューを開く
ボタン/送信 actn117.gif 編集 document1.isEditable();
削除 文書を削除する ボタン/送信 actn004.gif 読み込み !(document1.isEditable());
今回使用するアイコンの画像は、あらかじめリソースにインポート済みです。
![Page 63: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/63.jpg)
1. カスタムコントロール「ccFormTopic」を開く
2. 枠「設計」の上端に改行を1つ入力 矢印キーでカーソルを移動し、改行を入力します。
3. 枠「コントロール」の「コアコントロール」をクリックして展開
4. ボタンをドラッグ&ドロップして上端に4つ並べて貼り付け
ボタン:コントロールの貼り付け 63
POINT開くのは
カスタムコントロールの方です。
![Page 64: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/64.jpg)
1. ボタンを選択
2. 「イベント」を選択
3. タブ「イベント」で「マウス – onclick 」を選択
4. タブ「サーバー」で「シンプルアクション」をチェック
5. ボタン「アクションの追加…」をクリック
6. ダイアログ「シンプルアクションの追加」でアクションを選択
7. 「OK」をクリック
上記を基本とし、共通の操作でイベントを設定します。
ボタン:イベント(シンプルアクション)設定方法 64
POINTシンプルアクションを使用すると基本動作を簡単に設定できます。
![Page 65: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/65.jpg)
1. ボタンを選択
2. 「プロパティ」のタブ「ボタン」を選択
3. 「可視」でコントロールの表示/非表示を制御1. チェックあり:常に表示
2. チェックなし:常に非表示
3. 計算済み:条件で表示
条件の設定方法
4. 「可視」の右の◇マークをクリックし、「値の計算…」を選択
5. ダイアログ「スクリプトエディタ」で条件(JavaScript 等)を記述
6. 「OK」をクリック
ボタン:可視(表示/非表示)の設定方法 65
![Page 66: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/66.jpg)
ボタン:可視(表示/非表示)の設定例 66
編集モード時のみ表示
document1.isEditable();
読み込みモード時のみ表示
!(document1.isEditable());
文書のデータソース
文書が編集モードかどうか?True : 編集モードFalse : 読み込みモード
True / Flase を反転させる
文書が編集モードかどうか?True : 編集モードFalse : 読み込みモード
POINTノーツの非表示式とは
逆のため注意が必要です。
![Page 67: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/67.jpg)
67
STEP 7.1ボタン「閉じる」の設定
![Page 68: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/68.jpg)
1. ボタン「閉じる」に下記を設定
ボタン:閉じる:設定 68
項目 設定値
ラベル 閉じる
ボタンの種類 キャンセル
ボタンのイメージを選択 チェックあり
アイコン actn027.gif
可視 チェックあり
![Page 69: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/69.jpg)
1. ダイアログ「シンプルアクションの追加」で下記を設定
ボタン:閉じる:イベント 69
項目 設定値
カテゴリ 基本
アクション ページを開く
開くページの名前 xpViewAll
![Page 70: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/70.jpg)
メニューバーから「ファイル > 保存」をクリック
一通りボタンの動きを確認する アイコン
名前
動作
ボタン:閉じる:プレビューで確認 70
![Page 71: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/71.jpg)
71
STEP 7.2ボタン「編集」の設定
![Page 72: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/72.jpg)
1. ボタン「編集」に下記を設定
ボタン:編集:設定 72
項目 設定値
ラベル 編集
ボタンの種類 ボタン
ボタンのイメージを選択 チェックあり
アイコン actn083.gif
可視 計算済み (◇値の計算…から設定)
JavaScript !(document1.isEditable());
![Page 73: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/73.jpg)
項目 設定値
カテゴリ 文書
アクション 文書モードの変更
文書モード 編集モード
データソース名 document1
1. ダイアログ「シンプルアクションの追加」で下記を設定
ボタン:編集:イベント 73
![Page 74: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/74.jpg)
74
STEP 7.3ボタン「保存して閉じる」の設定
![Page 75: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/75.jpg)
1. ボタン「保存して閉じる」に下記を設定
ボタン:保存して閉じる:設定 75
項目 設定値
ラベル 保存して閉じる
ボタンの種類 ボタン
ボタンのイメージを選択 チェックあり
アイコン actn117.gif
可視 計算済み (◇値の計算…から設定)
JavaScript document1.isEditable();
![Page 76: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/76.jpg)
2つのアクションを設定します。
1. ダイアログ「シンプルアクションの追加」で下記を設定
2. ダイアログ「シンプルアクションの追加」で下記を設定
項目 設定値
カテゴリ 文書
アクション 文書の保存
データソース名 document1
ボタン:保存して閉じる:イベント 76
項目 設定値
カテゴリ 基本
アクション ページを開く
開くページの名前 xpViewAll
![Page 77: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/77.jpg)
77
STEP 7.4ボタン「削除」の設定
![Page 78: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/78.jpg)
1. ボタン「削除」に下記を設定
ボタン:削除:設定 78
項目 設定値
ラベル 削除
ボタンの種類 ボタン
ボタンのイメージを選択 チェックあり
アイコン actn004.gif
可視 計算済み (◇値の計算…から設定)
JavaScript !(document1.isEditable());
![Page 79: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/79.jpg)
項目 設定値
カテゴリ 文書
アクション 文書の削除
次に開くページの名前 xpViewAll
確認テキスト 削除しますか?
データソース名 document1
1. ダイアログ「シンプルアクションの追加」で下記を設定
ボタン:削除:イベント 79
![Page 80: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/80.jpg)
80
STEP 7.5ボタンの動作確認
![Page 81: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/81.jpg)
メニューバーから「ファイル > 保存」をクリック
一通りボタンの動きを確認する アイコン
名前
動作
可視(表示/非表示)
ボタン:プレビューで確認 81
読み込みモード 編集モード
![Page 82: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/82.jpg)
82
STEP 8起動プロパティの設定
![Page 83: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/83.jpg)
Web ブラウザでアクセスした場合、指定した XPageで開く設定を行います。
1. 画面左の枠「アプリケーション」の「アンケート」をダブルクリック
2. 「アプリケーション構成」をダブルクリック
3. 「アプリケーションのプロパティ」をダブルクリック
4. タブ「起動」をクリック
5. 「Web ブラウザの起動」の「起動」で「指定した XPage を開く」を選択
6. 「Web ブラウザの起動」の「XPage」で「xpViewAll」を選択
7. メニューバーから「ファイル > 保存」をクリック
8. メニューバーから「ファイル > 閉じる」をクリック
起動プロパティの設定 83
![Page 84: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/84.jpg)
「IBM Notes クライアントの起動」で「XPage」を指定することで、ノーツクライアント(スタンダード版)からも「XPage」が利用できます。
但し、使用する内部ブラウザの関係から動作・デザインが異なる場合があります。よって、テストは別途必要です。
起動プロパティの設定(補足) 84
![Page 85: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/85.jpg)
85
STEP 9オプション:アプリケーションレイアウト
![Page 86: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/86.jpg)
簡単にレイアウトを整えることができるコントロール「アプリケーションレイアウト」を使ってみましょう。
レイアウト:拡張ライブラリのアプリケーションレイアウト 86
バナータイトルバー
プレースバー
フッターリーガル
コンテンツ領域(左) コンテンツ領域(中央)※ここにカスタムコントロール貼り付け
![Page 87: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/87.jpg)
1. XPage にアプリケーションレイアウトのカスタムコントロールを貼り付け
2. その上にフォームやビューのカスタムコントロールを貼り付け
レイアウト:構成 87
XPage
カスタムコントロールアプリケーションレイアウト
カスタムコントロールフォーム/ビュー
![Page 88: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/88.jpg)
88
XPage
カスタムコントロール
STEP 9.1「アプリケーションレイアウト」を使用した「カスタムコントロール」の作成
![Page 89: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/89.jpg)
1. 画面左の枠「アプリケーション」の「アンケート」をダブルクリック
2. 「カスタムコントロール」をダブルクリック
3. 「新規カスタムコントロール」をクリック
4. 「名前」で「ccLayout」を入力
レイアウト:新規カスタムコントロール 89
![Page 90: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/90.jpg)
1. 画面右の枠「コントロール」を選択
2. 拡張ライブラリをクリックして展開
3. 「アプリケーションレイアウト」を「設計」にドラッグ&ドロップ
レイアウト:アプリケーションレイアウトの貼り付け 90
![Page 91: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/91.jpg)
1. ダイアログ「アプリケーションレイアウト用パラメータの設定」で下記を設定
2. 「OK」をクリック
レイアウト:パラメータの設定 91
項目 設定値
構成 OneUI アプリケーション構成
バナー [チェックあり]
タイトルバー [チェックあり]
プレースバー [チェックあり]
フッター [チェックあり]
リーガル [チェックあり]
アプリケーションのテーマ
OneUI V2.1
![Page 92: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/92.jpg)
1. タブ「アプリケーションレイアウト」を選択
2. コンテンツ領域の「中央の列」をチェック
レイアウト:コンテンツ領域の設定 92
![Page 93: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/93.jpg)
1. タブ「バナー」を選択
2. ロゴの「イメージ」で「xpagesday_logo_banner.png」を選択
レイアウト:バナーの設定 93
![Page 94: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/94.jpg)
1. タブ「バナー > アプリケーションリンク」を選択
2. ボタン「項目の追加」をクリック、メニューから「ページリンクノード」を選択
3. 画面右のプロパティ「label」で「ホーム」を入力
4. 画面右のプロパティ「page」で「xpViewAll」を選択
レイアウト:バナーの設定(アプリケーションリンク) 94
![Page 95: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/95.jpg)
1. タブ「タイトルバー」を選択
2. 「タイトルテキスト」の右の◇マークをクリックし、「値の計算…」を選択
3. 以下の JavaScriptを入力 (DBタイトルを表示)@DbTitle()
レイアウト:タイトルバーの設定 95
![Page 96: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/96.jpg)
検索機能を利用するためには、事前に全文索引の作成が必要です。
1. タブ「タイトルバー > 検索」を選択
2. 「検索コントロール(オプションドロップダウン、編集ボックス、検索アイコン)を表示」をチェック
3. 「ページ名」で「xpViewAll」を設定
レイアウト:検索の設定 96
![Page 97: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/97.jpg)
1. タブ「プレースバー」を選択
2. ボタン「項目の追加」をクリック、メニューから「ページリンクノード」を選択
3. 画面右のプロパティで下記を設定
レイアウト:プレースバーの設定 97
プロパティ 設定値
image /actn089.gif
labal アンケート入力
page /xpFormTopic.xsp 新規フォームボタン
![Page 98: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/98.jpg)
1. タブ「フッター」を選択
2. 「リンク」の「コンテナノード > 基本ノード」を選択
3. 画面右のプロパティ「href」「ラベル」を設定 今回は時間の関係からデフォルトのまま使用します。
余裕がある方は設定してみてください。
レイアウト:フッターの設定 98
![Page 99: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/99.jpg)
1. タブ「リーガル」を選択
2. リーガルの「イメージ」で「xpagesday_logo_legal.png」を選択
3. 「テキスト」で「Copyright c XPagesDay All Rights Reserved.」を入力
レイアウト:リーガルの設定 99
![Page 100: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/100.jpg)
1. 画面右の枠「コントロール」を選択
2. 拡張ライブラリをクリックして展開
3. 「ナビゲータ」を「設計」にドラッグ&ドロップ
レイアウト:ナビゲータの貼り付け 100
![Page 101: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/101.jpg)
1. タブ「ナビゲーション項目」を選択 コントロール「ナビゲータ」にあります。
2. ボタン「項目の追加」から「ページリンクノード」を追加
3. 画面右のプロパティで下記を設定
レイアウト:ナビゲータの設定 101
プロパティ 設定値
image /actn120.gif
labal すべて
page /xpViewAll.xsp
![Page 102: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/102.jpg)
カスタムコントロール「ccLayout」を保存して閉じます。
レイアウト:カスタムコントロールの保存 102
![Page 103: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/103.jpg)
103
STEP 9.2「アプリケーションレイアウト」を使用した「XPage」の作成
XPage
カスタムコントロール
![Page 104: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/104.jpg)
1. 画面左の枠「アプリケーション」の「アンケート」をダブルクリック
2. 「XPage」をダブルクリック
3. 「xpViewAll」をダブルクリック
レイアウト:すべてのアンケートビュー用 XPage の修正 104
![Page 105: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/105.jpg)
1. 既に貼り付けてあるカスタムコントロール「ccViewAll」を削除 アウトラインから選択して右クリック、「削除」を選択
2. 枠「コントロール」の「カスタムコントロール」をクリックして展開
3. 「ccLayout」を「設計」にドラッグ&ドロップ
レイアウト:すべてのアンケートビュー用 XPage の設定(1) 105
XPage
カスタムコントロールアプリケーションレイアウト
カスタムコントロールフォーム/ビュー
↓ この部分
![Page 106: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/106.jpg)
1. 前頁で貼り付けた「ccLayout」の中央の列「●」にカスタムコントロール「ccViewAll」をドラッグ&ドロップ
レイアウト:すべてのアンケートビュー用 XPage の設定(2) 106
XPage
カスタムコントロールアプリケーションレイアウト
カスタムコントロールフォーム/ビュー
↓ この部分
![Page 107: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/107.jpg)
1. 画面左の枠「アプリケーション」の「アンケート」をダブルクリック
2. 「XPage」をダブルクリック
3. 「xpFormTopic」をダブルクリック
レイアウト:フォーム用 XPage の修正 107
![Page 108: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/108.jpg)
1. 既に貼り付けてあるカスタムコントロール「ccFormTopic」を削除 アウトラインから選択して右クリック、「削除」を選択
2. 枠「コントロール」の「カスタムコントロール」をクリックして展開
3. 「ccLayout」を「設計」にドラッグ&ドロップ
レイアウト:フォーム用 XPage の設定(1) 108
XPage
カスタムコントロールアプリケーションレイアウト
カスタムコントロールフォーム/ビュー
↓ この部分
![Page 109: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/109.jpg)
1. 前頁で貼り付けた「ccLayout」の中央の列「●」にカスタムコントロール「ccFormTopic」をドラッグ&ドロップ
レイアウト:フォーム用 XPage の設定(2) 109
XPage
カスタムコントロールアプリケーションレイアウト
カスタムコントロールフォーム/ビュー
↓ この部分
![Page 110: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/110.jpg)
XPage「xpViewAll」をプレビューで開き、一通りの動きを確認する バナー、アイコン
アプリケーション名
リンク、ボタン
レイアウト:プレビューで確認 110
バナー
検索
リンク
リーガル
新規作成ボタン
リンク
バナー
ビュー/フォーム画面
ビュー切り替え
![Page 111: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/111.jpg)
111
STEP 10オプション:デザインの調整
![Page 112: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/112.jpg)
112
STEP 10.1フォームのデザインの調整
![Page 113: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/113.jpg)
1. 対象のコントロールを選択
2. 対象のコントロールを選択して、枠「プロパティ」のタブ「スタイル」で設定 フォント
背景
余白
本来は CSS で設定する方が望ましいので、慣れてきたら CSS へ切り替えましょう。
デザイン:スタイル 113
![Page 114: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/114.jpg)
1. 対象のコントロールを選択
2. 枠「プロパティ」の [最上段のタブ] の「幅」 「単位」で設定 ピクセル
パーセント
自動
デザイン:コントロールの幅 114
![Page 115: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/115.jpg)
1. 対象のコントロールを選択
2. 枠「プロパティ」のタブ「表のセル」のオプションで設定 セルの横位置
セルの縦位置
デザイン:表のセルの位置 115
例)セルの中のラベル「質問1:」を上付きにした場合
![Page 116: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/116.jpg)
下図を参考にフォームのデザインを自由に変更してみましょう。
デザイン:演習問題(1) 116
幅 100ピクセル
高さ 70ピクセル幅 100パーセント
セルの幅 50ピクセル
セルの縦位置「上」
直接テキストを入力
表の幅 100パーセント
![Page 117: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/117.jpg)
117
STEP 10.2ビューのデザインの調整
![Page 118: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/118.jpg)
1. 対象の「ビューの列」を選択
2. 枠「プロパティ」のタブ「データ」の表示タイプで「日付/時刻」を設定 表示形式:日付と時刻
日付スタイル:デフォルト
時刻スタイル:デフォルト
デザイン:列の設定(表示タイプ:日付/時刻) 118
注意:
列のプロパティを操作していると、「ビューの列のヘッダー」のラベルが勝手に変更される場合があります。変更された場合、手動で直して保存してください。
![Page 119: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/119.jpg)
1. 対象の「ビューの列」を選択
2. 枠「プロパティ」のタブ「データ」の表示タイプで「数値」を設定 表示形式:小数点
整数のみ:チェック
デザイン:列の設定(表示タイプ:数値(整数のみ)) 119
![Page 120: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/120.jpg)
下図を参考にビューのデザインを自由に変更してみましょう。
デザイン:演習問題(2) 120
表示タイプ:日付/時刻
ビューパネル幅 100パーセント
表示タイプ:数値(整数のみ)
![Page 121: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/121.jpg)
121
STEP 11オプション:ビューの追加
![Page 122: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/122.jpg)
今までの作業を参考に以下の2つのビューを追加してみましょう。 回答1
回答2
オプション:演習問題(3-1) 122
設計要素 名前 データソース(タイプ)
データソース(名称)
貼り付けるカスタムコントロール
カスタムコントロール
ccViewAns1 Domino ビュー 回答1 - q1 -
XPage xpViewAns1 - - ccLayoutccViewAns1
設計要素 名前 データソース(タイプ)
データソース(名称)
貼り付けるカスタムコントロール
カスタムコントロール
ccViewAns2 Domino ビュー 回答2 - q2 -
XPage xpViewAns2 - - ccLayoutccViewAns2
![Page 123: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/123.jpg)
今までの作業を参考にナビゲータへ2つのビューのリンクを追加してみましょう。
1. カスタムコントロール「ccLayout」を開く
2. コントロール「ナビゲータ」を選択
3. 枠「プロパティ」のタブ「ナビゲーション項目」を選択
4. ボタン「項目の追加」から下記の項目を追加
オプション:演習問題(3-2) 123
種類 image label page
ページリンクノード /actn120.gif 回答1 /xpViewAns1
ページリンクノード /actn120.gif 回答2 /xpViewAns2
![Page 124: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/124.jpg)
XPage「xpViewAll」をプレビューで開き、一通りの動きを確認する アイコン
ナビゲータ
ビュー
オプション:プレビューで確認 124
ビュー切り替え
![Page 125: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/125.jpg)
125
STEP 12オプション:テーマの変更
![Page 126: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/126.jpg)
1. 画面左の枠「アプリケーション」の「アンケート」をダブルクリック
2. 「アプリケーション構成」をダブルクリック
3. 「Xsp プロパティ」をダブルクリック
4. タブ「一般」をクリック
5. 「テーマのデフォルト」の「アプリケーションのテーマ」で「OunUI V3.0.2」を選択
6. メニューバーから「ファイル > 保存」をクリック
7. メニューバーから「ファイル > 閉じる」をクリック
テーマの変更 126
![Page 127: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/127.jpg)
テーマの変更:プレビューで確認 127
OneUI V2.1
OneUI V2
OneUI V3.0.2
![Page 128: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/128.jpg)
128
補足資料設計要素の構成および設定
![Page 129: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/129.jpg)
設計要素の構成(Step 8 まで) 129
【XPage】xpFormTopic
【カスタムコントロール】ccFormTopic
【XPage】xpViewAll
【カスタムコントロール】ccViewAll
フォーム「アンケート」 ビュー「すべてのアンケート」
![Page 130: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/130.jpg)
設計要素の構成(Step 9 から)(1) 130
【XPage】xpFormTopic
【カスタムコントロール】アプリケーションレイアウト
ccLayout
【カスタムコントロール】ccFormTopic
【XPage】xpViewAll
【カスタムコントロール】アプリケーションレイアウト
ccLayout
【カスタムコントロール】ccViewAll
フォーム「アンケート」 ビュー「すべてのアンケート」
![Page 131: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/131.jpg)
設計要素の構成(Step 9 から)(2) 131
【XPage】xpViewAns1
【カスタムコントロール】アプリケーションレイアウト
ccLayout
【カスタムコントロール】ccViewAns1
【XPage】xpViewAns2
【カスタムコントロール】アプリケーションレイアウト
ccLayout
【カスタムコントロール】ccViewAns2
ビュー「回答1」 ビュー「回答2」
![Page 132: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/132.jpg)
設計要素の設定 132
設計要素 名前 データソース(タイプ)
データソース(名称)
貼り付けるカスタムコントロール
XPage xpFormTopic - - ccLayoutccFormTopic
カスタムコントロール
ccFormTopic Domino 文書 アンケート - Topic -
XPage xpViewAll - - ccLayoutccViewAll
カスタムコントロール
ccViewAll Domino ビュー すべてのアンケート - all -
XPage xpViewAns1 - - ccLayoutccViewAns1
カスタムコントロール
ccViewAns1 Domino ビュー 回答1 - q1 -
XPage xpViewAns2 - - ccLayoutccViewAns2
カスタムコントロール
ccViewAns2 Domino ビュー 回答2 - q2 -
カスタムコントロール
ccLayout - - -
![Page 133: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/133.jpg)
フォームのボタンの設定 133
名前 動作(アクション) ボタンの種類
ボタンのアイコン
可視 可視の条件JavaScript
閉じる すべてのアンケートビューを開く
キャンセル actn027.gif 常時 -設定なし-
編集 文書を編集モードにする
ボタン/送信 actn083.gif 読み込み !(document1.isEditable());
保存して閉じる
保存後、
すべてのアンケートビューを開く
ボタン/送信 actn117.gif 編集 document1.isEditable();
削除 文書を削除する ボタン/送信 actn004.gif 読み込み !(document1.isEditable());
![Page 134: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/134.jpg)
134
参考サイト
![Page 135: 今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)](https://reader031.vdocuments.site/reader031/viewer/2022012406/58896b6b1a28ab44758b57b7/html5/thumbnails/135.jpg)
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