Power App、Power Automate、AI Builder のプロンプトで名刺管理するアプリを爆速で開発する


# はじめに

名刺を管理するというソリューションは既に沢山あるという認識ですが、Power Platform と AI Builder を使うことで、簡単に作成 (データを保存、他システムに連携) することも可能です。

一例として、今回は、以下のようなアプリを爆速で開発する方法を紹介します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/b99607f1-1a7e-cd61-a70b-0fe28bed60e0.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/08e93e1f-a17d-a84d-9848-fb6656cb944a.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/117e3969-866f-2272-f503-00acadc3f34c.png)

# AI Builder でプロンプトを作成

まず、AI Builder の AI プロンプトにて、以下のようなカスタムプロンプトを作成します。名刺から抜き出したい情報をベースにプロンプトを作成します。こちらは、ChatGPT と同じ要領で作成できます。場合によってはプロンプトの案自体を ChatGPT に頼んでもいいと思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/9a1ae5b6-b10c-d671-6933-61c93d683c91.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/15813dbc-6a78-1ed8-010f-e5468ab15c21.png)

```
以下のインプット情報から情報を抽出し、JSON形式にしてください。JSON形式以外の文字を返答に含めないでください。
サンプルの情報は出力されないようにしてください。

###インプット情報
名刺情報 

###JSON形式
{
  "surname": "姓",
  "given_name": "名",
  "name": "姓名",
  "company": "会社名",
  "department": "部署",
  "position": "役職",
  "phone": "電話番号",
  "email": "メールアドレス"
}

```

この、プロンプトで情報を抽出して JSON 形式にする方法はかなり強力で、色々と応用が効きます。市民開発者の方にとって、JSON はなじみがない、ハードルが高いというケースもあると思いますが、こちらをクリアすれば、あとは、後述する Power Automate で解析してデータ連係が可能になるので、是非チャレンジしていただけたらと思っています。

# Dataverse のテーブルを作成

名刺情報を保存する Dataverse のテーブルを作成します。
こちらは、Copilot の機能を使い、自然言語ベースでサクッと作成します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/39eaaffa-6d3b-08d0-73e4-dddab9c5435c.png)

※Department の列を後で追加しました。

# Power Apps でアプリを作成

Power Apps でサクッとアプリを作ります。

まず、作成した GPT プロンプトをアプリに追加します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/c1f34ac1-9c7a-191f-ae1c-d48689a857cb.png)

以下のようにコントロールを配置し(正直、デザインはそんなにこだわっていないです。好きなデザインで作成ください)、テキスト入力コントロールの `[Value]` のプロパティを以下のようにします。こちらの式では、OCR で読み取った内容を改行しております。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/5d45e979-540e-0e88-899a-7eea8697d812.png)

```
Concat(TextRecognizer1.Results,Text," "&Char((10)&" "))
```

ボタンコントロールの`[OnSelect]`の処理を以下のようにします。作成した GPT プロンプトの結果を変数に格納します。

```
Set(
    gblBusinessCardJsonData,名刺情報抽出.Predict(TextInputCanvas1.Value).Text
);
Navigate(Screen2)
```
Screen を追加し、ボタンから Power Automate フローを呼び出すようにします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/24415c99-ac2d-f0a6-1449-b5abe8485022.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/a7ff113a-980e-07f6-8b63-cb0f9e61523c.png)

```
名刺情報保存フロー.Run(gblBusinessCardJsonData);
Notify("名刺情報を保存しました",NotificationType.Success);
```

# Power Automate でデータを保存

Power Automate 側のフローは以下のようにシンプルです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/82d241cd-aa86-8532-d210-07615e068c88.png)

JSON の解析は、Power Apps 側で生成した JSON をコピーしてサンプルとして使用するだけです。そのため、スキーマについて細かく理解していなくても大丈夫と思います。そうすることで、以下のように作成した Dataverse の各テーブルにノーコードで紐付けるだけです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/4d67a73e-71bf-aa09-bdf6-988c19de46a5.png)

これだけで、名刺を OCR で読み取り (モバイルの場合その場で写真を撮り)、読み取った情報を Dataverse に保存するアプリの完成です。

:::note
実際の業務では以下のような感じで、連絡先への登録と、Dataverse の既定の取引先企業、取引先担当者のテーブルに追加をしております。個人的にかなり助かっています。
なお、連絡先への登録は、私しかアプリ使う人がいないので、このようにしていますが、複数人が使う場合は、もう少し工夫が必要です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/1ba4febf-7dcb-59a0-7de9-f7015750ec39.png)

:::

# まとめ

今回は、Power Platform と AI Builder のプロンプトで名刺管理するアプリを爆速で開発する方法を紹介しました。もちろん、画像データを合わせて保存もできますし、JSON に変換しているため、他システムに連携することも出来ますし、名刺情報だけでなく、取引先情報を登録したり、名刺と合わせて打ち合わせの情報を登録したりすることも簡単に出来ます。

このように、AI Builder の OCR の機能と AI プロンプトを組み合わせることで、簡単に画像や pdf ファイル情報を読み取り、他システムにデータ連係することがノーコード、ローコードベースで可能になり、**市民開発者含め、多くの方にとって、可能性が大きく広がると思います。** 色々なシナリオに応用が利くため、是非参考にしていただければと思います。