ミニアプリの「続き」

少し前に、バーコードと数量を放り込むと在庫CSVを吐くだけのツールを作りました（Claude Code で作る毎日のミニアプリ）。今回はその続きです。あの素朴なスクリプトを、スマホのカメラで動くバーコード在庫スキャナに育てて、本番URLで公開しました。

この記事は「なぜ作るか」ではなく、どう作って“公開していい”状態にしたかの記録です（「なぜ・業務効率化の型」の話はこちら）。

実物 → https://apps.lumikit.dev/salon-inventory-scanner/

ツールに足した4つ

1. カメラでバーコードを読む

入力を「CSVを手で用意」から「スマホでピッ」に変えました。バーコード読み取りは @zxing/library を使用（CDN配信・SRI付き）。カメラ映像をデコードして、読めたJANを在庫リストに自動で +1 する、という流れです。同じ商品を続けてかざせば数量が増えていきます。

2. 「テストできる形」に分ける

ここがミニアプリを“公開していい”レベルに上げる肝でした。画面操作（DOM）と純粋ロジック（在庫の加算、CSVの整形、商品マスタの更新）を切り分け、後者に自動テストを書きました。こうすると「動いてるつもり」を毎回手で確かめずに済み、直したときの壊れも自動で気づけます。

3. 公開していい状態にする（セキュリティ）

URLで他人に配る以上、最低限の手当てをしました。

  • 表示は全部 textContent（入力された商品名でスクリプトが動かないように）
  • CSVの数式インジェクション無害化（=,+,-,@ 始まりのセルを安全化）
  • CSP を設定（script-src は自分自身と ZXing だけ、'unsafe-inline' を入れない）
  • データは端末内（ブラウザ）だけに保存。外部サーバーには一切送らない

4. URLで配る（デプロイ）

ビルドツールは入れず、単一HTML＋静的配信のままにしました。フォルダをそのまま置くだけで動くので、デプロイが一番ラク。apps.lumikit.dev に置いて公開しています。

一行も手で書いていない（けど“ちゃんと”している）

このツール、コードは Claude Code に指示して生成→検証、のループで作っていて、自分でコードを書いた行はほぼゼロです。それでも、テストやセキュリティの観点まで含めて「公開していい」小さなツールが出来上がる——これが面白いところです。

振り返り

観点 結果
出発点 CSVジェネレーター
足したもの カメラ読取(ZXing) / 純粋ロジック分離+自動テスト / CSP・データ端末内 / デプロイ
自分がやったこと 仕様の指示・検証・公開判断（コードは生成）
学び 「画面」と「ロジック」を分けると、テストもセキュリティも一気にやりやすくなる

正直な現状

ツールが設計どおり動くこと（自分のスマホでスキャン→CSV書き出し）は確認済みです。一方、実店舗で1回分の棚卸を丸ごと回した結果はまだで、これから店舗オーナーと試す段階です。数字が取れたら追記します。

試す / 次

手元の商品で気軽に触ってみてください（スマホで開けばその場でバーコードが読めます）。

次は「数える」の次、「減ったら気づく」を足した在庫管理版を作りました。発注点を割ると赤くなるやつです。その作り方はまた別記事で。

「うちのこの作業、AIで何とかなる?」があれば、それ自体が良いネタです。気軽にどうぞ（hello@lumikit.dev）。