一覧画面の作成「『一覧画面』を作成する方法。例に『サービス一覧』を作成します。」「サービス一覧画面を作成しながら、基本の一覧画面プログラムの作成手順を理解する。
プログラムのコピー、クライアント側で項目の作成、サーバー側のJSON作成を行う。
今後作成するプログラムの一覧画面はこの手順を使います。」
手順確認•画面の確認•ER図の確認•プログラムのコピー作成

クライアント側

サーバー側

•Html

•データセットJSON•CSS•バリデーションJSON•Appspec•トランJSON•SQLJSON•Ruby

1.画面の確認
2.ER図を確認し、画面を決める
3.プログラムをコピーする
4.ＨＴＭＬを作成する
5.ＣＳＳを作成する
6.Appspecを作成する
7.データセットJSONを作成する
8.バリデェーションJSONを作成する
9.トランJSONの作成をする
10.SQLJSONを作成する
11.rubyを使用する場合はserverのrubyを作成する
12.コピー元と違う操作があるときの作成をする

画面の確認「『サービス一覧画面』を作成します。プログラム名「DG_160R」を作成します。」

ER図の確認「右枠線の中のサービステーブルが『サービス一覧』画面になります。
左枠線のシステム機能テーブル（雛型）が似ているのでコピーして、項目名を変えて作成します。
項目名はテーブル内のレコードを表示できるように作ります。」

雛型のDG_140RをコピーしてDG_160Rを作成します。
※プログラム名は画面のHTMLを確認すると記載があります。「Rmenu基礎」で確認可。

プログラムをコピーする［手順］①workshopへ②Rubyを開く③コマンドプロント④フォルダーをで実行移動させ完成フォルダーコピー①コピー元プログラムのフォルダーとＷｏｒｋｓｈｏｐフォルダーを開く「はじめにWorkshopを開く」［Ｗｏｒｋｓｈｏｐフォルダーの場所↓］「コピー元プログラムのフォルダーとＷｏｒｋｓｈｏｐフォルダーの2つのウィンドウを開く、コピー元フォルダーをＷｏｒｋｓｈｏｐフォルダーへコピペする。」※htmlはhtmlへ

jsonはjsonへ

serverはserverへ

3回同じ様にコピペする

②ProgramConvert.rbを開き、変更指示を書く「WorkShop内にProgramConvert.rbがある。プロブラム名の変更をしてくれるRubyです。」「ProgramConvert.rbを開き、最下部に指示を記入する。
コピー元プログラム名と新プログラム名を入力し、上書き保存して閉じる。」③コマンドプロントでrubyを実行する「コマンドプロンプトを開き、［cdの後にProgramConvert.rbの場所］を入力する。
［ruby ProgramConvert.rb］を入力しエンターでRubyを実行する。」④Ｗｏｒｋｓｈｏｐにできた新しいプログラムを所定の場所へ移動させて完成「Ｗｏｒｋｓｈｏｐの各フォルダーにコピペしたプログラムの名前が変更されているので、コピペしたときと同じように、各フォルダーへ移動させてるとプログラムのコピーが完成する。」

クライアント側
Htmlを作成する［手順］①タイトルを作成④セレクトBOXを作成②テーブルの項目名を作
成⑤ワイド（幅）を作成

タイトル → title

ボタン → ヘッダー
セレクトBOX selectbox →メインテーブル maintable →ディティール③ボタンの作成⑥日付けの変更

①タイトルを作成する「Htmlを開き、タイトルから作成します。青枠のタイトルを作成する箇所は2か所あります。
コピー元の旧タイトルが書かれているので、そこを新プログラムのタイトルに変更します。」［Html］②項目名を作成する「ER図を確認してテーブルの項目名を作成します。
ER図の項目名に注意します。ER図の項目名は半角小文字のルールで作成されています。
RmenuはJSONの項目名でデータを流します。JSONの項目名作成のルールは全角大文字です。
画面に表示する項目名/JSONの項目名/ER図の項目名の3種類に注意して作成します。」
画面に表示する項目名

JSONの項目名

ER図の項目名

全角/自由

全角/大文字

半角/小文字「ER図の『サービスid』は画面では『サービスＩＤ』で表示する。
ＪＳＯＮでは『サービスＩＤ』で統一して項目名を作成しデータを流す。
ＳＱＬで『サービスid』と『サービスＩＤ』の項目名を一致させデータを持ってくる。」［ER図］

1.「ER図を確認して項目名を決める。」［画面］

2.「項目名を確認したらHtmlを開き、ディティールの青枠の項目名を作成します。
サブシステムと管理単位はコピー元と同じなのでそのままにします。」

