Webソースの自動生成【基本編】

TemPlat Consoleでは、ERDの情報からWeb画面用のソースを自動生成することができるようになりました。現在自動生成されるのは、テーブル単位での一覧画面、編集画面になります。

画面イメージ

まずは自動生成される画面のイメージを共有します。例としているのは商品やセミナーとかを予約販売するような機能ですが、内容はあくまでもサンプルとして捉えてください。

トップページ

トップページは各テーブルの一覧画面へのリンク一覧となっています。いわゆるダッシュボード的なイメージです。トップページはNuxt Routerの設定で特定のテーブルの一覧画面にすることもできます。

またサイドメニューにも各テーブルの一覧画面へのリンク一覧が作成されます。サイドメニューはすべての画面で表示可能になっているので、どの画面からの他のテーブルの一覧画面に遷移できるようにしています。

一覧ページ

各テーブル単位の一覧

各画面でできること

一覧画面

一覧画面は現在はテーブル形式で出力しています。カード形式(トップページと同じようなレイアウト)も用意していますので、少ししたら選択できるようにします。

テーブル形式では、デフォルトでは以下のデータ型のフィールドはすべて一覧表示するようになっています。以下の商品の例のようにフィールドが少ないといいですが、多いと横長になってしまうので、後で説明する方法で一覧に表示するフィールドを絞ってください。

【一覧表示されるフィールド】

文字列、数値、日時の型

【表示されないフィールド】

Struct、テキストエリア(後述するフィールド毎の設定で設定した場合)

一覧の検索

一覧画面の上の部分に虫眼鏡アイコンがありますが、ここをクリックすると一覧の検索(絞り込み)ができます。初期表示は全件を10行づつページングして表示するようになっています。

虫眼鏡アイコンクリックすると以下ような検索条件を入力できるダイアログが表示されます。ここに検索条件を設定して「検索」ボタンを押すと一覧が絞り込まれます。

ここでは商品名を入力しています。注意頂きたいのは、データベースに「Datastore」を利用している場合、基本KVS(キーバリューストア)なので、部分一致検索はそのままではできません。基本は一致検索です。ですので、上記検索条件も商品名が「FUN DIVE」と一致する商品だけがヒットします。

新規追加

新規登録のする場合は、テーブルの右上のプラスボタン押すことで、登録用のダイアログが表示されます。必要項目入力して保存ボタンで新しいレコードが登録されます。

更新

基本は新規追加と同じです。一覧表示された右端の鉛筆アイコンを押すと、編集用のダイアログが表示されます。必要な修正をして保存で更新されます。

削除

削除は一覧画面からも更新画面からもできます。一覧からの場合は一覧の右端にあるゴミ箱アイコンから削除できる仕様です。

更新画面の場合はには、ダイアログ表示されたフッター部分に削除ボタンが用意されています。

自動生成のやり方

【基本】対象テーブルを決めて出力する

一番シンプルに自動生成する場合には、ERDを作成後に、「Web Screens」で画面ソースを出力したいテーブルを選択してビルドするだけです。以下に簡単に流れを説明します。

まずERDを作成しておくのは必須となります。ERDを作成したらサーバコード(API)のビルドも先にしておくとWeb画面動かしたときにすぐにAPI連携できるのでスムーズに進められると思います。

ERD作成時のポイントとしては、テーブルやフィールド毎に設定できるコメントを入力しておくことです。このコメントが画面ソース生成する際のラベル名として使われます。

ERDの作成ができたら、プロジェクトのトップページに移動して「Web Screens」の設定をします。

Web画面設定の画面に移動すると、ERDで定義したテーブルの一覧が表示されます。ここで、画面ソースを生成したいテーブルのスイッチをONにして保存します。

これで設定は終了です。この後、再度プロジェクトトップページから「Build」画面に移動します。

ビルド画面へ移動したら一番下に「Webクライアントビルド」の項目があるので、ここからビルドを実施します。

ビルドするにあたっての必須項目はありませんが、「git commitコメント」を入れておいたほうが後で履歴見たときにどこまで実施したか思い出しやすいです。

ビルドが完了すると、GCPのソースリポジトリにWeb画面のソースが生成されます。TemPlat Consoleにプロジェクトトップにソースリポジトリへのリンクがありますので、そこから確認ください。

「プロジェクト名-web」という名前のリポジトリがWeb画面ソース用のリポジトリになっています。

リポジトリを開くと、Nuxt.jsベースのWeb画面のソースプロジェクトが作成されていると思います。以下の例はテスト用に何度もビルドしているので履歴が沢山あります。なお、Web画面のビルドでは毎回全ソースを上書きするようになっていますので、生成したソースに手を入れた後に再度ビルドをすると、ソースが上書きされますので注意してください。この辺りの注意点はこの後の章で補足していきます。

また、Web画面のビルドでは「初期プロジェクト作成」と「テーブル単位でのソース生成」をそれぞれ別のコミットとしてソースを組み立てていく為、1回のビルドで1(初期)+テーブル数のコミットがされるのでご注意ください。

ソース生成できていることを確認したら、このソースを開発環境にcloneして動かすことができます。

なお、現時点ではWeb画面の自動でのGCP(Google App Engine)へのデプロイまでは未対応ですが、近々で自動デプロイまで対応予定です。

cloneが終わったら、プロジェクトルートディレクトリでconsole(Windowsならコマンドプロンプト、MacならTerminal)を開いて、以下のyarnコマンドで開発環境でWeb画面を動かすことができます。

$ yarn install
$ yarn dev

上記で起動終わったら、
http://localhost:3000/
へアクセスするとトップ画面が表示されるはずです。
※他のプログラムがポート番号3000番を利用している場合には他のポート番号が使用されます。yarn devした際にポート番号含んだリンクがconsoleに出力されると思いますので、そのURLでアクセスしてください。

ローカルでの動作確認できたら、GCP(Google App Engine)へWeb画面のソースをデプロイします。こちらもyarnコマンドとして用意していますので、そのコマンドを実行してください。

$ yarn deploy

【応用】テーブルのフィールド単位の設定(別ページ)

一覧と編集画面(新規・更新)に表示するフィールドを選択することができます。

また一部フィールドの型によっては検索条件の設定と、入力方法を変更することができます。現在は以下の2種類に対応しています。

テキスト入力の複数行対応(テキストエリア)

編集画面でテキスト入力する際に複数行入力(テキストエリア)に切り替えることができます。

日付・時刻検索時の範囲指定検索

日付や時刻を検索する場合に期間指定(FromとToを指定する)することができます。

ここまで説明が長くなりあましたので、こちらは別ページで解説致します。

Webソースの自動生成【応用編】

自動生成されたWebアプリのソースを修正する方法(別ページ)

Web画面に関しては、要件が様々だと思いますので、この自動生成されたソースをそのまま使えるシーンは少ないかと思います。そのようなソース修正の説明を以下のページで説明していきます。

自動生成されたWebアプリのソースを修正する方法(作成中)