High Bridge DevTools
Knowledge
開発中に遭遇したトラブルの原因・対処法・教訓をまとめたナレッジベースです。
favicon.icoとは？設定方法と必要なサイズまとめ
faviconの基本とICOフォーマットの仕組み、必要なサイズと用途、HTML・Next.jsでの設置方法、ブラウザごとの対応形式の違いをまとめます。
JSONの整形・バリデーション完全ガイド：壊れたJSONを素早く修正する方法
JSONの構文エラーが起きる原因とエラーメッセージの読み方、ブラウザ・Node.js・各言語でのパースエラー対処法、よくある間違いパターンと修正方法を体系的に解説します。
CSSカラーコード完全ガイド：HEX・RGB・HSLの違いと使い分け
CSSで使える色指定形式（HEX・RGB・RGBA・HSL・HSLA・oklch）の仕組みと特徴を比較し、デザインシステム構築やフレームワーク連携での使い分け方を解説します。
URLエンコードとは？日本語URLの仕組みと%エンコーディングの基礎
URLに使える文字・使えない文字の基準（RFC 3986）、encodeURI と encodeURIComponent の違い、日本語パラメータや特殊文字を扱う際の注意点を実例つきで解説します。
Unixタイムスタンプとは？変換方法と開発現場での活用パターン
Unix時間（エポック秒）の概念、10桁と13桁の違い、タイムゾーン落とし穴、JavaScript・Python・SQL での変換方法、APIやデータベース設計での使い方を解説します。
ダミーテキスト活用ガイド：Lorem IpsumとUI開発での使い方
Lorem Ipsumの歴史と目的、日本語ダミーテキストが必要な理由、文字数・段落数の選び方、デザインカンプ・プロトタイプ・コンポーネント開発での使い分けを解説します。
初めてのChrome拡張機能開発：GitHub PR に LGTM 猫画像をワンクリック挿入する拡張を作った記録
Manifest V3・Content Script・Background Script の3層構造でGitHubのCSP制限を突破する方法、MutationObserverによるSPA対応ボタン注入、カーソル位置への正確なテキスト挿入など、初めてChrome拡張を作る中で得た知見をまとめます。
Cloudinary の Unsigned Upload Preset でサーバー不要のクライアント直接アップロードを実現する
API Secret をクライアントに持たせず、Unsigned Upload Preset を使って FormData + fetch だけでブラウザから直接 Cloudinary にアップロードする実装パターンを解説します。Edge Runtime 制約のある環境でも Server Action 不要で動作します。
useTransition を複数使って独立したローディング状態を管理するパターン
同一画面に種類の異なる非同期処理が複数ある場合、useTransition を共有すると状態が混在します。用途ごとに独立した useTransition を宣言し、isBusy フラグで相互排他制御する設計パターンを解説します。
Playwright の page.route は Server Action 内の外部 API 呼び出しを傍受できない
page.route はブラウザ発リクエストのみ対象のため、Server Action 内で行う Gemini API 等の呼び出しはモック不可。UI 状態テストへの限定とローカルモックサーバーの2つの対処法を解説します。
Gemini API の 429 エラー判定で分レート制限を日次上限と誤判定していたバグ
isDailyTokenLimit 関数の正規表現が分レート制限の 429 エラーにも誤マッチし、ボタンが永続的に非活性になっていた問題。isPerMinuteRateLimit をガード関数として分離することで解決しました。
ブラウザ完結の背景除去ライブラリ @imgly/background-removal の使い方と onnxruntime-web バージョン固定の落とし穴
@imgly/background-removal を使ってブラウザ上でAI背景除去を実現する方法を解説。WASM/ONNXパイプラインの仕組み、dynamic importによるバンドル最適化、そして onnxruntime-web のバージョン不一致で発生するクラッシュとその対策を紹介します。
AppHeader のパンくずリストを多段階構成に変更した記録
1段階だったブレッドクラム（HB DevTools > ページ名）を、カテゴリを挟んだ多段階構成（HB DevTools > Tools > JSON Formatter）に変更した実装記録。BreadcrumbSegment 型の導入と useHeaderState フックの返り値変更を中心に解説します。
Cloudflare Pages の Edge Runtime で Node.js 依存ライブラリが動作しない問題
cheerio など Node.js API に依存するライブラリが Cloudflare Workers の Edge Runtime で動作しない原因と、pure JavaScript 製ライブラリへの移行手順を解説します。