インストール不要でマイクの動作を確認できる Web ツールを個人で作りました。音量メーター・波形・10秒録音ができ、音声はすべてブラウザの中だけで処理しています。getUserMedia と AnalyserNode と MediaRecorder を組み合わせるだけ……のはずが、実際のユーザー環境で試すと細かい落とし穴がいくつもありました。同じようなものを作る人の参考になればと思い、まとめておきます。 1. 音量は RMS を dB にすると直感に合うgetFloatTimeDomainData のサンプルから RMS を取り、dB に変換します。analyser.getFl...

みなさん、こんにちは！ペンギンエンジニアです！前回019の次回予告で、「次回020は、クリック以外のイベントを扱います。入力欄の onChange と、フォームの onSubmit、そしてイベントの型です。今日の { ...profile, name: ... } に、入力した値を入れられるようになります」とお伝えしました。今日はその約束を回収する回で、PenguinProfile に名前の入力欄とフォームを足します。先に種明かしをすると、019まで一度も受け取らずに済んでいた e が、今日は主役です。そしてフォームは、1行書き忘れるだけで、入力した値が全部消えます。筆者はS...

はじめに前回の #1-66 では、オブジェクトにキーがあるかどうかを in と Object.hasOwn で調べました。ここまで、オブジェクトは「キーを1つずつ指定して」扱ってきました。ところが、オブジェクトの中身をまとめて扱いたい場面があります。商品ごとの価格をまとめたオブジェクトから、合計を出したい、一覧として画面に並べたい、件数を数えたい、といった場面です。群Fで学んだ map・filter・reduce が使えれば簡単ですが、これらは配列のメソッドで、オブジェクトには付いていません。そこで使うのが、オブジェクトを配列に変える3つのメソッド、Object.keys・Ob...

!記事作成は8割人力、2割AI（校正/イメージ画像など）です。 はじめに今回は、フロントエンドのレビューやテストに使える品質確認の観点を紹介します！保存ボタンを連打したときや通信に失敗したとき、日付や金額の表示などまで、どんなところを確認するかをまとめたものです。プラグインを作るにあたって、何をどう確かめるかを整理した中身をお話しします。作ったプラグインはこちら↓ 対象読者フロントエンドで何を確認するか、整理したい方動いている画面にも、確認漏れがないか気になる方AIへの依頼やコードレビュー、テストの観点を見直したい方 さくっと試したい方へサブエージェ...

!記事作成は8割人力、2割AI（校正/イメージ画像など）です。 はじめにAIに金額を扱う画面を作ってもらって、自分の環境ではちゃんと動いている。でも、言語や地域の設定（ロケール）を変えると、意図した金額が保存されないことがあります。!ロケールは、言語や地域に合わせて、数値や日付などの表示方法を決める設定です。たとえば、ja-JPは日本の日本語、de-DEはドイツのドイツ語を表します。ロケールによって、小数点や桁区切りに使う記号、日付の並び方などが変わります。余談ですがロケールは意外と奥が深く、数字の区切り方ひとつでも表示や入力/保存するときの扱いまで考える必要があ...

はじめにChrome 156で :navigation-source という疑似クラスが追加されたので、実際に触ってみました。一覧ページのカードをクリックしたら、そのカードの画像が詳細ページの大きな画像へつながっていく、というよくある演出があると思います。これまではどのカードがクリックされたのかをJavaScriptで判断する必要がありましたが、:navigation-source を使うとCSSだけで書けるみたいです。架空のECサイトのデモを作って試してみると、行きの遷移はCSSの数行で動きました。ただ、戻る遷移やCodeSandboxでの動作確認でいくつかハマったので、その...

