本文へ移動
Wagby11
マニュアルのグループを選ぶ

WAGBY11 MANUAL / 01

AIへの指示からアプリケーションを作る流れ

要望を伝え、設計情報を作成し、生成した画面を確かめながら育てる開発の流れを説明します。

最終更新日:

はじめにの小目次へ

1. このページで伝える機能

Wagby11の開発は、要望を伝える → AppSchemaを作る・変更する → 生成する → 画面で確認するという流れで進めます。一度にすべてを完成させず、小さな変更を実際の画面で確かめていきます。

このページでは、顧客管理を題材にAIとの作業の分担を説明します。各ツールの詳しい操作説明は、補足編で扱います。

2. Wagby11で実現できること

  1. 実現したいことを伝える。 管理するデータ、利用者、必要な操作、入力のルールをAIへ伝えます。
  2. AIが設計情報を作成する。 既存の定義を確認し、必要なモデル、権限、検索・一覧、メニューを追加します。
  3. 検証・コード生成を行う。 設計情報の検証に成功したら、REST APIとWeb UIを起動します。AppSchemaを変更しただけでは、起動中の画面は更新されません。
  4. 生成した画面で確認する。 メニューから顧客検索を開き、登録・検索・必須チェックを試します。
  5. 変更点を具体的に伝える。 「担当者名を一覧にも表示したい」など、画面を見て分かった変更を依頼し、再生成・確認を繰り返します。
顧客管理の分類内に顧客検索への入口が表示されたメニュー画面
メニューにも設計情報が反映されます。「顧客管理」から「顧客検索」を開けます。

画面の見た目だけでなく、保存した値を検索して確認します。必須項目を空にしたときに保存できないことなど、入力ルールも確認対象です。

再生成した変更が画面へ反映されない場合は、定義の反映状況から編集先・生成先・起動先を確認できます。

3. AIへの指示例

最小限の指示例

顧客名を登録・検索できるアプリケーションを作り、画面で確認できるようにしてください。

AIは、必要なモデル・項目・権限・メニューや、生成・起動の進め方を資料と既存の設計情報から類推して補います。提案や生成した画面を確認し、要望との違いを伝えて調整します。

より詳細な指示例

最初に開発の前提を伝える

このWagby11インストールフォルダのREADME.mdとHOWTODEV.mdを読み、開発手順を確認してください。
AppSchemaのguideを読み、必要に応じてreferenceを参照してください。
既存のシステムモデルや設計情報を残し、変更内容を説明してください。
顧客名を登録・検索できる顧客管理を、標準機能で作成してください。
設計情報の検証・コード生成・起動・動作確認まで行い、結果を報告してください。
画面に対応する一般利用者向け操作マニュアルも追加してください。

画面を確認して変更を依頼する

顧客管理に「担当者名」と「電話番号」を追加してください。
どちらも任意入力とし、登録・更新・詳細画面と検索結果の一覧に表示してください。
既存の顧客名の必須チェックと顧客IDの自動採番は維持してください。
再生成後に、追加した値が登録・検索できることを確認してください。

AIがファイルを編集するには、お使いのAI開発ツールでWagby11インストールフォルダへの読み書きを許可しておきます。画面例と同じアプリケーションを一度に作る指示は、次のページに掲載します。

4. 編集されるAppSchemaの例

後から担当者名と電話番号を追加するときは、顧客モデルの項目と検索結果の一覧定義が変更されます。以下は変更箇所の抜粋です。既存の顧客ID・顧客名・権限などと合わせて管理します。

# entity.attributes に追加する項目
- name: 担当者名
  name_en: contactName
  type: string
  length: 100
- name: 電話番号
  name_en: telephone
  type: string
  length: 30
# functions 内の顧客検索の一覧定義
list:
  - name_en: customerId
  - name_en: customerName
  - name_en: contactName
  - name_en: telephone

AIに依頼するのは「どの項目をどこで使いたいか」です。利用者がこの構文を手で書くことは前提にしません。

5. 参考資料

開発の始め方
README.html
guide:ファイル構成
designer/docs/appschema/html/guide/01-project/02-file-organization.html
guide:モデルを作成する
designer/docs/appschema/html/guide/03-model/01-create-model.html
reference:functions
designer/docs/appschema/html/reference/09-functions.html