1週間で請求書を判別できるAI作りに挑戦してみた

## 月末の請求書支払いが大変！
仕事をしていると必ず関わることになるのが**請求書**ではないでしょうか。
発行をしたり支払いの処理をしたりと、業務全体の工程数も多いです。
私の働く部署も例外ではなく、月末が近づくと対応しなくてはいけない請求書が束で届きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3482672/b24e591b-398b-2bd5-35d1-075d0bda58a9.png)

請求書の量が多いと仕分けをするのも一苦労ですが、
多忙な担当者だと請求書が届いたことすら把握できていないという人もいました。

そこで、簡単に請求書の種類を判別し、支払期日や担当者をリマインドをしてくれるシステムがあれば、
情報の見落としや連携ミスがなくなるかもしれないと思ったのが作成のきっかけです。

## 作ってみた

https://twitter.com/amk193611/status/1681612255614611456

https://twitter.com/amk193611/status/1683442297416085504

請求書に見立てた付箋を画像で判別し、判別結果がLINEBotへ届きます。
LINEBotに転送される文字は、Googleスプレッドシートから抽出されています。

（追記0724）
Twitterに投稿した動画の縮尺が小さかったため修正しました！


## 使用ツール
- [Teachable Machine](https://teachablemachine.withgoogle.com/)
- [Node-RED](https://nodered.jp/docs/)
- [LINE Developers](https://developers.line.biz/ja/about/)
- [Make](https://note.com/nocode_dev/n/n4498ead35102)
- [Googleスプレッドシート](https://fujiko-san.com/blog/excel-or-spreadsheet/)

各ツールの説明はリンク先の参考資料をご覧ください。
＊MakeとLINE Developersについては私の[初投稿記事](https://qiita.com/yanxiuyonga/items/4b33a0d248178574cb8a)もぜひご覧下さい！  


## [Teachable Machine](https://teachablemachine.withgoogle.com/train)
実際の請求書が手元になかったため、わかりやすく項目分けをするために３種類の付箋で代用しました。
各付箋の写真は150枚～200枚ほど撮影し、正面だけでなく「引きの画像」や少しカメラからはみ出すくらいの大きさの写真も撮影しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3482672/99986436-803e-917c-35ee-42e9ad3a559a.png)
3種類の判別モデルがありますが、プレビュー画面では採用費請求書の判定スコアが100％になっています。

-作成過程で変更した箇所-
試作品を作成する過程で、請求書の項目名を英語に変更しました。
→日本語だと表記ゆれが起こる可能性があり、英語が推奨されるため。

## [Node-RED](https://nodered.org/)
**ノードの全体像**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3482672/84284866-7adc-8ad9-6803-460ef67730db.png)
PCのカメラによる撮影を起点に、Teachable Machineによる画像判定（機械学習）を行います。

**各ノードの設定を表示**
1. Teachable Machine
![NodeRED_説明２.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3482672/aebadf85-7785-0bda-5a48-78b202a7b2fc.png)
- URlはTeachable Machineの**共有可能なリンク**を入力する
　
1. template
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3482672/32d6b32f-3531-7bcb-6da4-0cf90fa63fe2.png)
- プロパティの後ろの「Paylord.～」～部分には、Makeと連携させた変数名を入力します。
- テンプレートは{{payload.0.class}}と入力します。
  **この時入力文字の前後に不要な空白や「」がないかチェックします。**

-作成の過程で変更した箇所のメモ-
図では「Paylord.seikyusyo」となっていますが、以降は「Paylord.shiharai」に変更しました。

1. http request
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3482672/498ee7bf-f532-f3d9-8924-1f26e6d13b0b.png)
- URLにはMakeと連携させるWebhookのURLを入力します。

## [Make](https://www.make.com/en)
**シナリオの全体像**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3482672/07645773-5b9e-efdb-2e0d-af248b8cccc8.png)

Node-REDでTeachable Machineの判定結果を受信して、スプレッドシートの文面をLINEへ送信させます。

1.Webhook
![Webhook_修正1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3482672/68c69568-202e-86f1-f8ba-aff6aad5b0fb.png)
- WebhookのURLを新規のWebブラウザに貼り付け、変数名を登録します。
- 今回の変数名は`?shiharai=`で登録しました。


2 .[Googleスプレッドシート](https://www.google.com/intl/ja_jp/sheets/about/)
![Make_説明２.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3482672/70741303-0b96-4237-7adf-89d977538c6c.png)
- Googleスプレッドシートの中身を照合します。

3.[LINE Developers](https://developers.line.biz/ja/)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3482672/605942ee-af29-004c-c9c3-98477e86fe7f.png)
- 通知用のLINEBotを作成し、LINEBotに通知されるように変数を登録します。

## 本来作りたかったモデル
今回は勉強不足で実施できなかったのですが、今後は下記の流れに変更しレベルアップできたらなと思っています。

1. Webカメラで請求書の画像を撮影
2. Googleスプレッドシートに写真の撮影日と資料名が記録され、LINE経由でリマインドされる
3. LINEへ「対応済み」と返答すると労りのメッセージが返ってくる
　 毎月のルーティン業務も労りあって作業したいですね・・・

## まとめ
作りたいと思ったものを自分で作成することができると、業務内容に変更があっても修正することができます。
作って終了・満足ではなく、実際に役立つツールにするためにこれからも足りない知識を身に着けたいと思います。

[参考記事](https://qiita.com/murakani/items/27bd6aad51ba90d10871)