はじめにゲーミングマウスの 1000Hz や 8000Hz といったポーリングレートを、インストールなしでブラウザから確認できるツールを個人で開発しています。作ってみると、pointermove の回数を数えるだけでは正しい値に近づきませんでした。この記事では、イベントの選び方、サンプルの扱い方、指標の計算で採った判断を実装ベースでまとめます。!Web ページから見えるのは、OS とブラウザを通って届いたイベントだけです。USB の転送そのものは読めないので、この記事の値はすべて「ブラウザから観測できたサンプルレートの推定」です。 pointermove を数えるだけで...

スコープ本稿は公開UIから見える入力を題材にした設計メモである。内部実装、配信仕様、計測値は観測していない。ここで示す型、状態名、テスト観点は、公開前レビューを会話可能にするための提案である。サムネイルUIで混ざりやすいのは、画像をアップロードできたこと、縮小された表示文脈で意図が読めること、別動画のカバーを参照できることの三つだ。どれも見た目には「画像を見た」状態に見えるが、必要な確認は異なる。 画像プレビューの状態YouTube Thumbnail Preview の公開UIには画像アップロードの入口が見える。設計上は、アップロード成功を完了ではなく、レビュー可能な状態...

はじめに2026年11月3日に安定版が出たChrome 157で、HTML-in-Canvas APIが正式に搭載されました。CSSでレイアウトしたDOMサブツリーを、2D canvasの描画要素またはWebGL/WebGPUのテクスチャとして使えるAPIです。「HTMLをテクスチャにする」だけならhtml2canvasなどで以前から可能でした。このAPIの新しさは、テクスチャになった後もDOMとしての機能（テキスト選択、ページ内検索、翻訳、アクセシビリティツリー、DevTools）が生きていると公式が主張している点にあります。本当にそうなのかを、素のWebGL2で最小実装を書...

「AIっぽいね」そんな無個性なWebサイトは愛着が湧きません。個性はUIの細部を磨くことで滲み出るものです。本書では、文字・余白・形・色・操作などを、架空の個人ブログの作例で考えます。

Claude Code や Cursor、Codex で画面を作らせると、動くコードはすぐに出てきます。ただ、プロンプトに「モダンで、シンプルで、洗練された画面にして」と書くだけだと、毎回似たような紫色のグラデーションや3枚並びのカード、線の多い画面になりがちです。この「AI っぽいテンプレ感」を減らしたくて、コーディングエージェント向けの UI デザイン Skill 「Oil UI」（MIT ライセンスの無料版と、既存コードベース改修向けの Oil UI Pro）を作っています。この記事では、開発者として実際に試した2つのことをまとめます。いきなりコードを書かせず、方向性を比べ...

横書きで書くと、右の版面が縦書きの原稿用紙として組まれていく執筆エディタ「Kusuma Plava（クスマ・プラヴァ）」の v1.0.0 を公開しました。節目として、ブラウザアプリから デスクトップアプリ（Electron）へ移行しています。https://github.com/cuculhart/kusuma-plavaダウンロード（Windows ポータブル zip / Linux deb、インストール後も完全ローカル動作・外部送信なし）:https://cuculhart.com/oss/kusuma/#download どういうエディタか小説家・教科書制作者のための...

この記事で学ぶこと#31 では、コード分割のところで「await import(...) を切れ目に、Vite がビルドで別ファイルに分ける」とさらっと書きました。今回はその「ビルド」の中身を開けます。ここまで npm run dev や npm run build を呪文のように打ってきましたが、その裏で何が起きているのかを知らないと、環境変数がブラウザに漏れる事故や、import のパスが解決できないエラーで足を止めます。今回からが最後のPart「開発基盤と総仕上げ」です。自分の書いたコードが、どう加工されてブラウザに届くのかを、全部実測で確かめます。開発（dev）と本番（...

ダイレクトアンサー（TL;DR）：ソースコードの手動書き換えやページ全体の再生成を行うことなく、既存のHTMLページ内のボタンやリンクを変更するには、以下の4ステップのインプレース・ビジュアル編集ワークフローを採用します：**ページ全体の導線（アクションエントリー）を監査する：**ヘッダーナビゲーション、ヒーローエリアのメインCTA、フッターの問い合わせ先など、変更すべきリンク先と維持すべきページ内アンカーを整理します。**既存のHTMLファイルを読み込む：**単体のHTMLファイルをビジュアルキャンバスに直接読み込み、既存のフォント、ボタンの内側余白、周囲のレイアウトを維持した...

