変更履歴

2025/05/28 生成したApp内のMenuにつくアイコンが自動的に選択される件について追記した

Release Notes

Create Apps Using Your Own Theme: Mentor now detects the theme name from the prompt or requirements document and applies it to the generated app automatically.
Guidelines: Ensure your theme has the layout property of "blocks" filled in and that the chosen layout has the following placeholders: Header, Breadcrumbs, Title, Actions, and MainContent

書いてあることは概ね、以下の通り。

プロンプト中のTheme名を検出し、生成されるAppに適用してくれる
ガイドライン
- ThemeのBlocks > Layoutプロパティが指定されていること
- プロパティで指定されたLayout Blockは、Header、Breadcrumbs、Title、 Actions、MainContentという名前のPlaceholderを持っていること

暗黙の条件として、ThemeとLayout BlockはLibraryに作り、Public=Yesに設定する必要があるだろう。

テスト用のThemeを用意する

Library内に以下のようなThemeを用意した。

重要なのは

ThemeのPublic=Yesにする
Blocks > Layoutでレイアウトブロックを設定しておく
↑により、レイアウトブロックもPublic=Yesにしておく
レイアウトブロックには、Placeholderとして、Header、Breadcrumbs、Title、 Actions、MainContentを配置しておく
指定したThemeが適用されたことを確認するため、以下のCSSを設定してある

.AppGenTest
{
    font-size: 32px;
    color: red;
}

以下のレイアウトブロックをThemeのLayoutに設定しておく。
「生成AI機能テスト」という赤い文字列は、このレイアウトとThemeが適用されたことを確認するために配置してある（.AppGenTest classを利用しているので、Themeが適用されていれば文字色が赤くなり、フォントサイズも大きくなる）。

生成AI

プロンプト自体は、

で使ったものを流用。先頭に使用するThemeを指定する分を追加した。

ThemeとしてJunjiWatanabeTestThemeを使うこと。

○概要
本システムは、日本企業における多様な在庫管理ニーズに対応し、効率的な在庫管理と業務プロセス改善を支援することを目的とする。入庫・出庫・在庫照会・棚卸といった基本機能に加え、発注管理・購買管理・製造管理との連携を可能とする。

○主要データエンティティ
* 商品: 商品コード、商品名、規格、JANコード、保管場所、在庫数、発注点、安全在庫数など
* 倉庫: 倉庫コード、倉庫名、所在地、担当者など
* 入庫: 入庫伝票番号、入庫日、入荷先、商品、数量など
* 出庫: 出庫伝票番号、出庫日、出荷先、商品、数量など
* 発注: 発注伝票番号、発注日、発注先、商品、数量など
* 棚卸: 棚卸日、棚卸担当者、商品、数量（実在庫数）、差異数など

○主要ペルソナ
* 倉庫担当者: 入庫・出庫作業の記録、在庫照会、棚卸作業など
* 購買担当者: 発注処理、発注先管理、納期管理など
* 経理担当者: 在庫金額管理、会計システム連携など
* 経営者: 在庫状況の把握、経営判断材料としての活用など

このプロンプトを入力してAppを生成する。
AppGenのUIは普通に使った時と同じ。作り方は↑のQiita記事を参照。

生成されたAppを確認

Appと同名のTheme（InventoryManagementSystem）が作成される。これは普通に作った時と同じ。そのBase Themeとして、プロンプトで指定したThemeが使われる。

ちなみに、ThemeのLayoutプロパティで指定していたレイアウトブロックへの参照もAppに追加されている（当然だが）。

ODC Studio上でScreenを開いたところ。目印としてレイアウトブロック内に配置しておいた「生成AI機能テスト」という文字列が想定通りに配置されている。

というわけで、プロンプトに使いたいTheme名を書くだけで、生成AI機能で作成されるAppのBase Themeを指定できることを確認できた。

ODCの生成AI機能発展について

Themeをプロンプトで指定できることによって、ThemeとLayoutを共通部品として整理している企業は、生成AI機能で作るAppにもUIの統制を効かせやすくなった。

個人的には、そのこと自体よりも、こうした開発ができるということは、プロンプトで参照する要素や各種プロパティを操作できるということなので、生成AI機能の今後の可能性は広くなった気がする。
特に、プロンプトでCustom Application Templateを指定できるようにしてくれると、必要なUI・部品・ログインの仕組み等を備えたAppにできるので嬉しい。

というわけで、Mentorの生成AI機能の発展には期待しておきたい。

(2025/05/28追記）生成したAppのメニューに適当なアイコンがつくようになった

↑で生成したAppのメニューに勝手にアイコンがついていた。

アイコンは、Icon Widgetで実現されており、Iconプロパティは対象画面に合いそうなものを自動で選択しているようだ。

Release Notesにあるこれが対応する。

AI-Suggested Menu Icons: Mentor now automatically suggests Font Awesome icons for each link in your app menu, enhancing visual clarity and user experience.

App内MenuのLinkにはFont Awesomeの適当なアイコンをAIが選択して設定してくれる。