連載
» 2017年12月14日 05時00分 公開

連載:Forguncy 3でカンタンWebアプリ開発:第3回 テーブルを作ってみよう(2) (5/5)

[かわさきしんじ,Insider.NET編集部]
前のページへ 1|2|3|4|5       

内線番号表アプリの作成

 ここでは今回のおさらいとして駆け足で内線番号表を作成してみる。そのため、説明はかなり省略し、今回のポイントと新規に利用するセル型についてのみ詳しく解説する。

 テーブルには、先ほど作成した2つのテーブル「部署名表」と「内線番号表」をそのまま利用する。そして、これらについて以下のページをリボンの[テーブルからページを生成]ボタンを使って自動生成する。このとき、[登録、更新を1つのページとして生成]チェックボックスをオフにして以下のページを作成している。

テーブル 生成するページ
部署名表 ・ 一覧ページ(スタートページとする)
・ 登録ページ
内線番号表 ・ 詳細ページ
・ 登録ページ
・ 編集ページ
自動生成するページ

 また、「部署名表」テーブルから生成される一覧ページをスタートページとする。つまり、アプリの起動時にはこのページが表示される。

基本設定

 各ページのUI要素から「ID」に関連するものは削除し、サイズや位置の変更を行った。

 以下は「部署名表_一覧ページ」だ。このページでは部署を一覧するマスターリストビューの下に、そのリストビューで選択された部署に属する人の内線番号を表示する詳細リストビューを配置している。詳細画面の[名前]カラムはハイパーリンクとして「内線番号表_詳細ページ」に遷移するようにしている。

「部署名表_一覧ページ」 「部署名表_一覧ページ」
リストビューからIDカラムを削除し、サイズや位置、外観を変更している。
また、内線番号を一覧するリストビューを配置し、詳細画面とした。

 「部署名表_登録ページ」を以下に示す。

「部署名表_登録ページ」 「部署名表_登録ページ」
IDは自動的に振り分けられるので削除してもよいだろう。また、自動生成されたリストビューなども削除している。加えて、テキストボックスを大きくした。

 「内線番号表_登録ページ」と「内線番号表_編集ページ」は以下のようになる(これらの見た目は同一で、[OK]ボタンを押したときに実行されるコマンドだけが異なる。コマンド自体は自動生成されたもののまま変更しない)。

「内線番号表_登録ページ」と「内線番号表_編集ページ」 「内線番号表_登録ページ」と「内線番号表_編集ページ」
IDの表示を削除し、表示項目の順序を入れ替えている。また、[部署ID:]という表記を[部署:]に修正した。後は、テキストボックスのサイズを変更したり、ふりがなについては「ふりがなテキストボックス」を利用したりするように修正している(ふりがなテキストボックスについては前回の記事を参照されたい)。

 最後の「内線番号表_詳細ページ」は次のようになる。

「内線番号表_詳細ページ」 「内線番号表_詳細ページ」
IDの表示を削除し、[部署ID:]という表記を[部署:]に修正した。また、項目の表示順序も入れ替えている。

 以上が基本的な設定だ。次にアプリを実行して、その動作を確認してみよう。

アプリの実行と修正

 この状態でアプリを実行すると次のようになる。

取りあえずの実行画面 取りあえずの実行画面

 部署名をクリックすると、その部署に属する人の内線番号だけが表示される。取りあえずの機能は実装できているようだ。だが、上の画面で[一色]リンクをクリックしてみると、次のようになってしまう。

部署名の表示がおかしい 部署名の表示がおかしい

 これは「内線番号表_詳細ページ」でのデータ連結がうまく設定されていないからだ。そこで次のように修正をすると、ちゃんと表示されるようになる。

親テーブルの「部署」フィールドを参照するように「内線番号表_詳細ページ」でデータ連結を修正
親テーブルの「部署」フィールドを参照するように「内線番号表_詳細ページ」でデータ連結を修正
正しく表示されるようになった
正しく表示されるようになった

「内線番号表_詳細ページ」の実行画面


 そのまま上にある[編集ページ]リンクをクリックしてみよう。

[部署]テキストボックスに「1」と表示されている [部署]テキストボックスに「1」と表示されている

 「1」というのは「部署名表」テーブルのID=1(Insider.NET編集部)に対応しているので数値的には問題ない。部署名をテキストボックスに表示をしたければ、「部署名表」テーブルの「部署」フィールドを表示するようにデータ連結を設定すればよいとも思える。

 だが、テキストボックス表示には問題がある。まず、データの追加や更新するときに「Insider.NET編集部」などと入力してもらうべきではない。間違いが発生する可能性もあるし、何より面倒だ。さらに、「部署名表」テーブルの「部署」フィールドへのデータ連結を行うと、登録や編集がうまくいかない(今述べたようにデータ連結を設定すると対象のテーブルは「部署名表」のように見えるが、実際には「内線番号表」テーブルが対象だ)。

 そこで、これらをコンボボックスに表示することにしよう。「内線番号表_編集ページ」を例に取るが、「内線番号表_登録ページ」でも同様だ。

 更新や追加の対象はあくまでも「内線番号表」テーブルなので、データ連結の対象は自動生成された「内線番号表.部署ID」のままでよい。まずは、該当のテキストボックスを選択し、リボンの[ホーム]タブで[コンボボックス]ボタンをクリックして、セル型を「コンボボックス」にする。

[コンボボックス]ボタンをクリック
[コンボボックス]ボタンをクリック
コンボボックスにすると右端に下向きの▼が表示される
コンボボックスにすると右端に下向きの▼が表示される

部署表示をテキストボックスからコンボボックスに変更


 次に、コンボボックスの表示設定を行う。これには右ペインの[セル型]タブを使用する。

コンボボックスのセル型の設定 コンボボックスのセル型の設定

 [テーブルからデータを取得]チェックボックスをオンにして、[テーブル]には[部署名表]を、[値フィールド]には[ID]を、[表示フィールド]には[部署]を設定する。これにより、データ連結で得られた値に対応する「部署名表」テーブルの「部署」フィールドの値が表示され、逆にコンボボックスで選択された部署に対応する「ID」フィールドの値が「内線番号表.部署ID」に反映されるようになる。

[部署]コンボボックスに変更後の編集画面 [部署]コンボボックスに変更後の編集画面

 以上、手短だが今回のおさらいとして、マスターテーブルと詳細テーブルを持つ内線番号表アプリを作成してみた。


 今回はテーブルからのページ生成/ページからのテーブル生成/テーブルの関連付け/マスター画面と詳細画面など、テーブルとそれに関連する少し高度な話題を取り上げた。次回はForguncyの最も注目すべき機能でもあるExcel資産の活用について説明をする。

「連載:Forguncy 3でカンタンWebアプリ開発」のインデックス

連載:Forguncy 3でカンタンWebアプリ開発

前のページへ 1|2|3|4|5       

Copyright© Digital Advantage Corp. All Rights Reserved.

編集部からのお知らせ

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。