iPhoneで撮った写真をWebツールに読み込ませたら「この画像は開けません」——HEICあるあるですよね。サーバーに画像を送らず、ブラウザの中だけでHEICをPNGに変換したくて、heic-toというライブラリをWebAssemblyで動かしました。ライブラリ選定の理由、約3MBを必要なときだけ読む遅延読込、LGPLとの向き合い方、そして変換中トーストが消えるバグまで、自作ツールに組み込んだ実装の勘所をまとめます。
顔をモザイクで隠したい、スクショに写り込んだ住所やAPIキーを消したい——でも他人のサーバーに画像をアップロードするのは少し怖いですよね。そこで画像を一切ネットに出さず、ブラウザ内のCanvasだけで加工する無料ツール「もざいくにゃん」を作りました。React CDN・完全クライアント処理・Cloudflare Pagesという低コスト構成を、実装のポイントとあわせて紹介します。
vite-plugin-pwaのautoUpdateは入れたのに、デプロイしても一部のユーザーに古い版が表示され続ける——その犯人はService WorkerではなくCDN/ブラウザのHTTPキャッシュでした。_headersで入口ファイルをno-cacheにする対策を、ケースA（Vite）/ケースB（素のHTML）の使い分けと検証手順まで解説します。
外部サービスに頼らず、Google Apps Scriptとスプレッドシート・Gmailだけで無料のお問い合わせフォームを作る方法を、当ブログの実装をもとに解説します。送信内容をスプレッドシートに記録しつつGmailで通知する構成で、バリデーション・スパム対策・デプロイ時のハマりどころまでまとめました。
Webアプリに Ctrl+Z / Ctrl+Y の Undo・Redo を入れる方法を、自作の画像マスクサイトの実装をもとに解説します。Reactのkeydownイベントで操作を拾い、ops / redoStack という2本の履歴スタックで状態を巻き戻す設計、入力欄でのショートカット無効化やMac/Windows両対応のコツまで、実コード抜粋付きでまとめました。
メルカリ・ラクマ・BASE・minneなど複数のフリマ／ECの在庫・売上・粗利を1画面で管理できる無料アプリ「ざいこにゃん」を作りました。登録不要・ブラウザだけで動き、データは端末内だけに保存。福袋やセット販売の原価も自動で按分計算します。
GA4管理画面の「ウェブサイトをテストする」でタグが検出されないと言われたトラブルを直した話。原因はReactのuseEffectで動的注入していたgtag.jsが生HTMLに出現していなかったこと。Viteプラグインでindex.htmlに静的埋め込みして解決する。
Playwrightで`page.context().pages()`から開いている全タブを取得し、URLまたはtitleに特定文字列を含む画面が存在するかをbooleanで返すヘルパー関数の実装方法を解説します。BrowserContextの基本とfor...ofで逐次awaitする理由も合わせて紹介します。
在庫管理SPAで「並び替え」を3系統使い分けた話。React + TypeScript製の個人開発アプリで、列ソート / カードD&D / リストD&Dをどう実装したか、@dnd-kitの採用判断、localStorageの3層分離、保存値の正規化パターンまでコード抜粋付きで解説します。
ブログにアップロードする写真が1〜2MBで重くて困っている人向けに、Claude Codeに「画像縮小して」と頼むだけで自動リサイズが走る環境の作り方を解説します。Node.js+sharpの自作ツールをSkillとして登録し、SEOで失わないライン（最大幅1600px・JPG品質80）を守りつつ容量32%削減する実装例付き。
