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

» 2017年12月01日 05時00分 公開
[かわさきしんじInsider.NET編集部]

マスターページ

 空のテンプレートから作成したプロジェクトにはデフォルトでマスターページが用意されている。ここではこれを利用する。まずは、ナビゲーションウィンドウで[マスターページ]ペインにある[FGC_ユーザーマスターページ]をダブルクリックして、作業スペースにマスターページを表示する。

 表示したら、一番上の水色の帯に「内線番号検索」と文字を入力し、その大きさとフォントのスタイルを適宜調整する(ここではボールド書体、20ptの指定を行っている)。そして、[一覧]ボタンと[追加]ボタンを追加する。

修正後のマスターページ 修正後のマスターページ

 そして、これら2つのボタンについて、右ペインの[タブ型]タブにある[コマンドの編集]リンクをクリックして、以下のように設定する。各ページは「子ページを表示するプレースホルダー」と書かれている領域に表示される。

  [コマンドの選択] [Forguncy内のページ]
[一覧]ボタン [ページ遷移] [一覧表示]
[追加]ボタン [ページ遷移] [データ追加]
2つのボタンのコマンド設定

 次に[一覧表示]ページと[データ追加]ページで、右ペインの[ページ設定]タブを使ってマスターページの設定を行う。以下は[一覧表示]ページの設定だ。

[ページ設定]タブ [ページ設定]タブ

 [データ追加]ページでも同様な設定を行い(スタートページの設定は行わない)、デバッグ実行をすると次のような画面が表示される。

デバッグ実行画面 デバッグ実行画面

 [追加]ボタンをクリックすると、次のように[データ追加]ページが表示されるので、何かデータを入力して[追加]ボタンをクリックしてみる。

データを追加してみる データを追加してみる

 ここでは名前に「川崎」、ふりがなは自動的に入力された読みのまま、部署に「Insider .NET編集部」、内線番号に「010」を入力してみた。ここで、[一覧]ボタンをクリックしてみよう。

内線番号がおかしい 内線番号がおかしい

 残念ながら、内線番号が「010」ではなく「10」となってしまっている。これはこのテキストボックスの内容が数値として扱われてしまったからだ。取りあえず、Webブラウザを終了して、Forguncy Builderに戻ろう。このとき、「デバッグ実行によってデータベースのデータが変更されています。この変更を開発用のデータベースに反映しますか?」というダイアログが表示される。反映したければ[はい]ボタンを、そうでなければ[いいえ]ボタンをクリックする(本稿ではこのダイアログには全て[いいえ]と答えている)。

 次に[データ追加]ページの[追加]ボタンのコマンドを編集する。

「内線番号」フィールドの値の指定を修正する 「内線番号」フィールドの値の指定を修正する

 ここではTEXT関数に[内線番号]テキストボックス(H8セル)の値と、書式指定文字列「"000"」を渡している。これにより、入力したテキストが2桁以下の数値として扱われた場合には先頭に「0」が付加されたテキストとしてデータが追加されるようになる。このようにForguncyでは関数も使用できる(関数については次回以降で詳しく取り上げる)。これで内線番号がきちんと表示されるようになる。

 ただし、[データ追加]ページでデータを追加した後に、「010」が「10」のように表示されるのが気になる人もいるだろう。これを修正するには、[データ追加]ページの[内線番号]テキストボックスの表示形式を「文字列」にしてやるとよい。これには、[内線番号]テキストボックスを選択してから、[ホーム]タブの[数値]領域にあるドロップダウンで[文字列]を選択する。

セルの表示形式の設定 セルの表示形式の設定

 まだ、このアプリには多くのデータ(6行以上)を表示しようとするとスクロールバーが表示される、[データ追加]ページの[名前]テキストボックスで日本語入力がオフになっているなど、使いづらい点もある。これらについては以下のようにして修正できるのでご自分で試してみていただきたい(詳細な手順は省略する)。

  • 水平スクロールバーを削除:リストビューのサイズを大きくする
  • 日本語入力をオン/オフの切り替え:テキストボックスを選択して、右ペインの[セル型]タブにある[日本語入力モード]で[オン]または[オフ]などを選択する

 ここまででデータの表示と追加が可能になった。次に、更新と削除を実装する。

Copyright© Digital Advantage Corp. All Rights Reserved.

RSSについて

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

メールマガジン登録

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