電卓で出した答えが画面を切り替えた瞬間に消える、消費税の税込価格を毎回打ち直す——そんな地味なストレスをなくしたくて、計算が自動で履歴に残り、よく使う式はテンプレートでワンタップ計算できる電卓「にゃるっく」を作りました。登録不要・ブラウザだけで動き、計算データは端末内にだけ保存されます。どんなアプリでどう使うのかを紹介します。

個人開発のReact SPAに忍者AdMaxを貼ったら、審査が「審査中」のまま一向に進まない…。忍者側の不具合かと疑いましたが、原因は全部自分の設定でした。Cloudflareのボット保護が審査クローラを弾き、SPAでは切替タグのswitch型IDでないと広告が描画されない。半日ハマって切り分けた3つの原因と直し方を、実録デバッグ記としてまとめます。

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する理由も合わせて紹介します。