実践 4『登録画面（紐づけボタン付）』を作成する
事前準備
手順

紐付けボタンの作

確認

クライアント側

サーバー側

検索ボタンの作成

画面の確認

Html（一覧画面）

データセット

Html

手順

ER図の確認

Html（登録画面）

バリデーション

Appspec

画面の確認プログラムのコピー

CSS

トランJSON

コントローラボタンの作成Appspec

セレクトSQL

データセットJSON

次画面の作成コントローラアップデートSQL

バリデーションJSON

次画面updateSQ作成

Ruby

トランJSON

次画面モデルruby作成

ＳＱＬJSON成画面の確認
確認する画面が 4 つあります。
『一覧画面』と『登録画面』に『検索ボタンを押下した先の画面』と『紐付けボタンを押下した先の画面』です。
➀［DG_740R

一覧画面］

この一覧画面は実践 1 とは違いデータが 2 段に表示されています。
2 段表示ができるように作成します。

②［DG_750U

登録画面］

この画面も実践 2 とは違い、入力欄が 2 段表示になっています。
そして入力欄にセレクト BOX があります。セレクト BOX の項目名は DB から持ってくるのではなく、記載が必要になる為、Html/データセット JSON で作成します。

③［ DG_720R_serect

検索ボタン押下先画面］

この画面は他の画面から ID と名称を持ってきて紐付けます。
実践 3 の様に紐付けデータを入れるテーブルはありません。
DG_720R_serect を作成しここから紐付けます。（DG_720R_serect は作成済）④［DG_751U

紐付けボタン押下先画面］

この画面は実践 3 の紐付け機能を別画面で行うだけで仕組みは同じです。
実践 3 では 1 度にテーブル全てを更新しましたが、ここでは右のテーブルデータが紐つくところだけが更新できるようにプログラムを修正して作成します。

実践 4 では上記 4 つの画面を作成します。

ER 図を確認
この画面は『外部システムｉ/ｆ』です。
矢印の項目がそれぞれのテーブルと紐つきます。この 2 本が 2 つのボタンです。
下の青いテキストがテキストＢＯＸの項目名を指示しています。

プログラムのコピー➀［DG_740R

DG_750U］

実践 3 ではテーブルが 2 つある雛型からプログラムをコピーしました。
実践 1.2 ではテーブルが 1 つの雛型からプログラムをコピーしました。
実践 4 では実践 3 と同じ紐付け機能がありますが、画面で確認したように、ボタンを作成し、別画面で紐付けを行うため、
実践 1.2 と同じ、テーブルが 1 つの雛型からコピーを実行します。
雛型

作成『一覧画面』

DG_140Ｒ→

DG_740R『登録画面』

DG_150U→

DG_750U②［ DG_720R_serect］
作成済をもらいました。

③［DG_751U］
画面の確認で確認したように、テーブルが 2 つあります。
テーブルが 2 つある実践 3 で作成した『登録画面（紐付け）』をコピーします。
DG_630U→

DG_751U

クライアント側の作成
Html（一覧画面を 2 段表示を作成する）➀項目名を〈div〉〈/div〉で挟んで二段表示を作成する。

※使いやすいデザインを考え上段・下段・幅を作成する。
※一覧画面作成は実践 1 と同じで続きを作成する。

Html（登録画面を 2 段表示を作成する）➀点線内を一覧と同じ様に二段表示にする。
②インプットを 2 段で作成する。
③セレクト BOX の項目名を作成する。

CSS
実践 1 と同じ

Appspec➀②セレクト BOX の項目を作成する。上段をコピーし、項目名を変更して行を追加作成します。

コントローラ
Appspec で作成したイベントをコントローラで動かします。
➀チェンジ イベント処理を作成する。
チェンジ イベント処理をコピーし、［項目名］［selectbox の数字］を作成する。
②点線部分に［parentNode］をコピペし 1 つ増やす。
（2 段表示の場合 3 つ必要になる。）［完成コントローラ］

［コピー元コントローラ］［parentNode］が一つ少ない状態。
コピー元の画面が 1 段表示の為 2 つ２段表示の画面の場合は 3 つ必要になるので忘れないように注意サーバー側の作成
データセット JSON➀Ｈｔｍｌの項目名を作成（テーブルに項目名を作成する）②Appspec で作成した項目名を作成する（ヘッダーのセレクト BOX の下へセレクト BOX を追加する。）［"comment"］項目名+選択情報を作成［"id"］項目名を作成［“record”］Appspec②で作成した項目名を作成『ＮＯ』にはセレクト BOX 内の項目の数を用意します『名』にはセレクト BOX で選択できる項目名を用意します・※『名』は画面で確認できる部分。『ＮＯ』はサーバー側でデータのやり取りは画面では見えない。

