ツール5本リリース、サイトをPWA化した話

ここ最近で 5つのツール をリリースして、サイト本体も PWA化 した。全部を一気に書くと長くなるけど、せっかくなので「何を作ったか」と「途中でやらかしたこと」を残しておく。

つくったもの

既存のインベーダーゲームに パワーアップアイテム を追加。インベーダーを倒すと15%の確率でシアン色の菱形アイテムがドロップして、取得すると 10秒間、弾が3方向（左斜め・真上・右斜め） に発射される。

リモート側にボス戦・サウンド・ハートアイテムが追加されていてマージコンフリクトになったけど、なんとか統合した。

ゼロから作った高機能QRジェネレーター。

10カテゴリ・100以上の単位を一括変換。

リリース後、変換係数を全件再チェックして torr / mmHg のわずかな精度差まで修正した。

自動車登録に使う「住所コード」を検索できるツール。これは データ調達が一番の山場 だった（後述）。

シンプルだけど絶妙に欲しいやつ。

Sites / Tools / Games の3カテゴリに整理。カテゴリごとにカラードット・ラベル・グラデーションラインで視覚的に分けた。

ホーム画面に追加してアプリのように起動できるようにした。 Service Worker でオフラインキャッシュも対応。ファビコンとアイコンも青→紫グラデーションで全部刷新。

イテレーションを重ねて完成したものほど、途中で「うわ、これ最初に気づくべきだった」が多い。

住所コード検索ツール を作る時、最初は「国交省のCSVを直接 fetch すればいい」と思って実装した。動作確認したらブラウザでブロック。Access-Control-Allow-Origin がなかった。

→ 対策: 全91支局のCSV（合計21MB）を自リポジトリにダウンロードしてGitHub Pagesから配信する方式に切り替え。 → 教訓: 外部APIを使う前に curl -I でCORSヘッダーを確認する。

QRジェネレーターで qrcode-generator ライブラリの誤り訂正レベルを数値で渡していたら、QRが正しく生成されないバグになった。正しくは 'L', 'M', 'Q', 'H' の 文字列 を渡す仕様。

→ 教訓: 動かなかったら最初にライブラリのドキュメントとサンプルを読む。

QRジェネレーターには最初「中央にロゴを埋め込む機能」を作ったけど、サイズ調整するとどうしても読み取り精度との両立が難しくて、最終的には機能ごと削除した。コードは250行ほど消えたけど、結果的にUIが整理されてシンプルになった。

→ 教訓: 「労力をかけたから残す」は技術的負債のはじまり。

MochiBullet Magazine をPWA化するとき、Next.js 15の app/manifest.ts（動的マニフェスト）を使ったらVercelのビルドが失敗した。原因は next.config.ts の output: "export" モードと相性が悪かったこと。

→ 対策: public/manifest.webmanifest の 静的JSONファイル に変更して解決。 → 教訓: 静的書き出しモードでは「動的に生成される特殊ルート」が罠になりやすい。事前に制約を確認する。

QRジェネレーターのプレビュー位置を、開発中に 3回変えた。上に固定 → スクロール下部に移動 → また下部固定。ユーザー側からは「設定後に確認したい」と「いつでも見たい」の両方の要望があったので、結局 下部固定 が正解だった。

→ 教訓: 「どう見せたいか」より先に「いつ・どんな状態で見たいか」を決めてからレイアウトを組む。

「絶妙に役に立つやつ」シリーズをもう少し続けたい。候補:

作ったツールは Works にまとめてある。スマホで「ホーム画面に追加」しておくと、思い出した時にサクッと使えて便利。