はてなブックマーク

公開日: 2025 年 9 月 23 日 本日、新しい Chrome DevTools Model Context Protocol(MCP)サーバーの公開プレビューを開始します。これにより、Chrome DevTools の機能を AI コーディング アシスタントに導入できます。 コーディング エージェントには根本的な問題があります。生成したコードがブラウザで実行されたときに実際に何をするのかを確認できないことです。目隠しをしてプログラミングしているようなものです。 Chrome DevTools MCP サーバーはこれを変更します。AI コーディング アシスタントは、Chrome でウェブページを直接デバッグし、DevTools のデバッグ機能とパフォーマンス分析情報を活用できます。これにより、問題の特定と修正の精度が向上します。 仕組みを実際に確認してみましょう。 Model Con

Published: September 23, 2025 We're launching today a public preview for the new Chrome DevTools Model Context Protocol (MCP) server, bringing the power of Chrome DevTools to AI coding assistants. Coding agents face a fundamental problem: they are not able to see what the code they generate actually does when it runs in the browser. They're effectively programming with a blindfold on. The Chrome D

CPU、GPU、メモリ、マルチプロセス アーキテクチャ この 4 部構成のブログシリーズでは、Google Chrome ブラウザの内部を、大まかなアーキテクチャからレンダリング パイプラインの詳細まで見ていきます。ブラウザがコードを機能するウェブサイトに変換する仕組みや、パフォーマンスの向上のために特定のテクニックが推奨される理由がわからない場合は、このシリーズがおすすめです。 このシリーズのパート 1 では、コア コンピューティングの用語と Chrome のマルチプロセス アーキテクチャについて説明します。 コンピュータの中核となるのは CPU と GPU です。 ブラウザが実行されている環境を理解するには、いくつかのコンピュータ パーツとその機能について理解する必要があります。 CPU 図 1: 4 つの CPU コアは、各デスクに座ってタスクを処理するオフィス ワーカーを表します

Translator API Translator API は Chrome 138 安定版から利用できます。ユーザーが作成したコンテンツや動的コンテンツをリクエストに応じて翻訳します。 ユースケース ユーザーは母国語でリクエストを入力できます。これは Language Detector API で識別できます。次に、Translator API を使用してリクエストをビジネスの運用言語に変換し、サポート エージェントに送信します。 ソーシャル ネットワーク アプリケーションでは、ユーザーが理解できない言語で投稿がタイムラインに表示されたときに、オンデマンドで翻訳をリクエストできます。 Language Detector API Language Detector API は Chrome 138 安定版から利用できます。この API を使用して、入力テキストの言語を検出できます。翻訳の入

Published: June 24, 2025 Chrome 138 is rolling out now, and this post shares some of the key features from the release. Read the full Chrome 138 release notes. Highlights from this release: Use the new built-in AI APIs to summarize, translate, or detect the language of text. Check out several new CSS functions. Adapt your web layout to target foldable devices with the Viewport Segments API. The Tr

公開日: 2025 年 6 月 11 日 境界と疑似要素のハックに別れを告げ、CSS のギャップ装飾にようこそ。 Microsoft Edge チームは、CSS ギャップ装飾(フレックス、グリッド、マルチ列レイアウト内のアイテム間のギャップにスタイルを適用する新しい方法)が、Chrome と Edge 139 でデベロッパー向けトライアルとして利用可能になったことをお知らせいたします。 ぜひお試しになり、フィードバックをお寄せください。この API の今後の開発に役立てさせていただきます。 役に立つリンク の仕様 Microsoft Edge のお知らせ(ブログ投稿) 説明 問題 カレンダー、カード、データグリッドなどの UI コンポーネントのギャップをスタイル設定すると、読みやすさが大幅に向上し、全体的な美しさが増します。ただし、グリッド レイアウトと Flexbox レイアウトでこの効

