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

今回は、Forguncy 3でWebアプリを作成する際に肝となる機能「テーブル」について見ていくことにしよう。

» 2017年12月01日 05時00分 公開
[かわさきしんじInsider.NET編集部]
「連載:Forguncy 3でカンタンWebアプリ開発」のインデックス

連載目次

本連載は、「連載:カンタンWebアプリ開発ツール「Forguncy」の実力を探る」を現在の最新環境に合わせて改訂したものです。


 前回はForguncy 3(以下、Forguncy)の概要について説明し、その後、ページ遷移を行うだけのシンプルなWebアプリを作って、それをForguncy Serverに発行するまでを見てみた。今回は、Forguncyでデータを扱う上で欠かせないテーブルを作成し、これを利用してデータの作成/読み取り/更新/削除を行うWebアプリを作ってみよう。

Forguncyの製品構成の変更

 前回、Forguncyのエディションには、開発環境としてForguncy Builder Basic/Proの2つのエディションが、運用環境としてForguncy Server Lite/Standard/Enterpriseの3つのエディションがあると述べた(Forguncy Builderについては保守の有無もある)。このうち、Forguncy Builder Basic(保守なし/初年度保守付き)とForguncy Server Lite(初年度保守付き)が2017年12月31日で販売終了となることがアナウンスされている。

 Forguncy Builder Basic/Forguncy Server Liteの保守サービスの販売は継続されるので、現在保守サービスを購入しているのであれば、今後も保守サービス付きでの利用は可能だ。エディションアップグレードライセンスも販売されているので、これからもForguncyを活用するなら、Forguncy Builder Pro/Forguncy Server Standardなどへのアップグレードも検討しよう。

 その一方で、Forguncyをクラウド化したサービスの提供開始もアナウンスされている。興味のある方は前掲のリンクやサービス提供元であるカゴヤ・ジャパンからのリリースを参照されたい。


テーブルとは

 Forguncy Builderを使って作成するWebアプリでは前回紹介したページと今回紹介するテーブルが非常に重要になってくる。既におなじみだとは思うが、テーブルとはフィールドレコードで構成されるデータ構造であり、Forguncyではページに入力されたデータの格納や、データのページへの表示にはテーブルを使うのが基本となる。

 1つ1つのデータはレコードとして保存され、1つ1つのレコードは「ID」「名前」「ふりがな」……といったフィールドで構成される。フィールドはそれが格納するデータの種類によって、テキスト/数値/通貨などの種類(型)に分類される。

テーブル テーブル

 今回は以下のフィールドを持つ内線番号表(テーブル)を作成し、これに対してデータの作成と追加、読み取り、更新、削除を行っていこう。

  • 名前
  • ふりがな
  • 部署
  • 内線番号

テーブルの作成とフィールドの追加

 まずはForguncy Builderを起動するか、空のテンプレートを使用してプロジェクトを新規に作成する。

新規プロジェクトを開始 新規プロジェクトを開始

テーブルの作成

 テーブルを新規に作成するには、リボンの[作成]タブあるいはナビゲーションウィンドウを使用する([データ]タブも使用できるが、今回はこれには触れない)。

 [作成]タブでは以下のボタンを使うことでテーブルが作成できる。

  • [テーブル]ボタン
  • [ページからテーブルを生成]ボタン
  • [Excelからページとテーブルを生成]ボタン

 [テーブル]ボタンはその名の通り、空のテーブルを新規に作成する。[テーブルからページを生成]ボタンは、既に作成済みのページに含まれるさまざまなUI構成要素を基にして、Forguncy Builderがテーブルを自動で作成してくれるものだ。[Excelからページとテーブルを生成]ボタンは、Excelワークシートを基にページとテーブルをForguncyが自動で作成してくれる。

 空のテンプレートから新規プロジェクトを作成した直後でページには特にUI要素がないので、ここでは[テーブル]ボタンを使う([ページからテーブルの生成]ボタンについては後で見てみよう)。

[作成]タブの[テーブル]ボタンをクリックしてテーブルを新規作成 [作成]タブの[テーブル]ボタンをクリックしてテーブルを新規作成

 ナビゲーションウィンドウでは、[テーブル]タブを右クリックして、コンテキストメニューから[新しいテーブルの作成]を選択する([ページから]項目は上の[ページからテーブルの作成]と同様だ)。

ナビゲーションウィンドウでテーブルを新規作成 ナビゲーションウィンドウでテーブルを新規作成

 作成すると、作業スペースには以下のような画面が表示される。

新規作成されたテーブル 新規作成されたテーブル

 テーブルの名前を変更するにはナビゲーションウィンドウを使うのが簡単だ。まず、テーブルを選択状態にする。そして、その名前(ここでは[テーブル1]と書かれている部分)をクリックしてしばらく待つか、テーブルを右クリックしてコンテキストメニューから[名前の変更]を選ぶ。すると、入力可能なテキストボックスが表示されるので、そこでテーブルの名前を入力する。

ナビゲーションウィンドウで「テーブル1」と書かれている部分をクリックするか、右クリックしてコンテキストメニューから[名前の変更]を選択する
ナビゲーションウィンドウで「テーブル1」と書かれている部分をクリックするか、右クリックしてコンテキストメニューから[名前の変更]を選択する
テーブル名を入力する。ここでは「内線番号表」としている
テーブル名を入力する。ここでは「内線番号表」としている
テーブルの名前が変更された
テーブルの名前が変更された

