UI部品 基本編
アプリケーションの開発者や運用・管理の担当者にとって、不整合なデータは大敵です。
一つ隣の欄の項目が別のフィールドにずれて入力されてしまったり、表記揺れにより同じものを指すデータがマスタに複数登録されてしまったりすると、アプリケーションの作り自体には問題が無いのに、データの不正によりうまく動作しなくなってしまう可能性もあります。
データの不整合を防止するためコンボボックスやラジオボタンを使うのも一つの手ですが、申請画面など手入力が必要なアプリケーションも存在します。
そこで今回は、代表的な入力チェックの条件と活用場面を挙げつつそれらの実装方法をご紹介します。
1.プロジェクトを確認する
今回の演習で使用するプロジェクトを確認します。
手順1-1.テーブルを確認
ナビゲーションウィンドウのテーブル欄には4つのテーブルが存在しています。
今回はそのうち「科目マスタ」テーブルのみを使用します。
手順1-2.ページを確認
ナビゲーションウィンドウから「入力チェック」ページを開きます。
ページにはいくつかのテキストボックス等の入力欄やボタンなどが既に配置されており、その上に各入力項目にセットする入力チェックの簡単な説明が記載されています。
本記事では1つずつ順番に実装方法の解説を行いますので、実際のForguncyアプリケーション作成の際にお役立てください。
また、各ボタンには「チェック」と書かれています。
このボタンは押下時に入力欄の内容をチェックする処理を実装しますが、実際のアプリケーション作成時にはその下に続けてデータの登録処理などを実装してください。
2.未入力を禁止する
入力必須項目などで役立つ、入力欄が空欄のままだった場合にエラーを表示する設定を実装します。
まずは入力欄からフォーカスが移動する際に空欄のままであればメッセージを表示する処理を作成します。
これだけではこの入力欄にフォーカスがセットされない場合はエラーにならないため、チェックボタンを押下した時に入力欄が空欄であればエラーになる処理も追加で設定します。
手順2-1.データの入力規則の設定
「空欄禁止」と書かれた下にあるB3セルを選択します。
右ペインの[セル型]タブからデータの入力規則…ハイパーリンクをクリックします。
データの入力規則ウィンドウが開くので、設定タブにある未入力を許可するのチェックを外します。
そのままエラーメッセージタブに移動し、空欄のままフォーカスを移動しようとした際に表示されるメッセージを以下のように入力します。
- 入力が必要な項目です。
OKボタンを押下してウィンドウを閉じます。
手順2-2.チェックボタンのコマンド設定
チェックボタンを押下した際に、入力欄が空欄だった場合メッセージを表示し処理を中断する設定を行います。
手順2-2-1.変数の設定コマンドを作成
O3セルのチェックボタンを選択した状態で、右ペインの[セル型]タブからコマンド…ハイパーリンクをクリックします。
コマンドウィンドウが開くので、まずは入力欄の値を取得するコマンドを作成します。
左上の新しいコマンドボタンを押下し、変数の設定コマンドを選択し以下のように設定を行います。
| 変数名 | 入力欄の値 |
| 値、または数式 | =B3 |
これでB3セルにユーザーが入力した値をコマンドが参照できるようになりました。
手順2-2-2.条件分岐コマンドの作成
続いて、新しいコマンドボタンを押下して条件分岐コマンドを追加します。
コマンド欄のIf [条件式] を選択し、「変数入力欄の値が空欄だった時」の条件式を作成します。
条件式タブに以下のような設定を行います。
| フィールド | 条件 | 値 |
| =入力欄の値 | =（等しい） | %Null% |
手順2-2-3.メッセージの表示コマンドの作成
次に、作成した条件式の内容に一致した場合にメッセージを表示する設定を行います。
条件分岐コマンドは入れ子構造になっているので、この処理は入れ子の中に作成します。
新しいコマンドボタンを押下し、メッセージの表示コマンドを追加します。
メッセージの欄に下記のように入力します。
- 入力が必要な項目です。
手順2-2-4.コマンドの強制終了コマンドの作成
最後に、エラー時に処理を打ち切るため入れ子の中にコマンドの強制終了コマンドを追加します。
コマンドの強制終了
後続のコマンドを実行せず、処理を打ち切るコマンドです。
ここではその先にコマンドが無いため本来は配置する必要はありませんが、実際のアプリケーション作成時にはエラーチェック後データの登録処理などの後続のコマンドが動かないようにするため必要なコマンドです。
詳細についてはヘルプを参照してください。
＞コマンドの強制終了のページ（Forguncyヘルプ）
これで未入力を禁止する入力チェックの作成は完了です。
3.半角英数以外の入力を禁止する
半角英数以外の文字が入力されるとエラーメッセージを表示する設定を行います。
半角と全角は表記揺れの元になりやすいので、どちらか一方のみを使用すると決まっているケースではあらかじめこの設定を行っておくことをお勧めします。
手順3-1.文字種の制限を設定
「半角英数のみ」と書かれた下にあるB6セルを選択します。
右ペインの[セル型]タブから文字種の制限…ハイパーリンクをクリックすると、文字種の制限ウィンドウが開きます。
文字種の制限では選択した文字種を禁止するか、または選択した文字種のみを許可するかを選んで設定できます。
今回は特定の文字種のみを使用可能にしたいので、2つのラジオボタンのうち「以下の入力を許可する」を選択します。
半角の英数字のみを入力許可するため、以下の項目にチェックを入れます。
| 半角 | 大文字のアルファベット（A～Z） |
| 半角 | 小文字のアルファベット（a～z） |
| 半角 | 数字（0～9） |
OKボタンを押下してウィンドウを閉じます。
これで半角英数のみの入力を許可する設定は完了です。
4.10文字以内の入力に限定する
入力できる最大文字数を制限する設定を行います。
日報や商談のタイトルなど、簡潔に入力してほしい項目などで役に立つ設定です。
手順4-1.データの入力規則の設定
「字数制限（10文字以内）」と書かれた下にあるB9セルを選択します。
右ペインの[セル型]タブからデータの入力規則…ハイパーリンクをクリックします。
データの入力規則ウィンドウが開くので、設定タブの項目を以下のように設定します。
| 入力値の種類： | 文字列（長さ指定） |
| データ： | 次の値以下 |
| 最大値： | 10 |
そのままエラーメッセージタブに移動し、条件に合わない値を入力してフォーカスを移動しようとした際に表示されるメッセージを以下のように入力します。
- 10文字以内で入力してください。
OKボタンを押下してウィンドウを閉じます。
これで入力できる最大文字数を制限する設定は完了です。
5.半角数字3桁ぴったりの入力のみを許可する
同じ入力欄に対して文字種と文字数両方を制限する設定を行います。
今回の設定では文字数は3桁のみを許可する設定で、それより多くても少なくてもエラーになります。
社員番号など、規則が明確に決まっているデータを入力させたい時に便利な設定です。
この設定はデータの入力規則と文字種の制限を組み合わせて実装します。
手順5-1. データの入力規則の設定
まず入力できる文字数の設定を行います。
「数字3桁のみ」と書かれた下にあるB12セルを選択します。
右ペインの[セル型]タブからデータの入力規則…ハイパーリンクをクリックします。
データの入力規則ウィンドウが開くので、設定タブの項目を以下のように設定します。
| 入力値の種類： | 文字列（長さ指定） |
| データ： | 次の値に等しい |
| 最大値： | 3 |
そのままエラーメッセージタブに移動し、条件に合わない値を入力してフォーカスを移動しようとした際に表示されるメッセージを以下のように入力します。
- 3桁の数字を入力してください。
OKボタンを押下してウィンドウを閉じます。
正規表現
データの入力規則の設定では入力値の設定で整数や日付、時刻など様々な種類を選ぶことができますが、その中に正規表現というものがあります。
正規表現を指定するとメールアドレスや電話番号、郵便番号など事前に用意されている項目を選ぶことができます。
今回の例ではこれらの項目を想定していませんが、正規表現に用意されている項目に対して入力チェックを設定する場合、必要な手順を減らすことができます。
詳細についてはヘルプを参照してください。
＞データ入力規則(セル)（Forguncyヘルプ）
手順5-2.文字種の制限を設定
次に、半角数字だけを入力許可するように設定を行います。
右ペインの[セル型]タブから文字種の制限…ハイパーリンクをクリックすると、文字種の制限ウィンドウが開きます。
今回も手順3と同様に特定の文字種のみを使用可能にしたいので、2つのラジオボタンのうち「以下の入力を許可する」を選択します。
半角の英数字のみを入力許可するため、以下の項目にチェックを入れます。
| 半角 | 数字（0～9） |
OKボタンを押下してウィンドウを閉じます。
これで数字3桁ぴったりの場合のみの入力を許可する設定は完了です。
6.指定の期間内の日付のみを許可する
今日～1ヶ月後までの間の日付のみ選択を許可する設定を行います。
締め切りが決まっている申請や予定を登録するときにセットしておくと期限の超過を防げます。
手順6-1.セルに期限の日付を表示
選択可能な期限としてアプリを起動した当日～1ヶ月後を指定したいため、関数を使って空いたセルに本日日付とその1ヶ月後をセットしておきます。
「今日：」と書かれた右側にあるE16セルを選択し、本日日付を表すため下記の数式を入力します。
- =TODAY()
同様に1ヶ月後の日付を表す下記の数式を「1ヶ月後：」と書かれた右側にあるM16セルに入力します。
- =EDATE(E16,1)
これらの日付を表示しているセルは非表示にしても処理は問題なく動作します。
実際のアプリケーション開発では必要に応じて行または列を非表示に設定してください。
手順6-2. データの入力規則の設定
次に選択できる日付の範囲を指定する設定を行います。
「日付範囲指定（今日～1ヶ月後の間）」と書かれた下にあるB15セルを選択します。
このセルは既に日付型セルになっています。
右ペインの[セル型]タブからデータの入力規則…ハイパーリンクをクリックします。
データの入力規則ウィンドウが開くので、設定タブの項目を以下のように設定します。
| 入力値の種類： | 日付 |
| データ： | 次の値の間 |
| 次の日付から： | =E16 |
| 次の日付まで： | =M16 |
そのままエラーメッセージタブに移動し、条件に合わない値を入力してフォーカスを移動しようとした際に表示されるメッセージを以下のように入力します。
- 今日から1ヶ月後の間の日付を選択してください。
OKボタンを押下してウィンドウを閉じます。
これで選択できる日付の範囲を指定する処理の実装は完了です。
B5セルには[セル型]タブから規定値や日付の書式を設定できるので、お好みで実施してください。
7. 「その他」を選んだら備考欄を入力必須にする
ラジオボタンで「その他」を選んだ時には詳細な内容の入力が必須となるように設定を行います。
通勤手段の申請など、ある程度の選択肢は予想がつくものの例外があり、その例外を知りたい時にはこういった設定が役立ちます。
なお、今回はB19セルにあらかじめラジオボタンをセットしています。
備考欄のあるラジオボタンの作り方については下記の記事にてご紹介していますので、そちらを参考にしてください。
手順7-1. チェックボタンのコマンド設定
チェックボタンを押下した際、「その他」が選ばれており、かつ備考欄が空欄だった場合メッセージを表示し処理を中断する設定を行います。
手順7-1-1.変数の設定コマンドを作成
O19セルのチェックボタンを選択した状態で、右ペインの[セル型]タブからコマンド…ハイパーリンクをクリックします。
コマンドウィンドウが開くので、まずは入力欄の値を取得するコマンドを作成します。
左上の新しいコマンドボタンを押下し、変数の設定コマンドを選択し以下のように設定を行います。
| 変数名 | ラジオボタンの値 |
| 値、または数式 | =B19 |
これで、B19セルでユーザーが選択した値をコマンドが参照できるようになりました。
手順7-1-2.条件分岐コマンドの作成
続いて、新しいコマンドボタンを押下して条件分岐コマンドを追加します。
コマンド欄のIf [条件式] を選択し、「変数ラジオボタンの値が空欄だった時」の条件式を作成します。
条件式タブに以下のような設定を行います。
| フィールド | 条件 | 値 |
| =入力欄の値 | =（等しい） | %Null% |
手順7-1-3.メッセージの表示コマンドの作成
次に、その他の備考欄に入力が無かった場合にメッセージを表示する設定を行います。
条件分岐コマンドは入れ子構造になっているので、この処理は入れ子の中に作成します。
新しいコマンドボタンを押下し、メッセージの表示コマンドを追加します。
メッセージの欄に下記のように入力します。
- その他を選択した場合は詳細を入力してください。
手順7-1-4.コマンドの強制終了コマンドの作成
最後に、エラー時に処理を打ち切るため入れ子の中にコマンドの強制終了コマンドを追加します。
これで、その他を選んだ時だけ備考欄に入力が無いとエラーになる入力チェックの実装は完了です。
8.マスタに存在しない値のみ許可する
入力された値と同じものが科目マスタの中科目に既にあるかチェックし、重複がなかった場合のみOKとする処理を作成します。
この処理を入れておくと、マスタなどのテーブルにデータ登録をする際、同じデータが重複して登録されてしまうことを防げます。
また、条件を入れ替えればマスタに存在しないデータはエラーとすることも可能です。
手順8-1.チェックボタンのコマンド設定
チェックボタンを押下した際に、科目マスタの中科目を走査し入力値と同じデータが存在する場合はメッセージを表示し処理を中断する設定を行います。
手順8-1-1.入力値を取得する変数の設定コマンドを作成
O22セルのチェックボタンを選択した状態で、右ペインの[セル型]タブからコマンド…ハイパーリンクをクリックします。
コマンドウィンドウが開くので、まずは入力欄の値を取得するコマンドを作成します。
左上の新しいコマンドボタンを押下し、変数の設定コマンドを選択し以下のように設定を行います。
| 変数名 | テキストボックス入力値 |
| 値、または数式 | =B22 |
これで、B22セルでユーザーが入力した値をコマンドが参照できるようになりました。
手順8-1-2.科目マスタに登録済みの中科目を取得する変数の設定コマンドを作成
今回はこれまでの手順と違い、もう一つ変数の設定コマンドを作成します。
ここでは科目マスタに既に登録されている中科目のデータを取得する変数を作成します。
左上の新しいコマンドボタンを押下し、変数の設定コマンドを選択し以下のように設定を行います。
| 変数名 | 既存の中科目 | |
| データベースのテーブルを参照 | ||
| 対象テーブル | 科目マスタ | |
| （選択タブ） | ||
| 複数レコード | ||
| フィールド | 変数名 | |
| [中科目] | p中科目 |
これで、科目マスタが持つ中科目のデータをコマンドが参照できるようになりました。
手順8-1-3.繰り返しコマンドの作成
続いて、新しいコマンドボタンを押下して繰り返しコマンドを追加します。
科目マスタに保存されている中科目のデータと入力値を突き合わせ、同一かどうか比較するという処理を中科目データの数だけ行いたいので、まずは繰り返しコマンドでその後に設定する処理を実行する回数の指定を行います。
繰り返しのルールは以下のように設定します。
| 繰り返しのルール： | 指定した回数分だけ繰り返し処理を行う |
| 繰り返し回数、または繰り返し配列： | =既存の中科目 |
| 繰り返し配列オブジェクト名： | Item |
手順8-1-4.条件分岐コマンドの作成
続いて、新しいコマンドボタンを押下して条件分岐コマンドを追加します。
今回は条件分岐コマンドを、繰り返しコマンドの入れ子の中に作成します。
コマンド欄のIf [条件式] を選択し、「科目マスタの中科目の値が変数テキストボックス入力値と同じだった時」の条件式を作成します。
条件式タブの設定は以下のようになります。
| フィールド | 条件 | 値 |
| =Item.p中科目 | =（等しい） | =テキストボックス入力値 |
手順8-1-5.メッセージの表示コマンドの作成
次に、テキストボックスに入力した値と同じものが既に科目マスタの中科目に登録されていた場合にメッセージを表示する設定を行います。
条件分岐コマンドは入れ子構造になっているので、この処理は入れ子の中に作成します。
新しいコマンドボタンを押下し、メッセージの表示コマンドを追加します。
今回は「数式を使用する」にチェックを入れ、メッセージの欄に下記のように入力します。
- =Item.p中科目&”は既に科目マスタに登録されています。”
手順8-1-6.コマンドの強制終了コマンドの作成
エラー時に処理を打ち切るため入れ子の中にコマンドの強制終了コマンドを追加します。
手順8-1-7.メッセージの表示コマンドの作成
科目マスタに登録されているデータが多ければ多いほど処理には時間がかかります。
いつ重複チェックが完了したのかを知るために、繰り返しコマンドの完了時にメッセージを表示するコマンドを追加します。
新しいコマンドボタンを押下し、メッセージの表示コマンドを追加します。
今回は繰り返し処理の完了後に作動させたいため、繰り返しの入れ子の外に作成するよう注意してください。
メッセージの欄には下記のように入力します。
- 重複チェックが完了しました。入力値と重複するデータは存在しませんでした。
これで、既存のマスタに同じ値が既に登録されているかをチェックする処理の実装は完了です。
9.デバッグを実行する
リボンの[ホーム]>[デバッグ]>[開始]ボタン、またはForguncy Builderの左上にある▶ボタンを押下してプロジェクトをデバッグ実行します。
作成したページがブラウザで表示されます。
それぞれの入力欄に値を入れたりチェックボタンを押下したりして、実装した処理がその通りに動くことを確認してください。
10.ForguncyのUI部品についてもっと知る
Forguncyの開発スタートガイドやオンラインヘルプでは、ユーザーがより使いやすいアプリを作成するのに便利なUI部品についてより詳しくご紹介しています。
こちらもぜひご活用ください。
＞開発スタートガイド – Forguncyで機能的なUIを作成する
＞Forguncyヘルプ – データ入力規則(セル)
＞Forguncyヘルプ – Forgucnyの使用と制限
＞Forguncyヘルプ – 変数の設定
＞Forguncyヘルプ – 繰り返し
＞Forguncyヘルプ – 条件分岐
＞Forguncyヘルプ – メッセージの表示
＞Forguncyヘルプ – コマンドの強制終了
