フロントエンドのサンプルを確認する

APIをビルドすると、ワークスペースにサンプルのフロントエンドのフォルダとファイルが自動的に生成されます。この成果物をそのまま使うことも、AIの助けを借りてチームに合った画面に仕上げることもできます。

フロントエンドのサンプルフォルダ

一覧の照会、詳細の表示、作成、変更、削除を1つの画面で処理する、基本のCRUD画面です。style.cssもあわせて適用されており、すぐに使える完成した形で提供されます。

index.htmlの初期画面

ワークスペースでスクリプトがブロックされた場合は、このファイルは常に許可を押すと、スクリプトを有効にできます。

Swagger、Postman、Insomniaのように、自動生成されたAPIを画面から直接呼び出し、応答を確認できるテスト用の画面です。

test.htmlのAPIテスト画面

ファイル	用途
`style.css`	サンプル画面に共通のスタイルです。
`README.md`	APIの使い方を説明する文書です。基本のエンドポイント、一覧・入力フォームのカラム構成、各APIのリクエスト/応答のフィールド、レコードのスキーマまで整理されています。

index.htmlとstyle.cssを好きなように修正すれば、自動生成された基本の画面を、チームに合ったWebサイトに作り変えることができます。

README.mdには、テーブルの構造とAPIの仕様が詳しく整理されています。このファイルをそのままAI（Claude、ChatGPTなど）に渡せば、追加の説明がなくても、index.htmlのロジックやデザインの修正をすぐに依頼できます。

index.htmlを仕上げてチーム専用のシステムが完成したら、2つの方法で使用できます。

方法	説明
チーム内向け	ワークスペースのフォルダの中でフォルダWebビューを使って開き、チームメンバーと一緒に、内部のデータ管理画面として使用します。→ チーム内向けWebサービスを作る
外部公開用	Webspaceにデプロイして、外部に公開するサービスの画面として使用します。→ 外部公開用Webサービスを作る