Teachable Machine × MAKE × スプレッドシートで請求書画像から仕訳入力に挑戦！



みなさま、お疲れさまです！  
今回で **4回目の投稿** となります。

今回は **Teachable Machine × MAKE × Googleスプレッドシート** を組み合わせて、  
 **請求書の画像から仕訳入力を行うシステム**の構築に挑戦してみました！

まだまだ改良の余地はありますが、なんとか土台を作ることに成功しました。  
ぜひ最後までご覧ください！



## 目次


- [現時点での動きはこちら](#現時点での動きはこちら)
- [作成手順](#作成手順)
  - [1. Teachable Machineのモデルを作成](#1-teachable-machineのモデルを作成)
  - [2. MAKEでワークフローを作成](#2-makeでワークフローを作成)
  - [3. HTMLリンクを作成・共有](#3-htmlリンクを作成共有)
- [完成！](#完成)
- [課題点](#課題点)
- [さいごに](#さいごに)




## 現時点での動きはこちら！

https://x.com/daikindayon/status/1929897309405622359

### ▼ 簡単な仕組みの概要

1. **Teachable MachineのモデルをHTMLリンクで公開**  
　 画像をブラウザ上でアップロード＆分類できます。

　
　2. **MAKEで分類結果をスプレッドシートに連携**  
　　　Teachable Machineからスプレッドシートへは直接送信できないため、
　　 　間にMAKEを挟みました！



## 作成手順

### 1. Teachable Machineのモデルを作成


　

**①サンプルを作成します。今回は「固定営業料」という項目に限定して作成しております。**
　**サンプルをインポート後、「モデルをトレーニング」を選択します。**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4045820/d658ab79-5fd4-40df-a7d3-ad27977b6954.png)

**②「モデルをエクスポートする」より「アップロードする」を選択**
　**○で囲っているURLが表示されればOK**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4045820/9d86b68b-0be8-4824-be56-27329ec61268.png)


### 2. MAKEでワークフローを作成

**①MAKEの「New　Scenario」を選択、「Webhooks」→「Custom　Webhook」を選択**
　**下図の○の箇所です。**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4045820/f8f240da-68d7-42c7-b7b0-42ac8008ec4c.png)

**②「Create a webhook」から「Webhook name」を入力（任意）**
　**その後右下の「Save」を選択します。**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4045820/446bdcec-b482-4973-83f0-cb8b58540295.png)

**③○で囲ったURLが表示されればOKです**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4045820/c15191f5-ecde-4595-9589-66bfe983108e.png)





### 3. HTMLリンクを作成・共有

**①「メモ」を開き、以下のコードを貼り付け、一部編集します。**
<details><summary>こちらを「メモ」等に貼り付けます</summary>



```rb
<!DOCTYPE html>
<html>
<head>
  <title>請求書分類</title>
  <!-- 必須：TensorFlow.js本体 -->
  <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@3.3.0/dist/tf.min.js"></script>
  <!-- Teachable Machine用ラッパー -->
  <script src="https://cdn.jsdelivr.net/npm/@teachablemachine/image@0.8/dist/teachablemachine-image.min.js"></script>
</head>
<body>
  <h2>請求書分類アプリ</h2>
  <input type="file" id="imageUpload" accept="image/*" />
  <p id="labelResult">推論中…</p>

  <script>
    const MODEL_URL = "ここにTeachable MachineのURLを貼付";
    let model;

    async function init() {
      const modelURL = MODEL_URL + "model.json";
      const metadataURL = MODEL_URL + "metadata.json";
      model = await tmImage.load(modelURL, metadataURL);
    }

    document.getElementById("imageUpload").addEventListener("change", async (e) => {
      const file = e.target.files[0];
      const img = new Image();
      img.src = window.URL.createObjectURL(file);
      await img.decode();

      const prediction = await model.predict(img);
      const top = prediction.sort((a, b) => b.probability - a.probability)[0];
      const label = top.className;
      const prob = (top.probability * 100).toFixed(1);
      document.getElementById("labelResult").textContent = `${label}（${prob}%）`;

      // MAKEのWebhookへ送信
      fetch("ここにWebhookのURLを貼付", {
        method: "POST",
        headers: {
          "Content-Type": "application/json"
        },
        body: JSON.stringify({
          label: label,
          confidence: prob,
          filename: file.name
        })
      });
    });

    init();
  </script>
</body>
</html>

```
</details>

**メモ等に上記を貼り付けていただいた後は**
**先ほどの説明にて作成いただいた2つのURLを上書きします。**
**”https　://○○○○”　←このように貼り付けます。**

**②貼付後、名前を付けて保存をします。この時に拡張子を「html」に変更します。**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4045820/e7b5e6b7-a52e-421f-95cb-e60c3930846b.png)
　
**ここまで上手くできると、このようなWEBページが表示されます。**
**この時点でファイルを選択すると判定ができます。**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4045820/5d3e6771-2c79-4a81-a7b4-16f8e435f1c4.png)



### 4. スプレッドシートとMAKEを連携させる

**①以下のようなスプレッドシートを作成します**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4045820/de10f8d3-8cd0-4882-9b9b-d44212a4bb2a.png)

**①MAKEにて「Google Sheet」→「Add a Row」を選択**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4045820/21a09904-8065-4ddf-a506-1d497801a887.png)

**②上の項目にてファイルのアドレスを選択、下の「value」は画像のように入力します**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4045820/1c2291c0-7df7-44d8-a523-af28b51da541.png)

**③最後に「Immediately as data arrives」をONにします**
　
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4045820/80b3a2e4-b403-49d0-9d58-9b0dcf46e3ce.png)



これでなんと、

**画像をアップするだけで、自動で仕訳データがスプレッドシートに記録される！**

という仕組みが完成しました！（操作は上の動画の通りです！）



## 課題点

### ① フォーマットの異なる請求書に弱い

- レイアウトの違いや金額の位置などにより、分類がうまくいかない場合あり  
→ **より多くのサンプルデータの収集とモデル再学習が必要です。**

### ② スプレッドシートを経由する必要がある

- 社内規定やセキュリティポリシーで懸念が出る可能性あり  




## さいごに

請求書の読み取り〜仕訳作成までを自動化する外部ツールを調べたところ…

 **月額約30,000円 + 請求書1枚ごとに約100円** のコストがかかるとのこと。  
（※とあるサービスより）

正直、なかなかのお値段です…。

しかし！  
今回の仕組みをベースに改良を重ねていけば、  
**より安価に、あるいは無料で**運用できる可能性もあると感じています。



今回は現時点での成果をまとめましたが、  
進展があればまたQiitaにて共有いたします！

最後までお読みいただき、ありがとうございました😊