③ボタンの作成「上部のボタンを作成します。
このボタンは他の画面へ移動するボタンです（ショートカットキーみたい）
サービス一覧に関係のあるボタンが必要になります。
作成時はER図のリレーションがどのテーブルへ出ているのかを確認し、ボタンを作成します。」
［画面］

［ER図］

［Html］「青枠の項目名を作成してボタン作成のHtml作成は完了。
ボタンを押下した時の動作はAppspecで設定し、コントローラで動かします。」※項目名を書く場所は1項目につき3か所あるので忘れないように注意。

④セレクトBOXの確認「一覧画面を開いたときに、データは表示されていません。セレクトBOXで選択されてから条件に該当したデータが表示されます。この画面はサブシステムと管理単位の2つの条件が選択され、2つの条件をもとにデータが検索され、メインテーブルに表示されます。」［画面］［画面拡大］［Html］※「この画面はコピー元と同じなので作成箇所はありません。」

⑤ワイド（幅）を作成「メインテーブルの幅を作成します。項目の数や登録されるデータの量によって、幅が変わります。
項目の数は目視確認できますが、登録されるデータの量がわからないので、ポスグレを開き、項目のレコードに何文字まで登録可能になっているのかを確認して幅を決めます。」
1.「ポスグレで文字数を確認し幅を決める。」

2.「青枠内の数字を変えて幅を調整します。上段と下段は同じ数字が入ります。」［Html］

⑥日付けの変更「Htmlの上部の日付けを変更すること。※変更を忘れるとCSSやviewの変更が反映しない為。
日付けを変更することで読み込みをし直すのでキャッシュクリアをしなくても新しい状態で動作することができる。（CSSやviewを変更したときは必ず行うこと。）」［Html］※黄色の日付けを本日に変更する

CSSを作成する「Htmlで設定した幅を合計して、CSSの幅を設定する。テーブル全体の幅を作成します。」①ワイド（幅）を作成
1.「Htmlを開き、青枠内の幅を合計する」［Html］

2.「CSSを開き、Htmlの合計を青枠へ入力する。」※スクロールパターンは次のページ※Hｔｍｌの合計幅にプラス2ｐｘすると渕もきれいに出る※CSSを変更したら、Htmlの日付けを必ず変更すること。

②スクロールバーについて「スクロールバー付きのメインテーブルはDG_170Uの登録画面を例に学習します。」
1.「メインテーブルにスクロールバーがある画面パターンを確認」

2.「メインテーブルの項目名が書かれたヘッダー部分はスクロールしず、固定するために、上下分かれたHtml構造になります。そのため下部テーブルだけにスクロールの幅を作成します。」

3.「画面拡大の図でスクロールバーの幅を確認できます。
CSSでDtableのwidthへ17ｐｘプラスして作成します。」

4.「CSSもHtmlと同じようにヘッダーとディティールテーブルに分かれているためディティールテーブルにはスクロール幅を17ｐｘプラスしてテーブルの幅を作成する。」［CSS］←「Htmlの合計1300ｐｘを作成」←「Htmlの合計にプラス17ｐｘした1317ｐｘを作成」

Appspecを作成する「Appspecでボタンの動き・イベントの設定を作成します。
コピー元と違う操作があるときはまとめて後で確認します。」①ネクストネーム②イベントの作成③セレクトBOXのその他は、12.コピーの作成

（ボタン）

記述確認

元と違う操作時へ①ネクストネームの作成「ネクストネームで次のページのプログラム名を作成します。」「このプログラムの次のページはDG_170Uなので［DG_170U］を作成します。」［Appspec］②イベントの作成（ボタン）「ボタンの作成をする。コピー元と違う部分の青枠内の項目名を作成します。」
ボタンが増えた時は、行をコピペし項目名を作成する。減った時は該当の行を削除する。」

③セレクトBOXの記述確認「セレクトBOXの作成はコピー元と同じなので、そのまま使用します。」※変更があるパターンは「12.コピー元と違う操作があるときの作成をする」へ作成方法記載。

「セレクトBOXはクリックすると条件が表示されます。
この条件はDBから取得され表示されています。（DBから項目名を取得しないパターンもある）
指定された条件をもとに、テーブルにデータが表示されます。」「・選択された条件を次のページへ引き継ぐ仕組み
・次のページで条件を変更したときに、現ページへ戻った時も同じ条件を引き継げる仕組み
をAppspecで設定し、コントローラとモデルで動かします。」※コントローラとモデルは共通プログラムmixinにありますので触りません。

1.「画面と動きを確認します。」「2つの条件が選択されると、テーブルに該当データが表示される。」

2.「Appspecを開き、セレクトBOXを確認します。」

3.「条件が入力された時の確認」

4.「次画面への引き継ぎと、戻ってきた時の条件の引き継ぎ内容を作成している。」

