Slide 1

Slide 1 text

Mentor 生成アプリ の構造解析 OutSystems東京開発者コミュニティ 2025/03/27 OutSystems MVP 渡部 潤司 : https://qiita.com/jyunji_watanabe : https://twitter.com/JyunjiW : https://www.linkedin.com/in/watanabejyunji/ Qiita X LinkedIn

Slide 2

Slide 2 text

本日の内容 1. Mentorとは 2. MentorによるApp生成手順 3. 生成したAppの構造解析 4. まとめ

Slide 3

Slide 3 text

1. Mentorとは

Slide 4

Slide 4 text

ODCでのAI利用をざっくり整理すると 1. Appそのもの生成する ○ Mentorの生成AI機能 2. 開発をAIで支援する ○ Mentorの静的解析や、コード補完機能 ○ 生成AIでODC周辺開発(CSS・JavaScript・C#)を行う、調査を支援してもらう ○ 生成AIでテストケース・テストデータ作成をしてもらう 3. 外部のAIサービスに接続して利用する ○ MentorのAI Agent Builder ○ その他様々なベンダーが提供している外部APIにアクセスする 本日のテーマ

Slide 5

Slide 5 text

Mentor:ODCのAI関連機能をまとめたもの 2024年10月のONEで、既存のAI機能に生成AIを加え、統合されたのが「Mentor」。 以下のような機能を含んでいる。 1. 自然言語のプロンプトから、Appそのもの生成する 2. 静的解析 3. ODC Studio内のコード補完機能 4. AI Agent Builder 本日のテーマ

Slide 6

Slide 6 text

結論を先に言うと…… ● (2025/03時点の)Mentorの生成AI機能:プロンプトから、 EntityやRoleに該当する概念を抽出し、CRUD用のScreenと Actionを追加したAppを生成する ● 現時点ではプロトタイプかデモ用途向け ● GAになったばかりなので今後の発展に期待

Slide 7

Slide 7 text

2. MentorによるApp生成手順

Slide 8

Slide 8 text

2-1. プロンプトを準備 ● プロンプトとは、生成AIに対してやって欲しいこと(指示)や質問のこと ● プロンプトは500文字までで、試したところ、日本語も使用可能 ● 動作確認が目的で、自分で考えるのが面倒なら、Gemini等の一般の生成 AIに作ってもらうとよい ● プロンプト生成用のプロンプト例 ○ 「標準的な日本企業向けの、在庫管理システムの仕様案を作成してください 仕様案は、3-5行程度の概要と、主要なデータエンティティ及び主要ペルソナのリス トで構成してください。」

Slide 9

Slide 9 text

2-1. プロンプトを準備(Prompt best practices) ● プロンプト入力画面のポップアップによると、以下のようなプロンプトが良 いらしい ● 抽象度の高い概念的な記述 ○ Appの目的、主要なデータとその属性、主要なロールと権限 ○ 前スライドのプロンプト例はこの推奨に従って作った ● 画像や図は入力しても分析対象外 ● モバイルAppは作れない ● 複雑なユースケースやロジックには対応できない

Slide 10

Slide 10 text

2-1. プロンプトを準備(例) ○概要 本システムは、日本企業における多様な在庫管理ニーズに対応し、効率的な在庫管理と業務プロセス改善を支援することを目的とする。 入庫・出庫・在庫照会・棚卸といった基本機能に加え、発注管理・購買管理・製造管理との連携を可能とする。 ○主要データエンティティ * 商品: 商品コード、商品名、規格、JANコード、保管場所、在庫数、発注点、安全在庫数など * 倉庫: 倉庫コード、倉庫名、所在地、担当者など * 入庫: 入庫伝票番号、入庫日、入荷先、商品、数量など * 出庫: 出庫伝票番号、出庫日、出荷先、商品、数量など * 発注: 発注伝票番号、発注日、発注先、商品、数量など * 棚卸: 棚卸日、棚卸担当者、商品、数量(実在庫数)、差異数など ○主要ペルソナ * 倉庫担当者: 入庫・出庫作業の記録、在庫照会、棚卸作業など * 購買担当者: 発注処理、発注先管理、納期管理など * 経理担当者: 在庫金額管理、会計システム連携など * 経営者: 在庫状況の把握、経営判断材料としての活用など

Slide 11

Slide 11 text

2-2. Mentorを開く ● ODC Portal > Appsを開く ● 右上の「Create」ボタンを展開 ● 「With Mentor」を選択

Slide 12

Slide 12 text

2-3. プロンプト入力 ● 2-1で用意したプロンプトを、赤 枠部分に入力 ● 青枠で囲んだ「prompts」のリ ンクをクリックすると、「2-1. プロ ンプトを準備(Prompt best practices)」の内容を示すポ ップアップが表示される

Slide 13

Slide 13 text

2-4. プロンプトから抽出したEntityとRoleを確認し、Appを生成 ● EntityとRoleは、追加・更新・削除ができる ● 日本語のプロンプトでも、適当な名前を選択してくれる ● Generateボタンで生成

Slide 14

Slide 14 text

2-5. 作成される要素を確認してPublish 「出庫」が「Stock Outs」にマッピング 一覧・詳細・編集画 面が作成される

Slide 15

Slide 15 text

3. 生成したAppの構造解析

Slide 16

Slide 16 text

3-1. Appを開く ● 出来るのは普通のApp。ODC Studioから名前で検索して開く ● ほぼ、標準テンプレートで作ったReactive Web Appに、プロンプトで 指定したEntityとそのCRUD画面とRoleを追加したもの ● Description:Generated By AI 作成したAppのプロ パティ

Slide 17

Slide 17 text

3-2. Entity ● プロンプトから抽出され たDataがEntityとして 作成される ● 他Appが公開する Entityを参照すること も可能 他Appが公開してい るEntity

Slide 18

Slide 18 text

3-3. Role ● プロンプトから抽出された RolesがそのままRoleと して作成される ● 管理者用のAdminは 抽出されたRoleではな いが、作成された。文字 通り管理者Roleとして 使われる

Slide 19

Slide 19 text

3-4. Screen・Block (1)共通部分 ● 標準のReactive Web Appテンプレー トに含まれるのとほぼ同じ ○ 標準のテンプレートに含まれるScreen の、ChangePasswordとUserProfileは 無い

Slide 20

Slide 20 text

3-4. Screen・Block (2)業務用画面群(全体像) ● 各Entity毎に、一覧、詳細、編集の三画面が生成される ○ 一覧→詳細→編集と画面遷移する ○ 詳細と編集を分けるのにも合理性はあるが、更新時に権限チェックすればいいだ け、AO取りすぎでは ■ Roleの組み合わせが異なる処理は別の画面でおこなうのが、ベストプラクテ ィス ● Dashboard:App内の複数Entityを一覧できる画面 ● ImportData:App内の各Entityをエクスポート・インポートできる画 面 要するにCRUDがで きる画面

Slide 21

Slide 21 text

3-4. Screen・Block (3)業務用画面群(一覧) ● Entityのレコードを一 覧表示 ● 機能は、Entityをドラ ッグ&ドロップして作成 するものと変わりない ● Table中のリンクをクリ ックすると詳細画面へ 遷移

Slide 22

Slide 22 text

3-4. Screen・Block (4)業務用画面群(詳細) ● Entityをドラッグ&ドロップして作成される詳細画面とは異なる ● 右下のボタンをクリックすると編集画面へ遷移。自動で作成される権限 判定Client ActionがTrueを返すユーザーにのみ表示される

Slide 23

Slide 23 text

3-4. Screen・Block (5)業務用画面群(編集) ● Entityドラッグ&ドロップでできるFormを使っ た詳細画面とほぼ同じ ● 追加・更新に加えて、ドラッグ&ドロップで作成 される画面にはない削除機能がある

Slide 24

Slide 24 text

3-4. Screen・Block (6)Dashboard ● Entityをチャー トやTableで表 示し、全体像を 掴む画面

Slide 25

Slide 25 text

3-4. Screen・Block (7)ImportData ● Entityをインポ ート/エクスポー トするUIとバック エンドのAction 群が自動生成 される

Slide 26

Slide 26 text

3-5. 非同期処理 ● Publish時に動作する、サンプルデータ 投入用Timerのみ作成される ● サンプルデータはResourcesにjsonファ イルとして登録されるものを使う

Slide 27

Slide 27 text

3-6. Client Action ● DoLogin: ログイン処理。テンプレートにある ものと同じ ● ShowConfirmationMessage: JavaScriptのconfirmをラップしたもの。イ ンポート処理で使われる ● Authorizationsフォルダ: 特定のEntityに 対し特定の操作を行う権限があるか判定す るAction

Slide 28

Slide 28 text

3-7. Server Action ● Authorizationsフォルダ: 特定のEntityに対し特定の操作を行う権限があるか判定する Action ● ImportData向けのエクスポート/インポート用Action群 ● Entityに対する追加・更新(CreateOrUpdate)、削除(Delete)処理 ○ AuthorizationsにあるActionを読んで権限をチェックし、権限があれば、対応するEntity Actionを呼ぶだけの シンプルなもの

Slide 29

Slide 29 text

4. まとめ

Slide 30

Slide 30 text

まとめ(再掲) ● (2025/03時点の)Mentorの生成AI機能:プロンプトから、 EntityやRoleに該当する概念を抽出し、CRUD用のScreenと Actionを追加したAppを生成する ● 現時点ではプロトタイプかデモ用途向け ● GAになったばかりなので今後の発展に期待 案件の概要から、 EntityとCRUD用画面 をつくり、それをもとに 要件定義するとか

Slide 31

Slide 31 text

以上