UI部品 基本編

| この記事でわかること: ・フロントエンド側とバックエンド側で行う入力チェックの役割の違い ・サーバーサイドコマンドを使ったバックエンド入力チェックの実装方法 ・最新在庫数と出荷数量を比較し、在庫不足時に登録を中止する方法 ・処理結果を利用者へ通知し、在庫数と受注情報を安全に更新する方法 |
フロントエンド側の入力チェックは、入力ミスの防止や利便性向上に効果的ですが、最新の在庫数との照合や複数のデータを組み合わせた業務チェックには対応できません。
本記事では受注出荷管理アプリを例に、サーバーサイドコマンドを使ったバックエンド側の入力チェックを実装し、在庫不足時に登録を中止する仕組みや、在庫数と受注情報の整合性を保ちながら更新する方法を学びます。
| プロジェクトファイル (作成バージョン:(10.0.15.0) | validation-check2_before.fgcp validation-check2_after.fgcp(実装済みプロジェクトファイル) |
1.入力チェックの基本
業務アプリケーションの適正な運用にはシステムとして正しいデータが登録されいていることが必須です。そのため、入力値のチェックは重要な役割を持っています。
Webアプリケーションにおける入力値チェックには、Webブラウザー上で動作するフロントエンドとサーバー側で動作するバックエンドの2つの方法があり、それぞれチェックの目的や役割が異なります。
| フロントエンド | バックエンド | |
|---|---|---|
| 目的・ 役割 | ユーザービリティ・UX向上 ・即時性:入力ミスを即時検知 ・効率性:正しい入力を促す サーバー側の負荷や無用通信の削減 | データの正当性、一貫性 システムとしての堅牢性 セキュリティ 不正アクセス、改ざん対策 |
| 主な チェック | 必須入力 データ型、フォーマット 文字数、桁数 数値や日時の範囲 ビジネスロジック (フロント側にある値との比較など) | フロント側と同じチェック 複雑なビジネスロジック 他データとの整合性 複数のテーブルデータに対する整合性 セキュリティ対策 SQLインジェクション XSS(スクリプト混入) |
| 苦手な こと | サーバー側にあるデータとの比較するようなビジネスロジックによる値のチェック JavaScriptが無効化されると機能しない 通信におけるリクエスト改ざんの可能性 (信用できない) | 即時性が低く、入力者の効率を妨げる |
Forguncyで作成するWebアプリケーションにおいても、フロントエンド側とバックエンド側のいずれにも入力値チェックの機能を実装することができます。
フロントエンド側の入力チェックについてはこちらの記事で紹介していますが、同時実行処理の考慮が必要な在庫数との照合や複数テーブルの整合性確認など、データの正当性に関わるチェックはバックエンド側で実装する必要があります。
本記事では、受注出荷管理アプリを題材にバックエンド側の入力チェックを実装していきます。
2.プロジェクトを確認する
今回の演習で使用するプロジェクトを確認します。
手順2-1.テーブルを確認
プロジェクトには既にテーブルが内蔵されています。
今回は下記の3つのテーブルを使用します。
なお、出荷履歴テーブルの出荷番号には既に自動採番設定がされています。

手順2-2.ページを確認
プロジェクトには複数のページが内蔵されています。
「受注一覧」ページは受注明細テーブルに登録されているデータを一覧表形式で表示するページです。
「出荷登録」ページは出荷データを登録する際に使用するページです。
今回はこの「出荷登録」ページにバックエンド側の入力チェックを実装していきます。
「出荷履歴」ページは出荷履歴テーブルに登録されているデータを一覧表形式で表示するページです。
出荷登録処理が正しく行われると、このページに履歴が表示されます。

3. サーバーサイドコマンドを作成する
バックエンド側の入力チェックを実現するため、サーバーサイドコマンドを作成します。
今回は出荷可否を判定し、出荷履歴テーブルへデータを追加する処理を実装していきます。
手順3-1. サーバーサイドコマンドの新規作成
最初に、出荷登録時の一連の処理を実行するためのサーバーサイドコマンドを作成します。
今回作成するサーバーサイドコマンドでは、
・受注情報と商品情報の取得(手順3-2)
・在庫不足チェック(手順3-3)
・在庫数や受注情報の更新(手順3-4)
・出荷履歴の登録(手順3-5)
・利用者への処理結果の通知(手順3-6)
を行います。
以降の手順では、このサーバーサイドコマンドに各処理を追加していきます。
リボンの[作成]>[サーバーオブジェクト]>[サーバーサイドコマンドの作成]をクリックし、新しくサーバーサイドコマンドを作成します。
[全般]タブの名前欄に「出荷登録処理」と入力し、名前を変更します。
[パラメーター]タブに移動し、下記の4つのパラメーターを追加します。
| パラメーター名 | パラメーターの種類 |
| p受注番号 | 基本型 |
| p出荷数量 | 基本型 |
| p出荷日 | 基本型 |
| p備考 | 基本型 |

次の手順からは、コマンドを設定していきます。
[コマンド]タブに移動し、[コマンド…]ハイパーリンクをクリックします。
サーバーサイドコマンドの設定ウィンドウが開くので、[新しいコマンド]ボタンを押下し、トランザクションを追加します。

今回の処理では複数のテーブルを更新します。
トランザクションコマンドを追加しておくことで、処理中にエラーが発生した場合でもデータの整合性を保つことができます。
手順3-2. 受注情報と商品情報を取得
出荷登録時に必要となる受注情報と商品情報を取得します。
受注明細テーブルと商品マスタから最新のデータを取得し、後続の在庫不足チェックやデータ更新処理で利用できるようにします。
受注明細テーブルから対象の受注情報を取得するため、[変数の設定]コマンドを追加します。
変数名には「v受注情報」と入力し、変数値は「データベースのテーブルを参照」にし、対象テーブルに受注明細テーブルを指定します。
[選択]タブでは「単一レコード」を選択し、[フィールドの追加]ボタンを押下して下記のフィールドを取得するよう設定します。
| フィールド | 変数名 |
| [受注番号] | 受注番号 |
| [商品コード] | 商品コード |
| [受注数量] | 受注数量 |
| [出荷済数量] | 出荷済数量 |
| [出荷状況] | 出荷状況 |
| フィールド | 条件 | 値 |
| [受注番号] | =(等しい) | p受注番号 |

続いて、商品マスタから対象の商品情報を取得します。
サーバーサイドコマンドに[変数の設定]コマンドを追加し、変数名を 「v商品情報」 に設定します。
[変数値]には 「データベースのテーブルを参照」 を選択し、対象テーブルに 「商品マスタ」 を指定します。
[選択]タブでは、取得形式を 「単一レコード」 に設定し、以下のフィールドを取得します。
| フィールド | 変数名 |
| [商品コード] | 商品コード |
| [商品名] | 商品名 |
| [現在庫] | 現在庫 |
次に、[クエリー]タブで取得対象のレコードを指定します。
商品情報は、前の手順で取得した受注情報に含まれる商品コードを利用して検索します。
| フィールド | 条件 | 値 |
| [商品コード] | 等しい | v受注情報.商品コード |

手順3-3.在庫不足チェックを実装
取得した受注情報と商品情報を利用して、出荷可能かどうかを判定します。
そのために、受注残数量や在庫数を確認するチェック処理を実装していきます。
手順3-3-1. 受注残数量を計算
まず受注残数量を計算するための変数を追加します。
[変数の設定]コマンドを追加し、変数名には 「v受注残数量」 を設定します。
[変数値]には 「値、または数式」 を選択し、「=v受注情報.受注数量-v受注情報.出荷済数量」と入力します。

この受注残数量は、後続の処理で出荷数量が受注残数量を超えていないか確認する際に利用します。
手順3-3-2.更新後の出荷済数量を計算
出荷後の累計出荷数量を計算するための変数を追加します。
[変数の設定]コマンドを追加し、変数名には 「v更新後出荷済数量」 を設定します。
[変数値]には 「値、または数式」 を選択し、「=v受注情報.出荷済数量+p出荷数量」と入力します。

この値は後続の処理で出荷状況を「出荷済」または「一部出荷」に判定する際に利用します。
手順3-3-3.出荷数量が正しく入力されているか確認
出荷数量が正しく入力されているかを確認する処理を追加します。
[条件分岐]コマンドを追加し、出荷数量が0以下の場合は処理を中止するよう設定します。
[If]の条件は以下のように設定します。
| 変数 | 条件 | 値 |
| p出荷数量 | <=(以下) | 0 |

条件分岐のThenの部分に、条件式に当てはまった場合に動作するコマンドを追加します。
リターンコマンドを追加し、以下のように設定します。
| 項目 | 設定値 |
| リターンコード | 1101 |
| リターンメッセージ | 出荷数量には1以上の数値を入力してください。 |

リターンコマンドは、後続の処理を実行せずにサーバーサイドコマンドを終了し、処理結果を呼び出し元へ返すために使用します。
手順3-3-4.出荷済みの受注ではないか確認
選択した受注が既に出荷済みではないか確認します。
条件分岐コマンドを追加し、受注残数量が0以下の場合は処理を中止するよう設定します。
[If]の条件は以下のように設定します。
| 変数 | 条件 | 値 |
| v受注残数量 | <=(以下) | 0 |

条件が成立した場合の動作として、[Then]にリターンコマンドを追加します。
設定は下記の通りです。
| 項目 | 設定値 |
| リターンコード | 1102 |
| リターンメッセージ | この受注は既に出荷済みです。 |

こうすることで、出荷済みの受注に対して再度出荷登録が行われることを防止できます。
手順3-3-5.出荷数量が受注残数量を超えていないか確認
今回の出荷数量が受注残数量を超えていないか確認します。
条件分岐コマンドを追加し、今回の出荷数量が受注残数量より多い場合は処理を中止するよう設定します。
[If]の条件は以下のように設定します。
| 変数 | 条件 | 値 |
| p出荷数量 | >(より大きい) | v受注残数量 |

条件が成立した場合の動作として、[Then]にリターンコマンドを追加します。
設定は下記の通りです。
| 項目 | 設定値 |
| リターンコード | 1103 |
| リターンメッセージ | 今回の出荷数量が受注残数量を超えています。 |

これにより、受注数量を超える出荷登録を防止できます。
手順3-3-6.在庫数が不足していないか確認
商品の最新在庫数が出荷数量以上であるか確認します。
条件分岐コマンドを追加し、今回の出荷数量が現在庫数を超えている場合は処理を中止するよう設定します。
[If]の条件は以下のように設定します。
| 変数 | 条件 | 値 |
| p出荷数量 | >(より大きい) | v商品情報.現在庫 |

条件が成立した場合の動作として、[Then]にリターンコマンドを追加します。
設定は下記の通りです。
| 項目 | 設定値 |
| リターンコード | 1104 |
| リターンメッセージ | 在庫が不足しています。最新の現在庫数を確認してください。 |

これで在庫数を超える出荷登録を防止できます。
また、この判定では画面上に表示されている在庫数ではなく、商品マスタから取得した最新の在庫数を利用しています。
そのため、他の利用者による更新が行われていても、登録時点の最新状態で出荷可否を判定できます。
手順3-4. 出荷可能な場合のみデータを更新
更新処理は在庫不足チェックを通過した場合のみ実行します。
そのためにまず、出荷後の在庫数を計算するための変数を追加します。
変数の設定コマンドを追加し、変数名には 「v更新後在庫数」 を設定します。
[変数値]には 「値、または数式」 を選択し、「=v商品情報.現在庫-p出荷数量」と入力します。

これで、今回の出荷処理が完了した後の在庫数を取得できます。
続いて商品マスタの在庫数を更新します。
テーブルデータの更新コマンドを追加し、処理の種類に 「更新」、対象テーブルに 「商品マスタ」 を設定します。
更新対象フィールドは以下のように設定します。
| フィールド | 値 |
| [現在庫] | v更新後在庫数 |
続けて対象条件も以下のように設定します。
| フィールド | 条件 | 値 |
| [商品コード] | =(等しい) | v受注情報.商品コード |

次に受注明細テーブルの更新処理を行います。
更新の際に、今回の出荷処理で受注数量のすべてを出荷したかどうかを判定するために条件分岐コマンドを追加します。
[If]の条件は以下のように設定します。
| 変数 | 条件 | 値 |
| v更新後出荷済数量 | =(等しい) | v受注情報.受注数量 |

この条件に一致、つまりすべての出荷を行った場合の処理を[Then]に追加します。
テーブルデータの更新コマンドを追加し、処理の種類を「更新」、対象テーブルに受注明細テーブルを指定します。
[対象フィールド]は以下のように設定します。
| フィールド | 値 |
| [出荷済数量] | v更新後出荷済数量 |
| [出荷状況] | 出荷済 |
対象条件は下記のように設定します。
| フィールド | 条件 | 値 |
| [受注番号] | =(等しい) | p受注番号 |

これで、受注数量のすべてを出荷した場合は出荷状況が「出荷済」に更新されます。
次に、一部出荷の場合の更新処理を実装します。
条件分岐コマンドに戻り、[Elseの追加]ボタンを押下します。
Elseの[Then]にテーブルデータの更新コマンドを追加し、処理の種類を「更新」、対象テーブルに受注明細テーブルを指定します。
[対象フィールド]は以下のように設定します。
| フィールド | 値 |
| [出荷済数量] | v更新後出荷済数量 |
| [出荷状況] | 一部出荷 |
対象条件は Then 側と同じく、下記のように設定します。
| フィールド | 条件 | 値 |
| [受注番号] | =(等しい) | p受注番号 |

これで、出荷数量に応じて受注明細の出荷状況を自動的に更新できるようになりました。
手順3-5. 出荷履歴を登録
出荷登録の処理が正常に完了した場合は、出荷履歴テーブルにデータを登録します。
条件分岐コマンドの外にテーブルデータの更新コマンドを追加し、処理の種類に 「追加」、対象テーブルに 出荷履歴テーブル を設定します。
[対象フィールド]には以下の項目を設定します。
| フィールド | 値 |
| [受注番号] | v受注情報.受注番号 |
| [商品コード] | v受注情報.商品コード |
| [出荷数量] | p出荷数量 |
| [出荷日] | p出荷日 |
| [備考] | p備考 |

これで、出荷処理が正常に実行されると出荷履歴テーブルへ新しいレコードが追加されるようになります。
また、ここまでの処理はトランザクション内で実行されるため、データの更新中にエラーが発生した場合は、それまでに実行した更新もロールバックされ、データの整合性を保つことができます。
手順3-6. 処理結果を利用者へ通知
最後に、処理が正常に終了した旨を利用者へ通知する設定を行います。
リターンコマンドを追加し、以下のように設定します。
| 項目 | 設定値 |
| リターンコード | 0 |
| リターンメッセージ | 出荷登録が完了しました。 |

4. 登録ボタンからサーバーサイドコマンドを呼び出す
出荷登録画面で登録ボタンを押下した際に、作成したサーバーサイドコマンドを呼び出す設定を行います。
出荷登録画面を開いて登録ボタンを選択し、右ペインの[セル型]タブから[コマンド]…ハイパーリンクをクリックします。
コマンドウィンドウが開くので、ここにコマンドを追加していきます。

手順4-1. 変数の設定
サーバーサイドコマンドの呼び出しの前に、コマンドから返される処理結果であるリターンコードとリターンメッセージを格納する2つの変数を作成します。
変数の設定コマンドを追加し、変数名にリターンコードと入力します。
変数値は「値」を選択し、何も入力しないでおきます。

同様に変数の設定コマンドを追加し、変数名にリターンメッセージと入力します。
変数値は「値」を選択し、こちらにも何も入力しないでおきます。

手順4-2.サーバーサイドコマンドの呼び出し
サーバーサイドコマンドの呼び出しコマンドを追加し、作成したサーバーサイドコマンドを呼び出します。
サーバーサイドコマンドの選択欄では「出荷登録処理」を選択し、パラメーターと戻り値を下記のように設定します。
| パラメーター | 値 |
| p受注番号 | =J4 |
| p出荷数量 | =J14 |
| p出荷日 | =J16 |
| p備考 | =J18 |
| 戻り値 | 格納する変数 |
| リターンコード | リターンコード |
| リターンメッセージ | リターンメッセージ |

手順4-3.処理結果の通知
最後に、処理結果を利用者へ通知する処理を追加します。
サーバーサイドコマンドから返されたリターンコードを利用し、処理の成功・失敗を判定します。
条件分岐コマンドを追加し、リターンコードが正常終了を表す「0」かを確認する[If]の条件を以下のように設定します。
| 変数 | 条件 | 値 |
| リターンコード | <>(等しくない) | 0 |

[Then]にはエラー時のメッセージを表示するため、メッセージの表示コマンドを追加します。
「数式を使用する」にチェックを入れ、入力欄に「=”処理に失敗しました:”&リターンメッセージ」と入力します。

[Elseの追加]ボタンを押下し、成功時のメッセージ表示のためにメッセージの表示コマンドを追加します。
「数式を使用する」にチェックを入れ、入力欄に「=リターンメッセージ」と入力します。

正常に処理が完了した場合は登録画面を閉じるため、ポップアップウィンドウの終了コマンドを追加します。
「親ページの連結データを最新の情報に更新する」にチェックを入れ、コマンドウィンドウを閉じます。

これで設定は完了です。
5.デバッグを実行する
デバッグを行うには、動作確認したいページを開いた状態でリボンの[ホーム]>[デバッグ実行]>[▶]ボタン、またはForguncy Builderの左上にある▶ボタンを押下してプロジェクトをデバッグ実行します。

プロジェクトを実行すると、「受注一覧」ページが表示されます。
リストビュー上の出荷登録ハイパーリンクを押下すると「出荷登録」ページがポップアップウィンドウで表示されます。
各項目に入力を行い、登録ボタンを押下すると、各種チェックが実行され、正常と判定された場合はデータが更新されます。
出荷履歴を見るボタンを押下すると出荷履歴ページに遷移します。出荷処理が正常に行われた場合、このページにデータが追加されます。

この記事はお役に立ちましたか?
ForguncyのUI部品についてもっと知る
Forguncyの開発スタートガイドやオンラインヘルプでは、ユーザーがより使いやすいアプリを作成するのに便利なUI部品についてより詳しくご紹介しています。
こちらもぜひご活用ください。