公開日: 2025 年 6 月 9 日 Chrome では、ローカル ネットワーク アクセス仕様のドラフトの一環として、ユーザーのローカル ネットワークに接続するサイトに対して新しい権限プロンプトを追加します。この変更は、プライベート ネットワーク上のルーターやその他のデバイスをターゲットとするクロスサイト リクエスト フォージェリ(CSRF)攻撃からユーザーを保護し、サイトがこれらのリクエストを使用してユーザーのローカル ネットワークのフィンガープリントを取得する能力を低減することを目的としています。 この変更がウェブ エコシステムに与える影響を把握するため、Chrome チームは、ユーザーのローカル ネットワークやユーザーのマシンでローカルに実行されているソフトウェアへの接続に依存するウェブ アプリケーションを構築するデベロッパーからのフィードバックを募集しています。Chrome 13

Build with Chrome Learn how Chrome works, participate in origin trials, and build with Chrome everywhere.

はじめに 多くのウェブサイトは、ユーザー認証に長期間有効な Cookie を使用していますが、これはセッション ハイジャックの影響を受けやすくなります。デバイスにバインドされたセッション認証情報(DBSC)は、ハードウェア ベースのセキュリティ レイヤを追加してこのリスクを軽減し、セッションが特定のデバイスにバインドされるようにします。 このガイドは、ウェブ アプリケーションの認証フローを管理するデベロッパーを対象としています。DBSC の仕組みと、サイトに統合する方法について説明します。 DBSC の仕組み 大まかに言うと、DBSC はユーザーのデバイスに関連付けられた暗号鍵ペアを導入します。Chrome はログイン時にこの鍵ペアを生成し、利用可能な場合は、トラステッド プラットフォーム モジュール(TPM)などの安全なハードウェアに秘密鍵を保存します。セッションでは有効期間の短い Co

Device Bound Session Credentials(DBSC)は、Cookie の盗難やセッションの不正使用からユーザー セッションを保護するために設計された新しいウェブ機能です。この機能は、Chrome 135 でオリジン トライアルとしてテストできるようになりました。 背景 Cookie は、最新のウェブ認証において重要な役割を果たしており、ユーザーがブラウジング セッション間でログインしたままにしておくことが可能です。しかし、攻撃者は盗まれた認証 Cookie を悪用してセッションを乗っ取り、多要素認証やその他のログイン セキュリティ メカニズムを回避するケースが増えています。 マルウェアの運営者は、侵害されたデバイスからセッション Cookie を抜き出し、ユーザー アカウントへの不正アクセスを可能にします。Cookie は署名なしトークンであるため、所有権の証明を必

公開日: 2025 年 3 月 20 日 Chrome 135 以降では、スクロールとカルーセルのエクスペリエンスを作成するために設計された CSS Overflow 5 仕様の機能を使用できます。 この記事では、これらの新機能を使用して JavaScript なしで作成されたさまざまなスクロールとカルーセルの操作の概要を説明します。次の動画で、この機能で実現できることをご覧ください。 この動画では、スクロール ボタン、スクロール マーカー、スクロール駆動アニメーション、scroll-state() クエリ、:has()、グリッド、アンカーなどを組み合わせて使用しています。 アクセシビリティの面でも、 カルーセルのベスト プラクティスは、エンジニアリング チームとユーザー補助チームの協力により、ブラウザで処理されます。これ以上にアクセシビリティに優れたカルーセルを作ることは非常に困難です。

公開日: 2025 年 3 月 19 日 Skrifa は Rust で記述されており、すべてのユーザーにとって Chrome でのフォント処理を安全に行うために FreeType の代替として作成されました。Skrifa は Rust のメモリセーフティを活用し、Chrome のフォント技術の改善を迅速に反復できます。FreeType から Skrifa に移行することで、フォントコードを変更する際にアジャイルかつ大胆な対応が可能になります。セキュリティ バグの修正に費やす時間が大幅に短縮され、アップデートの迅速化とコード品質の向上につながっています。 この投稿では、Chrome が FreeType から移行した理由と、この移行によって実現した改善点について説明します。 FreeType を置き換える理由 ウェブは、ユーザーがさまざまな信頼できないソースから信頼できないリソースを取得し

公開日: 2025 年 3 月 7 日 ボタンは、動的なウェブ アプリケーションを作成するために不可欠です。ボタンは、メニューを開いたり、アクションを切り替えたり、フォームを送信したりします。これらは、ウェブ上のインタラクティビティの基盤となります。ボタンをシンプルでアクセスしやすいものにすると、予想外の課題に直面することがあります。マイクロフロントエンドやコンポーネント システムを構築するデベロッパーは、必要以上に複雑なソリューションに直面することがあります。フレームワークは役に立ちますが、ウェブではさらに多くのことができます。 Chrome 135 では、新しい command 属性と commandfor 属性を使用して宣言型の動作を提供する新しい機能が導入され、popovertargetaction 属性と popovertarget 属性が強化され、置き換えられます。これらの新し

