サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
プライムデーセール
developer.chrome.com
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
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 属性が強化され、置き換えられます。これらの新し
公開日: 2025 年 3 月 4 日 Document Picture-in-Picture API(Document PiP API)を使用すると、ウェブアプリでフローティングの常に最前面のウィンドウ(ピクチャー イン ピクチャー ウィンドウ)を開き、任意の HTML コンテンツを表示できます。 この API は、<video> 用の Picture-in-Picture API をベースに構築されており、PiP ウィンドウで動画の視聴を継続できます。 Document PiP API は任意の HTML コンテンツを表示できるため、新しいユースケースを実現できます。 ブラウザのサポートと段階的な拡張 記事作成時点では、Document Picture-in-Picture API は限定的に利用できます。 ただし、プログレッシブ エンハンスメントや正常なデグレードで使用することはでき
公開日: 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」という投稿で詳しく説明されています。基本的に、手作業で文字組を行っていた時代は、金属製の鉛
公開日: 2024 年 11 月 21 日 Gemini API デベロッパー コンペティションに多数の素晴らしい作品が応募されましたが、ウェブ アプリケーション部門の優勝作品として ViddyScribe が選ばれました。 ViddyScribe は、視覚障がいのあるユーザー向けに動画の音声による説明を生成することで、YouTube で動画のアクセシビリティを高め、さらには YouTube 以外でも動画のアクセシビリティを高めることができる Gemini の例です。 機能と Gemini の機能 ViddyScribe は、ユーザー ファーストで設計されたアプリを構築しました。文字起こしと音声による説明を生成するためのソリューションはすでに多数存在しますが、ViddyScribe では、特定のオーディエンス(視覚障がいのある人々)を対象に、迅速な結果と快適なユーザー エクスペリエンスの両
公開日: 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 に要素が追加または削除される。 要素の属性が変更されている
Use the AI assistance panel to learn more about how your website works with the help of AI. Overview The AI assistance panel lets you chat with Gemini directly in DevTools. Conversations you start from this panel automatically have context about technical details of the page you are inspecting. When using the AI assistance panel you can either use provided example prompts or your own questions as
Handwriting Recognition API とは何ですか? Handwriting Recognition API を使用すると、ユーザーの手書き(インク)をテキストに変換できます。一部のオペレーティング システムには、このような API が長い間含まれていました。この新しい機能により、ウェブアプリでもこの機能を使用できるようになりました。コンバージョンはユーザーのデバイスで直接行われ、オフライン モードでも機能します。サードパーティのライブラリやサービスを追加する必要はありません。 この API は、いわゆる「オンライン」または準リアルタイムの認識を実装します。つまり、ユーザーが描画している間に、単一のストロークを取り込んで分析することで、手書き入力が認識されます。光学式文字認識(OCR)などの「オフライン」手法では最終的な結果のみが判明しますが、オンライン アルゴリズムでは
Recorder supports export to Puppeteer for Firefox As part of WebDriver BiDi support, the Recorder panel can now export recordings to Puppeteer for Firefox. With Puppeteer's support of Firefox, you can now record user flows using the Chrome DevTools Recorder panel, export them, and run them against both Firefox and Chrome. For more information, see WebDriver BiDi - The future of cross-browser autom
Styling form controls like the <select> element has been reported as a top developer pain point for years, and we've been working on a solution. While this work is complex and has taken a long time to get right, we're getting very close to landing this feature. A customizable version of the select element is officially in Stage 2 in the WHATWG, with strong cross-browser interest and a prototype fo
公開日: 2024 年 9 月 4 日、最終更新日: 2024 年 10 月 16 日 Digital Credentials API のオリジン トライアルは Chrome 128 から開始されます。Digital Credentials API は、ウェブサイトがデジタル ウォレットに保存されている運転免許証や国家 ID などのデジタル認証情報を通じて、ユーザーに関する検証可能な情報を選択的にリクエストできる新しいウェブ プラットフォーム API です。 背景 多くの官公庁や民間企業がデバイスに関連付けられたデジタル認証情報を発行し始めており、現実世界でのデジタル ID が現実のものになりつつあります。たとえば、米国の一部の州(アリゾナ州、カリフォルニア州、コロラド州、ジョージア州、メリーランド州など)では、モバイル デバイスの Google ウォレットなどのデジタル ウォレット アプ
Hints: Hints give relying parties (RPs) better control over WebAuthn UI in the browser. They are especially helpful for enterprise users who want to use security keys. Related origin requests: With related origin requests, RPs can make passkeys valid on multiple domains. If you own multiple sites, you can now enable your users to reuse their passkey across your sites, eliminating login friction. J
Before scrollSnapChange, you could use an intersection observer to find what element was crossing the scroll port, but determining what was snapped was restricted to a few circumstances. For example, you can detect if the snap items fill the scroll port or fill the majority of the scroll port. To do this you'd observe intersecting elements of the scroll area, then based on which item is consuming
scrollSnapChange より前は、インターセクション オブザーバーを使用してスクロールポートを横切る要素を見つけることができましたが、スナップされた要素を特定できるのは限られた状況に限られていました。たとえば、スナップ アイテムがスクロールポートを埋めるのか、スクロールポートの大部分を埋めるのかを検出できます。これを行うには、スクロール領域の交差する要素を監視し、スクロール領域の大部分を占有しているアイテムに基づいて、これがスナップ ターゲットであると想定し、scrollend を待機して、スナップされたアイテム(スナップ ターゲット)に対してアクションを実行します。 ただし、scrollSnapChanging より前は、スナップ ターゲットがいつ変更されたか、または何に変更されたか(スクロール フリングが行われたなど)を知ることはできませんでした。 スナップ ターゲットとして
次のページ
このページを最初にブックマークしてみませんか?
『Chrome for Developers』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く