【第04回】ノーツ新任担当者向けアプリケーション開発講座：フレームセットの作成

当講座を開発担当した株式会社ソルクシーズ吉田です。

本連載は、今年開催しました「ノーツ新任担当者向けワークショップ（開発者編）」の内容を再編集をしてお届けします。

前回は、ビュー（データの一覧画面）の作成まで行いました。

第４回は、フレームセット（画面レイアウト）の作成です。

「実際に操作をしながら学びたい」と思われた方は、来年度に開催する予定のワークショップにぜひご参加ください。

ステップ４：フレームセットの作成

フレームセットを作成することでより自由度のあるデザインにできます。

今回は、標準的な左側にメニュー（ビューの切り替え）、右側にビューを表示するためのフレームセットを作成します。

完成イメージ

基本構成は下図のようになります。

ステップ４－１：アウトラインの作成

メニューのリスト（リンク）部分となるアウトラインを作成します。

画面左の設計要素一覧から「共有要素－アウトライン」をダブルクリックして選択します。

画面中央にアウトラインの一覧が表示されます。（この時点ではアウトラインが存在しないため空欄です）

画面上部のボタン「新規アウトライン」をクリックします。

ダイアログ「新規アウトライン」が表示されます。

各項目に下表の値を設定します。

アウトライン

名前

メニュー

日本語の名前

別名

プログラムで使用する名前

（半角英数字）

ボタン「OK」をクリックすると、アウトラインが作成されます。

画面上部のボタン「デフォルトアウトラインの作成」を使うと自動ですべてのビューとフォルダのメニューが作成されます。

今回はこの機能を使ってアウトランを作成します。ボタン「デフォルトアウトラインの作成」をクリックしてください。

保存して閉じます。

ステップ４－２：ページの作成

メニューの背景部分となるページを作成します。

画面左の設計要素一覧から「ページ」をダブルクリックして選択します。

画面中央にページの一覧が表示されます。（この時点ではページが存在しないため空欄です）

画面上部のボタン「新規ページ」をクリックします。

ダイアログ「新規ページ」が表示されます。

各項目に下表の値を設定します。

ページ

名前

メニュー

日本語の名前

別名

プログラムで使用する名前

（半角英数字）

ボタン「OK」をクリックすると、ページが作成されます。

前述で作成したアウトラインをこのページに埋め込みます。

アウトラインを埋め込みたい位置にカーソルを移動して、メニューバー＜作成－埋め込み設計要素－アウトライン＞を選択します。

ダイアログ「埋め込みアウトラインの挿入」が表示されます。

先ほど作成したアウトライン「メニュー」を選択して、ボタン「OK」をクリックします。

ページにアウトラインが埋め込まれます。

背景を変更したい場合、ページのプロパティのタブ「背景」の「色」で好きな色に設定できます。

ステップ４－３：フレームセットの作成

それでは、今まで作成してきた「ビュー」「ページ（アウトラインを含む）」を組み合わせてフレームセットを作成します。

画面左の設計要素一覧から「フレームセット」をダブルクリックして選択します。

画面中央にフレームセットの一覧が表示されます。（この時点ではフレームセットが存在しないため空欄です）

画面上部のボタン「新規フレームセット」をクリックします。

ダイアログ「新規フレームセット」が表示されます。

各項目に下表の値を設定します。

フレームセット
名前	メインフレームセット	日本語の名前
別名	mainFrameset	プログラムで使用する名前（半角英数字）
フレーム数	2	フレームの数
配置	（左端）	フレームのレイアウト

ボタン「OK」をクリックすると、フレームセットが作成されます。

ステップ４－４：フレーム（左側：メニュー）の設定

フレームセットの左側のフレームにページ「メニュー」を設定します。

フレームセットの左側のフレームを選択して、右クリックから「フレームのプロパティ」のタブ「基本」を開きます。

注意：「フレームセットのプロパティ」ではなく、「フレームのプロパティ」です。

各項目に下表の値を設定します。

フレームのプロパティ：タブ「基本」
名前	frame_menu	－
内容－種類	名前付き設計要素ページ	－
内容－値	メニュー	*1
フレーム内のリンクのデフォルト対象	frame_view	*2

*1 右側のフォルダのアイコンから設定

*2 メニューのリスト（リンク）をクリックした時、右側のフレームにビューを表示するために使用します。（後述する右側のフレームの名前を設定）

タブ「フレームサイズ」を開きます。

各項目に下表の値を設定します。

項目名の通り、フレームの幅の指定です。

フレームのプロパティ：タブ「フレームサイズ」
幅	250
（単位）	ピクセル

ステップ４－５：フレーム（右側：ビュー）の設定

フレームセットの右側のフレームにビュー「すべてのアンケート」を設定します。

フレームセットの右側のフレームを選択して、右クリックからフレームのプロパティを開きます。

注意：「フレームセットのプロパティ」ではなく、「フレームのプロパティ」です。

各項目に下表の値を設定します。

フレームのプロパティ：タブ「基本」
名前	frame_view	*2
内容－種類	名前付き設計要素ビュー	－
内容－値	すべてのアンケート	*1

*1 右側のフォルダのアイコンから設定

*2 左側のフレームのプロパティの「フレーム内のリンクのデフォルト対象」で指定した名前を設定します。

保存して閉じます。

ステップ４－６：アプリケーションを開いた時に表示する設計要素の設定

前述までの手順でフレームセットは完成しましたが、このままではアプリケーションを開いた時にフレームセットが表示されません。

以下の手順でアプリケーションを開いた時に作成したフレームセットで開くように設定します。

画面左の設計要素一覧から「アプリケーション構成－アプリケーションのプロパティ」をダブルクリックして選択します。

画面中央にアプリケーションのプロパティが表示されます。

補足：今までのプロパティ（フォームやビュー）と表示方法が違いダイアログでは表示されません。

タブ「起動」を開きます。

各項目に下表の値を設定します。

アプリケーションのプロパティ：タブ「起動」
起動	指定したフレームセットを開く
フレームセット	メインフレームセット