はじめに
いとうと申します。
都内の会社でエンジニアをしています。
お世話になっております。
この記事は、たまたま先日Xで見かけた、Ichikawaさんの「【Difyハンズオン】LINEとOpenAIで作る次世代の名刺管理システム」を参考に作成しました。
https://note.com/jun_ichikawa/n/nf154656e80bf#443121db-a2f3-4e43-8892-58568a5013e3
動画も拝見しましたが非常にわかりやすく、且つ有用でした。この場を借りてお礼申し上げます。
読み取り対象を名刺→レシートに変え、
使用モデルをOpen AI→Gemini に変え、
Google フォームをすっ飛ばしてスプシに書くなどの改造をしました。
Open AI と Gemini のベンチマーク
以下の3種類のモデルで、レシートから合計金額を読み取りにかかる時間を測ったところ、Gemini 1.5 FLashが一番速かったため、使うことにしました。
| モデル名 | レスポンスタイム | 使用トークン数 |
|---|---|---|
| gpt-4o-mini | 4.128s | 1015 Tokens |
| Gemini 1.5 Pro | 3.747s | 286 Tokens |
| Gemini 1.5 FLash | 1.692s | 288 Tokens |
他にもOpenAI o1 や Gemini2.0 も試してみたかったのですが、Difyの仕様？でJsonフォーマットの出力設定ができなかったので、次回以降に持ち越します。
仕様
- LINE アプリの「レシート管理Bot」のトーク画面で、スーパーのレシートの写真を送ると、ごちゃっとした中から生成AIが合計金額を探して読み取ってくれます。
2.Google スプレッドシートに記入します。
3.ユーザーに金額とGoogle スプレッドシートのURLを送るので、もしまちがってたらスマホやPCから編集できます。
作り方
使うもの
- Gemini API Key
- LINE アプリ
- LINE Developers
- Dify
- Google Apps Script
- Google スプレッドシート
1. Gemini API Key の取得
- Google AI for Developers にログイン or アカウント作成
- 説明ページ >「Gemini API キーを取得する」> 「Get API Key」＞「キー APIキーを作成」
- 払い出されたAPIキーをメモっておく
※ Gemini って無料で使えるの？
Geminiの費用を見ると、無料枠と従量課金枠があるようです。アカウント作成当初などの無料期間を活用すると良いでしょう。
2. Difyの設定
まずグランドメニューで Gemini のAPI Keyを設定
ワークフローの作成
-
DifyのワークフローはDSLの形でエキスポート/インポートできるので、自分が作ったdify_receipt.ymlをこちらからダウンロードしてください
-
Difyのダッシュボード > 「DSLファイルをインポート」＞ dify_receipt.ymlをアップロードしてください
検証
-
スマホでレシートの写真を撮っておく
- 例：
- 例：
-
「実行」 > 「ローカルアップロード」で写真をアップ > 「実行を開始」
-
「結果」に合計金額を含んだJsonが表示されればOK
- 例：
- 例：
公開
-
右上の「公開する」＞ 「公開」を実施
-
続けて、同じプルダウンの中にある「APIリファレンスにアクセス」をクリック
-
開いたページ右上の「APIキー」＞「新しいシークレットキーを作成」
-
このAPIキーは 後で Google Apps Scriptで使うのでメモっておく
2. Google スプレッドシートを作成
-
Google スプレッドシートにアクセスし、「＋ 空白のスプレッドシート」をクリックして空のシートを作成
-
シート名：list
-
3つの項目を設定
- A列：タイムスタンプ
- B列：金額
- C列：メモ
A,Bは必須。Cはなくても良いし、D以降も追加しても良い。
-
スプレッドシート名：「お買物レシート」など
-
右上の「共有」から
- 共有 > 一般的なアクセス > リンクを知っている人全員 > 編集者 > 完了
3. LINE の設定
-
LINE Developersにアクセスし、新規プロバイダとチャネルを作成
- チャネル種類：「Messaging API」
- LINE公式アカウント名：「レシート管理Bot」
- メールアドレス：自分のメアド
- 業種：個人 > 個人（その他）
- チャネルができたら、LINE Developersに戻る
- 「レシート管理Bot」を開き、「Messaging API設定」＞「チャネルアクセストークン（長期）」を発行。後で使うのでメモしておく
-
LINE Official Account Managerで、「レシート管理Bot」を選択
- 左枠の「応答設定」＞「チャット」と「Webhook」をオン
4. Google Apps Scriptを作成
コードの編集
-
Apps Script > 新しいプロジェクト > コード.gsのエディタが開く
-
こちらからGASのコードをゲットして 、上図の赤い枠の部分を消して上書きする
スクリプトプロパティを設定
- Google Apps Scriptの画面左側、歯車アイコンをクリック
- 「スクリプトのプロパティ」セクションで「スクリプト プロパティを追加」をクリックして、3つの項目を作る
-
1個目
- プロパティ： LINE_ACCESS_TOKEN
- 値：先ほどLINE Developersで取得したアクセストークン
-
2個目
- プロパティ： DIFY_API_KEY
- 値：先ほどDifyで取得したAPIキーを入力
-
3個目
- プロパティ： RESULT_SHEET_ID
- 値：先ほど作成したGoogle スプレッドシートのURL「ttps://docs.google.com/spreadsheets/d/★★★/edit?gid=0#gid=0」の★★★の部分
-
「スクリプトのプロパティを保存」をクリック
-
デプロイ
-
「無題のプロジェクト」 を「レシート管理」等の分かりやすい名前に書き換える
-
デプロイ > 一番上の「新しいデプロイ」を選択
-「種類の選択」の右の歯車をクリックし、「ウェブアプリ」を選択
-「説明」は任意で記入
-「次のユーザーとして実行」：自分（自分のメールアドレス）
-「アクセスできるユーザー」：全員
-デプロイをクリック -
（初回のみ、承認フロー）アクセスを承認 > ユーザー選択 > 安全でないほにゃららと表示されたら、「Advanced」＞「Go to レシート管理(unsafe)」＞「レシート管理 wants to access your Google Account」> Allow > 「デプロイしました」
-
発行された「ウェブアプリURL」をメモっておく
Tips
スクリプトのプロパティを変更しても、デプロイし直す必要はありません。便利ですね。
5. LINE の設定
- LINE Developersで先ほど作ったチャネルに移動し、「Messaging API設定」の「Webhook URL」に、4.で発行したGoogle Apps ScriptのウェブアプリURLを記入する
- 「Webhookの利用」をオンにする
- QRコードからフレンド登録する
Tips
- Google Apps Scriptは、デプロイし直すたびにウェブアプリURLが変化するため、LINE側のWebhookのURL設定も毎回上書き変更する必要があります。
6. 動作確認
以上で完成です。
LINEトークアプリで、「レシート管理Bot」を開き、レシートを撮影して送付してみてください。
合計金額を読み取ってGoogle スプレッドシートに記入し、金額とURLを返信してくれるはずです。
デモ動画
https://youtube.com/shorts/-rvdgWtFkP8
まとめ
-
思ったこと
- 読み取りだけならOCRでも良さそうだが、レシートは情報量が多いので、「合計金額」を探して読み取る必要がある。そこらへんを自動でやってくれたのは何気にすごすぎる。
- 開発は半日くらいでできた。Dify便利すぎる。
- GASを書くのは5年ぶり。長いGASはデバッグが大変な印象があったが、こちらを参考にログを出し、出力されたエラーを片っ端からVSCodeのCopilotチャットに聞いたら、スイスイできた。
-
発展してみたいこと
- レシート全体を読み込んで買った物をリストアップし、要約して家計簿につける手間を省きたい。
- 買い物のバイアスを見抜き、健康状態をチェックしたりしたい。
- ガッツリ買い物するとレシートが長すぎて一枚に収まらない。どうしたものか。
- 最新モデルGemini 2.0とOpen AI o1も比較してみたい。
以上です。
アドベントカレンダー駆動型開発、大変楽しかったです。ありがとうございました！