レシートをAIに読ませようとしたら 4回もつまずいた話
こんにちは！ エムシーです！
今回の教材は、レシートの画像を読み取る家計簿アプリを作るという内容でした。
所要の目安は100分、レベルは中級と書いてありました。
「いきなり中級・・・」
この記事は、その章での僕の記録です。
正直に言うと、4回つまずいた記録です。
パソコンに自信がない方や、AI学習を始めたばかりの方に読んでほしい話です。
「読める」機能と「理解する」機能
教材はまず、OCR（オーシーアール）の話から始まりました。
OCRは、画像の中の文字を1文字ずつ機械的に読み取る技術だそうです。
レシートの文字を拾うだけなら、それでも十分だと思いました。
ところが Claude API（クロード・エーピーアイ）は、もう一歩先まで行きます。
画像全体の意味を理解して、必要な情報を取り出せるのです。
OCRは「コーヒー」という文字を見つけるだけ、Claude APIは
「これは商品名で金額はいくら」と意味づけまでします。
「読めるだけではなく、意味を理解できるのがスゴイ！」
しかも Claude API は、レイアウトが崩れていても文脈から判断できるので
比較的強いそうです。くしゃくしゃのレシートでも大丈夫だそうです。
ここまでくると、もう人間の目と同じレベルです。
写真を長い英数字に変える・・・
次は画像の送り方です。
APIとのやり取りは、多くの場合は文字（テキスト）で行います。
やり取りは文字だけなのか、と意外でした。
画像は文字ではないので、base64（ベースロクヨン）という方式で
英数字の文字列に変換してから送ります。
「写真が、文字になる？・・・」
教材には「長い英数字の文字列に変換するひと手間」と覚えれば十分と書いてありました。
それだけでいいなら、直ぐに覚えられます。
先にストッパーを効かせておく
ここからはお金に関する話です。
Claude API の料金は、token（トークン）という
文字の量を数える単位の値で決まるので、使えば使うほど料金がかかる仕組みです。
光熱費などと同じようなものですが、使い過ぎを防ぐストッパーがあります。
設定するのは、Anthropic（アンソロピック）のコンソール画面です。
Spend limits（スペンド・リミッツ）という利用上限金額を決められる仕組みです。
上限に達すると、それ以上の利用ができないように自動でストップをかけます。
自分で上限額を決められるので安心です。
このストップ機能を設定せずにプログラムの不具合などで大量に使ってしまうと
高額な料金になる可能性があるとも書いてありました。
自分の知らない間に課金される可能性も・・・。
だから教材では、開発を始める前に必ず設定をするようにと書いてありました。
事前に付ける安全ブレーキは、必ず設定しておくべきだと思います！
売り場と裏の倉庫とがある
次はアプリの形の話です。アプリは、画面側の frontend（フロントエンド）と
裏側の backend（バックエンド）の2つでできています。
お店の売り場と、裏にある倉庫みたいなものらしいです。
そして frontend のコードは、ブラウザの開発者ツールで誰でも中身を見られます。
「誰でも見られるとは・・・」
だから APIキー（エーピーアイキー）は、frontend に置かず backend で管理します。
お店の鍵は売り場に置かない、という意味と同じだと解釈しました。
frontend は backend を経由して、Claude API を呼び出します。
遠回りに見えますが、これが安全なセキュリティー対策の一つなのでしょう。
4回もつまずいて やっと動いた
作る流れは、4段階だと書いてありました。
- 3点セットを用意する
- 画像をアップロードする
- backend を経由して API を呼ぶ
- 家計簿として表示する
段取りが4つなら、覚えられそうです。僕は React（リアクト）と Node.js（ノード・ジェイエス）で、レシート読み取りの家計簿アプリを作りました。自分のレシートが読めたら、うれしいです。
ここからが本題です。つまずいたのは次の4回でした。
- ファイルのアップロード処理
- 使っていたモデル名が古くて使えなくなっていた
- APIから返ってきた JSON（ジェイソン）の読み取り
- ポートがぶつかる問題
「AIにも、引退があるのか・・・」
入口のアップロードで、もう止まりました。
番号のぶつかり合いまであるとは知りませんでした。
つまずいた4つは、どれもAIの中身ではなく、その周りの部分です。
名前が古い、番号がぶつかる。止まるのはそういう所でした。
この章も、まとめページと確認テスト5問・小テスト15問・総合問題集30問と
用語解説14語をClaude Codeに作ってもらいました。読んだだけでは頭に残らないからです。
【今日のおすすめ】
- APIを使い始める前に、上限金額（Spend limits）を決めておく
- APIキーは frontend に置かず、backend で管理する
- OCRと Claude API は別物。文字を読むのか、意味まで取るのか
- つまずくのはAIの中身より、名前や番号など その周りの部分
最後まで お読みいただき 本当に ありがとうございました！