記事作成時点では、Document Picture-in-Picture API は限定的に利用できます。 ただし、プログレッシブ エンハンスメントや正常なデグレードで使用することはできます。 ユースケースを計画する際は、標準機能ではなく、段階的な拡張機能として扱うようにしてください。この記事では、グレースフル デグラデーションの例を紹介します。 Document PiP API による学習者のユーザー エクスペリエンスの向上 LearnHTMLCSS.online は、セマンティックでアクセス可能な HTML と CSS を学習できるインタラクティブな学習プラットフォームです。インタラクティブなテキスト エディタとブラウザのプレビュー ウィンドウが用意されています。 次のスクリーンキャストでは、アプリのレイアウトを示しています。画面は 2 つの列に分かれています。最初の列にはコードエディ

公開日: 2025 年 1 月 15 日 再設計された attr() 関数 CSS attr() を使用すると、CSS で HTML 属性の値を使用できます。これまで、attr() は疑似要素の content プロパティ内でのみ機能し、値を CSS <string> に解析することしかできませんでした。 再設計された attr() 関数(Chrome 133 以降で利用可能)により、より多くの機能を利用できるようになります。attr() をカスタム プロパティを含む任意の CSS プロパティで使用できるようになりました。また、値を <string> 以外のデータ型に解析できるようになりました。 例 次の例では、div の color プロパティの値に data-color 属性の値を使用しています。この属性値は、attr() と type() を使用して <color> に解析されます。

<select> 要素などのフォーム コントロールのスタイル設定は、長年にわたりデベロッパーの最大の問題として報告されており、Google は解決策の開発に取り組んできました。この作業は複雑で、適切に行うまでに長い時間がかかりましたが、この機能のリリースは間近に迫っています。カスタマイズ可能なバージョンの select 要素は、WHATWG で正式にステージ 2 に移行しており、クロスブラウザでの関心が高く、Chrome Canary 130 からプロトタイプをテストできます。 ぜひお試しになり、フィードバックをお寄せください Chrome Canary のインストールがバージョン 130 に更新され、試験運用版のウェブ プラットフォームの機能フラグがオンになっていることを確認します。このフラグを有効にするには、アドレスバーで chrome://flags に移動し、#experiment

公開日: 2025 年 1 月 16 日 パスキーは、パスワードに代わるより安全でユーザー フレンドリーな方法です。パスキーを使用すると、ユーザーは生体認証センサー(指紋認証や顔認証など)、PIN、パターンを使用してデバイスの画面のロックを解除し、アプリやウェブサイトにログインできます。パスキーを使用すると、パスワードを覚えたり管理したりする必要がなくなり、フィッシングの心配も不要になります。iOS と iPadOS で Google パスワード マネージャー(GPM)のパスキーを使用できるようになり、Chrome はすべてのオペレーティング システムでパスキーを同期するようになりました。 Google パスワード マネージャーのパスキーが iOS 17 以降で利用可能に iOS 17 以降(および iPadOS 17 以降)の Chrome ユーザーは、Google パスワード マネージ

Published: January 16, 2025 Passkeys are a safer and more user-friendly alternative to passwords. They enable users to sign in to apps and websites by unlocking their device screen–with a biometric sensor (such as a fingerprint or facial recognition), PIN, or a pattern. With passkeys, users no longer need to remember or manage passwords, and worry about phishing. With passkeys on Google Password M

公開日: 2025 年 1 月 15 日 Chrome 133 では、コンテナクエリを拡張して、スクロール状態のコンテナクエリを導入しています。固定位置、スクロール スナップポイント、スクロール可能な要素のブラウザ管理状態を CSS からクエリして適応できるようになりました。 概要 スクロール状態のクエリが導入される前は、JavaScript を使用して、要素が固定されているか、スナップされているか、スクロール可能かを把握する必要がありました。現在、この情報を把握して適切に適応するための、よりパフォーマンスの高い方法が標準トラックで検討されています。また、アニメーションをトリガーする新しい方法として、CSS からスクロール トリガー アニメーションを解除することもできます。 Chrome 133 で利用できる状態クエリの概要は次のとおりです。 停止状態: 要素が端に固定されたときにスタイル

