エクセルでJAVAアプリを超簡単生成！「ワンダーロボ」入力チェック、入力不可、スタイル、表示形式の設定方法

###ステップ1.入力チェック設定
###ステップ2.入力不可設定
###ステップ3.スタイル設定
###ステップ4.表示形式設定
---
###ステップ1.入力チェック設定
最初に入力チェック設定を説明します。
[入力チェック項目]
①数字のみ
②数字+[-]
③英字のみ
④範囲指定「1～9」
⑤メール
⑥郵便番号
⑦全角文字
⑧半角文字
⑨日付
⑩英数字のみ
⑪英字と空白
⑫全て全角カナ
⑬全て半角カナ
⑭数字と[-][.]のみ
⑮数字と[.]のみ
⑯年月(YYYY/MM)
⑰月日(MMDD,MM/DD)
⑱日時
⑲時刻
⑳有効な電話番号
㉑必須
上記の21項目あります。
例として、この「社員」画面の「部門」「ログインID」「パスワード」を設定します。
<img width="1128" alt="03.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184885/af0c4bf2-5d7f-b352-44d5-6e2a2a4e69dc.png">

####1-1.画面設計書で設定
まずは、画面詳細設計で「入力チェック」を作成し、該当項目を「必須」に設定します。
<img width="1128" alt="02.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184885/25f86921-a8d5-c1b5-b771-a2e1d9d212f8.png">

####1-2.設計書ファイルをインポートして確認
SaaSForceの開発環境にログインし、設計書ファイルをインポートします。そして、利用画面で反映されているか確認します。
SaaSForceシステム===>「システム」===> 「開発設定」===> 「システム自動構築」
#####ユーザー利用画面の表示例↓
必須項目に入力をしていないで保存などをすると、エラーメッセージが出てきて、未入力欄は赤く表示されます。
<img width="1128" alt="06.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184885/ffaf580f-e4ab-ffd8-2e57-08bae3e9a56a.png">

また、下の図のように、一つの項目に複数の入力チェック設定をすることも出来ます。
<img width="1127" alt="08.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184885/17182d1b-e9f9-52cb-12b6-55a7913a4ea7.png">
<img width="1128" alt="09.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184885/6e0e58a0-23d4-c559-3531-cf35b4328efb.png">

---
###ステップ2.入力不可設定
次に、入力不可設定の説明をします。ステップ1と同じように、画面詳細設計書に記載します。
今回は、「注文管理詳細」画面を使って説明します。下の図の、赤線に囲まれた項目を入力不可に設定します。
<img width="1124" alt="10.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184885/6b7fb7f8-5621-c2a1-0661-529d88cefb5e.png">

####2-1.画面設計書で設定
画面詳細設計で「入力不可」を作成し、該当項目を記載します。
<img width="1128" alt="11.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184885/364075e6-e18e-6f52-0618-9201af12db2b.png">
####2-2.設計書ファイルをインポートして確認
ステップ1と同じように、SaaSForceの開発環境にログインし、設計書ファイルをインポートします。そして、利用画面で反映されているか確認します。
<img width="762" alt="13.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184885/9baa3bf1-83e2-370a-0417-1f961756577c.png">
---
###ステップ3.スタイル設定
次に、スタイル設定の説明をします。こちらも、画面詳細設定で記載します。該当項目を指定し、設定します。
<img width="1128" alt="14.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184885/f976505b-bb80-d72b-89e8-4666469b5ecb.png">
ここでのCSSスタイルは、事前に「スタイル設定」シートファイルをインポートしておく必要があります。「スタイル設定」に、定義されているスタイルIDが適応されます。
<img width="1128" alt="15.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184885/8ff312b8-902e-9dc2-d630-8190f9dd67c1.png">
そして、設計書ファイルをインポートして、ユーザー利用画面で反映されているか確認したら完了です。
<img width="776" alt="17.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184885/5cbbfee9-6815-c249-0005-b44dfdc9ac82.png">
---
###ステップ4.表示形式設定
最後に、表示形式の説明をします。表示形式は数字、日付などの表示形式を設定します。今回も、画面設計書で設定します。
[表示形式のスタイル例]
数字:###,###,##0
日付:yyyy/MM/dd
日時:yyyy/MM/dd HH:mm
時刻:HH:mm
メール:xx@xx.xxx

####4-1.例として、「入金管理詳細」画面で説明します。赤線で囲まれた項目の表示形式を、設定します。
<img width="1128" alt="19.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184885/d0cca9d7-4b4a-e504-b715-c9a4f50b8d07.png">

####4-2.画面設計書で設定
先ほどのスタイル例を参考に、該当項目を記載します.
<img width="1128" alt="21.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184885/2dfb9816-8881-1f7d-2ca4-12d3198ee9b9.png">

####4-3.計書ファイルをインポートして確認
SaaSForceの開発環境にログインし、設計書ファイルをインポートします。そして、利用画面で反映されているか確認して完了です。
<img width="1128" alt="18.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184885/79d2c873-1d15-805d-5eb0-8d947423ec37.png">