5.「セレクトボックスの定義。selectbox1とselectbox2を作成している。」

サーバー側データセットJSONを作成する①Ｈｔｍｌの項目名を作成②その他の項目名を作成③SQLの項目名を作成「データセットは項目名のデータを入れる箱みたいなもの。
画面に見えている項目はもちろん必要ですが、画面に見えていない、データを取得するために使う項目名もデータセットに用意します。」①Ｈｔｍｌの項目名を作成する「まずはHtmlで作成した項目名をデータセットに作成します。」（テキストをそのまま表示）

①Appspecの項目名を作成する「Appspecで使用している項目名を作成します。」
例：セレクトBOXの項目（画面に見えていないサブシステムNOがデータセットに必要です）

②SQLの項目名を作成する。
「SQLでデータ取得に必要な項目名を作成します。」
例：プロセス要素NO

バリデェーションJSONを作成する「validation.jsonは画面から入力されたデータをチェックする役割。
一覧画面で入力される項目はヘッダーの検索条件です。ヘッダーの項目のチェックが必要になります。
一覧画面はコピー元同じの為、そのまま使用する。Comment:のタイトル名だけ変更する。」［画面］「コピー元プログラム名［業務機能一覧］を［サービス一覧］へ変更する」［validation.json］

トランJSONを作成する「トランJSONはリクエストデータ/レスポンスデータを運ぶ役割がある。」「トランJSONは複数あります。各プログラムごとにあります。
この画面には「init_tran」「initfirst_tran」「selectmaintable_tran」の3つがあります。
各プログラムは動く順番が違い、それぞれの役割を実行します。」「作成する箇所はデータセットと同じで、コメントのタイトル名を作成し、各項目名を作成する。※データセットに作成した項目名を参考にする。」①comment:のプログラム名を変更する。
「コピー元プログラム名［業務機能一覧］を［サービス一覧］へ変更する」［tran.json］②各項目名を作成する。
「データセットに作成した項目名を参考に作成する。」［tran.json］

SQLJSONを作成する［手順］①アウトプットを作成②SQLを作成

項目名チェック•トランJSONの項目名•freesql•ASの変換に注意を参考に作成する•ジェネレートsql•typeの変換に注意「SQLJSONもトランJSONと同じで複数あります。各プログラムごとにあり、この画面には「init_sql」「initfirst_sql」「selectmaintable_sql」の3つがあります。
各プログラムは動く順番が違い、それぞれの役割を実行します。」「一覧画面のSQLJSONはselectSQLJSONが動き、DBから条件に合ったデータを持ってきます。」「selectSQLを作成します。（※他はコピー元と同じの為コメントの変更のみ。）」［全体］①アウトプットの項目名を作成する「トランの項目名とSQLJSONのアウトプットの項目名が揃うように項目名を作成します。」
1.赤枠のidを確認して青枠のSQLのアウトプットへ項目名を作成する。
※例はディティールです。ヘッダーはコピー元と同じの為そのまま使用。

②セレクトSQLを作成する「下記はdetail部分のselectSQLです。※赤枠内を確認するとわかります。
最下部にアウトプットがあります。アウトプットに作成した項目名がDBから持ってこれるように、SQL分を作成します。FleeSQLとジェネレートSQLでは書き方が変わるので注意します。」
1.「freesqlの場合：アウトプットの項目名を確認して［AS］から作成する」

2.「SELRCT文はER図を確認して［DBの項目名］を記入します。」

3.「FROMの作成。」「上記の項目がER図から取れるように、FROMのテーブルを作成します。」※注意「項目名「概要」は幅を作成するときに確認したように、登録の文字数が多くなります。
次画面の登録画面ではテキストエリアという入力スペースで作成します。
テキストエリアは入力スペースで改行が行えます。改行して登録されたデータを、改行ありで表示するためにSQL分で下記の文法が必要になります。」※忘れると改行されずにデータ表示がられます。

rubyを作成する［手順］①Ruby使用の有無確認②変更箇所の確認「SQLでserver内のRubyを使用する場合、Rubyの修正が必要になります。」①Ruby使用の有無確認「Rubyの使用の確認はsqljsonの記述を確認します。
黄色のマークのbeforeに記述がある場合は、Rubyが使用されており、どのRubyを使用しているかが書かれています。※sqljsonに書かれているRubyはモデル.rbです。」［sql.json］

②変更箇所の確認「beforeに書かれていた、「setSql_DG160ROfDrmTools」を開きます。
このプログラムを作る時に、初めにコピーを行いましたが、コンバート.rbでプログラム名の変更ができない部分があるので、プログラム名を手作業で書き換えます。」［server］を開くと、3つのrubyを確認する。