テーブル名の変更


 ここではテーブルの名前を「内線番号表」としておく。なお、名前の変更方法はテーブルに限らず、ページやマスターページでも同様なので覚えておこう(以後、名前の変更については詳しく説明はしない)。

フィールドの追加

 テーブルを作成したら、そこにフィールドを追加していく。追加できるフィールドには以下の種類がある。

  • テキスト: 文字列を格納するフィールド
  • 整数: 整数値を格納するフィールド
  • 小数(通貨): 固定小数点数値を格納するフィールド。金額などのデータを扱う際に使用する
  • 日付/時刻: 日付データを格納するフィールド
  • 時刻: 時刻データを格納するフィールド
  • Yes/No: いずれかの条件に合致するか否かを示す値を格納するフィールド(例えば、「成人」フィールドなど)
  • ユーザーアカウント: ログインユーザーの情報を格納するフィールド
  • 画像: 画像を格納するフィールド
  • 添付ファイル: 添付ファイルを格納するフィールド

 ここでは、名前/ふりがな/部署/内線番号の4つのフィールドを持つテーブルを作成するのだが、全て「テキスト」フィールドとしよう。

 フィールドを追加するには、作業スペースに「クリックして追加」と表示されている隣にある下向きの矢印をクリックすればよい。クリックするとコンテキストメニューが表示されるので、そこで追加するフィールドの種類を選択する。この操作を繰り返して、必要な数のフィールド(ここでは4つ)を追加する。

フィールドの追加 フィールドの追加

 次にフィールド名を変更しよう。これには、追加したフィールドをクリックしてそのまま名前を入力すればよい。名前を入力し[Tab]キーを押せば、次のフィールドに移動するので、そのまま名前の変更を続けられる(これが最初に必要な数だけフィールドを追加しておく理由だ)。リボンの[ホーム]タブにある[名前]ボタンをクリックするか、追加したフィールドを右クリックしてコンテキストメニューから[名前の変更]を選択しても名前の変更は可能だが、データを入力して[Tab]キーで次のセルに移動するというExcelの操作手順にも合致するし、マウスを使わずにキーボードだけで操作が済むので前者の方法がお勧めだ。

フィールドを追加して、名前を変更した後のテーブル フィールドを追加して、名前を変更した後のテーブル

 先頭にある「ID」フィールドは、このテーブルに追加される個々のレコードにユニークな番号を自動的に割り当てるために使われるもので、その値も名前も変更はできない。

 また、Forguncyでは、ページ名、テーブル名、フィールド名などには日本語を使っても構わないだろう。というのは、フィールド名は後述するリストビューのヘッダにそのまま表示されるし、ページの遷移先が一覧表示されるときにも日本語表記されたページは意外に分かりやすいからだ。通常のプログラミング言語で識別子に漢字や平仮名を使おうとは思わないが、Forguncyでは日本語を使ってもよいのではないか、と筆者は感じている。

 次にダミーのデータとして以下を追加しておく。

ダミーで追加したレコード ダミーで追加したレコード

 なお、作業スペースにテーブルを表示しているときには、リボンに[フィールド]タブが表示される。

[フィールド]タブ [フィールド]タブ

 このタブにある[追加と削除]領域にある[テキスト][整数]などのボタンをクリックすると、対応する種類のフィールドが追加される(追加される位置は、テーブルで現在選択しているフィールドの右隣)。[プロパティ]領域にあるボタンは、現在テーブルで選択しているフィールドの名前やそこに格納するデータの種類を設定したり、そのフィールドの規定値を設定したりできる。[フィールドの入力規則]領域では、そのフィールドが必須のフィールドか([必須]チェックボックス)、そのフィールドが一意な値を格納するか([一意]チェックボックス)を設定したり、テキストフィールドで自動採番を行うための設定を行ったりできる(本稿では取り上げない)。

 テーブルの基本としては、もう1つ説明しておくことがある。それは、自動生成されるフィールドだ。ナビゲーションウィンドウでテーブルの左にある三角形をクリックすると、そのテーブルが持つフィールドが表示される。

「内線番号表」テーブルが持つフィールド 「内線番号表」テーブルが持つフィールド

 ID/作成者/作成日時/最終更新者/最終更新日時の5つがForguncy Builderにより自動的に作成されるフィールドだ。このうち、IDフィールドは上の画像にもあるように、テーブルのフィールドとして表示されるが、その他のフィールドは表示されない。が、それらのフィールドもテーブルに格納されるデータとして利用できる。後でどれかを使ってみることにしよう。なお、ID以外の4つのフィールドはさらにサブフィールドを持つ。興味のある方は各フィールドを展開してみよう。

 この他にもテーブルには「数式フィールド」と「集計フィールド」も作成できるが、本稿では取り上げない。

 以上で、テーブルの作成は完了だ。次ページからは、このテーブルを使って各種操作を実装していこう。

       1|2|3|4|5|6 次のページへ

Copyright© Digital Advantage Corp. All Rights Reserved.

RSSについて

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

メールマガジン登録

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