【Power Apps】モバイルで請求書の写真を撮り、AI Builder で抽出した情報と写真を SharePoint リストに保存する


# はじめに

これまで色んな記事で紹介してきた通り、AI Builder では、ChatGPT や Copilot で AI に指示するプロンプトを部品化して Power Apps のアプリや Power Automate のフローから利用することができます。

例えば、請求書から情報を抽出してほしいというプロンプトを部品化して、請求書がメールで届いたら、自動で Power Automate のフローが動き出して、プロンプトを呼び出して必要な情報を抽出して SharePoint リストにデータを登録するようなことができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/d15176bf-08a0-4bf0-a6dd-b94ad1746425.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/c57ef286-feb2-4ec0-b557-4f1eda4d4999.png)

そして、要件上、モバイル向けのアプリで請求書の写真を撮ったり、ファイルをアップロードして必要な情報を読み取って、データを連携しつつ、撮った写真もファイルとして保存したいというケースもあると思います。

今回は、そのようなことをしたい際のアプローチについて説明します。

# アプローチ整理

AI Builder のプロンプトで請求書から情報を読み取って必要な情報を読み取るアプローチはいくつかあります。

一つ目は、OCR で文字を読み取り、読み取った情報をプロンプトに渡して、必要な情報を抽出する感じです。
AI Builder には標準で OCR 機能が備わっており、Power Apps では、以下の [テキスト認識エンジン] を追加するだけでアプリに OCR 機能を組み込むことができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/d88dd0d8-90ec-4279-97db-c628d81b7dea.png)

こちらを利用して、請求を読み取るアプリを Power Apps で実装すると、以下のような感じです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/4afaf02e-9f3b-45fc-baff-42e3e0a1b5c9.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/f6522211-f08d-4ba7-aba7-dc8b82d1b6c3.png)

もう一つは、OCR を介さずに、ファイルを直接アップロードするアプローチです。こちらも紹介した通り、AI Builder のプロンプトでは、直接ファイルや画像をアップロード出来るようになっています。

https://qiita.com/Takashi_Masumori/items/4abf6e330edde0a3f580

https://qiita.com/Takashi_Masumori/items/23e8d94a2f8495dbd3a2

そして、上記二つを踏まえ、モバイルの場合、その場で写真を撮り、撮った写真自体もファイルとしてアップロードすることを考慮すると、後者の方が良いと判断しました。

理由は、 フォームコントロールの添付ファイルコントロールをそのまま使うのが、SharePoint リストに添付ファイルを保存する際簡単なためです。


恐らくですが、 [テキスト認識エンジン] を利用する場合、`[OriginalImage]` プロパティを利用して、以下の記事で紹介したような方法を利用して、Power Automate にファイルの情報を渡すアプローチになると思います。

https://qiita.com/Takashi_Masumori/items/23e8d94a2f8495dbd3a2#%E3%82%A2%E3%83%97%E3%83%AD%E3%83%BC%E3%83%81

イメージとしては以下のような感じになります。

まず、フォームコントロールで AI Builder のプロンプトが請求書から抽出した情報を保存します (OCR を介した上で請求書から情報を抽出)。その後、フォームコントロールの`[OnSuccess]`プロパティで Power Automate にファイルやリストの行の ID を送信し、Power Automate 側でその行に添付ファイルを追加する感じです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/4a140763-97e9-4d2b-9082-2cb663277639.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/f352b517-72da-46f5-8507-582b68ac2f6d.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/38d01e37-0bd3-46a6-944d-1f1f5f00cd1c.png)

AI Builder のクレジットを抑えるためにこちらの方法で実装を試みるのもありだと思いますが、実装難易度が上がると思います。

# アプリ

以下のようなアプリが一番実装は簡単そうです。
まず、データソースは SharePoint リストにして、フォームコントロールの添付ファイルコントロールを使います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/a840609d-402c-4e6d-ae2c-d676a259935f.png)

添付ファイルコントロールはモバイルで利用すると以下のようにその場で写真も撮れます。そのため、その場で請求書の写真も撮れます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/0501b6ea-1b88-410c-9dcb-85a66d7d2c54.png)

そして、添付ファイルを追加した際、あらかじめ作成しておいた以下のプロンプトを呼び出すようにします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/3cf05238-e81c-4b44-99a3-9acd17096422.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/24c5288d-822e-4899-ad9d-c7641c93d291.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/3ecfaaa6-f514-44a6-9153-9cfb2ab3d820.png)

```
Set(
    gblInvoiceData,
    ParseJSON('請求書情報抽出 OCR なし'.Predict(First(DataCardValue9.Attachments).Value).Text)
);
```

そして、以下のようにプロンプトの戻り値を基にフォームの各列に代入します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/633913ad-1302-48c4-a380-45eda94ee3c7.png)

あとは `SubmitForm` するだけで、SarePoint リストに抜き取った情報および画像やファイルが添付ファイル列に格納されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/37f39197-8c4d-4965-a9e9-07d7f0677d2d.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/cba98b59-5914-414b-b365-41a1369f62c8.png)

モバイル向けであれば、この方法が一番楽だと思います。

# まとめ

Power Apps でモバイルから請求書を読み取り、SharePoint リストにデータとファイルを保存する方法を紹介しました。

現場で、モバイルで写真を撮ったりモバイルに保存されている写真をアップロードして、その写真から必要な情報を抽出して、抽出した情報と写真を合わせて保存するようなシナリオもあると思いますので、参考になれば幸いです。