バリデーション JSON
➀実践 1 と同じ（ポスグレで文字数を確認して作成する）②セレクト BOX の項目名は文字が入らず、データセット JSON で作成した『ＮＯ』が入ります。

1 桁の数字で項目名を管理しているため、ここでは［ｍｉｎ］［ｍａｘ］ともに 1 が入ります。

※テーブルのセレクト BOX で変更が必要になるのは Html～データセット JSON・バリデーション JSON までです。
他は実践 2 と同じ手順です。

トラン JSON➀実践 1 と同じ
データセット JSON から項目名を作成する※リクエストデータ・レスポンスデータに注意

SQLJSON➀selectSQL※実践 2 と同じ
1.アウトプットの項目名をデータセットから作成する
2.ジェネレート SQL の為、［"field"］［"table"］を作成する
3.SQL の項目名を作成する

②updateSQL※実践 2 と同じ
updateSQL の構成"comment": "システム機能_入出力要素 削除処理", （紐付けボタン先用）ここでは触れません"comment": "外部システムＩ／Ｆ 削除処理","comment": "外部システムＩ／Ｆ 更新処理","comment": "外部システムＩ／Ｆ 新規処理","comment": "外部システムＩ／Ｆ 照会処理",

1.［照会処理］はアウトプットを作成する。
［更新・新規処理］はインプットの項目名を作成する。
［削除処理］は削除チェックで入る「入出力要素 NO」をインプットに作成する。
2.ジェネレート SQL の為、［"field"］［"table"］を作成する
3.SQL の項目名を作成する

Ruby※実践 2 と同じSQLJSON の before を確認し、使用している時のみ作成が必要。

検索ボタンを作成
手順

検索ボタンの作成
Appspec

コントローラトランJSONSQLJSON

Html

データセット

検索ボタン押下先
画面をつなぐ画面の確認
テーブル内に検索ボタンを作成します。
ボタンを押下すると次画面で持ってくるデータを選択し、紐付けることができます。

［次画面 紐付け選択画面］

Html
検索ボタンを作成します。
※実践 1 のボタン追加方法と同じです。
赤枠の様に［button］を作成します。

Appspec➀ボタンのイベントを作成する。

②Appspec でヘッダーの情報を引き継ぐ［引き渡し］は次画面 DG_720R_serect へヘッダーで選択している情報を引き渡す。
［引き継ぎ］は次画面で紐付けたデータを持って帰ってテーブルに表示させます。

［検索ボタン使用時のデータの流れ方］

コントローラ
追加したボタンの動きを作成する。
［ｏｎ検索］を作成する。

データセット JSON
データセットＪＳＯＮへ待って帰ってきたデータが入るように項目名を作成する。

トラン JSON
データセット JSON を参考に作成する。

SQLJSON➀セレクトＪＳＯＮ
1.アウトプットに項目を作成する。
2.ジェネレート SQL の為、［"field"］［"table"］を作成する。

3.ＳＱＬを作成する。
次画面のテーブルを［"LEFT OUTER JOIN］でくっつける。
これがＡＳ→Ｅになる為、2.で作成した［"table"］は「Ｅ」になります。

※Ｅを忘れるとＡには項目名がないためエラーになります。

②アップデートＳＱＬ
アップデートＳＱＬでも赤字の照会処理は➀と同じ作業を作成します。
updateSQL の構成"comment": "システム機能_入出力要素 削除処理", （紐付けボタン先用）ここでは触れません"comment": "外部システムＩ／Ｆ 削除処理","comment": "外部システムＩ／Ｆ 更新処理","comment": "外部システムＩ／Ｆ 新規処理","comment": "外部システムＩ／Ｆ 照会処理",

持って帰ってきたデータを表示するため（青字の処理には不要。インプットすることがないから）

紐付けボタンを作成
手順
ボタンの作成Html

コントローラAppspec

データセット

次画面の作成プログラムのコピー

クライアント側

サーバー側

次画面updateSQL作成
項目名の作成不要箇所の削除

次画面モデルRuby作成
項目名の作成プログラムの修正

画面の確認
実践 3 を作成します
違う部分はテーブル 1 は更新しず、赤枠内だけを更新するように、
実践 4 では updateSQL とモデル ruby を作成します。

［ボタンの確認］
作成中［次画面 紐付け画面］

ボタンの作成※手順は「検索ボタン作成」と同じです。
ここでは箇所の確認をします。
➀Html②Appspec③コントローラ④データセット次画面の作成（DG_751U）➀プログラムのコピー②クライアント側③サーバー側

次画面の updateSQL 作成（DG_751U）➀項目名を作成する②コピー元はテーブルが２つあり、テーブルのデータ更新と同時に紐付けができた
このプログラムは紐付けデータだけを更新したい為
テーブルのデータを更新してしまう updateSQL の不要部分を削除します。
工事中

次画面モデル ruby の作成（DG_751U）
工事中