Mentor 生成アプリ の構造解析

2025/03/27 OSUG Tokyo発表のスライド。
ODCのAI機能であるMentorに含まれる生成AI機能の使い方と、生成されたAppの構造解説。

Transcript

1. 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
2. 本日の内容 1. Mentorとは 2. MentorによるApp生成手順 3. 生成したAppの構造解析 4. まとめ
3. 1. Mentorとは
4. ODCでのAI利用をざっくり整理すると 1. Appそのもの生成する ◦ Mentorの生成AI機能 2. 開発をAIで支援する ◦ Mentorの静的解析や、コード補完機能 ◦ 生成AIでODC周辺開発（CSS・JavaScript・C#）を行う、調査を支援してもらう ◦ 生成AIでテストケース・テストデータ作成をしてもらう 3. 外部のAIサービスに接続して利用する ◦ MentorのAI Agent Builder ◦ その他様々なベンダーが提供している外部APIにアクセスする 本日のテーマ
5. Mentor：ODCのAI関連機能をまとめたもの 2024年10月のONEで、既存のAI機能に生成AIを加え、統合されたのが「Mentor」。 以下のような機能を含んでいる。 1. 自然言語のプロンプトから、Appそのもの生成する 2. 静的解析 3. ODC Studio内のコード補完機能 4. AI Agent Builder 本日のテーマ
6. 結論を先に言うと…… • （2025/03時点の）Mentorの生成AI機能：プロンプトから、 EntityやRoleに該当する概念を抽出し、CRUD用のScreenと Actionを追加したAppを生成する • 現時点ではプロトタイプかデモ用途向け • GAになったばかりなので今後の発展に期待
7. 2. MentorによるApp生成手順
8. 2-1. プロンプトを準備 • プロンプトとは、生成AIに対してやって欲しいこと（指示）や質問のこと • プロンプトは500文字までで、試したところ、日本語も使用可能 • 動作確認が目的で、自分で考えるのが面倒なら、Gemini等の一般の生成 AIに作ってもらうとよい • プロンプト生成用のプロンプト例 ◦ 「標準的な日本企業向けの、在庫管理システムの仕様案を作成してください 仕様案は、3-5行程度の概要と、主要なデータエンティティ及び主要ペルソナのリス トで構成してください。」
9. 2-1. プロンプトを準備（Prompt best practices） • プロンプト入力画面のポップアップによると、以下のようなプロンプトが良 いらしい • 抽象度の高い概念的な記述 ◦ Appの目的、主要なデータとその属性、主要なロールと権限 ◦ 前スライドのプロンプト例はこの推奨に従って作った • 画像や図は入力しても分析対象外 • モバイルAppは作れない • 複雑なユースケースやロジックには対応できない
10. 2-1. プロンプトを準備（例） ◦概要 本システムは、日本企業における多様な在庫管理ニーズに対応し、効率的な在庫管理と業務プロセス改善を支援することを目的とする。 入庫・出庫・在庫照会・棚卸といった基本機能に加え、発注管理・購買管理・製造管理との連携を可能とする。 ◦主要データエンティティ * 商品: 商品コード、商品名、規格、JANコード、保管場所、在庫数、発注点、安全在庫数など * 倉庫: 倉庫コード、倉庫名、所在地、担当者など * 入庫: 入庫伝票番号、入庫日、入荷先、商品、数量など * 出庫: 出庫伝票番号、出庫日、出荷先、商品、数量など * 発注: 発注伝票番号、発注日、発注先、商品、数量など * 棚卸: 棚卸日、棚卸担当者、商品、数量（実在庫数）、差異数など ◦主要ペルソナ * 倉庫担当者: 入庫・出庫作業の記録、在庫照会、棚卸作業など * 購買担当者: 発注処理、発注先管理、納期管理など * 経理担当者: 在庫金額管理、会計システム連携など * 経営者: 在庫状況の把握、経営判断材料としての活用など
11. 2-2. Mentorを開く • ODC Portal > Appsを開く • 右上の「Create」ボタンを展開 • 「With Mentor」を選択
12. 2-3. プロンプト入力 • 2-1で用意したプロンプトを、赤 枠部分に入力 • 青枠で囲んだ「prompts」のリ ンクをクリックすると、「2-1. プロ ンプトを準備（Prompt best practices）」の内容を示すポ ップアップが表示される
13. 2-4. プロンプトから抽出したEntityとRoleを確認し、Appを生成 • EntityとRoleは、追加・更新・削除ができる • 日本語のプロンプトでも、適当な名前を選択してくれる • Generateボタンで生成
14. 2-5. 作成される要素を確認してPublish 「出庫」が「Stock Outs」にマッピング 一覧・詳細・編集画 面が作成される
15. 3. 生成したAppの構造解析
16. 3-1. Appを開く • 出来るのは普通のApp。ODC Studioから名前で検索して開く • ほぼ、標準テンプレートで作ったReactive Web Appに、プロンプトで 指定したEntityとそのCRUD画面とRoleを追加したもの • Description：Generated By AI 作成したAppのプロ パティ
17. 3-2. Entity • プロンプトから抽出され たDataがEntityとして 作成される • 他Appが公開する Entityを参照すること も可能 他Appが公開してい るEntity
18. 3-3. Role • プロンプトから抽出された RolesがそのままRoleと して作成される • 管理者用のAdminは 抽出されたRoleではな いが、作成された。文字 通り管理者Roleとして 使われる
19. 3-4. Screen・Block (1)共通部分 • 標準のReactive Web Appテンプレー トに含まれるのとほぼ同じ ◦ 標準のテンプレートに含まれるScreen の、ChangePasswordとUserProfileは 無い
20. 3-4. Screen・Block (2)業務用画面群（全体像） • 各Entity毎に、一覧、詳細、編集の三画面が生成される ◦ 一覧→詳細→編集と画面遷移する ◦ 詳細と編集を分けるのにも合理性はあるが、更新時に権限チェックすればいいだ け、AO取りすぎでは ▪ Roleの組み合わせが異なる処理は別の画面でおこなうのが、ベストプラクテ ィス • Dashboard：App内の複数Entityを一覧できる画面 • ImportData：App内の各Entityをエクスポート・インポートできる画 面 要するにCRUDがで きる画面
21. 3-4. Screen・Block (3)業務用画面群（一覧） • Entityのレコードを一 覧表示 • 機能は、Entityをドラ ッグ＆ドロップして作成 するものと変わりない • Table中のリンクをクリ ックすると詳細画面へ 遷移
22. 3-4. Screen・Block (4)業務用画面群（詳細） • Entityをドラッグ＆ドロップして作成される詳細画面とは異なる • 右下のボタンをクリックすると編集画面へ遷移。自動で作成される権限 判定Client ActionがTrueを返すユーザーにのみ表示される
23. 3-4. Screen・Block (5)業務用画面群（編集） • Entityドラッグ＆ドロップでできるFormを使っ た詳細画面とほぼ同じ • 追加・更新に加えて、ドラッグ＆ドロップで作成 される画面にはない削除機能がある
24. 3-4. Screen・Block (6)Dashboard • Entityをチャー トやTableで表 示し、全体像を 掴む画面
25. 3-4. Screen・Block (7)ImportData • Entityをインポ ート／エクスポー トするUIとバック エンドのAction 群が自動生成 される
26. 3-5. 非同期処理 • Publish時に動作する、サンプルデータ 投入用Timerのみ作成される • サンプルデータはResourcesにjsonファ イルとして登録されるものを使う
27. 3-6. Client Action • DoLogin: ログイン処理。テンプレートにある ものと同じ • ShowConfirmationMessage: JavaScriptのconfirmをラップしたもの。イ ンポート処理で使われる • Authorizationsフォルダ: 特定のEntityに 対し特定の操作を行う権限があるか判定す るAction
28. 3-7. Server Action • Authorizationsフォルダ: 特定のEntityに対し特定の操作を行う権限があるか判定する Action • ImportData向けのエクスポート／インポート用Action群 • Entityに対する追加・更新（<Entity名>CreateOrUpdate）、削除（<Entity名 >Delete）処理 ◦ AuthorizationsにあるActionを読んで権限をチェックし、権限があれば、対応するEntity Actionを呼ぶだけの シンプルなもの
29. 4. まとめ
30. まとめ（再掲） • （2025/03時点の）Mentorの生成AI機能：プロンプトから、 EntityやRoleに該当する概念を抽出し、CRUD用のScreenと Actionを追加したAppを生成する • 現時点ではプロトタイプかデモ用途向け • GAになったばかりなので今後の発展に期待 案件の概要から、 EntityとCRUD用画面 をつくり、それをもとに 要件定義するとか
31. 以上