text-box: trim-both cap alphabetic; このプロパティを使用すると、テキストの上下のスペースを制御できます(<h1>、<button>、<p> など)。フォントによって、このブロックの方向のスペースの量が異なり、要素のサイズに影響します。この混沌とした空間の貢献は簡単に測定できず、これまでは制御不可能でした。 フォントが認識したら、CSS も認識します。 https://codepen.io/web-dot-dev/pen/xbKjRxL フォント上とフォント下のスペースは、ウェブでのテキストのレイアウト方法によるもので、「ハーフ リーディング」と呼ばれます。この点については、Matthias Ott による「The Thing With Leading In CSS」という投稿で詳しく説明されています。基本的に、手作業で文字組を行っていた時代は、金属製の鉛

Build with Chrome Learn how Chrome works, participate in origin trials, and build with Chrome everywhere.

Chrome でビルドする Chrome の仕組み、オリジン トライアルに参加して、あらゆる場所で Chrome を使って構築しましょう。

機能と Gemini の機能 ViddyScribe は、ユーザーファーストで設計されたアプリケーションを構築しました。文字起こしや音声解説を生成するソリューションはすでに多数存在しますが、ViddyScribe は、視覚障がいのあるユーザーという特定のユーザー層にとって、迅速な結果と快適なユーザー エクスペリエンスの両方を優先する出力を生成することを重視しました。 この視聴者向けに動画を手動でアノテーションして追加の詳細情報を提供するには、時間がかかりすぎることが多く、無視されることもよくあります。ViddyScribe は Gemini を使用して、テキスト ファイルに任意のフレームの説明を追加する以上の拡張性を持つカスタム ソリューションを作成しました。 ViddyScribe アプリでは、サンプル動画を使用するか、独自の動画(100 MB、2 分以内)をアップロードして、Gemin

公開日: 2024 年 11 月 6 日 Chrome 131 以降では、<details> 要素と <summary> 要素の構造のスタイル設定に、より多くのオプションが追加されました。開示ウィジェットやアコーディオン ウィジェットを作成する際に、これらの要素を使用できるようになりました。 具体的には、Chrome 131 で導入された変更により、これらの要素で display プロパティを使用できるようになり、展開と折りたたみの部分のスタイルを設定する ::details-content 疑似要素が追加されました。

シングルページ アプリケーション(SPA)は、ユーザーがサイトを操作するたびにコンテンツを動的に書き換えるというコア機能によって定義されます。これは、サーバーから完全に新しいページを読み込むというデフォルトの方法とは異なります。 SPA では History API を介してこの機能を実現できます(または、限定的なケースでは、サイトの #hash 部分を調整することで実現できます)。しかし、この API は SPA が一般的になるずっと前に開発された扱いづらい APIであり、ウェブではまったく新しいアプローチが求められています。Navigation API は、History API の粗い部分を単にパッチするのではなく、この領域を完全にオーバーホールする API として提案されています。(たとえば、スクロールの復元では、History API を再作成するのではなく、パッチを適用していま

[パフォーマンス] パネルでは、実行に時間がかかり、パフォーマンスが低下しているメインスレッドの処理を示すために、長時間実行タスクごとに右上に赤い三角形が表示され、[概要] タブに警告が表示されます。 パフォーマンス レコーディングでは、これらの長時間実行タスクの一部が [スタイルの再計算] イベントになることがあります。スタイルの再計算イベントは、ブラウザが次の処理を行うのに要する時間を記録します。 ページ上の DOM 要素を反復処理して、指定された要素に一致するすべての CSS スタイルルールを探します。 一致する CSS スタイルルールに基づいて、各要素の実際のスタイルを計算します。 CSS スタイルは、CSS ルールの適用範囲が変更される可能性がある場合は常に再計算する必要があります。次のような場合が考えられます。 DOM に要素が追加または削除される。 要素の属性が変更されている

Build with Chrome Learn how Chrome works, participate in origin trials, and build with Chrome everywhere.