個人開発のReact SPAに忍者AdMaxを貼ったら、審査が「審査中」のまま一向に進まない…。忍者側の不具合かと疑いましたが、原因は全部自分の設定でした。Cloudflareのボット保護が審査クローラを弾き、SPAでは切替タグのswitch型IDでないと広告が描画されない。半日ハマって切り分けた3つの原因と直し方を、実録デバッグ記としてまとめます。
iPhoneで撮った写真をWebツールに読み込ませたら「この画像は開けません」——HEICあるあるですよね。サーバーに画像を送らず、ブラウザの中だけでHEICをPNGに変換したくて、heic-toというライブラリをWebAssemblyで動かしました。ライブラリ選定の理由、約3MBを必要なときだけ読む遅延読込、LGPLとの向き合い方、そして変換中トーストが消えるバグまで、自作ツールに組み込んだ実装の勘所をまとめます。
東京競馬場って広いぶん、一日ゆっくり過ごせる「居座りスポット」をどこに構えるかで快適さが全然違うんですよね。混雑を避けつつレースもしっかり楽しみたい派の自分が、実際に通って気に入っている馬場内の芝生・ローズガーデン・フジビュースタンドの3カ所を、アクセスや混み具合の正直な感想つきで紹介します。
顔をモザイクで隠したい、スクショに写り込んだ住所やAPIキーを消したい——でも他人のサーバーに画像をアップロードするのは少し怖いですよね。そこで画像を一切ネットに出さず、ブラウザ内のCanvasだけで加工する無料ツール「もざいくにゃん」を作りました。React CDN・完全クライアント処理・Cloudflare Pagesという低コスト構成を、実装のポイントとあわせて紹介します。
格安の日帰りバスツアーって、食事も体験も「値段なり」で物足りないんじゃ…と正直あまり期待していませんでした。でも今回のHISさくらんぼ狩りツアーは、原田農園のフルーツが想像以上に絶品で、最後のゆばすくい体験が予想外に一番楽しいという嬉しい誤算続き。群馬・沼田を巡った1日を、現地の感想そのままにレポートします。
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両対応のコツまで、実コード抜粋付きでまとめました。
BAGEL & BAGELでお得にベーグルを買う方法を、LINEクーポン・公式オンラインショップのポイント還元・15個まとめ買い割引・送料無料・楽天市場店のセール・福袋まで出典付きで徹底的にまとめました。