HAMPUの実装
HAMPU（同人誌頒布管理Webアプリ）を実装する
lintのwarningはeslintで潰せる
dependency cruiserで使っていないコードを発見できる
タスク
連打時のCRDT/OTの導入
https://zenn.dev/masamiki/articles/3b43a20f672caa
オーバーエンジニアリング
I was wrong. CRDTs are the future
オフラインモード
オフラインでも使えるようにする
回線接続時に同期する
（開発速度向上）アーキテクチャ上の制約をコードで表現する
（開発速度向上）コミットする前には必ずフォーマッタをかけたい
（セキュリティ）悪意あるユーザーによる機械的連投の対応
（セキュリティ）セキュリティーレビューの実施
Automate security reviews with Claude Code \ Anthropic
（開発速度向上）サブエージェント - Anthropic使いでがあるか実験
HAMPU：開発速度向上：コミット前のテスト実行をClaude.mdからhooksに移す
（開発速度向上）DIコンテナの導入
チュートリアル
以下を明確にしたい
ボタンタップでカウントアップ
長押しで本を-1できる
シェアできる
URLにimageのURLかgyazoを追加すると画像が入る✅HAMPU: 画像アップロード機能 ＃137で説明不要になった
持ち込み在庫の入力（オプション）
(UI)ボタンを押した時にグラフが再描画されてチラつく
別スレッドで動かしているからしょうがない？メインスレッドにすればちらつかないがデータが増えると重くなるのでイヤ
放置するとWebSocketの接続に失敗し、ページに戻っても再接続されない
(bug) ChromeのWebSocketがおかしくなる
再起動しないとCosenseにも繋がらなくなる
HAMPU: 在庫管理機能
HAMPU: クライアント暗号化機能
✅(UI) どのタイミングでdecrementされるのか分かりづらい
✅(UIアニメ)頒布したらクラッカーが飛び散って欲しい #160Jules.icon
（品質保証）R2を使ったLargeテストの追加
✅HAMPU: 画像アップロード機能 ＃137でローカルではminiflareの都合上R2が完全にエミュレーションできない問題が発覚した。テストに不安があるので実際のR2を利用したLargeテストを作成したい。テスト環境用のR2を用意して実行する
設計変更をしたのでこの問題は解決し、不要になった
✅HAMPU:フォーマッタの導入 ＃156Jules.icon
✅HAMPU: 画像アップロード機能 ＃137
✅（UI）必須項目が入力できていなかったら赤枠で注意喚起 148基素.iconJules.icon
✅本のタイトル入力欄に1passwordが出るのが鬱陶しいので出ないようにする 149基素.iconJules.icon
✅（セキュリティ）1イベントに追加できるアイテム個数の上限を50個に設定 ＃147Jules.icon
(やらない) WAF/rate limitの設定
GPT-5.icon WAFやRate Limiting は基本的に「独自ドメイン」をCloudflareに接続しないと使えません
実際ダッシュボードにそれっぽい設定箇所がない。ドメインが必要そう
https://developers.cloudflare.com/bots/get-started/bot-fight-mode/ もドメインが必要だし
ケチ運用アプリなのでやらない
✅CIのE2Eテストが落ちてる ＃132
✅HAMPU:UI: (nit)グラフの横軸の時刻がごちゃつく時がある
✅テスト戦略のADRの追加（＃131）
https://t-wada.hatenablog.jp/entry/canon-tdd-by-kent-beck
✅HAMPU:test:E2Eテストが超正常系を満たす
✅HAMPU：開発効率化：アーキテクチャをDDD-CAに変更
✅HAMPU:UI:Safariでレイアウト崩れる
✅HAMPU: (UI)グラフの文字が読みづらい
✅（パフォーマンス改善）アイテムが増えるとカウントアップ時の描画が重くなる
✅（開発スピードアップ）リファクタリング
✅JunieでMCPが動かない
不要 https://gyazo.com/09002038f49692af71655793f730809d
✅HAMPU: idとslugは共通にできる？→できない
✅スマホのブラウザを長時間放置したとき、タップしても部数が更新されないが、裏でデータが更新される問題
✅npm run buildのwarning消す ＃95
✅npm run lintのwarning消す ＃95
✅HAMPU: vite v7
✅（開発コスト低減）プレビューURLを無駄に生成しないようにする&cronを無駄に設定しないようにする
✅グラフの時間範囲を手動設定できる機能
✅(UI) Durable Objectに保存するようにした後、数字更新までに時間がかかるようになり気持ちよさが減った
✅D1へのデータ永続化に失敗している
✅gyazoのURLに対応（png, jpeg, gifのみ）
Gyazo上でURLを展開するのがスマホだとめんどくさいので典型パターンはそのままはれるように対応
✅C106実地テストで発覚した問題
✅分析グラフが出ない
✅スクロールがタップ判定になってしまい誤タップする問題
✅(開発速度向上)featureブランチのプレビュー機能が欲しい
✅売り子が交代したときにデータを引き継げる機能
✅手動入力時は任意の値を入れても良いようにする
✅タップの挙動がデグレしている
瞬間タップ以外はカウントしないで欲しい
✅ClaudeflareのMCPサーバー導入
https://developers.cloudflare.com/agents/model-context-protocol/mcp-servers-for-cloudflare/
✅HAMPU: Claude Codeと本番環境を誤って削除したので一緒に復旧した
✅HAMPU: 長押しを始めてから、長押しが終わるまでに指を離したらカウントアップもカウントダウンもしないようにした
✅HAMPU: 本の金額と合計頒布金額表示を実装
✅HAMPU:ボタンのアニメーションなどを実装
23:35 CSV出力機能を分速リリースした
設計相談から実装・リリースまで10分ぐらい
異次元のスピード
LLMができないこと
typecheckでめっちゃエラーが出ているけどJules.iconもJunie.iconも全然治せない
この時点で、最低限他人に使ってもらえる必要な機能が揃ったと判断
2025-07-04
npm run devを実行した後に固まる
Jules.iconもJunie.iconも
アプリのUIを組む時にはローカルで動くLLMの方が便利
サーバーで動くツールは変更を確認するのが大変
Jules.iconやcodexは変更を確認githubにpushし、それをpullして確認し、エラーが出たらコピペした伝えて待って（待ち時間が結構長い）を繰り返す必要があり面倒
APIの変更をしてもらって手動で確認する、というようなユースケースなら問題ない
LLMの結果は結局自分の受け入れテストが必要になるので、確認コストが低くなければ使いづらいということ
✅サムネをうっすら下からグラデーションにして背景を見やすく文字を大きく
できた
https://gyazo.com/63650d4f823d5799d034f397f2c85c76
途中だけど公開した
https://hampu.motosono.workers.dev/
from 2025-07-03
だんだんできてきた
https://gyazo.com/6c30abaa99d7b95e2bf86796dc8b4320
from 2025-07-02
作り始めた
仕様がこのように決まっているのでそれをもとにまずGemini CLIで雛形を作った。するとnpm run devを実行した上で止まってしまった。どうすれば回避できるかわからなかったのでそこまでをコミットして、Julesに頼んで散歩に出かけた。
散歩中に↑のようなことを考えながらJulesを見ると途中の判断を仰いでいたので指示した。
欲望の明確化と管理。
散歩中も仕事が進むから、気兼ねなく散歩に行けるとみるか、散歩中も仕事ができるようになってしまったと見るか。
人間の労働時間が無限に伸びている。仕事をサボらなければならない
Jules.iconが実装ですごくハマった。何度聞いてもダメな実装とダメな実装を行ったり来たりしている
しかも1リクエストごとの待機時間がすごく伸びた
そこで別のLLMに実装方針を検討させ、その通りに実装させたところ上手くいった
CI/テストの整備と小さな実装タスクを別のAIに並列的にやらせている。今まで存在しないパラダイムだ。
タスク
✅本のバッググラウンドイメージをURLで指定できるようにしたい
✅本のボタンのどこをタップしてもカウントアップするようにしたい（長押しでカウントダウン）