☆完成☆
「動作確認を行い、完成です。『一覧画面』のタイトルと項目名の変更が完了しました。
次は、『2.登録画面』作成へ進む。」※他操作が変わる箇所は→「12.コピー元と違う操作があるときの作成」へセレクトBOXの条件変更方法（セレクトＢＯＸ2つで動作⇒ セレクトＢＯＸ1つで動作に変更）［手順］

1.画面の確認

2.Htmlの作成

3.Appspecの作成

5.データセット

6.バリデーション

7.トランJSON

JSONの作成

JSONの作成の作成

4.コントローラの作成

8.SQLJSONの作成［プログラムの流れを確認する］「コピー元のプログラムはセレクトBOXで2つの項目を選択し、データを検索して画面に表示しているが、これは、セレクトBOXで1つの項目を選択することでデータを表示するように変更する。
セレクトBOX1つor2つなど不要箇所はＥＲ図で確認できる。」［ＥＲ図］

［作成に必要な作業］❶不要箇所の削除❷変更箇所が動作できるように処理を変更する

1.「画面の確認をする」「画面①はコピー元と同じの条件2つのセレクトBOX、画面②はコピー元と違った条件1つのセレクトBOXです。」

2.「Htmlの作成をする」「元のHtmlにある『管理単位』が2つ目の条件を選択するselectbox2の不要箇所です。
Htmlでは不要箇所を削除するだけです。」「Htmlで不要箇所を削除します。
（元Htmlの黄色部分）下の画面のピンク枠の項目がHtmlにあればOK」

3.「Appspecの不要箇所を削除する。
「黄色の［サブシステム］を残し、管理単位を削除する。Appspec①～④まで4箇所作成が必要です。」

4.「コントローラを作成する。」「コントローラを開き読み込んでいる共通プログラムを確認する。
コントローラを開き、［//ミックスインを追加する］を確認すると共通のmixinがわかります。」

4-1.「共通プログラムへ行き、動作にかかわる部分をコピーする。」「4の図の赤下線［mastermaintelist2.controller.mixin-2.1.1.js］を開きます。
削除した［管理単位］を検索し、セレクトBOXを動かしている箇所を確認します。」

「赤枠のselectbox2は不要箇所です。mixinはこのまま触りませんが、コントローラへ戻り青枠のselectbox1を使用し、selectbox1で指示が終了するようにコントローラを作成する。」

4-2.「コントローラに戻り下部にコピーした指示を張り付け修正する。」「コントローラへこのプログラム用の動きを追加する時は、Controller.include({の後に書きます。ここに追加した処理は共通のmixinの指示より上書されて実行されます。Mixinで変えたい部分をコピーして持ってきて修正し作成します。」※初めの指示は『on』の前のカンマが不要です。初めの指示以外は忘れずにつけること。
［コントローラ］☆クライアント側の作成が完了

5.「データセットJSONの作成」「青枠内の削除した項目名を削除する。」

6.「バリデーションJSONの作成」「削除した項目名を削除する。」

7.「トランJSONの作成」「セレクトトランJSONを開き、 削除した項目をトランJSONも削除する。」※リクエストデータで選択された項目をサバーへ送る。※レスポンスデータはDBから戻ってきた項目が入る。

8.「SQLJSONの作成」①トランJSONに合わせてアウトプットの項目を作成する

工事中②アウトプットの項目が出るようにSQLを作成する

ボタンの追加方法［手順］

1.画面の確認

2.Htmlの作成

3.Appspec

4.コントローラの作成

1.「画面の確認。ボタンの作成はDG_750Uに紐付けボタンを追加した手順を参考にします。
画面を確認し、クライアント側で作成します。（Html/Appspec/コントローラ）」

2.「Htmlの作成。行をコピーして貼り付け、内容を変更して作成する。
画面の管理単位の隣にシステム機能紐付けボタンを作成するため、管理単位の下に行を追加します。
青枠にボタンの幅を作成し、下の青枠へボタン［button］を作成し、ボタンの項目名を［システム機能紐付け］作成します。」［Html］

3.「Appspecの作成。Appspecでボタンの項目名を作成します。作成箇所は黄色の2か所です。」
行をコピーして貼り付け、項目名［システム機能紐付け］を作成する。※カンマの位置に注意［Appspec］

4.「コントローラの作成。コントローラで動きを作成します。
共通のプログラムにない部分は作成が必要になります。
黄色の箇所の項目名を作成し、青枠の次のページはどこなのかを作成します。［DG_751U］にします。」［コントローラ］☆完成☆
「クライアント側（Html/Appspec/コントローラ）の作成で完了。

データを扱わず画面の切り替えをするボタンの為、サーバー側は触りません。」

テキストエリアを作成する
工事中