バニラJS Webアプリ の記事一覧
変化するChatGPTの回答DOMから本文を安定して取得する
ChatGPTの画面構造変更で回答を取得できなくなった事例から、本文の根を読む、IDを祖先から得る、旧セレクターを段階的に残す調査手法を紹介します。
Chrome拡張の全機能を利用規約の同意まで停止する
多機能なChrome拡張へ後から初回同意ゲートを加える際、Service Workerの同期リスナー登録を保ちつつ各機能を止める設計と注意点を解説します。
Chrome拡張で添付PDFをダウンロードせずにその場で表示する
添付ダウンロードになるPDFを、ユーザー操作で取得してChrome標準ビューアに表示する方法と、権限・メモリ・閉じる操作の注意点を解説します。
Chrome拡張の不具合報告を事前入力フォームで受け付ける
拡張機能に専用の送信サーバーや追加権限を設けず、環境情報を事前入力したGoogleフォームへ案内して不具合報告を受け付ける方法です。
Chrome拡張からFile System Access APIでローカル保存する
利用者が選んだフォルダーへChrome拡張から保存する際のハンドル保管、権限再確認、待機中の要求管理、Service Workerでの書き込みを整理します。
Chrome拡張のLevelDBログを読み取り専用で調査する
Chrome拡張の保存データをLevelDBログから調べる際、元データを変更せずにコピーを解析し、ブロック分割や断片化を考慮して必要な範囲だけ確認する方法です。
Chrome拡張で対象サイトのデータ取得経路を選ぶ
画面DOM、埋め込みJSON、内部APIなど複数の取得経路を実サイトで比較し、更新や権限、利用者データのリスクを踏まえて選ぶ手順を紹介します。
Chrome拡張で月次通知と起動時の取りこぼしを扱う
毎月の指定日や月末に通知するChrome拡張で、ワンショットalarm、Service Worker再起動、取りこぼしの補完、重複通知防止を設計する方法を紹介します。
Chrome拡張のService Workerと移植処理をNode.jsでテストする
ブラウザーを毎回起動せずにChrome API依存の処理や移植結果を検証するため、実モジュールと小さなAPIモック、全数比較を組み合わせる方法です。
Chrome拡張で送信前に確認を挟み結果を記録する
ページの送信操作を調査し、捕捉フェーズで確認を挟み、ネイティブ確認ダイアログの結果を限定的に検出する構成と二重送信を避ける注意点を解説します。
Chrome拡張で既存SPAの添付欄にドラッグ＆ドロップを追加する
既存サイトのフォームを壊さず、対象の添付欄だけでファイルを受け付けるChrome拡張の設計を解説します。入力欄への反映、件数制限、表示、送信確認までを扱います。
Chrome拡張でSPAの入力モーダルを安全に自動操作する
SPAの登録画面を自動操作するとき、画面状態の確認、日付と時刻の検証、候補選択の待機、確認モーダル処理を組み合わせて誤登録を防ぐ方法を解説します。
Chrome拡張の設定はstorage.localとstorage.sessionで使い分ける
再起動後も残す設定と一時的な状態をstorage.local・storage.sessionに分け、content scriptへの公開範囲や起動時の競合を避ける方法を解説します。
日本語文面から宛名を安全に取り出す
敬称だけを手掛かりに日本語文面から宛名を抽出し、一般的な呼びかけや本文の誤認を拒否して、アカウント名へ安全にフォールバックする方法を解説します。
依存ライブラリーなしでSVGの折れ線と棒グラフを重ねる
外部グラフライブラリーを使わず、SVGで折れ線と棒を重ねるときの座標系、左右の軸、積み上げ表示、欠損値、ツールチップの設計を紹介します。
Chrome拡張の画面を実物に近い状態でCDP検証する
chrome.* APIを最小スタブで補い、実物の拡張ページをCDPで待機・クリック・撮影する検証方法と、サイドパネルのタブ別設定を確認する要点をまとめます。
多機能Chrome拡張を機能登録とチャット分業で保守する設計
多数の機能を持つChrome拡張を、機能登録、名前空間、共有ドキュメント、版管理で分割し、複数の開発チャットでも保守しやすくする設計をまとめます。
Chrome拡張の画面マスクをdocument_start CSSでちらつかせない
画面共有やスクリーンショット向けの目隠しを、document_startのCSSと安全側の初期状態で実装し、SPAやShadow DOMにも追従させる考え方を解説します。
Chrome拡張のクリップボードコピーをオフスクリーン文書へ集約する
タブ移動や待機後でもChrome拡張から確実にコピーできるよう、オフスクリーン文書とService Workerへクリップボード処理を集約する方法を解説します。
Chrome拡張のポップアップから入力欄へ確実に文字を挿入する
ポップアップのフォーカス問題、VueやReactの入力イベント、同じclassの別textareaを考慮して、Chrome拡張からページの入力欄へ文字を確実に挿入する方法を解説します。
ローカルLANの2画面同期と座席レイアウトUIを安定させる設計
ローカルLAN内で操作画面と表示専用画面を同期し、座標DB方式の座席レイアウトとCanvasグリッドで、現場向け表示システムを安定させる設計をまとめます。
Chrome更新でSVGの細線が霞む問題とviewBoxズームの実機検証
Chrome更新後にSVGの1px未満の線が霞む原因、devicePixelRatio基準の線幅下限、viewBoxズーム・パンのクランプ、インストール済みChromeをPuppeteerで検証する方法をまとめます。
Excelの投稿リストからXの予約投稿を半自動化するブックマークレット
Excelやスプレッドシートで管理している投稿本文・予約日時・画像パスを使って、Xの予約投稿入力を半自動化するブックマークレットの実装例です。
Chromeブックマークレットでココナラ依頼者名を返信欄へ自動入力する
ココナラのメッセージ詳細ページやトークルームで、相手の名前を返信入力欄へ1クリックで差し込むChromeブックマークレットの実装例です。様なし版と様あり版を使い分けます。
Chromeブックマークレットでココナラ予約枠を1クリックコピーする
Chromeブックマークレットで、ココナラ予約管理カレンダーの空き枠を定型テキストに変換してクリップボードへコピーする実装例です。%やjavascript:消失など、配布時の落とし穴も整理します。
Chromeブックマークレットでココナラ販売金額を1クリック合計する
Chromeブックマークレットで、ココナラ取引管理の取引中ページに表示されている販売金額を合計し、件数と合計額をアラート表示する実装例です。
Chromeブックマークレットでココナラ分析グラフの数値をExcel用にコピーする
Chromeのブックマークレットを使い、ココナラの分析ページに表示される日付別の表示数・閲覧数・販売数をTSV形式でクリップボードへコピーする実装例です。
importmapでThree.jsをCDNから読み込むビルドレス3D Web構成
npmやViteを使わず、importmapでThree.jsとOrbitControlsをCDNから読み込む静的3D Webアプリ構成を整理します。
スキーマ駆動パラメータUIとモードレジストリで分岐を減らす
複数モードを持つWebアプリで、入力項目、検証、計算関数、出力ファイル名をモードレジストリに集約する設計パターンです。
重い計算UIでスライダー操作中プレビューとデバウンスを両立する
スライダー操作中は軽量プレビュー、操作完了時は本解像度で再計算することで、重い3D計算UIの操作感を保つパターンです。
Three.jsでパラメータ変更時にカメラ位置を保持するパターン
3Dモデル更新時に視点を毎回リセットせず、初回やモード切替だけ自動フィットするためのカメラ制御パターンです。
円単位の逆算を二分探索で実装する
手数料や消費税の端数処理がある料金計算で、予算内最大額や目標手取り以上の最小額を1円単位で探索する方法です。
技術ブログとWebアプリを相互リンクさせる導線設計
技術ブログで解説した式や考え方をWebアプリで試せるように、記事とアプリを相互リンクさせる導線設計を整理します。
計算表のセルをクリックして式と代入値を確認できるUI
行列や係数表のセルに、一般式、代入値、計算結果、説明を持たせ、クリックで詳細を確認できるUIパターンです。
数式導出をSTEPで見せる学習UIの作り方
数式や計算過程を一度に見せず、概要、条件式、行列、係数、最終式へ順番に追える学習UIとして整理する設計パターンです。
係数行列の条件式を色分けして見せるUI設計
条件式、係数行列、右辺ベクトルの対応関係を色でそろえ、数値計算の構造を追いやすくするUI設計パターンです。
モバイル向け数値入力パッド
スマートフォンで金額を入力しやすくするために、数字、増減、全消去、1字削除ボタンを画面内に置く入力UIパターンです。
計算ロジックを純粋関数に分離する設計
見積、税、手数料などの計算処理をUIイベントから切り離し、DOMに依存しない純粋関数として扱う設計パターンです。
スマホでは表をカード表示に変換するCSS
PCでは通常テーブル、スマホでは行単位のカード表示に切り替えて、計算結果表の横切れを防ぐCSSパターンです。
タブごとに入力状態を保持するUI
見積額、予算、手取りなど複数モードを持つ計算ツールで、タブごとに金額や設定を保存・復元するUIパターンです。
Uint8Arrayを安全にbase64エンコードしてlocalStorageに保存する方法
100KB超のUint8Arrayをbtoapに渡すとスタックオーバーフローが起きます。32KBチャンク分割でエンコードする安全なパターンを解説します。
実績バッジシステムをlocalStorage + Supabase併用で実装する方法
ゲスト時はlocalStorage、ログイン後はSupabaseに同期する実績バッジシステム。トースト通知付き。
重い処理でUIが固まらない！setTimeout(0)でプログレスバー＋キャンセル対応
重い計算処理中もUIがフリーズしない非同期ループパターン。setTimeout(0)でプログレス更新とキャンセル対応を両立。
Canvasで複数要素を1枚に合成してPNGダウンロードする方法
グリッド＋ヒント数字＋罫線をCanvasに合成して1枚のPNGとして保存。サーバー不要でクライアント側完結。
複数ページ共通UIをIIFEモジュールに集約する方法（フレームワーク不要）
フレームワークなしで共通UIコードを切り出すIIFEパターン。実測170行以上の重複削減事例付き。
flex-wrap + orderで2段ナビゲーションを作る方法（モバイルは下部タブバー）
overflow:hiddenやscrollに頼らず、flex-wrap + orderで自動2段ナビ。モバイルは下部タブバーに完全切替。
ゲームHUD（スコア/タイマー/コンボ）と結果モーダルのCSSパターン
スコア・タイマー・コンボのHUDレイアウト + 背景ブラー付き結果モーダルのゲームUIパターン。
Git Subtree Splitでサブフォルダだけを GitHub/Vercel にデプロイする方法
開発資料を含む親リポジトリから、Web/サブフォルダだけをGitHub main にforce pushする deploy.sh パターン。
モバイル向けタップ入力グリッドでソフトキーボードを回避する方法
モバイルで <input>のキーボード開閉によるUX低下を回避。A-Z/0-9ボタングリッドを画面内に配置するパターン。
印刷PDFの用紙向きをコンテンツの縦横比から自動判定する方法
CSS @page + 縦横比計算で、A4縦/横を自動切替する印刷PDF生成パターン。ユーザー操作不要。
pointer-events:noneの全画面オーバーレイで音と連動する視覚フィードバック
音声再生と完全同期する全画面フラッシュを実装。pointer-events:none + opacity遷移でUI操作を邪魔しない。
デザインツール不要！SVGファビコン＋PythonでPNG生成する方法
コードだけでファビコンを生成。SVG + Python(struct/zlib)でPillowなしにPNG生成するパターン。
ビルドツール不要でバニラJSに多言語対応（i18n）を実装する方法
静的HTML + バニラJSでビルド不要の軽量i18nを実装。data-i18n属性とlocalStorageで12言語対応も可能。
Web Audio APIで精密タイミング制御（事前スケジューリングでドリフト根絶）
setTimeoutのドリフトを根絶。AudioContext.currentTimeで全音符を一括事前スケジュールする精密タイミングパターン。