こんにちは！ サイボウズ株式会社 プロダクトエンジニアの くらっち (@kuracchi04) です。 はじめにサイボウズは 2025 年 4 月より、W3C のメンバーに加入しました。https://blog.cybozu.io/entry/joining-w3c標準化プロセスに関わることができるようになるための最初の一歩として、フロントエンドエンジニアの一部のメンバーは積極的に Web 標準のキャッチアップを行っています。そこで、毎月メンバーが興味を持った Web 標準に関する話題や、実際に標準化プロセスに関わることができた場合にはその報告などを 1 つの記事としてまとめ...

この記事で学ぶこと#30 では、XSSをVueがどこまで自動で防ぎ、どこに自分で穴を開けてしまうかを実測しました。ここまでで「正しく動く」「安全に動く」フロントエンドを見てきました。残る軸が「速く動く」です。ただし速さは、やみくもに手を入れても良くなりません。凄腕エンジニアは必ず先に測ります。どこが遅いのかを数値で特定してから、効く手だけを打ちます。今回は、速さを測る物差し（Core Web Vitals）、一番効く代表的な手（コード分割）、そして本番で起きたことを見張る仕組み（エラー監視）を、全部実測で確かめます。Core Web Vitals の3指標（LCP・INP・CL...

こんにちは、Inflabのフロントエンド開発者、Yoongdyです。最近、Inflearnのユーザーの皆さんが心を込めて書いてくださった受講レビューや質問&回答のページをSNSでシェアしたときに真っ先に目に入るリンクプレビュー画像が、以前と変わったことにお気づきの方はいらっしゃるでしょうか？まだ気づいていない方は、この記事を読む前に、ご自身がInflearnに投稿した自慢の受講レビューや質問&回答をSNSでシェアしてみてください。この記事をより楽しく読んでいただけるはずです。それでは、OG画像を動的に生成する仕組みを開発する中で得た経験を共有していきます。始める...

音声候補を「役割カード」として扱うUI設計本稿は公開画面から考えるUI設計メモである。特定サービスの内部実装、生成品質、権利判定、実際の審査フローを示すものではない。目的は、音声の再生可否と、共有する投稿カードの説明可能性を分けることだ。 音声単体ではなく、公開カードを単位にする共有時に見られるのは波形だけではない。最初のフレーム、タイトル、字幕、台本、短い開示文が一緒に見られる。そこで、候補名を単独の「完成品」として持つのではなく、場面上の役割と結びつける。type Role = 'setup' | 'turn' | 'aside&...

はじめに前回の #1-65 では、ネストしたオブジェクトを ?. と ?? で安全に読む方法を見ました。そこで、1つ区別できないものがありました。**「キーはあるが値が undefined」と「キー自体が無い」**です。どちらも読むと undefined になるため、?. や ?? からは同じに見えます。多くの場面では、それで困りません。ただ、実務では「項目が送られてこなかった」のか「項目は送られてきたが空だった」のかを分けたい場面が、ときどき出てきます。今回は、キーが存在するかどうかを調べる2つの方法、in 演算子と Object.hasOwn を扱います。AI（Claude...

TanStack Query 入門 — データフェッチの基本 概要React でサーバーからデータを取得するとき、useEffect + useState で素朴に書くと、ローディング状態・エラー処理・キャッシュ・再取得を毎回手書きすることになります。これらは本質的にアプリ固有のロジックではなく、「非同期なサーバー状態をどう扱うか」という共通課題です。TanStack Query（旧 React Query）は、この**サーバー状態（server state）**の管理に特化したライブラリです。本記事では入門として、基本的なデータフェッチの書き方と、押さえておきたい考え方を整...