はじめに
Microsoft社が提供するローコード開発ツール「Power Platform」では、「AI Builder」を使って簡単にAIアプリを開発することができます。
今回は、下記の記事を参考に、AI Builderにより名刺の情報を解析してデータベースに保存するアプリを作ったので、その手順を詳細に残しておきます。
参考記事
作成したアプリ
今回作成したアプリは、以下のような流れでデータが保存されます。
- 名刺をアップロードする
- 名刺のテキストを認識する
- 編集可能なフィールドに出力する
- データベースに保存する
※今回使用した名刺に電話番号が含まれていないため「phone列」には誤った情報が出力されていますが、編集可能な列であるため修正してから保存することが可能です。
使用する機能
- Power Apps － アプリの操作画面を構築します
- Dataverse － 名刺のデータを保存します
- AI Builder
- テキスト認識エンジン － 名刺からテキストを抽出します
- カスタムプロンプト － 抽出したテキストをタグ付けします
Dataverse の作成
まずは、名刺のデータを保存するテーブルの作成です。
インポートする既存のデータはないので、空白のテーブルを準備します。
❶ Tables -> ❷ New Tables -> ❸ Add columns and data
次に、テーブルの名前を編集します。
デフォルトの値から適当なテーブル名に変更しましょう。
❹ 鉛筆マーク -> ❺ Display name を編集 -> Save
続いて、列を編集・追加します。
❻ New column -> ❼ Edit column -> ❽ Display name, Data type, Formatを編集 -> Update
❾ ＋ -> ❿ Display name, Data type, Formatを編集 -> Save
❾❿を繰り返して必要な列を追加し、テーブルを完成させます。
今回は、メールアドレス[email]、氏名[name]、会社[company]、部署[department]、役職[position]、住所[address]、電話番号[phone]、ウェブサイト[website]の8つを管理します。
最後に、テーブルが完成したら保存しましょう。
⓫ Create
これにて、テーブルの作成は終了です。
カスタムプロンプトの作成
次に、テキスト認識エンジンで抽出されたテキストをJSON形式に変換するためのプロンプトを作成します。
1⃣ AIハブ -> 2⃣ GPTでプロンプトを使用してテキストを作成する
プロンプトの名前をデフォルトの値から適当な名前に変更しましょう。
3⃣ プロンプトの詳細 -> 名前（名刺解析プロンプト）
続いて、プロンプトの入力を定義します。
このプロンプトはその役割から、「テキスト認識エンジンで抽出されたテキスト」を入力として与えることになります。
4⃣ 入力 -> 名前（名刺）
先ほど定義した入力を挿入して以下のようなプロンプトを書き、保存します。
5⃣ 挿入 -> 6⃣ 名刺 -> 7⃣ カスタムプロンプトを保存
以下のインプット情報から情報を抽出し、以下のJSON 形式にしてください
インプット情報
/ここに入力を挿入する/
JSON {"name": "山田太郎", "company": "株式会社サンプル", "department": "マーケティング部", "position": "部長", "phone": "012-3456-7890", "email": "taro@example.com", "website": "https://www.sample.jp"}
※参考記事のプロンプトを今回作成したテーブルの形に合わせて修正したものになります
それでは、プロンプトをテストしてみます。
8⃣ サンプルデータ -> 9⃣ プロンプトのテスト
正しくJSON形式に変換することができたようです。
これにて、カスタムプロンプトの作成は終了です。
Power Apps の作成
いよいよ、アプリを作成します。
今回は空のキャンバスからアプリを作成していきます。
① Apps -> ② New Apps -> ③ Start with a design -> ④ Blank canvas
アプリを作成したら、新しい画面を追加します。
⑤ 新しい画面 -> ⑥ サイドバー
以下の画面が追加されます。
元の画面 (Screen1) は不要なので削除します。
Screen1 を選択 -> ⑦ ... -> ⑧ 削除
続いて、ヘッダーコンテナにアプリ名を挿入します。
HeadlerContainer1を選択 -> ⑨ 挿入 -> ⑩ テキスト ラベル
テキストラベルを追加したら内容を編集します。
⑪ プロパティ（テキスト、フォントサイズなど）を編集
続いて、ボトムコンテナの比率を調整します。
SidebarContainer1を選択 -> ⑫ プロパティ（部分を塗りつぶす）
これより、サイドバーコンテナとメインコンテナの比率が3:7になっていることがわかります。SidebarContaier1とMainContainer1のプロパティ（部分を塗りつぶす）をそれぞれ変更して、好みの比率にします。（ここでは1:1に変更します）
次に、テキスト認識エンジンを挿入します。
SidebarContainer1 を選択 -> ⑬ 挿入 -> ⑭ AI Builder - テキスト認識エンジン
挿入したらプロパティから横方向に拡大します。
⑮ プロパティ（拡大）を編集
次に、ボタンを挿入します。
SidebarContainer1 を選択 -> ⑯ 挿入 -> ⑰ ボタン
ボタンを編集します。
Botton1 を選択 -> ⑱ プロパティ（テキスト、中央揃え）を編集
先ほど作成したカスタムプロンプト（名刺解析プロンプト）をアプリに追加します。
⑲ データマーク -> ⑳ データの追加 -> ㉑ 名刺解析プロンプト
追加したカスタムプロンプトを使用して、ボタンを押したときの動作を追加します。
㉒ ツリービューマーク -> Button1 を選択 -> ㉓ OnSelect -> ㉔ 式を入力
// 変数gblBusinessCardJsonDataにカスタムプロンプトの出力をセット
Set(
gblBusinessCardJsonData,
// カスタムプロンプトにConcat(...)を入力してJSON形式に変換
'名刺解析プロンプト'.Predict(
// テキスト認識エンジンの出力に含まれるテキストを改行コードで結合
Concat(
TextRecognizer1.Results, // テキスト認識エンジンの出力全体
Text, // テキスト認識エンジンの出力に含まれるText型のデータ
" "&Char((10)&" ") // 改行コード
)
).Text // カスタムプロンプトの出力のデータ型
);
続いて、先ほどと同様に作成したテーブル（Business Cards）をアプリに追加します。
㉕ データマーク -> ㉖ データの追加 -> ㉗ Business Cards
テーブルの編集フォームを挿入します。
㉘ ツリービューマーク -> MainContainer1 を選択 -> ㉙ 挿入 -> ㉚ 編集フォーム
編集フォームのデータソースに先ほど追加したテーブル（Business Cards）を選択します。
㉛ Business Cards
編集フォーム（Business Cards）追加後の画面です。
編集フォームのレイアウトを編集します。
㉜ プロパティ（列）を変更（3->1）
㉝ レイアウト -> ㉞ 横
編集フォームのレイアウト編集後の画面です。
編集フォームの形式を編集から新規に変更します。
㉟ DefaultMode -> ㊱ FormMode.New（デフォルトはFormMode.Edit）
FormMode.New
編集フォームに含まれる各列の初期値を設定します。
そのためにはプロパティを変更するためにロックを解除する必要があります。
email_DataCard1 を選択 -> DataCardValue1 を選択 -> ㊲ 詳細設定を編集
抽出ボタンで設定した変数（gblBusinessCardJsonData）から各列の初期値を設定します。
㊳ Default -> ㊴ 式を入力
Text(
// 変数gblBusinessCardJsonDataをJSONデータに変換
ParseJSON(
gblBusinessCardJsonData // JSONの形をしたテキストデータ
).email // JSONからemailの値を指定
)
㊲~㊴をすべての列に設定します。
編集フォームの保存ボタンを作成します。
MainContainer1 を選択 -> ⑯~⑱ の要領で保存ボタンを作成
ボタンを押したときに編集フォームを保存する処理を追加します。
㊵ OnSelect -> ㊶ 式を入力
SubmitForm(Form1)
最後に、編集フォームの保存に成功したときに変数とフォームを初期化する設定を追加します。
Form1 を選択 -> ㊷ OnSuccess -> ㊸ 式を追加
Set(
gblBusinessCardJsonData,
"");
NewForm(Form1)
完成したら、プレビューで動かしてみましょう。
㊹ アプリのプレビュー（F5）
おわりに
今回は、Power AppsとDataverse、AI Builderを使用した、AI名刺管理アプリの作成手順を解説してみました。この記事が、Power Platformによるアプリ開発を始めるきっかけになれば幸いです。