バーのカウンターでドリンクカウンターを作った話

2025-08-24

• バーカウンターで10分
  • 使い方
  • ちょっとした使い勝手について
• 最初はHTML1ファイル
• しかし、酔っ払った人はボタンを押さない

バーカウンターで10分

友達と飲んでいるとき、「飲み過ぎないように何を何杯飲んでるかカウントしている」ようなことを言っていた。

バーとかで飲むと明細なんて見ることなんて無いし、そもそも人に奢ってもらうことも多いから結局自分の伝票だけじゃわからないらしい。

横で数え方を見てると、けっこう面倒くさそうな方法で数えてたので、ClaudeCodeで、サクッと飲んだ数を記録できるツールを作れるか試してみた。

要件はシンプル。

• 飲み物種類の名前を書いて、ボタンを追加できる。
• 出てきたボタンをワンタップすれば、その飲み物の名前と時刻を記録できる
• その日、何を何杯飲んだかがわかる
• データはローカル保存
• モバイルレイアウト
• できれば履歴が見れると良い。

こんなのだったら、モバイルアプリのNoCodeツール内でも作れそうなもんだが、バックパックにMacが入っていたので、ClaudeCode で、その場で50文字くらいのプロンプトを入れたら、すぐにHTMLファイル一発で作ってくれた。

実際、MacBookを開いて、プロンプト書いてから、ちょっと直して、ネットに公開するまで10-15分くらいだった。

まあ、本当になんでもないWEBページだけど。

※　最初のバージョンはもうちょっと見た目が変だった。これはちょっと直したやつ。

ドリンクカウンター

使い方

1. 自分が飲むドリンクを追加しておく
2. 飲んだドリンクを選んでタップ
3. その日の合計が表示される
4. 履歴ボタンから過去の記録も見られる
5. 設定で日付の区切りや表示方法を変更できる

ちょっとした使い勝手について

• 夜遅くまで飲む人向けに「日付の切り替え時刻」を自由に設定できる（寝るまでは今日だろという方針）
• シンプルなUIで、スマホでも片手で操作しやすい
• 記録データは全部ローカル保存なので、プライバシーも安心
• 間違ってダブルタップすると拡大してしまうので、ダブルタップで拡大しないようにする必要がある

最初はHTML1ファイル

最初はHTML・CSS・JavaScript全部入りの1ファイルで作った。

python -m http.server 9991 みたいにすれば http://localhost:9991 で動作確認もできる。

とりあえず動くので、既存の環境(github pages)にpushしたら、すぐに使えた。

index.html 一発で一応動くものは、相対パスの設定ミスとかも考えなくていい。（既存ドメインの、多少深めのフォルダに配置することになるので、 うっかり /assets/... とかを参照してしまうと、cssやjsが404で読めなかったりする。）

さすがにVanillaJSで1000行超えは辛いので、家に帰ってから、リアクティブなライブラリを使ったものに変換した。

例えば、多分こういう感じのプロンプトだったと思う。

Write todo.md to initialize the project and migrate a simple file index.html to a new project using bun + TypeScript + SolidJS.
After done writing it, address the tasks.

だいたいこれでうまくいくが、一旦、ボタンが動かなかったりする状態になったりする。

まあ、そうなっても、あれこれ指摘していけばだいたい大丈夫になる。

簡単なものなら、最初は全部入りの1ファイルで作ってみて、メンテする前に好きなパッケージやビルドツールを使うように移行するというのは、結構良い方法だなと思った。

しかし、酔っ払った人はボタンを押さない

ほんで結局、酔っ払って途中でボタンを押すのを忘れてしまって、あまり役に立たなかったらしい。

つまり、「その日結局何杯飲んだか」ではなく、「どのくらい飲んだら酔っ払うか」を計測することに成功したと思ってる。