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

Posted at 2025-06-03

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

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

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

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

▼ 簡単な仕組みの概要

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

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

作成手順

1. Teachable Machineのモデルを作成

①サンプルを作成します。今回は「固定営業料」という項目に限定して作成しております。
　サンプルをインポート後、「モデルをトレーニング」を選択します。

②「モデルをエクスポートする」より「アップロードする」を選択
　○で囲っているURLが表示されればOK

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

①MAKEの「New　Scenario」を選択、「Webhooks」→「Custom　Webhook」を選択
　下図の○の箇所です。

②「Create a webhook」から「Webhook name」を入力（任意）
　その後右下の「Save」を選択します。

③○で囲ったURLが表示されればOKです

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

①「メモ」を開き、以下のコードを貼り付け、一部編集します。

こちらを「メモ」等に貼り付けます

<!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>