サンプル
マニフェストのバージョン
パッケージに必要なマニフェスト ファイル形式のバージョンを指定する 1 つの整数。Chrome 以降 ここに記載されている形式を使用するには、 2 (引用符なし)を指定する 必要があります 。 ドキュメント: Chrome 18 でマニフェスト バージョン 1 は 非推奨 になりました。バージョン 2 はまだ 必須 ではありませんが、 近い将来、非推奨のパッケージを使用するパッケージの 指定します。移行の準備が整っていない拡張機能、アプリケーション、テーマは、 Chrome 18
ストレージ領域のマニフェスト
local および sync のストレージ領域とは異なり、 managed のストレージ領域では構造を次のようにする必要があります。 JSON スキーマ として宣言され、Chrome によって厳格に検証されます。このスキーマは、 "storage" マニフェスト キーの "managed_schema" プロパティで示されるファイルで、 エンタープライズ ポリシー。
マニフェスト - オフライン有効
アプリや拡張機能をオフラインで動作させるかどうかを指定します。Chrome でオフラインが検出されると、このフィールドが true に設定されているアプリが新しいタブページでハイライト表示されます。 Chrome 35 以降では、アプリはオフラインが有効になっているとみなされ、 "webview" 権限がリクエストされない限り、 "offline_enabled" のデフォルト値は true です。この場合、ネットワーク接続が必須であると想定され、 "offline_enabled"
マニフェスト - 名前と略称
name および short_name マニフェスト プロパティは、アプリを識別する短い書式なしテキスト文字列です。両方のフィールドにロケール固有の文字列を指定できます。詳しくは、 多言語対応 をご覧ください。 name (最大 45 文字)はアプリのプライマリ ID であり、必須フィールドです。 次の場所に表示されます。 short_name (最大 12 文字を推奨)は、アプリ名の短縮版です。これはオプションのフィールドであり、指定されていない場合は name
マニフェスト - アイコン
拡張機能、アプリ、テーマを表す 1 つ以上のアイコン。常に 128×128 のサイズを アイコンインストール中や Chrome ウェブストアで使用されます。拡張機能では 拡張機能の管理ページ(chrome://extensions)で使用されている 48x48 アイコン。また、 拡張機能のページのファビコンとして使用する 16x16 のアイコンを指定する。 一般に、アイコンは PNG 形式にする必要があります。PNG が最も透過性をサポートしているためです。。 BMP、GIF、ICO、JPEG
マニフェスト ファイル形式
すべてのアプリには manifest.json という名前の JSON 形式のマニフェスト ファイルがあります。このファイルには、 情報です。 次のコードは、アプリでサポートされているマニフェスト フィールドと、 説明していきます。
無効になっているウェブ機能
Chrome アプリはウェブ プラットフォームを使用していますが、ウェブ機能の一部が無効になっているか、別の方法で使用されている。これは主に、セキュリティの問題の回避とプログラミングの改善を目的としています。ウェブ プラットフォームで無効になる機能と考えられる回避策の概要を以下に示します。
マニフェスト - バージョン
この拡張機能のバージョンを識別する、1 ~ 4 個のドット区切りの整数。整数には 2 つのルールが適用されます。0 ~ 65535 の範囲(両端を含む)であることと、ゼロ以外の整数を 0 で始めることはできません。たとえば、99999 と 032 はどちらも無効です。 有効なバージョンの例を次に示します。
マニフェスト - 要件
アプリや拡張機能に必要なテクノロジーです。Chrome ウェブストアなどのホスティング サイトで このリストで、パソコンで機能しないアプリや拡張機能をユーザーがインストールできないようにします。 現在サポートされている要件には「3D」が含まれますおよび「プラグイン」その他の要件チェックは 追加します。 「3D」requirements は GPU ハードウェア アクセラレーションを示します。「webgl」要件については、 WebGL を API 。Chrome の 3D
マニフェスト - 説明
拡張機能を説明する書式なしテキスト文字列(HTML などの形式ではない、132 文字以下)。説明は、ブラウザの拡張機能管理 UI と Chrome ウェブストア の両方に適した内容にする必要があります。このフィールドにはロケール固有の文字列を指定できます。詳細については、 多言語対応 をご覧ください。
externally_connectable
externally_connectable マニフェスト プロパティは、許可する拡張機能、アプリ、ウェブページを宣言します。 runtime.connect と runtime.sendMessage 経由でアプリに接続します。 メッセージの受け渡しに関するチュートリアルについては、 クロス拡張機能とアプリ メッセージング と メッセージの送信をご覧ください。 ウェブページから削除します アプリのマニフェストで externally_connectable
マニフェスト - サンドボックス
警告: バージョン 57 以降、Chrome では外部のウェブ コンテンツ( 埋め込みフレームやスクリプトなど)をサンドボックスで保護します。代わりに WebView を使用してください。 サンドボックス化された固有のオリジンで配信されるアプリや拡張機能のページのコレクションを定義します。 使用するコンテンツ セキュリティ ポリシーも指定できます。サンドボックスの利用には、次の 2 つの影響があります。 サンドボックス化されたページは、他のページで使用されている コンテンツ セキュリティ
マニフェスト - Nacl モジュール
MIME タイプから各タイプを処理するネイティブ クライアント モジュールへの 1 つ以上のマッピング。対象 次のスニペットの太字のコードは、Native Client モジュールをコンテンツとして登録しています。 OpenOffice スプレッドシートの MIME タイプの MIME タイプを拒否します。 「path」の値拡張機能内のネイティブ クライアント マニフェスト(.nmf ファイル)の場所 されます。ネイティブ クライアントと.nmf ファイルについて詳しくは、 ネイティブ
マニフェスト - デフォルト ロケール
この拡張機能のデフォルトの文字列を含む _locales のサブディレクトリを指定します。このフィールドは、 _locales ディレクトリがある拡張機能では必須 です。 _locales ディレクトリがない拡張機能では、このフィールドは 指定されていない必要があります 。詳しくは、 多言語対応 をご覧ください。
マニフェスト - キー
この値は、開発中に読み込まれる拡張機能、アプリ、テーマの一意の ID を制御するために使用できます。 適切な Key-Value を取得するには、まず.crx ファイルから拡張機能をインストールします( 拡張機能をアップロード するか、 手動でパッケージ化 する必要がある場合があります)。次に、 ユーザーデータ ディレクトリ で、 Default/Extensions/_<extensionId>_/_<versionString>_/manifest.json
ワークボックス ストリーム
RouteHandlerCallbackOptions StreamSource | Promise< StreamSource > レスポンス ReadableStream BodyInit 複数のソース Promise を受け取り、それぞれの Promise がレスポンス、 ReadableStream、 BodyInit のいずれかになります。 個々のストリームのストリームごとに ReadableStream を公開するオブジェクトを返します。 Promise
eBay がシームレスな認証情報共有でログイン成功率を 10% 改善した方法
eBay が Digital Asset Links を使用して認証情報をシームレスに共有し、ログイン成功率を 10% 改善した方法をご覧ください。安全でクロスプラットフォームの認証を実装し、ユーザー エクスペリエンスを向上させる方法を学びます。
scheduler.yield() を使用して長いタスクを分割する
scheduler.yield() は、長いタスクを人間工学的に分割し、優先順位を付けた実行の継続を取得するための新しい API です。
Chrome Web Store
Chrome Web Store ユーザーが拡張機能やテーマをブラウジングできるオンライン マーケットプレイス。ここで拡張機能を公開し、世界中からアクセスできるようにします。 dashboard デベロッパー ダッシュボード 拡張機能を公開し、ストアアイテムを管理します。 local_mall Chrome Web Store Chrome ウェブストアで拡張機能をお探しください。 policy デベロッパー ポリシー Chrome
chrome.bookmarks
この権限は 警告をトリガーします 。 chrome.bookmarks API を使用すると、ブックマークの作成、整理、その他の操作ができます。カスタムのブックマーク マネージャー ページを作成できる オーバーライド ページ もご覧ください。 bookmarks API を使用するには、 拡張機能マニフェスト で「bookmarks」権限を宣言する必要があります。次に例を示します。 ブックマークはツリー形式で整理されます。ツリーの各ノードは、ブックマークまたはフォルダ( グループ
chrome.contentSettings
chrome.contentSettings API を使用して、ウェブサイトが Cookie、JavaScript、プラグインなどの機能を使用できるかどうかを制御する設定を変更します。より一般的な話として、コンテンツの設定を使用すると、Chrome の動作をグローバルではなくサイトごとにカスタマイズできます。 API を使用するには、拡張機能のマニフェストで "contentSettings" 権限を宣言する必要があります。次に例を示します。
chrome.contentSettings
chrome.contentSettings API を使用して、ウェブサイトが Cookie、JavaScript、プラグインなどの機能を使用できるかどうかを制御する設定を変更します。より一般的な話として、コンテンツの設定を使用すると、Chrome の動作をグローバルではなくサイトごとにカスタマイズできます。 この API を使用するには、拡張機能のマニフェストで「contentSettings」権限を宣言する必要があります。次に例を示します。
chrome.bookmarks
chrome.bookmarks API を使用すると、ブックマークの作成、整理、その他の操作ができます。カスタムのブックマーク マネージャー ページを作成できる ページのオーバーライド もご覧ください。 bookmarks API を使用するには、 拡張機能マニフェスト で「bookmarks」権限を宣言する必要があります。次に例を示します。 ブックマークはツリー形式で整理されます。ツリーの各ノードは、ブックマークまたはフォルダ( グループ )です。ツリーの各ノードは
人工知能
Chrome の AI AI による次世代のウェブへようこそ。デベロッパーがウェブで優れたエクスペリエンスを簡単に構築できるよう、AI がどのように役立つかをご確認ください。 Chrome の Gemini Nano でできることを再考。 組み込みの AI Gemini エコシステムの最も効率的なモデルである Gemini Nano が Chrome に導入されます。 クライアントサイドで作業する クライアントサイド AI
Gemini Nano をデバッグする
Gemini Nano へのプロンプトの詳細については、Chrome 内部専用のページをご覧ください。このガイドでは、デバッグにこの機能を利用する方法について説明します。
WebGPU の新機能(Chrome 134)
サブグループによる ML ワークロードの改善、D3D12 でのシェーダーのコンパイル時間の短縮、ブレンド可能として浮動小数点フィルタ可能なテクスチャ タイプのサポートの削除など。
chrome.app.runtime
chrome.app.runtime API を使用してアプリのライフサイクルを管理します。アプリ ランタイムは、アプリのインストールを管理し、イベントページを制御します。また、アプリをいつでもシャットダウンできます。 任意( 省略可 ) 埋め込まれるアプリが埋め込みの決定を行う際に使用できる、デベロッパーが指定するオプションのデータ。 文字列 void embedderId がこのアプリを <appview> 要素に埋め込むことを許可します。 url
chrome.printing
chrome.printing API を使用して、Chromebook にインストールされているプリンタに印刷ジョブを送信します。 すべての chrome.printing メソッドとイベントでは、 拡張機能マニフェスト で "printing" 権限を宣言する必要があります。次に例を示します。 次の例は、printing 名前空間の各メソッドの使用を示しています。このコードは、extensions-samples GitHub リポジトリの api-samples/printing
chrome.sessions
chrome.sessions API を使用すると、閲覧中のセッションからタブとウィンドウの問い合わせや復元を行うことができます。 文字列 外部デバイスの名前。 Session [] 外部デバイスの開いているウィンドウ セッションのリスト(最近変更されたセッションから最近変更されていないセッションの順に並べ替えられます)。 number(省略可) リクエストされたリストでフェッチするエントリの最大数。最大数のエントリ( sessions.MAX_SESSION_RESULTS
chrome.printing
chrome.printing API を使用して、Chromebook にインストールされているプリンタに印刷ジョブを送信します。 すべての chrome.printing メソッドとイベントでは、 拡張機能マニフェスト で "printing" 権限を宣言する必要があります。次に例を示します。 次の例は、printing 名前空間の各メソッドの使用を示しています。このコードは、extensions-samples GitHub リポジトリの api-samples/printing
chrome.userScripts
userScripts API を使用して、ユーザー スクリプトのコンテキストでユーザー スクリプトを実行します。 User Scripts API chrome.userScripts を使用するには、manifest.json に "userScripts" 権限を追加し、スクリプトを実行するサイトに "host_permissions" を追加します。 ユーザー スクリプトは、ウェブページに挿入されるコード スニペットで、ウェブページの外観や動作を変更します。 Content
chrome.sessions
chrome.sessions API を使用すると、閲覧中のセッションからタブとウィンドウの問い合わせや復元を行うことができます。 文字列 外部デバイスの名前。 Session [] 外部デバイスの開いているウィンドウ セッションのリスト(最近変更されたセッションから最近変更されていないセッションの順に並べ替えられます)。 number(省略可) リクエストされたリストでフェッチするエントリの最大数。最大数のエントリ( sessions.MAX_SESSION_RESULTS
Chrome のご紹介
Chrome のご紹介 Chrome 134(ベータ版) Chrome 133 Chrome 132 Chrome 131 Chrome 130 Chrome 129 Chrome 128 Chrome 127 Chrome 126 Chrome 125 Chrome 124 Chrome 123 Chrome 122 Chrome 121 Chrome 120 Chrome 119 Chrome の新機能 DevTools DevTools のヒント エンジニアリング ブログ ユーザー補助
Chrome 134 の DevTools の新機能
[プライバシーとセキュリティ] パネル、調整済みの CPU スロットリング、[パフォーマンス] のファーストパーティとサードパーティのハイライト表示、新しい分析情報など。
chrome.i18n
chrome.i18n インフラストラクチャを使用して、アプリまたは拡張機能全体に国際化を実装します。 拡張機能に /_locales ディレクトリがある場合は、 manifest で "default_locale" を定義する必要があります。 ユーザーに表示される文字列はすべて、 messages.json という名前のファイルに格納する必要があります。新しい言語 / 地域を追加するたびに、 /_locales/_localeCode_ という名前のディレクトリにメッセージ
Windows の Chromium ベースのブラウザでテキストのレンダリングが改善
Edge チームは、Chromium で Windows ClearType チューナーの値を直接尊重するサポートを追加しました。これにより、Windows の Chromium ベースのブラウザでテキストのレンダリングが改善されました。
Google 検索における推測ルールの使用方法
Google 検索が Speculation Rules API を使用して検索結果を匿名でプリフェッチし、ユーザー エクスペリエンスを改善した方法について説明します。
chrome.storage
chrome.storage API を使用して、ユーザーデータの変更を保存、取得、追跡します。 storage API を使用するには、拡張機能の manifest で "storage" 権限を宣言します。次に例を示します。 Storage API は、ユーザーデータと状態を保持するための拡張機能固有の方法を提供します。これはウェブ プラットフォームのストレージ API( IndexedDB 、 Storage
chrome.storage
chrome.storage API を使用して、ユーザーデータの変更を保存、取得、追跡します。 Storage API は、ユーザーデータと状態を保持するための拡張機能固有の方法を提供します。これはウェブ プラットフォームのストレージ API( IndexedDB 、 Storage )に似ていますが、拡張機能のストレージのニーズを満たすように設計されています。主な機能は次のとおりです。 拡張機能は、一部のコンテキスト(ポップアップやその他の HTML ページ)で [ Storage
CrUX で LCP 画像のサブパートと RTT が利用可能に
2025 年 2 月のリリースにおける Chrome ユーザー エクスペリエンス レポート(CrUX)の変更(LCP 画像のサブパート、LCP リソースタイプ、RTT など)について説明します。
CrUX BigQuery データセットの使用方法
このガイドでは、BigQuery を使用して CrUX データセットに対するクエリを作成し、ウェブ上のユーザー エクスペリエンスの状態に関する有益な結果を抽出する方法を学習します。
chrome.enterprise.platformKeys
chrome.enterprise.platformKeys API を使用して鍵を生成し、その鍵の証明書をインストールします。この証明書はプラットフォームで管理され、TLS 認証やネットワーク アクセスに、または chrome.platformKeys を介して他の拡張機能で使用できます。 この API を使用してクライアント証明書を登録する一般的な手順は次のとおりです。 enterprise.platformKeys.getTokens を使用して、使用可能なすべてのトークンを取得します。
chrome.enterprise.platformKeys
chrome.enterprise.platformKeys API を使用して鍵を生成し、その鍵の証明書をインストールします。この証明書はプラットフォームで管理され、TLS 認証やネットワーク アクセスに、または chrome.platformKeys を介して他の拡張機能で使用できます。 この API を使用してクライアント証明書を登録する一般的な手順は次のとおりです。 enterprise.platformKeys.getTokens()
PWA のタブ形式アプリケーション モード
タブ付きアプリケーション モードでは、プログレッシブ ウェブアプリのデベロッパーは、スタンドアロン PWA にタブ付きドキュメント インターフェースを追加できます。
chrome.permissions
chrome.permissions API を使用して、 宣言された省略可能な権限 をインストール時ではなく実行時にリクエストします。これにより、ユーザーは権限が必要な理由を理解し、必要な権限のみを付与できます。 API によって付与される機能について説明する権限に関する警告がありますが、これらの警告の一部は明白でない場合があります。Permissions API
chrome.runtime
chrome.runtime API を使用して、サービス ワーカーを取得し、マニフェストの詳細を返します。また、拡張機能のライフサイクルでイベントをリッスンして応答します。この API を使用して、URL の相対パスを完全修飾 URL に変換することもできます。 Runtime API には、拡張機能で使用できるさまざまな機能領域をサポートするメソッドが用意されています。 Runtime API のほとんどのメソッドでは、 nativeMessaging 権限が必要な
chrome.permissions
chrome.permissions API を使用して、 宣言された省略可能な権限 をインストール時ではなく実行時にリクエストします。これにより、ユーザーは権限が必要な理由を理解し、必要な権限のみを付与できます。 API によって付与される機能について説明する権限に関する警告がありますが、これらの警告の一部は明白でない場合があります。Permissions API
WebGPU の新機能(Chrome 133)
unorm8x4-bgra と 1 コンポーネントの頂点形式が追加され、未定義の値で不明な上限をリクエストできるようになりました。また、WGSL の配置ルールが変更され、破棄による WGSL のパフォーマンスが向上しました。
- WebGpu
Chrome の新機能
Chrome の新機能 ドキュメントとブログで Chrome の最新情報をご確認ください。 新しいコンテンツとドキュメントの重要な更新。 article LLM がレスポンスをストリーミングする仕組み サーバーおよびクライアントの AI でストリーミング データがどのように機能するかを学ぶための新しいドキュメント。 article Chrome ウェブストアに関する通知と再審査請求 Chrome ウェブストアの通知と再審査請求のプロセスが更新されました。 article オリジン トライアルの
Chrome ウェブストアのポリシーの更新: デベロッパーにとって明確で一貫性のあるポリシーを実現
Google は、プラットフォーム全体で一貫した明確なポリシーを定めるため、一連のポリシーの更新を発表します。
ストリーミングされた LLM レスポンスをレンダリングする際のベスト プラクティス
以下のフロントエンドのベスト プラクティスに沿って、ストリーミングをサポートする API(Prompt API など)を使用して、Gemini からストリーミングされたレスポンスを表示します。
パスキーの WebAuthn 機能検出の簡素化
「getClientCapabilities()」を使用して WebAuthn の機能を検出し、ユーザーに合わせて認証ワークフローを調整する方法を学びます。
iOS で Google パスワード マネージャーのパスキーを利用できるようになりました
iOS 17 以降の Chrome で、Google パスワード マネージャー(GPM)でパスキーを作成、同期、認証できるようになりました。これにより、Chrome が利用できるすべてのデバイスで GPM のパスキーを使用できるようになります。
Chrome 132 の新機能
Chrome 132 のリリースが開始されました。Dialog 要素は ToggleEvent を取得し、要素レベルの動画共有をサポートします。File System Access API は Android と WebView をサポートします。
chrome.sockets.udp
chrome.sockets.udp API を使用して、UDP 接続を使用してネットワーク経由でデータを送受信します。この API は、以前の「socket」API にあった UDP 機能を置き換えます。 この API を使用するには、次のキーを マニフェスト で宣言する必要があります。 数値 新しく作成されたソケットの ID。この API から作成されたソケット ID は、非推奨の [ socket ](../socket/) API など、他の API から作成されたソケット ID
chrome.tabs
chrome.tabs API を使用して、ブラウザのタブシステムを操作します。この API を使用すると、ブラウザのタブを作成、変更、並べ替えることができます。 Tabs API には、タブの操作と管理のための機能だけでなく、タブの 言語 の検出、 スクリーンショット の撮影、タブのコンテンツ スクリプトとの 通信 も可能です。 ほとんどの機能を使用するのに権限は必要ありません。たとえば、新しいタブの 作成 、タブの 再読み込み 、別の URL への ナビゲーション などです。 Tabs
chrome.tabs
chrome.tabs API を使用して、ブラウザのタブシステムを操作します。この API を使用すると、ブラウザのタブを作成、変更、並べ替えることができます。 Tabs API には、タブの操作と管理のための機能だけでなく、タブの 言語 の検出、 スクリーンショット の撮影、タブのコンテンツ スクリプトとの 通信 も可能です。 ほとんどの機能を使用するのに権限は必要ありません。たとえば、新しいタブの 作成 、タブの 再読み込み 、別の URL への ナビゲーション などです。 Tabs
組み込み AI チャレンジの受賞者
組み込み AI チャレンジで受賞したアプリと拡張機能をご覧ください。このチャレンジでは、Chrome の Gemini Nano でできることを再考していただきました。
chrome.ttsEngine
chrome.ttsEngine API を使用して、拡張機能を使用してテキスト読み上げ(TTS)エンジンを実装します。拡張機能がこの API を使用して登録されている場合、拡張機能または Chrome アプリが tts API を使用して音声を生成すると、発話される音声とその他のパラメータを含むイベントが拡張機能に届きます。拡張機能は、利用可能なウェブ技術を使用して音声を合成して出力し、呼び出し元の関数にイベントを返してステータスを報告できます。
chrome.cookies
chrome.cookies API を使用して、Cookie のクエリと変更を行い、Cookie が変更されたときに通知を受け取ります。 cookies API を使用するには、マニフェストで「cookies」権限と、Cookie にアクセスするホストの ホスト権限 を宣言する必要があります。次に例を示します。 パーティショニングされた Cookie を使用すると、特定の Cookie をトップレベル フレームのオリジンに対してキー付けする必要があることをサイトがマークできます。つまり、サイト
chrome.ttsEngine
chrome.ttsEngine API を使用して、拡張機能を使用してテキスト読み上げ(TTS)エンジンを実装します。拡張機能がこの API を使用して登録されている場合、拡張機能または Chrome アプリが tts API を使用して音声を生成すると、読み上げ対象の音声とその他のパラメータを含むイベントが拡張機能に届きます。拡張機能は、利用可能なウェブ技術を使用して音声を合成して出力し、呼び出し元の関数にイベントを送り返してステータスを報告できます。
chrome.cookies
chrome.cookies API を使用して、Cookie のクエリと変更を行い、Cookie が変更されたときに通知を受け取ります。 cookies API を使用するには、マニフェストで "cookies" 権限と、Cookie にアクセスするホストの ホスト権限 を宣言します。次に例を示します。 パーティショニングされた Cookie を使用すると、特定の Cookie をトップレベル フレームのオリジンに対してキー付けする必要があることをサイトがマークできます。たとえば、サイト A
chrome.appviewTag
appview タグを使用して、他の Chrome アプリを Chrome アプリ内に埋め込みます( 使用方法 をご覧ください)。 オブジェクト 埋め込まれるアプリが埋め込みの決定を行う際に使用できる、デベロッパーが指定するオプションのデータ。 文字列 埋め込みリクエストを送信したアプリの ID。 void 埋め込みリクエストを許可します。 allow 関数は次のようになります。 文字列 埋め込むコンテンツを指定します。 void 埋め込みリクエストを防止します。 deny
WebGPU の新機能(Chrome 132)
テクスチャビューの使用、32 ビット浮動小数点テクスチャのブレンド、GPUDevice の adapterInfo 属性、無効な形式でキャンバス コンテキストを構成する JavaScript エラーの発生、テクスチャのサンプラー制限のフィルタリング、拡張サブグループの試験運用版、デベロッパー エクスペリエンスの向上、16 ビット正規化テクスチャ形式の試験運用版のサポートなど。
- WebGpu
chrome.certificateProvider
この API を使用して証明書をプラットフォームに公開すると、そのプラットフォームはこの証明書を TLS 認証に使用できます。 この API を使用してクライアント証明書を ChromeOS に公開する一般的な手順は次のとおりです。 実際の手順は異なる場合があります。たとえば、証明書を自動的に選択するエンタープライズ ポリシーが使用されている場合、ユーザーに証明書の選択を求めるメッセージは表示されません( AutoSelectCertificateForUrls と ユーザー向けの Chrome
chrome.extension
chrome.extension API には、任意の拡張機能ページで使用できるユーティリティがあります。拡張機能とそのコンテンツ スクリプト間、または拡張機能間でのメッセージ交換がサポートされています。詳しくは、 メッセージ パススルー をご覧ください。 拡張機能ビューのタイプ。 「タブ」 「popup」 シークレット タブ内で実行されるコンテンツ スクリプトと、シークレット プロセス内で実行される拡張機能ページの場合、true です。後者は、incognito_behavior
chrome.system.display
system.display API を使用してディスプレイのメタデータをクエリします。 ディスプレイが検出され、システムで使用されているかどうかを示す列挙型。ディスプレイがシステムで検出されない場合(接続が切断されている場合や、スリープ モードのため接続が切断されていると見なされる場合など)は、ディスプレイは「非アクティブ」と見なされます。この状態は、すべてのディスプレイが切断されたときに既存のディスプレイを保持するために使用されます。 「active」 「無効」 数値
chrome.system.display
system.display API を使用してディスプレイのメタデータをクエリします。 ディスプレイが検出され、システムで使用されているかどうかを示す列挙型。ディスプレイがシステムで検出されない場合(接続が切断されている場合や、スリープ モードのため接続が切断されていると見なされる場合など)は、ディスプレイは「非アクティブ」と見なされます。この状態は、すべてのディスプレイが切断されたときに既存のディスプレイを保持するために使用されます。 「active」 「無効」 数値
chrome.action
chrome.action API を使用して、Google Chrome ツールバーの拡張機能のアイコンを制御します。 この API を使用するには、次のキーを マニフェスト で宣言する必要があります。 chrome.action API を使用するには、 "manifest_version" を 3 に指定し、 マニフェスト ファイル に "action" キーを含めます。 "action"
chrome.commands
commands API を使用して、拡張機能でアクションをトリガーするキーボード ショートカットを追加します。たとえば、ブラウザ アクションを開くアクションや、拡張機能にコマンドを送信するアクションなどです。 この API を使用するには、次のキーを マニフェスト で宣言する必要があります。 Commands API を使用すると、拡張機能のデベロッパーは特定のコマンドを定義し、デフォルトのキーの組み合わせにバインドできます。拡張機能が受け入れる各コマンドは、 拡張機能のマニフェスト で
リモート デバッグの使用時はオペレーションがサポートされません
一部の WebDriver コマンド(ブラウザ ウィンドウのサイズ変更など)では、Chrome 拡張機能をブラウザに読み込む必要があります。通常、ChromeDriver は新しい Chrome セッションを起動するたびに、この「自動化拡張機能」を読み込みます。 ただし、ChromeDriver に、新しい Chrome セッションを起動するのではなく、既存の Chrome セッションに接続するよう指示できます。これは、 Capabilities (ChromeOptions
ChromeOS
すべての ChromeOS テストイメージには、 /usr/local/chromedriver/ に ChromeDriver バイナリがインストールされています。バイナリは、そのテストイメージ内の同じバージョンの Chrome に更新されます。つまり、常に ChromeDriver の最新ビルドを使用します。 テストで ChromeDriver バイナリの安定版ビルドを実行する場合は、テストに独自のコードを記述して、特定のバイナリをダウンロードし、
chrome.certificateProvider
この API を使用して証明書をプラットフォームに公開すると、そのプラットフォームはこの証明書を TLS 認証に使用できます。 この API を使用してクライアント証明書を ChromeOS に公開する一般的な手順は次のとおりです。 実際の手順は異なる場合があります。たとえば、証明書を自動的に選択するエンタープライズ ポリシーが使用されている場合、ユーザーに証明書を選択するよう求められることはありません( AutoSelectCertificateForUrls と ユーザー向けの Chrome
chrome.extension
chrome.extension API には、任意の拡張機能ページで使用できるユーティリティがあります。拡張機能とそのコンテンツ スクリプト間、または拡張機能間でのメッセージ交換がサポートされています。詳しくは、 メッセージ パススルー をご覧ください。 拡張機能ビューのタイプ。 「タブ」 「popup」 シークレット タブ内で実行されるコンテンツ スクリプトと、シークレット プロセス内で実行される拡張機能ページの場合、true です。後者は、incognito_behavior
パフォーマンス ログ
ChromeDriver はパフォーマンス ロギングをサポートしています。これにより、ドメイン「タイムライン」、「ネットワーク」、「ページ」のイベントと、指定したトレース カテゴリの トレースデータ を取得できます。 パフォーマンス ロギングはデフォルトでは有効になっていません。そのため、新しいセッションを作成するときに有効にする必要があります。 有効にすると、パフォーマンス ログはタイムライン、ネットワーク、ページのイベントを収集します。トレースを有効にしたり、パフォーマンス
ChromeDriver のクラッシュ
ChromeDriver のクラッシュを診断して修正するには、いくつかの方法があります。これは ChromeDriver のクラッシュの場合のみです。これは Chrome のクラッシュや終了とは異なります。 Windows では、次のようなメッセージが表示されることがあります。 ChromeDriver のコントリビューターが問題の再現とデバッグに使用できる再現ケースを作成します。クラッシュが 100% 発生しなくても問題ありません。
ダウンロード
以前のバージョンの Chrome については、以下にサポートされている ChromeDriver のバージョンを示します。 適切なバージョンの ChromeDriver を選択する方法については、 バージョンの選択 のページをご覧ください。 Chrome バージョン 114 をサポート 詳細については、 リリースノート をご覧ください。 Chrome バージョン 114 をサポート 詳細については、 リリースノート をご覧ください。 Chrome バージョン 113 をサポート 詳細については、
モバイル エミュレーション
Chrome では、 Chrome DevTools でデバイスモード を有効にすることで、デスクトップ版 Chrome からモバイル デバイス上の Chrome をエミュレートできます。この機能により、ウェブ開発のスピードが向上し、デベロッパーは実際のデバイスを使用せずに、モバイル デバイスでウェブサイトがどのようにレンダリングされるかをすばやくテストできます。ChromeDriver
Android
最新の ChromeDriver のバイナリ は、さまざまなホスト プラットフォーム用の zip ファイルとしてパッケージ化されています。 以前のバージョンの ChromeDriver は、 ダウンロード から入手できます。 ChromeDriver は、 ウェブ デバッグ と JavaScript が有効になっている Android 4.4(KitKat) 以降の Chrome ブラウザ(バージョン 30 以降)と WebView ベースのアプリでのテスト実行をサポートしています。
Chrome がすぐに起動しない、またはクラッシュしない
これは、特別なテストハーネス(IDE など)または継続的ビルド システム(Jenkins など)を使用して ChromeDriver または Chrome を実行している場合によく発生します。 通常のユーザー コマンド プロンプトから、テストで使用しているのと同じ Chrome バイナリを起動してみてください。 chromedriver.log ファイルで使用されている Chrome バイナリを確認します。特別なコマンドライン スイッチや引数を Chrome
Canary
ChromeDriver Canary には、最新の ChromeDriver 機能が含まれています。新しいバイナリは 1 日に複数回ビルドされ、利用可能になります。 デベロッパーとアーリー アドプター向けに設計されているため、完全に機能しなくなることがあります。 M115 以降、Canary を含むリリース チャンネルごとの最新の Chrome + ChromeDriver リリースは、Chrome for Testing
キーボードのサポート
現在、ChromeDriver は、米国のキーボードが構成されているシステムのみをサポートしています。 ChromeDriver はこの状態を検出すると、次のことをログに記録します。 米国のキーボードを使用している場合、 sendKeys コマンドまたは TypeElement コマンドの実行中にキーが失われることがあります。 回避策として、QWERTY レイアウトの米国キーボードをシステム構成に追加することをおすすめします。これにより、ChromeDriver
カスタマイズ可能な選択リクエストの回答から得られた結果(デベロッパー フィードバック フォーム)
貴重な時間を割いてフィードバックを送信していただき、詳細を確認して標準の策定にご協力いただきありがとうございました。
Chrome 132 の DevTools の新機能
Gemini を使用してネットワーク リクエスト、ソースファイル、パフォーマンス トレースをデバッグしたり、AI チャット履歴を表示したりできます。
CSS ラップ 2024
Chrome DevRel チームとスケートボードに乗った Chrome Dino と一緒に、2024 年に Chrome とウェブ プラットフォーム向けにリリースされた最新の CSS を学びましょう。
chrome.syncFileSystem
chrome.syncFileSystem API を使用して、Google ドライブにデータを保存して同期します。この API は、Google ドライブに保存されている任意のユーザー ドキュメントにアクセスするためのものではありません。オフラインとキャッシュに使用するためのアプリ固有の同期可能なストレージを提供するため、異なるクライアント間で同じデータを使用できます。この API の使用方法については、 データを管理する をご覧ください。 "last_write_win" 「manual」
chrome.bluetoothSocket
chrome.bluetoothSocket API を使用して、RFCOMM 接続と L2CAP 接続を使用して Bluetooth デバイスとデータを送受信します。 この API を使用するには、次のキーを マニフェスト で宣言する必要があります。 「system_error」 システムエラーが発生し、接続を復元できない可能性があります。 「not_listening」 ソケットがリッスンしていません。 AcceptError エラーの原因を示すエラーコード。 文字列 エラー メッセージ。
chrome.browser
chrome.browser API を使用すると、現在のアプリと Chrome プロファイルに関連付けられている Chrome ブラウザを操作できます。 文字列 新しいタブが最初に開かれたときに移動する URL。 現在のアプリケーションと Chrome プロファイルに関連付けられたブラウザ ウィンドウで新しいタブが開きます。Chrome プロファイルのブラウザ ウィンドウが開いていない場合は、新しいタブを作成する前に新しいウィンドウが開きます。 OpenTabOptions
chrome.socket
chrome.socket API を使用して、TCP 接続と UDP 接続を使用してネットワークでデータを送受信します。 注: Chrome 33 以降、この API は非推奨となり、 sockets.udp 、 sockets.tcp 、 sockets.tcpServer API に置き換えられます。 数値 number(省略可) 受け入れられたソケットの ID。 数値 新しく作成されたソケットの ID。 文字列 使用可能な IPv4/6 アドレス。 文字列
chrome.bluetooth
chrome.bluetooth API を使用して Bluetooth デバイスに接続します。すべての関数は、chrome.runtime.lastError を介してエラーを報告します。 この API を使用するには、次のキーを マニフェスト で宣言する必要があります。 文字列 アダプタのアドレス(XX:XX:XX:XX:XX:XX の形式)。 ブール値 アダプタが使用可能かどうか(有効かどうか)を示します。 ブール値 アダプターが現在検出中かどうかを示します。 文字列
chrome.bluetoothLowEnergy
chrome.bluetoothLowEnergy API は、 汎用属性プロファイル(GATT) を使用して Bluetooth Smart(低エネルギー)デバイスと通信するために使用されます。 この API を使用するには、次のキーを マニフェスト で宣言する必要があります。 ManufacturerData [] 省略可 広告データの [メーカー固有のデータ] フィールドに含めるメーカー固有のデータのリスト。 ServiceData [] 省略可 広告データの [サービスデータ]
chrome.mdns
chrome.mdns API を使用して、mDNS 経由でサービスを検出します。これは、NSD 仕様の機能のサブセットで構成されています(http://www.w3.org/TR/discovery-api/)。 文字列 mDNS アドバタイズ サービスの IP アドレス。 string[] mDNS でアドバタイズされるサービスのメタデータ。 文字列 mDNS でアドバタイズされたサービスの host:port ペア。 文字列 mDNS でアドバタイズされるサービスのサービス名。
chrome.serial
chrome.serial API を使用して、シリアルポートに接続されたデバイスの読み取りと書き込みを行います。 number(省略可) ConnectionOptions.bitrate をご覧ください。このフィールドは、標準以外のビットレートを使用している場合や、基盤となるデバイスのクエリ中にエラーが発生した場合は、省略されるか不正確になることがあります。 数値 ConnectionOptions.bufferSize を見る 数値 シリアルポート接続の ID。 ブール値(省略可)
chrome.webviewTag
webview タグを使用すると、ネットワーク経由でウェブからライブ コンテンツを積極的に読み込み、Chrome アプリに埋め込むことができます。アプリは webview の外観を制御し、ウェブ コンテンツを操作したり、埋め込まれたウェブページ内でナビゲーションを開始したり、そのページ内で発生したエラーイベントに対応したりできます( 使用方法 を参照)。 clearData によって削除されるデータを決定するオプション。 number(省略可)
chrome.fontSettings
chrome.fontSettings API を使用すると、Chrome のフォント設定を管理できます。 Font Settings API を使用するには、 拡張機能マニフェスト で "fontSettings" 権限を宣言する必要があります。次に例を示します。 Chrome では、一部のフォント設定を特定の汎用フォント ファミリーと言語スクリプトに依存させることができます。たとえば、サンセリフ体簡体中国語に使用されるフォントは、セリフ体日本語に使用されるフォントと異なる場合があります。
chrome.usb
chrome.usb API を使用して、接続された USB デバイスを操作できます。この API を使用すると、アプリのコンテキストから USB 操作にアクセスできます。この API を使用すると、アプリはハードウェア デバイスのドライバとして機能します。この API によって生成されたエラーは、 runtime.lastError を設定し、関数の通常のコールバックを実行することによって報告されます。この場合、コールバックの通常のパラメータは未定義になります。 ブール値
chrome.desktopCapture
Desktop Capture API は、画面、個々のウィンドウ、個々のタブのコンテンツをキャプチャします。 chooseDesktopMedia() で使用されるデスクトップ メディアソースのセットを定義するために使用される列挙型。 「screen」 「window」 「タブ」 「audio」 SelfCapturePreferenceEnum をミラーリングします。 "include" 「除外」 SystemAudioPreferenceEnum をミラーリングします。 "include"
chrome.dns
DNS 解決には chrome.dns API を使用します。 この API を使用するには、 manifest で "dns" 権限を宣言する必要があります。 次のコードは resolve() を呼び出して、 example.com の IP アドレスを取得します。 service-worker.js: 文字列(省略可) IP アドレスのリテラルを表す文字列。resultCode が成功を示す場合にのみ指定します。 数値 結果コード。0 は成功を示します。 指定されたホスト名または IP
chrome.declarativeContent
chrome.declarativeContent API を使用すると、ページのコンテンツの読み取り権限を必要とせず、ページのコンテンツに応じた操作を行うことができます。 Declarative Content API を使用すると、 ホスト権限 を追加したり、 コンテンツ スクリプト を挿入したりすることなく、ウェブページの URL に応じて、または CSS セレクタがページ上の要素と一致する場合に、拡張機能のアクションを有効にできます。 activeTab
chrome.system.storage
chrome.system.storage API を使用してストレージ デバイスの情報をクエリし、取り外し可能なストレージ デバイスが接続または切断されたときに通知します。 「success」 取り外しコマンドが成功しました。アプリケーションは、デバイスを取り外すようユーザーにプロンプトを表示できます。 "in_use" デバイスが別のアプリによって使用されています。取り出しが成功しませんでした。他のアプリがデバイスの使用を終了するまで、デバイスを取り外さないでください。
chrome.contextMenus
chrome.contextMenus API を使用して、Google Chrome のコンテキスト メニューにアイテムを追加します。コンテキスト メニューの追加を適用するオブジェクトの種類(画像、ハイパーリンク、ページなど)を選択できます。 API を使用するには、拡張機能のマニフェストで "contextMenus" 権限を宣言する必要があります。また、メニュー項目の横に表示する 16 x 16 ピクセルのアイコンを指定する必要があります。次に例を示します。 コンテキスト メニュー
chrome.audio
chrome.audio API は、ユーザーがシステムに接続されているオーディオ デバイスに関する情報を取得し、制御できるようにするために提供されています。この API は現在、ChromeOS のキオスクモードでのみ使用できます。 文字列 デバイス名。 DeviceType 端末のタイプ。 文字列 ユーザー フレンドリーな名前(「USB マイク」など)。 文字列 音声デバイスの一意の識別子。 ブール値 これが現在アクティブなデバイスである場合、true になります。 数値
chrome.alarms
chrome.alarms API を使用して、定期的に、または将来の特定の時刻にコードを実行するようにスケジュールします。 chrome.alarms API を使用するには、 manifest で "alarms" 権限を宣言します。 信頼性の高い動作を確保するには、API の動作を理解することが役立ちます。
chrome.declarativeNetRequest
chrome.declarativeNetRequest API は、宣言型ルールを指定してネットワーク リクエストをブロックまたは変更するために使用されます。これにより、拡張機能はネットワーク リクエストをインターセプトしてコンテンツを表示することなく、リクエストを変更できるため、プライバシーが保護されます。 「 declarativeNetRequest 」権限と「 declarativeNetRequestWithHostAccess
chrome.devtools.panels
chrome.devtools.panels API を使用して、拡張機能をデベロッパー ツール ウィンドウの UI に統合します。独自のパネルを作成したり、既存のパネルにアクセスしたり、サイドバーを追加したりできます。 各拡張機能パネルとサイドバーは、個別の HTML ページとして表示されます。デベロッパー ツール ウィンドウに表示されるすべての拡張機能ページは、 chrome.devtools API のすべての部分と、他のすべての拡張機能 API にアクセスできます。
chrome.fileBrowserHandler
chrome.fileBrowserHandler API を使用すると、ChromeOS ファイル ブラウザを拡張できます。たとえば、ウェブサイトにユーザーがファイルをアップロードできるようにする場合にこの API を使用できます。 ChromeOS ファイル ブラウザは、ユーザーが Alt+Shift+M キーを押すか、SD カード、USB キー、外部ドライブ、デジタル カメラなどの外部ストレージ デバイスを接続すると表示されます。ファイル
chrome.readingList
chrome.readingList API を使用して、 リーディング リスト のアイテムを読み取り、変更します。 Reading List API を使用するには、拡張機能の マニフェスト ファイルに "readingList" 権限を追加します。 manifest.json: Chrome のサイドパネルにはリーディング リストが表示されます。ウェブページを保存して、後で読む、またはオフラインで読むことができる。 Reading List API
動画のユーザー補助機能が Gemini API デベロッパー コンペティションのウェブ賞を受賞
Gemini API デベロッパー コンペティションのウェブ アワードに ViddyScribe が選ばれました。動画の音声による説明を生成することで、ウェブ上の動画をよりアクセスしやすくする方法について、Gemini を例に説明しました。
chrome.networking.onc
chrome.networking.onc API は、ネットワーク接続(モバイル、イーサネット、VPN、Wi-Fi)の構成に使用されます。この API は、自動起動された ChromeOS キオスク セッションで使用できます。 ネットワーク接続の構成は、 Open Network Configuration(ONC) 仕様に従って指定します。 注: ほとんどの辞書プロパティと列挙型の値では、JavaScript の lowerCamelCase 表記法ではなく、ONC 仕様に一致するように
Chrome 拡張機能の Prompt API オリジン トライアルに参加する
Chrome 拡張機能の Prompt API オリジン トライアルに参加して、Chrome で Gemini Nano にアクセスします。
Chrome 131 の新機能
Chrome 131 のリリースが開始されました。詳細要素の CSS スタイル設定の追加、ページ マージン ボックスによる印刷レイアウトの簡素化など、さまざまな機能が追加されています。
Summarizer API オリジン トライアルに参加する
オリジン トライアルに参加して、ユーザーは長い記事や複雑なドキュメント、さらにはチャットでの活発な会話から、簡潔で洞察力に富んだ要約を作成できます。
Signal API を使用して、パスキーとサーバー上の認証情報の整合性を保つ
WebAuthn Signal API を使用すると、信頼できる当事者は既存の認証情報の状態をパスキー プロバイダに通知できるため、パスキーがサーバー上の認証情報と整合するようになります。
オリジン トライアルを使ってみる
ウェブ プラットフォームの新機能または試験運用版の機能をテストします。機能をすべてのユーザーに公開する前に、ウェブ標準コミュニティに機能のユーザビリティ、実用性、有効性についてのフィードバックを提供する。
メモリの問題を解決する
Chrome と DevTools を使用して、メモリリーク、メモリの肥大化、頻繁なガベージ コレクションなど、ページのパフォーマンスに影響するメモリの問題を見つける方法について説明します。
WebGPU の新機能(Chrome 131)
WGSL、GPUCanvasContext getConfiguration()、点と線のプリミティブのクリップ距離には、深度バイアス、サブグループ用のインクルーシブ スキャン組み込み関数、マルチ描画間接の試験運用版サポート、シェーダー モジュールのコンパイル オプションの厳密な計算、GPUAdapter requestAdapterInfo() の削除などがあってはなりません。
- WebGpu
スタイル設定のその他のオプション(<詳細>)
新しい ::details-content 疑似要素を使用して、表示タイプを設定したり、展開と閉じを切り替える部分のコンテナにスタイルを適用したりできるようになりました。
シームレスな認証情報の共有により、ユーザーのログインがスムーズになる
シームレスな認証情報共有を使用すると、ユーザーが Android アプリとウェブサイトで同じ認証情報を使用してログインできることをパスワード マネージャーに安全に通知できます。
[パフォーマンス] パネルで Core Web Vitals のリアルタイム指標をモニタリングする
[パフォーマンス] パネルで Core Web Vitals の指標をリアルタイムでモニタリングする。
DevTools の新機能(Chrome 131)
Gemini で CSS をデバッグし、検出結果にアノテーションを付け、[パフォーマンス] パネルで分析情報を取得し、過度のレイアウト シフトや合成されていないアニメーションなどを検出します。
Chrome から --headless=old を削除
Chrome 132 では、古いヘッドレス モードが削除されました。Chrome ヘッドレス シェルまたは新しいヘッドレス モードに移行します。
DevTools の新しいスクロール バッジ: スクロール可能な要素をすばやく見つける
DevTools の新しいスクロール バッジによって、スクロール可能な要素のデバッグがどのように簡素化されるか(およびその作成方法)について説明します。
Cache-Control: no-store の bfcache の有効化
Chrome では、安全に Cache-Control: no-store を使用しているページで bfcache の使用を許可するように変更されます。デベロッパーの皆様への影響をご確認ください。
API リファレンス
Chrome 拡張機能で利用できるすべての API の完全なリファレンス。これには、サポートが終了した Chrome アプリ プラットフォーム用の API や、ベータ版および開発中の API が含まれます。
WebGPU の新機能(Chrome 130)
デュアルソース ブレンディング、Metal でのシェーダーのコンパイル時間の改善、GPUAdapter requestAdapterInfo() のサポート終了など。
- WebGpu
Chrome 130 の新機能
Chrome 130 のリリースが開始されました。ドキュメントのピクチャー イン ピクチャーでは、ピクチャー イン ピクチャー ウィンドウをより細かく制御できます。CSS ネスト宣言により、厄介なエッジケースを修正できます。また、複数行に分割された要素のデコレーションをどのように動作させるかを指定できます。Chrome 130 のデベロッパー向け新機能について、Pete LePage が詳しく説明しています。
Chrome 130
Chrome 130 のリリースが開始されました。ドキュメントのピクチャー イン ピクチャーでは、ピクチャー イン ピクチャー ウィンドウをより細かく制御できます。CSS のネストされた宣言では、厄介なエッジケースを修正できます。要素の装飾が複数行に分割された場合の動作を指定することもできます。他にも多くの機能があります。
chrome.virtualKeyboard
chrome.virtualKeyboard API は、キオスク セッションでの仮想キーボードのレイアウトと動作を構成するために使用されるキオスク専用の API です。 ブール値(省略可) 仮想キーボードで予測入力を利用できるかどうかを指定します。 ブール値(省略可) 仮想キーボードで自動修正機能を使用できるかどうかを指定します。 ブール値(省略可) 仮想キーボードで手書き入力認識を使用して入力できるかどうか。 ブール値(省略可)
chrome.clipboard
chrome.clipboard API は、ユーザーがクリップボードのデータにアクセスできるようにするためのものです。これは、オープンウェブの代替手段が利用可能になるまで、chromeos プラットフォーム アプリに対する一時的なソリューションです。2017 年第 4 四半期には、オープンウェブ ソリューションが利用可能になり次第非推奨となります。 文字列 追加データ項目の内容。 type が「textPlain」の場合は書式なしテキストの文字列またはマークアップ文字列( type
長いアニメーション フレーム API
Long Tasks API の次期イテレーションで、アトリビューションによってフレーム更新の遅延を測定できる Long Animation Frames API(LoAF)について学びます。
Chrome ウェブストア デベロッパー ダッシュボードのモバイル エクスペリエンスを改善
このたび、Chrome ウェブストア デベロッパー ダッシュボードの UI を変更し、レスポンシブ性とモバイル フレンドリー性を高めました。これにより、店舗掲載情報のパフォーマンスのモニタリング、掲載情報の変更、店舗の拡張機能の管理がより便利でアクセスしやすくなることを願っています。 すべてのグラフと分析ページが更新され、レスポンシブ性が向上しました。これにより、モバイル デバイスでの拡張機能のストア掲載情報のパフォーマンスをより適切に確認できるようになりました。
Web Vitals 拡張機能が DevTools に追加されました
ウェブバイタル拡張機能は Chrome DevTools のパフォーマンス パネルと統合され、2025 年 1 月にスタンドアロン サポートが終了します。
ウェブアプリ マニフェスト ID プロパティを使用して一意に識別する PWA
オプションの `id` プロパティは、ウェブアプリ マニフェストの仕様に含まれており、PWA に使用する識別子を明示的に定義できます。マニフェストに id プロパティを追加すると、start_url またはマニフェストの場所への依存関係が削除され、今後更新できるようになります。
Chrome で Google パスワード マネージャーのパスキーをパソコンと Android 間で同期
パソコン版 Chrome では、まもなく Google パスワード マネージャー(GPM)でパスキーを作成して、Android に加えてこれらのプラットフォーム間で同期できるようになります。
Chrome 129 の新機能
Chrome 129 のリリースが開始されました。長いタスクでは、パフォーマンスを向上させるために、固有のサイズで要素をアニメーション化できます。また、アンカー配置の構文にもいくつかの変更があります。Chrome 129 のデベロッパー向けの新機能について、Pete LePage が詳しく説明しています。
高さまでアニメーション化: auto;(および他の固有のサイズ設定キーワード)を CSS 内で指定
「interpolate-size」と「calc-size()」を使用して、固有のサイズ設定キーワードとの間でアニメーション化する
ローカルと実際のユーザーの Core Web Vitals のパフォーマンスを DevTools でモニタリングする
Chrome DevTools の [Performance] パネルでは、ローカルの Core Web Vitals のパフォーマンスをモニタリングし、フィールドの実際のユーザーデータと比較する新しい方法が導入されています。
Keyboard Lock と Pointer Lock API には、Chrome 131 の権限が必要です
Keyboard Lock API を使用すると、デベロッパーは、インタラクティブなウェブサイト、ゲーム、リモート デスクトップやアプリのストリーミングなど、さまざまなユースケースで没入感のあるフルスクリーン エクスペリエンスを提供できます。これは、ウェブサイトがホスト オペレーティング システムで許可されているすべての鍵を使用できるようにすることで実現します。 Pointer Lock API を使用すると、デスクトップ アプリケーションでポインタ アイコンを非表示にして、マウスの動きを 3D
Memory Inspector: ArrayBuffer、TypedArray、DataView、Wasm Memory を検査します。
Memory Inspector を使用すると、JavaScript の ArrayBuffer、TypedArray、DataView や、C++ Wasm アプリの WebAssembly.Memory を検査できます。
Chrome のウェブサイト間でシームレスな認証情報共有が可能に
同じアカウント管理バックエンドを共有する複数のドメインを使用している場合、Digital Asset Links を使用して認証情報をシームレスに共有することもできます。これにより、ユーザーは認証情報を一度保存し、Chrome パスワード マネージャーで関連するウェブサイトに対して提案できるようになります。
Digital Credentials API のオリジン トライアルのご紹介
Digital Credentials API のオリジン トライアルは、Chrome 128 以降開始されます。Digital Credentials API は、運転免許証やデジタル ウォレットに保存されている国民識別カードなどのデジタル認証情報を通じて、ウェブサイトがユーザーに関する検証可能な情報を選択的にリクエストできるようにする新しいウェブ プラットフォーム API です。
DevTools の新機能(Chrome 129)
[パフォーマンス] > [検索リクエスト]ネットワーク、自動入力を使用した住所フォームでのテストデータの使用、レコーダー パネルで Firefox 用 Puppeteer にエクスポートしたり、[Performance] パネルでモニタリングでパフォーマンスの問題をひと目で把握したりできます。
Chrome で WebAuthn のヒント、関連オリジン リクエスト、JSON シリアル化を導入
Chrome の WebAuthn で、ヒント、関連オリジン リクエスト、JSON シリアル化を使用できるようになりました
Chrome の IndexedDB ストレージの効率化
Chrome の新しい最適化により、IndexedDB データがディスクに保存される方法が改善されました。このドキュメントでは、今回の更新の要点をまとめています。
chrome.declarativeNetRequest
chrome.declarativeNetRequest API は、宣言型ルールを指定することで、ネットワーク リクエストをブロックまたは変更する場合に使用します。これにより拡張機能は、リクエストをインターセプトしてコンテンツを閲覧することなく、ネットワーク リクエストを変更できるため、プライバシーが強化されます。 declarativeNetRequestFeedback host_permissions 上記の権限に加えて、特定の種類のルールセット(具体的には静的ルールセット)では、
chrome.sidePanel
chrome.sidePanel API を使用すると、ウェブページのメイン コンテンツとともにブラウザのサイドパネルでコンテンツをホストできます。 Side Panel API を使用するには、拡張機能の マニフェスト ファイルに "sidePanel" 権限を追加します。 manifest.json: Side Panel API を使用すると、拡張機能でサイドパネルに独自の UI を表示できるようになり、ユーザーのブラウジング ジャーニーを補完する永続的なエクスペリエンスを実現できます。
chrome.webRequest
chrome.webRequest API を使用して、トラフィックをモニタリングおよび分析し、処理中のリクエストをインターセプト、ブロック、変更します。 ウェブ リクエストを使用するには、 拡張機能のマニフェスト で "webRequest" 権限を宣言する必要があります API と必要な ホスト権限 。サブリソース リクエストをインターセプトするには、 拡張機能は、リクエストされた URL とそのイニシエータの両方にアクセスできる必要があります。例: webRequestBlocking
chrome.omnibox
アドレスバー API を使用すると、Google Chrome のアドレスバーにキーワードを登録できます。アドレスバーはアドレスバーとも呼ばれます。 ユーザーが拡張機能のキーワードを入力すると、拡張機能のみの操作を開始する。 あります。キー入力はそれぞれ拡張機能に送信され、ユーザーはそれに対する候補を提示できます。 候補は、さまざまな方法で豊富な形式にできます。ユーザーが候補を承認すると 拡張機能が通知を受け、処理される可能性があります。 アドレスバー API を使用するには、 マニフェスト に
chrome.pageAction
chrome.pageAction API を使用して、Google Chrome のメインツールバーのアドレスバーの右にアイコンを配置します。ページ操作とは、現在のページで実行できる操作のうち、すべてのページには適用されない操作のことです。無効な場合、ページ操作はグレー表示されます。 例: 次のスクリーンショットの RSS アイコンは、RSS を購読できるページ アクションを表しています。 現在のページのフィードです 非表示のページ操作はグレー表示されます。たとえば、下の RSS
chrome.windows
chrome.windows API を使用してブラウザ ウィンドウを操作します。この API を使用すると、ブラウザのウィンドウの作成、変更、並べ替えを行うことができます。 リクエストされると、 windows.Window には tabs.Tab オブジェクトの配列が含まれます。必要なこと url にアクセスする必要がある場合は、 マニフェスト で "tabs" 権限を宣言します。 pendingUrl 、 title 、または tabs.Tab の favIconUrl プロパティ。例:
chrome.i18n
chrome.i18n インフラストラクチャを使用して、アプリまたは拡張機能全体に国際化を実装します。 ユーザーに表示されるすべての文字列を、 messages.json という名前のファイルに配置する必要があります。毎回 新しい言語 / 地域を追加する場合は、 _locales/_localeCode_ という名前のディレクトリにメッセージ ファイルを追加します。 localeCode は、英語の場合は en などのコードです。 英語( en
chrome.browserAction
ブラウザ操作を使用して、Google Chrome のメイン ツールバーのアドレスバーの右にアイコンを配置します。ブラウザのアクションには、 アイコン に加えて、 ツールチップ 、 バッジ 、 ポップアップ を表示できます。 次の図では、アドレスバーの右側にある色とりどりの正方形が、 できます。アイコンの下にポップアップが表示されます。 常にアクティブとは限らないアイコンを作成するには、ブラウザではなく ページ アクション を使用します できます。 次のように、 拡張機能のマニフェスト
chrome.webRequest
chrome.webRequest API を使用して、トラフィックをモニタリングおよび分析し、処理中のリクエストをインターセプト、ブロック、変更します。 ウェブ リクエストを使用するには、 拡張機能のマニフェスト で "webRequest" 権限を宣言する必要があります API と必要な ホスト権限 。サブリソース リクエストをインターセプトするには、 拡張機能は、リクエストされた URL とそのイニシエータの両方にアクセスできる必要があります。例: Chrome 108 以降では、
chrome.fileBrowserHandler
chrome.fileBrowserHandler API を使用して ChromeOS のファイル ブラウザを拡張します。たとえば、この API を使用して、ユーザーがウェブサイトにファイルをアップロードできるようにすることができます。 Alt+Shift+M キーを押すか、SD カード、USB キー、外部ドライブ、デジタルカメラなどの外部ストレージ デバイスを接続すると、ChromeOS ファイル ブラウザが表示されます。ファイル
chrome.devtools.panels
chrome.devtools.panels API を使用して拡張機能をデベロッパー ツールのウィンドウ UI に統合し、独自のパネルの作成、既存のパネルへのアクセス、サイドバーの追加を行います。 この API を使用するには、次のキーを マニフェストで 宣言する必要があります。 デベロッパー ツール API の使用方法の概要については、 DevTools API の概要 をご覧ください。 拡張機能パネルとサイドバーはそれぞれ個別の HTML
chrome.system.cpu
system.cpu API を使用して CPU メタデータをクエリします。 文字列 プロセッサのアーキテクチャ名。 string[] プロセッサの機能の一部を示す機能コードのセット。現在サポートされているコードは、「mmx」、「sse」、「sse2」、「sse3」、「ssse3」、「sse4_1」、「sse4_2」、「avx」です。 文字列 プロセッサのモデル名。 数値 論理プロセッサの数。 ProcessorInfo [] 各論理プロセッサに関する情報。 数値 [] CPU
chrome.enterprise.networkingAttributes
chrome.enterprise.networkingAttributes API を使用して、現在のネットワークに関する情報を読み取ります。注: この API は、企業ポリシーによって自動インストールされた拡張機能でのみ使用できます。 文字列(省略可) デバイスのローカル IPv4 アドレス(構成されていない場合は未定義)。 文字列(省略可) デバイスのローカル IPv6 アドレス(構成されていない場合は未定義)。 文字列 デバイスの MAC アドレス。 デバイスのデフォルト
chrome.gcm
chrome.gcm を使用して、アプリと拡張機能が Firebase Cloud Messaging (FCM)でメッセージを送受信できるようにします。 メッセージ内のすべての Key-Value ペアの最大サイズ(バイト単位)。 4096 アプリケーションを FCM に登録します。登録 ID は callback によって返されます。同じ senderIds のリストを指定して register が再度呼び出されると、同じ登録 ID が返されます。 string[]
chrome.instanceID
chrome.instanceID を使用してインスタンス ID サービスにアクセスします。 アプリ インスタンス ID をリセットし、関連付けられているすべてのトークンを取り消します。 関数(省略可) callback パラメータは次のようになります。 約束 <void> Promise は Manifest V3 以降でのみサポートされています。他のプラットフォームではコールバックを使用する必要があります。 付与されたトークンを取り消します。 オブジェクト deleteToken
chrome.wallpaper
ChromeOS の壁紙を変更するには chrome.wallpaper API を使用します。 「壁紙」を宣言する必要があります使用するための権限をアプリの マニフェスト に記載 使用できます。例: たとえば、壁紙を https://example.com/a_file.png さん、 chrome.wallpaper.setWallpaper を呼び出すことができます できます。 サポートされている壁紙レイアウト。 "ストレッチ" 「CENTER」 "CENTER_CROPPED" 指定した
chrome.history
chrome.history API を使用して、アクセスしたページのブラウザの記録を操作します。ブラウザの履歴では、URL の追加、削除、照会を行うことができます。履歴ページを独自のバージョンでオーバーライドするには、 ページをオーバーライドする をご覧ください。 「履歴」を申告する必要がある 拡張機能のマニフェスト で History API の使用を許可する必要があります。次に例を示します。 History API は 遷移タイプ を使用して、ブラウザが特定の URL
chrome.loginState
chrome.loginState API を使用して、ログイン状態を読み取り、モニタリングします。 "SIGNIN_PROFILE" 拡張機能がログイン プロファイルにあることを指定します。 "USER_PROFILE" 拡張機能がユーザー プロフィールにあることを指定します。 "UNKNOWN" セッション状態が不明であることを指定します。 "IN_OOBE_SCREEN" ユーザーが開封確認画面にいることを指定します。 "IN_LOGIN_SCREEN"
chrome.input.ime
chrome.input.ime API を使用して、ChromeOS のカスタム IME を実装します。これにより、拡張機能でキー入力の処理、構成の設定、候補ウィンドウの管理を行うことができます。 「input」パラメータを宣言し、 拡張機能のマニフェスト で input.ime API の使用権限を宣言する必要があります。次に例を示します。 次のコードは、入力された文字を大文字に変換する IME を作成します。 アシスト ウィンドウ内のボタンの ID。 「元に戻す」
chrome.printingMetrics
chrome.printingMetrics API を使用して、印刷の使用状況に関するデータを取得します。 "BLACK_AND_WHITE" モノクロ モードが使用されたことを示します。 "COLOR" カラーモードが使用されたことを示します。 "ONE_SIDED" 片面印刷が使用されたことを示します。 &quot;TWO_SIDED_LONG_EDGE&quot; 両面印刷(長辺をめくる)を指定します。
chrome.fontSettings
chrome.fontSettings API を使用して Chrome のフォント設定を管理します。 Font Settings API を使用するには、「fontSettings」クラスを宣言し、拡張機能の権限に 使用します 。例: Chrome で一部のフォント設定を特定の汎用フォント ファミリーと言語に依存可能に 使用できます。たとえば、sans Serif の簡体字中国語に使用するフォントは、フォントと異なる場合があります。 使用します。 Chrome でサポートされている汎用フォント
chrome.platformKeys
chrome.platformKeys API を使用して、プラットフォームが管理するクライアント証明書にアクセスします。ユーザーまたはポリシーが権限を付与した場合、拡張機能はその証明書をカスタム認証プロトコルで使用できます。例:これにより、サードパーティの VPN でプラットフォームが管理する証明書を使用できるようになります( chrome.vpnProvider を参照)。 ArrayBuffer[] サーバーで許可されている認証局の識別名のリスト。各エントリは、DER でエンコードされた
chrome.devtools.inspectedWindow
chrome.devtools.inspectedWindow API を使用して、検査対象ウィンドウを操作します。検査対象ページのタブ ID の取得、検査対象ウィンドウのコンテキストにおけるコードの評価、ページの再読み込み、ページ内のリソースリストの取得を行います。 この API を使用するには、次のキーを マニフェストで 宣言する必要があります。 chrome.devtools.inspectedWindow を使用して検査対象ウィンドウを操作し、対象のウィンドウのタブ ID
chrome.processes
chrome.processes API を使用してブラウザのプロセスとやり取りします。 数値 キャッシュで使用される部分(バイト単位)。 数値 キャッシュのサイズ(バイト単位)。 数値(省略可) プロセスのすべてのスレッドによる、1 つの CPU コアの合計使用率として表される、プロセスの CPU 使用率の最新の測定値。これにより、ゼロから CpuInfo.numOfProcessors*100 までの値が得られます。この値は、マルチスレッド プロセスでは 100%
chrome.tts
chrome.tts API を使用して、合成テキスト読み上げ(TTS)を再生します。関連する ttsEngine API もご覧ください。この API を使用すると、拡張機能で音声エンジンを実装できます。 Chrome は、Windows(SAPI 5 を使用)、Mac OS X、ChromeOS で音声をネイティブにサポートしています。 音声合成機能を使用できます。どのプラットフォームでも 自身を代替音声エンジンとして登録する拡張機能をインストールします。 拡張機能から speak()
chrome.enterprise.hardwarePlatform
chrome.enterprise.hardwarePlatform API を使用して、ブラウザが実行されているハードウェア プラットフォームのメーカーとモデルを取得します。注: この API は、企業ポリシーによってインストールされた拡張機能でのみ使用できます。 文字列 文字列 ハードウェア プラットフォームのメーカーとモデルを取得し、拡張機能が承認されている場合は callback を介して返します。 関数(省略可) callback パラメータは次のようになります。
chrome.identity
chrome.identity API を使用して OAuth2 アクセス トークンを取得します。 文字列 アカウントの一意の識別子。この ID は、アカウントが存続期間中に変更されることはありません。 SYNC メイン アカウントで同期が有効になっていることを指定します。 "ANY" メイン アカウントが存在することを指定します(存在する場合)。 文字列 [] 省略可 拡張機能に付与されている OAuth2 スコープのリスト。 文字列(省略可) リクエストに関連付けられている特定のトークン。
chrome.devtools.recorder
chrome.devtools.recorder API を使用して、DevTools の [Recorder] パネルをカスタマイズします。 デベロッパー ツール API の使用方法の概要については、 DevTools API の概要 をご覧ください。 devtools.recorder API は、Chrome DevTools の [ Recorder パネル ] を拡張できるプレビュー機能です。 Chrome M105 以降では、エクスポート機能を拡張できます。Chrome M112
chrome.dom
chrome.dom API を使用して拡張機能用の特別な DOM API にアクセスする 指定された要素でホストされている、開いているシャドウルート、または閉じられたシャドウルートを取得します。この要素が Shadow ルートにアタッチされていない場合は、null が返されます。 HTMLElement オブジェクト https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot をご覧ください。
chrome.tabCapture
chrome.tabCapture API を使用して、タブのメディア ストリームを操作します。 chrome.tabCapture API を使用すると、動画とファイルを含む MediaStream にアクセスできます。 読み上げることもできますこれは、ユーザーが拡張機能を呼び出した後にのみ呼び出すことができます。 拡張機能の 操作ボタン をクリックする。これは Pod の IP アドレス activeTab 権限。 タブで MediaStream
chrome.webNavigation
chrome.webNavigation API を使用して、処理中のナビゲーション リクエストのステータスに関する通知を受け取ります。 すべての chrome.webNavigation メソッドとイベントで、「webNavigation」を宣言する必要があります。権限 拡張機能のマニフェスト 内で指定します。例: ナビゲーションが正常に完了すると、イベントは次の順序で発生します。 プロセス中にエラーが発生すると、 onErrorOccurred イベントが発生します。特定の
chrome.management
chrome.management API を使用すると、インストール済みのアプリと拡張機能を管理できます。 「management」として 拡張機能のマニフェスト で管理権限を使用するための権限を API例: management.getPermissionWarningsByManifest 、 management.uninstallSelf 、 management.getSelf には管理権限は必要ありません。 アイテムが無効になっている理由。 「不明」
chrome.topSites
chrome.topSites API を使用して、新しいタブページに表示される上位のサイト(よくアクセスするサイト)にアクセスします。ユーザーがカスタマイズしたショートカットは含まれません。 「topSites」をこの API を使用するには、 拡張機能のマニフェスト に権限を設定する必要があります。 この API を試すには、 chrome-extension-samples から topSites API の例 をインストールしてください。 できます。
chrome.search
デフォルトのプロバイダ経由で検索するには、 chrome.search API を使用します。 "CURRENT_TAB" 通話タブまたはアクティブなブラウザのタブに検索結果を表示することを指定します。 "NEW_TAB" 検索結果を新しいタブで表示するように指定します。 "NEW_WINDOW" 検索結果を新しいウィンドウで表示するように指定します。 Disposition オプション 検索結果を表示する場所。 CURRENT_TAB がデフォルトです。 数値(省略可)
chrome.idle
chrome.idle API を使用して、マシンのアイドル状態の変化を検出します。 「アイドル状態」であることを宣言する必要があります。アイドル状態の API を使用する権限を付与する必要があります。次に例を示します。 「有効」 "アイドル状態" 「ロック中」 アイドル状態のときに画面が自動的にロックされるまでの時間を秒単位で取得します。画面が自動的にロックされない場合は、期間 0 を返します。現在、ChromeOS でのみサポートされています。 関数(省略可) callback
chrome.types
chrome.types API には Chrome 用の型宣言が含まれています。 ChromeSetting プロトタイプは、共通の関数セット( get() 、 set() 、 clear() )を提供します。 また、Chrome ブラウザの設定にはイベント パブリッシャー( onChange )も使用できます。 プロキシ設定 例 は、これらの関数がどのように使用されるかを示しています。 Chrome では、次の 3 種類のブラウザ設定の範囲を区別しています。 Chrome
chrome.enterprise.deviceAttributes
デバイスの属性を読み取るには、 chrome.enterprise.deviceAttributes API を使用します。注: この API は、企業ポリシーによって自動インストールされた拡張機能でのみ使用できます。 管理者が注釈を付けたビジネスを取得します。現在のユーザーが関連付けられていない場合、または管理者によって位置情報のアノテーションが設定されていない場合は、空の文字列が返されます。 関数(省略可) callback パラメータは次のようになります。 文字列
chrome.windows
chrome.windows API を使用してブラウザ ウィンドウを操作します。この API を使用すると、ブラウザのウィンドウの作成、変更、並べ替えを行うことができます。 リクエストされると、 windows.Window には tabs.Tab オブジェクトの配列が含まれます。必要なこと url にアクセスする必要がある場合は、 マニフェスト で "tabs" 権限を宣言します。 pendingUrl 、 title 、または tabs.Tab の favIconUrl プロパティ。例:
chrome.power
chrome.power API を使用して、システムの電源管理機能をオーバーライドします。 デフォルトでは、オペレーティング システムはユーザーが非アクティブになると画面が暗くなり、最終的に ありませんPower API を使用すると、アプリや拡張機能でシステムを起動したままにすることができます。 この API を使用すると、電源管理を無効にする レベル を指定できます。 "system"
chrome.pageCapture
chrome.pageCapture API を使用してタブを MHTML として保存します。 MHTML は、ほとんどのブラウザでサポートされている 標準形式 です。ページを 1 つのファイルにカプセル化し そのすべてのリソース(CSS ファイル、画像など)が含まれます。 なお、セキュリティ上の理由から、MHTML ファイルはファイル システムからのみ読み込むことができます。また、 メインフレームでのみ読み込むことができます。 「pageCapture」をpageCapture
chrome.systemLog
chrome.systemLog API を使用して拡張機能から Chrome システムログを記録します。 文字列 新しいログレコードを追加します。 MessageOptions ロギングのオプション。 関数(省略可) callback パラメータは次のようになります。 約束 <void> Promise は Manifest V3 以降でのみサポートされています。他のプラットフォームではコールバックを使用する必要があります。
chrome.privacy
chrome.privacy API を使用して、ユーザーのプライバシーに影響する可能性がある Chrome の機能の使用を管理します。この API は、Chrome の構成を取得、設定するために、 API タイプの ChromeSetting プロトタイプ を使用します。 「プライバシー」を申告する必要があります拡張機能の マニフェスト で API の使用権限を付与する必要があります。次に例を示します。 Chrome 設定の現在値を簡単に読み取ることができます。まず、 次に、そのオブジェクトの
chrome.fileSystemProvider
chrome.fileSystemProvider API を使用してファイル システムを作成し、ChromeOS のファイル マネージャーからこのシステムにアクセスできるようにします。 「fileSystemProvider」を権限と、 拡張機能のマニフェスト のセクション(File System Provider API を使用するための設定)例: file_system_provider セクションは、次のように宣言する必要があります。 ファイルアプリは、関連する UI
chrome.notifications
chrome.notifications API を使用すると、テンプレートを使用してリッチ通知を作成し、システムトレイにその通知を表示できます。 文字列(省略可) Mac OS X ユーザーにはボタン アイコンが表示されません。 文字列 文字列 このアイテムに関する補足情報。 文字列 リスト通知の 1 つのアイテムのタイトル。 文字列(省略可) アプリアイコンのマスクは、Mac OS X ユーザーには表示されません。 アプリアイコン マスクの URL。URL には iconUrl
chrome.devtools.network
デベロッパー ツールの [Network] パネルに表示されるネットワーク リクエストに関する情報を取得するには、 chrome.devtools.network API を使用します。 この API を使用するには、次のキーを マニフェストで 宣言する必要があります。 デベロッパー ツール API の使用方法の概要については、 DevTools API の概要 をご覧ください。 ネットワーク リクエスト情報は、HTTP アーカイブ形式( HAR )で表されます。説明 HAR
chrome.downloads
この権限により 警告がトリガーされます chrome.downloads API を使用して、ダウンロードをプログラムで開始、モニタリング、操作、検索します。 この API を使用するには、 拡張機能のマニフェスト で "downloads" 権限を宣言する必要があります。 chrome.downloads API の簡単な使用例は、 examples/api/downloads にあります。 されます。その他の例とソースコードの表示については、 サンプル をご覧ください。 ブール値(省略可)
chrome.vpnProvider
chrome.vpnProvider API を使用して VPN クライアントを実装します。 vpnProvider の一般的な使用方法は次のとおりです。 createConfig メソッドを使用して VPN 構成を作成します。VPN 構成は永続的なエントリで、ネイティブの ChromeOS UI でユーザーに表示されます。ユーザーはリストから VPN 構成を選択して、接続または接続解除できます。 イベント onPlatformMessage 、 onPacketReceived 、
chrome.proxy
chrome.proxy API を使用して Chrome のプロキシ設定を管理します。この API は、 API タイプの ChromeSetting プロトタイプ を利用してプロキシ構成を取得、設定します。 「プロキシ」を宣言する必要があります。 拡張機能のマニフェスト でプロキシ設定を使用するための権限 API例: プロキシ設定は、 proxy.ProxyConfig オブジェクトで定義されます。Chrome のプロキシ設定によっては 設定には、 proxy.ProxyRules または
chrome.printerProvider
chrome.printerProvider API は、印刷マネージャーが使用するイベントを公開して、拡張機能で制御されるプリンタへのクエリ、拡張機能の機能の照会、これらのプリンタへの印刷ジョブの送信を行います。 文字列(省略可) 人が読める形式のプリンタの説明。 文字列 固有のプリンタ ID。 文字列 人間が読める形式のプリンタ名。 onPrintRequested イベントに応答して返されるエラーコード。 "OK" オペレーションが正常に完了したことを示します。 "FAILED"
chrome.events
chrome.events 名前空間には、重要なことが起きたときに通知するためにイベントをディスパッチする API で使用される一般的なタイプが含まれています。 Event は、何か興味深いことが起きたときに通知を受け取ることができるオブジェクトです。こちらが chrome.alarms.onAlarm イベントを使用して、アラームが経過するたびに通知されるようにする例: 例に示すように、 addListener() を使用して通知の登録を行います。この引数は、 addListener()
chrome.events
chrome.events 名前空間には、重要なことが起きたときに通知するためにイベントをディスパッチする API で使用される一般的なタイプが含まれています。 Event は、何か興味深いことが起きたときに通知を受け取ることができるオブジェクトです。こちらが chrome.alarms.onAlarm イベントを使用して、アラームが経過するたびに通知されるようにする例: 例に示すように、 addListener() を使用して通知の登録を行います。この引数は、 addListener()
chrome.idle
chrome.idle API を使用して、マシンのアイドル状態の変化を検出します。 アイドル状態の API を使用するには、拡張機能のマニフェストで "idle" 権限を宣言する必要があります。次に例を示します。 「有効」 "アイドル状態" 「ロック中」 アイドル状態のときに画面が自動的にロックされるまでの時間を秒単位で取得します。画面が自動的にロックされない場合は、期間 0 を返します。現在、ChromeOS でのみサポートされています。 関数(省略可) callback
chrome.offscreen
offscreen API を使用して、画面外ドキュメントを作成、管理します。 Offscreen API を使用するには、 拡張機能のマニフェスト で "offscreen" 権限を宣言します。例: Service Worker には DOM アクセスはなく、多くのウェブサイトには、 コンテンツ スクリプトの機能を制限する。Offscreen API を使用すると、拡張機能で DOM を使用できるようになります。 新しいウィンドウを開いたり、ユーザー
chrome.pageCapture
chrome.pageCapture API を使用してタブを MHTML として保存します。 MHTML は、ほとんどのブラウザでサポートされている 標準形式 です。ページを 1 つのファイルにカプセル化し そのすべてのリソース(CSS ファイル、画像など)が含まれます。 なお、セキュリティ上の理由から、MHTML ファイルはファイル システムからのみ読み込むことができます。また、 メインフレームでのみ読み込むことができます。 「pageCapture」をpageCapture
chrome.fileSystemProvider
chrome.fileSystemProvider API を使用してファイル システムを作成し、ChromeOS のファイル マネージャーからこのシステムにアクセスできるようにします。 「fileSystemProvider」を権限と、 拡張機能のマニフェスト のセクション(File System Provider API を使用するための設定)例: file_system_provider セクションは、次のように宣言する必要があります。 ファイルアプリは、関連する UI
chrome.dom
chrome.dom API を使用して拡張機能用の特別な DOM API にアクセスする 指定された要素でホストされている、開いているシャドウルート、または閉じられたシャドウルートを取得します。この要素が Shadow ルートにアタッチされていない場合は、null が返されます。 HTMLElement オブジェクト https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot をご覧ください。
chrome.debugger
chrome.debugger API は、Chrome の リモート デバッグ プロトコル の代替トランスポートとして機能します。 chrome.debugger を使用して 1 つ以上のタブにアタッチし、ネットワーク インタラクションの測定、JavaScript のデバッグ、DOM と CSS の変更などを行います。 Debuggee プロパティの tabId を使用して、 sendCommand でタブをターゲットにし、 onEvent コールバックからの tabId
chrome.management
chrome.management API を使用すると、インストール済みのアプリと拡張機能を管理できます。 「management」として 拡張機能のマニフェスト で管理権限を使用するための権限を API例: management.getPermissionWarningsByManifest() 、 management.uninstallSelf() 、 management.getSelf() には管理権限は必要ありません。 アイテムが無効になっている理由。 「不明」
chrome.omnibox
アドレスバー API を使用すると、Google Chrome のアドレスバーにキーワードを登録できます。アドレスバーはアドレスバーとも呼ばれます。 ユーザーが拡張機能のキーワードを入力すると、拡張機能のみの操作を開始する。 あります。キー入力はそれぞれ拡張機能に送信され、ユーザーはそれに対する候補を提示できます。 候補は、さまざまな方法で豊富な形式にできます。ユーザーが候補を承認すると 拡張機能が通知を受け、処理される可能性があります。 この API を使用するには、次のキーを マニフェストで
chrome.downloads
chrome.downloads API を使用して、ダウンロードをプログラムで開始、モニタリング、操作、検索します。 この API を使用するには、 拡張機能のマニフェスト で "downloads" 権限を宣言する必要があります。 chrome.downloads API の簡単な使用例は、 examples/api/downloads にあります。 されます。その他の例とソースコードの表示については、 サンプル をご覧ください。 ブール値(省略可) ブール値(省略可)
chrome.history
chrome.history API を使用して、アクセスしたページのブラウザの記録を操作します。ブラウザの履歴では、URL の追加、削除、照会を行うことができます。履歴ページを独自のバージョンでオーバーライドするには、 ページをオーバーライドする をご覧ください。 ユーザーのブラウザ履歴を操作するには、History API を使用します。 History API を使用するには、 拡張機能のマニフェスト で "history" 権限を宣言します。次に例を示します。 History API
chrome.notifications
chrome.notifications API を使用すると、テンプレートを使用してリッチ通知を作成し、システムトレイにその通知を表示できます。 文字列(省略可) Mac OS X ユーザーにはボタン アイコンが表示されません。 文字列 文字列 このアイテムに関する補足情報。 文字列 リスト通知の 1 つのアイテムのタイトル。 文字列(省略可) アプリアイコンのマスクは、Mac OS X ユーザーには表示されません。 アプリアイコン マスクの URL。URL には iconUrl
chrome.gcm
chrome.gcm を使用して、アプリと拡張機能が Firebase Cloud Messaging (FCM)でメッセージを送受信できるようにします。 メッセージ内のすべての Key-Value ペアの最大サイズ(バイト単位)。 4096 アプリケーションを FCM に登録します。登録 ID は callback によって返されます。同じ senderIds のリストを指定して register が再度呼び出されると、同じ登録 ID が返されます。 string[]
chrome.instanceID
chrome.instanceID を使用してインスタンス ID サービスにアクセスします。 アプリ インスタンス ID をリセットし、関連付けられているすべてのトークンを取り消します。 関数(省略可) callback パラメータは次のようになります。 約束 <void> Promise は Manifest V3 以降でサポートされていますが、 下位互換性が確保されます同じ関数呼び出しで両方を使用することはできません。「 Promise
chrome.loginState
chrome.loginState API を使用して、ログイン状態を読み取り、モニタリングします。 "SIGNIN_PROFILE" 拡張機能がログイン プロファイルにあることを指定します。 "USER_PROFILE" 拡張機能がユーザー プロフィールにあることを指定します。 "UNKNOWN" セッション状態が不明であることを指定します。 "IN_OOBE_SCREEN" ユーザーが開封確認画面にいることを指定します。 "IN_LOGIN_SCREEN"
chrome.platformKeys
chrome.platformKeys API を使用して、プラットフォームが管理するクライアント証明書にアクセスします。ユーザーまたはポリシーが権限を付与した場合、拡張機能はその証明書をカスタム認証プロトコルで使用できます。例:これにより、サードパーティの VPN でプラットフォームが管理する証明書を使用できるようになります( chrome.vpnProvider を参照)。 ArrayBuffer[] サーバーで許可されている認証局の識別名のリスト。各エントリは、DER でエンコードされた
chrome.identity
chrome.identity API を使用して OAuth2 アクセス トークンを取得します。 文字列 アカウントの一意の識別子。この ID は、アカウントが存続期間中に変更されることはありません。 SYNC メイン アカウントで同期が有効になっていることを指定します。 "ANY" メイン アカウントが存在することを指定します(存在する場合)。 文字列 [] 省略可 拡張機能に付与されている OAuth2 スコープのリスト。 文字列(省略可) リクエストに関連付けられている特定のトークン。
chrome.sockets.tcp
chrome.sockets.tcp API を使用して、TCP 接続を使用してネットワーク経由でデータを送受信します。この API は、 chrome.socket API に以前あった TCP 機能よりも優先されます。 この API を使用するには、次のキーを マニフェストで 宣言する必要があります。 数値 新しく作成されたソケットの ID。この API で作成されたソケット ID は、非推奨の [ socket ](../socket/) API など、他の API から作成されたソケット
chrome.hid
chrome.hid API を使用して、接続された HID デバイスを操作できます。この API を使用すると、アプリのコンテキストから HID オペレーションにアクセスできます。この API を使用すると、アプリはハードウェア デバイスのドライバとして機能します。この API によって生成されたエラーは、 runtime.lastError を設定して関数の通常のコールバックを実行することによって報告されます。この場合、コールバックの通常のパラメータは未定義になります。 数値(省略可)
chrome.sockets.tcpServer
chrome.sockets.tcpServer API を使用して、TCP 接続を使用するサーバー アプリケーションを作成します。この API は、 chrome.socket API に以前あった TCP 機能よりも優先されます。 この API を使用するには、次のキーを マニフェストで 宣言する必要があります。 数値 基になるネットワーク呼び出しから返された結果コード。 数値 サーバー ソケット ID。 数値 クライアント
chrome.system.network
chrome.system.network API を使用する。 文字列 使用可能な IPv4/6 アドレス。 文字列 アダプタの基本名。*nix では、通常、"eth0"、"wlan0" などになります。 数値 プレフィックスの長さ このシステムのローカル アダプターに関する情報を取得します。 関数(省略可) callback パラメータは次のようになります。 NetworkInterface [] ネットワーク インターフェース情報を含むオブジェクトの配列。 Promise&lt;
chrome.fileSystem
chrome.fileSystem API を使用して、ユーザーのローカル ファイル システムの作成、読み取り、移動、書き込みを行います。この API により、Chrome アプリはユーザーが選択した場所に対して読み取りと書き込みを行えます。たとえば、テキスト エディタ アプリでは、この API を使用してローカル ドキュメントの読み取りと書き込みを行うことができます。すべてのエラーは、chrome.runtime.lastError を介して通知されます。 文字列(省略可)
chrome.app.window
chrome.app.window API を使用してウィンドウを作成します。ウィンドウには、タイトルバーとサイズ コントロールを備えたオプションのフレームがあります。Chrome ブラウザ ウィンドウには関連付けられていません。これらのオプションのデモについては、 ウィンドウ状態サンプル をご覧ください。 ウィンドウ JavaScript の「ウィンドウ」オブジェクトが作成されます。 文字列 ウィンドウの作成に使用された ID。 境界 ウィンドウのコンテンツの位置、サイズ、制約(ウィンドウ
chrome.mediaGalleries
chrome.mediaGalleries API を使用して、ユーザーの同意を得たうえで、ユーザーのローカル ディスクのメディア ファイル(音声、画像、動画)にアクセスします。 文字列 ブール値 文字列 変更されたギャラリーを識別します。 GalleryChangeType 変更イベントのタイプ。 &quot;contents_changed&quot; ギャラリーのコンテンツが変更されました。 "watch_dropped"
ロギング
デフォルトでは、ChromeDriver は警告/エラーのみを stderr に記録します。デバッグ時 詳細ログを有効にすると便利です。 詳細ログを有効にするには、 --verbose を chromedriver サーバーに渡します。 代わりに --log-path を渡して、ログがファイルに書き込まれるようにすることもできます。 あります。chromedriver サーバーを直接起動しない場合は、 WebDriver クライアント
ChromeDriver のスタートガイド
このページでは、ChromeDriver を使用してウェブサイトをテストする方法について説明します。 パソコン(Windows、Mac、Linux)でご利用いただけます。また、 Android スタートガイド または ChromeOS の概要 ChromeDriver は、Selenium WebDriver が Chrome を制御するために使用する独立した実行可能ファイルです。これは、WebDriver のコントリビューターのサポートのもと、Chromium
Chrome 拡張機能
Chrome 拡張機能は、パッケージ化されていても解凍してもかまいません。 パッケージ化されていない拡張機能をパッケージ化するには、 chrome://extensions の [Pack] ボタンを使用するか、 Chrome: "chrome.exe --pack-extension=C:\path\to\unpacked\extension --pack-extension-key=C:\myext.pem"
chrome.browsingData
chrome.browsingData API を使用して、ユーザーのローカル プロフィールから閲覧データを削除します。 この API を使用するには、 拡張機能のマニフェスト で "browsingData" 権限を宣言する必要があります。 この API
chrome.system.memory
chrome.system.memory API。 数値 使用可能な容量(バイト単位)。 数値 物理メモリ容量の合計(バイト単位)。 物理メモリ情報を取得します。 関数(省略可) callback パラメータは次のようになります。 MemoryInfo Promise&lt; MemoryInfo &gt; Promise は Manifest V3 以降でのみサポートされています。他のプラットフォームではコールバックを使用する必要があります。
chrome.dns
DNS 解決に chrome.dns API を使用します。 この API を使用するには、 マニフェスト で "dns" 権限を宣言する必要があります。 次のコードは、 resolve() を呼び出して example.com の IP アドレスを取得します。 service-worker.js: 文字列(省略可) IP アドレスのリテラルを表す文字列。resultCode が成功を示す場合にのみ提供されます。 数値 結果コード。0 は成功を示します。 指定されたホスト名または IP アドレス
API リファレンス
Chrome 拡張機能で利用できるすべての API の完全なリファレンス。これには、サポートが終了した Chrome アプリ プラットフォーム用の API や、ベータ版および開発中の API が含まれます。
WebGPU の新機能(Chrome 128)
サブグループのテスト、線とポイントの深度バイアスの設定のサポート終了、未キャプチャ エラーの DevTools の警告の非表示(PreventDefault の場合)、WGSL が最初にサンプリングを補間する、その他。
- WebGpu
Chrome 128 の新機能
Chrome 128 がリリースされました。改行のある Ruby 要素の表示が改善され、Promise.try で Promise チェーンの開始が簡単になり、PointerEvent インターフェースが拡張されて複数のペンを一意に識別できるようになりました。その他、他にも多くの要素があります。Chrome 128 のデベロッパー向け新機能について、Adriana Jara が詳しく解説します。
Chromium のユーザー補助のパフォーマンスを改善
Ahmed Elwasefi が Google Summer of Code を通じて Chromium コントリビューターになった経緯を語った投稿。
Chrome 128
2024 年 8 月 20 日より、Chrome 128 のロールアウトが開始されます。CSS の ruby-align プロパティや Promise.try など、多数の機能が追加されています。
File System Observer API のオリジン トライアル
Chrome チームは、ファイル システムへの変更をデベロッパーに通知する新しい File System Observer API をテストしています。
chrome.alarms
chrome.alarms API を使用して、コードを定期的に、または将来の指定した時刻に実行するようにスケジュールします。 chrome.alarms API を使用するには、 マニフェスト で "alarms" 権限を宣言します。 以下の例は、アラームの使用方法と応答方法を示しています。この API を試すには、 chrome-extension-samples から Alarm API の例 をインストールする できます。 次の例では、拡張機能のインストール時に Service
chrome.contextMenus
chrome.contextMenus API を使用して、Google Chrome のコンテキスト メニューに項目を追加します。画像、ハイパーリンク、ページなど、コンテキスト メニューの追加を適用するオブジェクトの種類を選択できます。 コンテキスト メニューの項目は、file:// を含むドキュメント(またはドキュメント内のフレーム)に表示できます。 または chrome:// の URL を入力します。どのドキュメントにアイテムを表示するかを制御するには、 create() または
chrome.audio
chrome.audio API は、ユーザーがシステムに接続されているオーディオ機器に関する情報を取得してコントロールできるようにするために提供されます。この API は現在、ChromeOS のキオスクモードでのみ使用できます。 文字列 デバイス名。 DeviceType 端末のタイプ。 文字列 わかりやすい名前(「USB マイク」など)。 文字列 オーディオ機器の一意の識別子。 ブール値 現在アクティブなデバイスの場合は true。 数値 デバイスの音量、出力の音量、入力のゲイン。
chrome.commands
Command API を使用すると、拡張機能での操作(ブラウザの操作を開く操作や拡張機能にコマンドを送信する操作など)をトリガーするキーボード ショートカットを追加できます。 この API を使用するには、次のキーを マニフェストで 宣言する必要があります。 拡張機能のデベロッパーは Commands API を使用して特定のコマンドを定義し、それらをデフォルトにバインドできる できます。拡張機能が受け入れる各コマンドは、 拡張機能のマニフェスト 内の "commands" オブジェクト。
chrome.declarativeContent
chrome.declarativeContent API を使用すると、ページのコンテンツの読み取り権限がなくても、ページのコンテンツに応じてアクションを実行できます。 Declarative Content API を使用すると、アプリケーションの URL に応じて拡張機能のアクションを有効にできます。 また、CSS セレクタがページの要素と一致する場合に、 ホスト権限 を追加するか、 コンテンツ スクリプト を挿入します。 activeTab 権限を使用して、ユーザーが できます。
chrome.debugger
chrome.debugger API は、Chrome の リモート デバッグ プロトコル の代替トランスポートとして機能します。 chrome.debugger を使用して 1 つ以上のタブにアタッチし、ネットワーク インタラクションの測定、JavaScript のデバッグ、DOM と CSS の変更などを行います。 Debuggee プロパティの tabId を使用して、 sendCommand でタブをターゲットにし、 onEvent コールバックからの tabId
chrome.browsingData
chrome.browsingData API を使用して、ユーザーのローカル プロフィールから閲覧データを削除します。 「browsingData」を 拡張機能のマニフェスト で、この API を使用するための権限を設定する必要があります。 この API
File System Access API: ローカル ファイルへのアクセスを簡素化
File System Access API を使用すると、開発者は IDE、写真と動画のエディタ、テキスト エディタなど、ユーザーのローカル デバイス上のファイルを操作する高度なウェブアプリを作成できます。ユーザーがウェブアプリにアクセス権を付与すると、ユーザーはデバイス上のファイルやフォルダの変更を直接読み取り、保存できます。
Summarization API の早期プレビュー版が利用可能に
EPP の参加者は、Chrome で Gemini Nano の Summarization API を使用してプロトタイプを作成できるようになりました。
ソフト ナビゲーションの測定実験
Chrome チームは、シングルページ アプリケーションで使用されるいわゆるソフト ナビゲーションの測定精度の向上に取り組んでいます。また、新しい API をフラグの背後で使用し、サイトでもテストできるようにしています。
WebDriver BiDi を Firefox、Chrome、Puppeteer で本番環境に対応
Puppeteer 23 では、Firefox 129 以降の安定版サポートが導入され、WebDriver BiDi をベースとした Chrome と Firefox の自動化のための統合 API が提供されます。
DevTools の新機能(Chrome 128)
コンソールの分析情報をヨーロッパで公開したり、[パフォーマンス] パネルでトラックをカスタマイズするための強化されたネットワーク トラックと API を利用したりできます。
Android 版 Chrome のパスキー UX の更新
Android 版 Chrome に認証情報マネージャーが統合され、Android 14 以降でサードパーティのパスワード マネージャーがパスキーを提供できるようになりました
WebDriver BiDi による自動化が BrowserStack で利用可能に
BrowserStack が WebDriver BiDi のサポートを導入: イベント ドリブンの自動化で Selenium Grid テストを強化します。
Chrome 127 の新機能
Chrome 127 がリリースされました。font-size-adjust のサポートにより、Document Picture-in-Picture API、キーボードのフォーカス可能なスクロール コンテナなど、多くのユーザー アクティベーションが伝播されます。Chrome 127 のデベロッパー向け新機能について、Adriana Jara が詳しく解説します。
ユーザーが重要なアプリのインストールを Chrome でサポートする方法
Chrome の内部ユーザー調査によると、多くのユーザーはウェブアプリのインストールを重視しています。次のようなメリットがあります。 Chrome とウェブ デベロッパーが支援できる方法は複数あります。たとえば、新しい ML プロモーション機能などです。この記事では、ユーザーがアプリをインストールする方法の概要について説明します。 Chrome の インストール可能条件 を満たすアプリには、Chrome デスクトップ ブラウザのアドレスバーにインストール
WebGPU の新機能(Chrome 127)
Android での OpenGL ES の試験運用版のサポート、GPUAdapter 情報属性、WebAssembly の相互運用の改善など。
- WebGpu
Chrome 127
2024 年 7 月 23 日より、Chrome 127 のロールアウトが開始されます。CSS の font-size-adjust や、キーボードのフォーカス可能なスクロール コンテナなど、多数の機能が盛り込まれています。
Chrome 拡張機能: ポリシーの重要な更新
このお知らせでは、デベロッパー プログラム ポリシーのページを更新し、高品質のプロダクトの開発を促し、虚偽の振る舞いを防止し、ユーザーが十分な情報に基づき同意を得ることを目的にしています。
DevTools の新機能(Chrome 127)
Elements での CSS アンカー配置、Sources の「Never Pause Here」の拡張、新しいスクロール スナップ イベント リスナー、更新されたネットワーク スロットリング プリセットなど。
YouTube に Trusted Types を導入
YouTube は、クロスサイト スクリプティング攻撃を防ぐために Trusted Types を使用してプラットフォームのセキュリティを強化していますが、拡張機能に影響する可能性があります。
Long Animation Frame API をリリース
Long Animation Frame API(LoAF)は Chrome 123 からリリースされました。また、この新しい API を最大限に活用できるように、ツールとガイダンスも更新しました。
Chrome でページを事前レンダリングしてページ ナビゲーションを即時に行う
Chrome チームでは、ユーザーがアクセスする可能性の高い今後のページを完全に事前レンダリングする機能の開発に取り組んできました。
WebGPU の新機能(Chrome 126)
maxTextureArrayLayers の上限の引き上げ、Vulkan バックエンドのバッファ アップロードの最適化、シェーダーのコンパイル時間の改善、送信されるコマンド バッファの一意性の確保、Dawn の更新。
- WebGpu
新しい HTML <permission>> 要素のオリジン トライアル
Chrome チームは、ユーザーに強力な機能へのアクセスをリクエストする、新しい宣言型の HTML <権限>要素をテストしています。
Chrome 126
Chrome 126 は 2024 年 6 月 11 日にリリースが開始されます。ドキュメント間のビュー遷移、CloseWatcher API の再有効化、Gamepad API のトリガー ランブルなど、多くの機能が追加されています。
Chrome 126 の新機能
Chrome 126 がリリースされました。ViewTransitions API でのドキュメント間の遷移のサポートにより、CloseWatcher API が再度有効化され、Gamepad API に対してトリガー ランブルが行われるなど、多くの機能が追加されています。Adriana Jara が、Chrome 126 のデベロッパー向けの新機能について詳しく説明しています。
広告表示オプションに適用される変更の確認をスキップする
このたび、Declarative Net Request API を使用して、Manifest V3 拡張機能に対する対象となる変更の審査プロセスをスキップできる新機能をリリースいたしました。
Chrome DevTools で投機ルールをデバッグする
今後のページ ナビゲーションのプリフェッチと事前レンダリングに使用される推測ルールをデバッグするための Chrome DevTools の機能について、すべて学習します。
ビュー遷移の新機能(Google I/O 2024 の更新)
MPA のドキュメント間のビュー遷移、アクティブ タイプによる選択的なビュー遷移、ビュー遷移クラスを使用したアニメーション スタイルの共有を発表しました。
Web AI を高速化するための WebAssembly と WebGPU の機能強化、パート 2
パート 2/2.WebAssembly と WebGPU の拡張機能により、ウェブ上での機械学習のパフォーマンスがどのように向上するかについて説明します。
- WebGpu
I/O 2024 ウェブ AI のまとめ: ウェブアプリ用の新しいモデル、ツール、API
I/O 2024 でウェブ AI のまとめをご覧ください。ウェブアプリの新たなモデル、ツール、API をご紹介します。
- WebGpu
WebAssembly と WebGPU の強化による Web AI の高速化、パート 1
パート 1/2。WebAssembly と WebGPU の強化により、ウェブ上での ML のパフォーマンスがどのように向上するかについて学びます。
- WebGpu
Google I/O 2024 で発表された 10 の最新情報: すべてのウェブ デベロッパーのために AI の力を活用
Google I/O デベロッパー基調講演とセッションから、優れた機能をご紹介します。
Chrome 125
Chrome 125 は 2024 年 5 月 14 日にリリースが開始され、CSS Anchor Positioning、Compute Pressure API、新しい Baseline 機能など、多数の新機能が追加されます。
Chrome 125 の新機能
Chrome 125 がリリースされました。CSS Anchor Positioning API、Compute Pressure API、Storage Access API への拡張など、多数の機能が用意されています。Adriana Jara が、Chrome 125 のデベロッパー向けの新機能について詳しく説明しています。
ウェブ コンテンツと HTTP レスポンス ヘッダーをローカルでオーバーライドする
ローカル オーバーライドを使用してリモート リソースをモックし、ページ読み込み後も DevTools で行った変更を保持します。
Spotify が Picture-in-Picture API を使用して Spotify ミニプレーヤーを開発した方法
Spotify ミニプレーヤーが、キャンバスをハックする機能から Document Picture-in-Picture API によって実現される洗練されたエクスペリエンスへと進化した方法をご紹介します。
スムーズな自動テストを実現する Chrome のツール
Puppeteer、Chrome ヘッドレス、Chrome for Testing の概要と、Chrome ツールチームが提供したその他のリソースです。
e コマースサイトで CSS と UI の機能が重要な理由
最新の CSS や UI 機能(ビュー遷移、スクロールドリブン アニメーション、Popover API など)を実装することで、e コマースサイトがどのように役立つかを学びます。
移行の事例紹介を見る
redBus、Policybazaar、Tokopedia のいずれも View Transition API を使用しており、パフォーマンスと滑らかな UI の恩恵を受けています。
セキュアでないコンテキストのプライベート ネットワーク アクセス(PNA)の非推奨トライアルが終了します - PNA 権限プロンプトを実装してください
HTTPS に変換できないウェブサイトからプライベート ネットワーク デバイスにアクセスするには、権限プロンプトを使用して混合コンテンツのチェックを緩和する必要があります。
page と start_url を制御する Service Worker を登録しない
プログレッシブ ウェブアプリの機能(オフライン機能、プッシュ通知、インストール可能性など)をサポートする Service Worker の登録方法について説明します。
Chrome 124 の新機能
Chrome 124 がリリースされました。JavaScript から宣言型 Shadow DOM を使用できるようにする新しい API が 2 つあります。Web Sockets でストリームを使用できます。ビュー遷移が改良されました他にもたくさんあります。Chrome 124 におけるデベロッパー向けの新機能について、Pete LePage が詳しく説明しています。
JavaScript が利用できない場合の代替コンテンツを提供しない
JavaScript が利用できない場合に、ユーザーがウェブページの少なくとも一部のコンテンツを表示できるようにする方法をご覧ください。
WebGPU の新機能(Chrome 124)
読み取り専用と読み取り / 書き込みのストレージ テクスチャ、Service Worker と共有ワーカーのサポート、新しいアダプタ情報属性、バグの修正。
- WebGpu
CrUX で使用可能なナビゲーション タイプ
Chrome ユーザー エクスペリエンス レポート(CrUX)の新しい nav_types 指標と、この指標を使用してウェブ パフォーマンス指標を説明および最適化する方法について説明します。
PageSpeed Insights で Chrome UX レポートデータを表示する方法
PageSpeed Insights(PSI)は、ページのパフォーマンスとその改善方法を把握するためのウェブ デベロッパー向けツールです。このガイドでは、PSI を使用して CrUX から分析情報を抽出し、ユーザー エクスペリエンスについての理解を深める方法について説明します。
Chrome ウェブストア デベロッパー ダッシュボードでのバージョン ロールバック
今週、デベロッパーが Chrome ウェブストアで公開済みの以前のバージョンに拡張機能をロールバックできる新機能をリリースします。Google の目標は、特に Manifest V3 への移行に伴い、デベロッパーがアップデートを公開する際に安心していただけるようにすることです。 本日より、バグ修正を含む拡張機能の新しいバージョンを送信して審査に合格するまで待つ必要がなくなります。代わりに、[ その他 ] メニューまたはアイテムのパッケージ ページからロールバックを開始できます。
JS Profiler は廃止され、[パフォーマンス] パネルで CPU をプロファイリングする
CPU パフォーマンスをプロファイリングする今後のプロセスと、JavaScript Profiler を非推奨とする理由とその方法について説明します。
バックフォワード キャッシュの notRestoredReasons API
ドキュメント内のフレームがナビゲーション時にバックフォワード キャッシュの使用をブロックされたかどうかについて、情報をレポートします。
[パフォーマンス] パネルで Node.js のパフォーマンスをプロファイリングする
[パフォーマンス] パネルで Node.js アプリケーションのパフォーマンスをプロファイリングする方法について説明します。
WebAssembly JavaScript Promise 統合(JSPI)のオリジン トライアルの開始
JavaScript Promise Integration(JSPI)は、WebAssembly にコンパイルされた同期シーケンシャル コードが非同期 Web API にアクセスできるようにする API です。
fetchLater API オリジン トライアル
fetchLater API(現在はオリジン トライアルで)について説明します。この API は、ページが閉じられていても完了する遅延フェッチをリクエストする新しい API です。
キーボードのフォーカス可能なスクローラー
tabindex 値が設定されていないスクローラーと、フォーカス可能な子のないスクローラーを、キーボードでフォーカス可能にするための変更がロールアウトされます。
Chrome 123 の新機能
Chrome 123 がリリースされました。新しい Light-dark 関数、Long Animation Frames API、Service Worker Static Routing API など、多くの機能があります。Adriana Jara が、Chrome 123 のデベロッパー向けの新機能について詳しく説明しています。
プライベート ネットワーク アクセス: ウェブワーカーとナビゲーション フェッチに対する保護の強化
ウェブ ワーカー、ナビゲーション フェッチ、今後の保護のためのプライベート ネットワーク アクセスの主なセキュリティ メカニズムについて説明します。このドキュメントでは、ウェブサイトの所有者がプライベート ネットワークを利用する場合に行うべきことについても説明します。
Service Worker Static Routing API を使用して、特定のパスで Service Worker をバイパスする
Chrome 123 から提供されるこの新しい API の使用方法をご確認ください。
拡張機能のリクエストの非表示と [ネットワーク] パネルの改善点
Chrome DevTools の [Network] パネルの最新の改善点をご確認ください。このパネルはウェブ デバッグをシンプルにするために設計されています。
他のエフェクトを適用する: 自動ダークモードの有効化、フォーカスのエミュレーションなど
広告フレームのハイライト表示、ページ上でのフォーカスのエミュレーション、ローカルのフォントと画像形式の無効化、自動ダークテーマの有効化、視覚障がい者のエミュレーションを行うことができます。
共有辞書で圧縮効率を向上
ウェブでの圧縮は、共有辞書圧縮によって大幅に強化されています。圧縮がどのようなもので、どのように機能するのか、ウェブ上の静的リソースと動的リソースの両方について、標準の圧縮よりもさらに読み込み時間を大幅に短縮できる方法をご確認ください。
古いヘッドレス Chrome を chrome-headless-shell としてダウンロードします
ユーザー向けのすべての Chrome リリースで、古いヘッドレス Chrome をスタンドアロン バイナリとしてダウンロードできるようになりました。
Speculation Rules API を改善
ドキュメント ルール、積極性の設定、制限、プラットフォームでの投機ルールのサポートなど、Speculation Rules API の最新アップデートの詳細を示します。
Chrome 拡張機能: Service Worker の停止をテストする方法
この投稿では、Eyeo のチームが、拡張機能 Service Worker のテストに関する問題への道のりを紹介します。特に、Service Worker が停止したときに Chrome 拡張機能が正しく動作するかどうかを確認する方法について説明します。
ブロック レイアウトとテーブル レイアウトでの align-content のサポート
Chrome 123 以降では、フレックス コンテナやグリッド コンテナを作成せずに、Align-content を使用してアイテムを配置できます。
Chrome 122 の新機能
Chrome 122 がリリースされました。新しい Storage Buckets API では、DevTools の [パフォーマンス] パネルが更新され、Async Clipboard API で HTML を読み取るためのサニタイズされていないオプションなど、さまざまな機能が追加されました。Adriana Jara が、Chrome 122 のデベロッパー向けの新機能について詳しく説明しています。
パフォーマンスに関するパネル表示でパフォーマンス パネルを 400% 高速化
DevTools の [パフォーマンス] パネルは、ウェブアプリのパフォーマンスの問題を診断、デバッグ、修正するための強力なツールです。今回は、DevTools の [パフォーマンス] パネルを使用してパフォーマンス パネル自体のパフォーマンスをどのように改善したか、またどのように大幅な改善を達成したかをご紹介します。
chrome.runtime
chrome.runtime API を使用して、サービス ワーカーを取得し、マニフェストの詳細を返します。また、拡張機能のライフサイクルでイベントをリッスンして応答します。この API を使用して、URL の相対パスを完全修飾 URL に変換することもできます。 この API のほとんどのメンバーには権限は必要 ありません 。この権限は、 connectNative() 、 sendNativeMessage() 、 onNativeConnect に必要です。 次の例は、マニフェストで
EditContext API を使用してカスタムのウェブ編集エクスペリエンスを構築する新しい方法のご紹介
EditContext は Chrome と Edge でリリースされる新しい API で、デベロッパーはこれを使用してブラウザで高度なテキスト編集機能を構築できます。詳しくは、こちらの投稿をご覧ください。
DevTools の新機能(Chrome 122)
[Network] パネルと [Application] パネルにサードパーティ Cookie の段階的廃止に関する警告を表示、[Network] パネルの拡張デバッグ、[Performance] パネルのパンくずリストなど。
パソコン版 Chrome の SharedArrayBuffer のサポート終了トライアルを Chrome 124 まで延長
Chrome デスクトップでのクロスオリジン分離を行わない SharedArrayBuffer の非推奨トライアルを Chrome 124 まで延長します。
Chrome 122 ベータ版
Chrome 122 ベータ版では、イテレータ ヘルパー、メソッドの設定、Storage Buckets API、Async Clipboard API でのサニタイズされていない HTML の読み取りなどを利用できます。
Chrome 121 の新機能
Chrome 121 がリリースされました。CSS の更新、Speculation Rules API の改善、Element Capture API のオリジン トライアルなど、多くの改善が行われました。Adriana Jara が、Chrome 121 におけるデベロッパー向けの新機能について詳しく説明しています。
WebGPU の新機能(Chrome 121)
Android での WebGPU のサポート、シェーダー コンパイルでの DXC の使用、コンピューティングパスとレンダリングパスでのタイムスタンプ クエリ、シェーダー モジュールへのデフォルトのエントリ ポイント、GPUExternalTexture 色空間としての display-p3、メモリヒープ情報など。
- WebGpu
ウェブ AI モデルのテストを強化: WebGPU、WebGL、ヘッドレス Chrome
ブラウザのテストを一貫して自動化し、アプリケーションのパフォーマンスを向上させるための Google のソリューションをご覧ください。
- WebGpu
Google Colab でのウェブ AI モデルのテスト
スケーラブルかつ自動化可能で、標準化されたハードウェア構成内で、クライアントサイドのブラウザベースの AI モデルをテストする方法を説明します。
- WebGpu
File System Access API の永続的な権限
この投稿では、File System Access API の永続的な権限を管理する方法について説明します。また、問題の現在の状態と解決中の課題の簡単な要約も提供します。
ウェブアプリ スコープ拡張機能
Chrome 122 以降では、scope_extensions アプリ マニフェスト メンバーのオリジン トライアルに登録できます。これにより、複数のサブドメインとトップレベル ドメインを管理するサイトを 1 つのウェブアプリとして表示できます。
WebDriver BiDi を活用: Puppeteer による Chrome と Firefox の自動化
Puppeteer が Firefox と通信するようになりました。🎉? まだですね。🤔? Puppeteer の新しいプロトコルである WebDriver BiDi で、このエキサイティングな開発が Firefox の自動化ワークフローに何を意味するのかを見てみましょう。
Android 版 Google Chrome
Android 版 Chrome のデベロッパー向け機能の一覧については、 chromestatus.com をご覧ください。 Google Play ストアで Chrome をダウンロードしてください。 あるデバイスで Chrome にログインすると、別のデバイスで Chrome にログインすると、そのセッションのタブと閲覧履歴が表示されます。URL だけでなく Chrome インスタンス間でページ
新しい INP 指標に対する最新のフレームワークのパフォーマンス
この投稿では、新しい INP 指標とフレームワークベースのウェブサイトとの関連性について説明します。Aurora は、この指標を最適化するためにフレームワークをサポートしています。
Chrome のプレミアム タブレットではデスクトップ モードがデフォルトで有効になります
Chrome は Android タブレットのエコシステムに適応するため、プレミアム タブレットでデスクトップ モードをデフォルトで有効にしています。
DevTools の新機能(Chrome 121)
要素での @font-palette-values のサポート、ソースマップのサポートの改善、[パフォーマンス] > [インタラクション] トラックの強化など。
Chrome のインストール基準の見直し
Chrome では今後数か月以内に、デベロッパーとユーザーのエクスペリエンスを向上させるために、アプリのインストール条件を簡素化することを目的としたテストを実施する予定です。この投稿では、想定される変化と、このテストを実施する理由について説明します。
Chrome 120 の新機能
Chrome 120 がリリースされました。今回、CloseWatcher API により、クローズ リクエストを処理する際に一貫したエクスペリエンスを実現する、details 要素を使用したアコーディオン パターンの簡単な実装、権限ポリシー違反レポートなど、多くの機能が利用可能になっています。
Chrome DevTools での自己 XSS 攻撃の防御
Chrome DevTools の経験が浅いユーザーによるコードの貼り付けをブロックすることで、自己 XSS 攻撃を軽減する仕組みをご確認ください。
プライベート ネットワーク アクセス権限プロンプトのオリジン トライアル: HTTPS を使用してウェブサイトを移行するパス
Google Chrome では、プライベート ネットワーク アクセス(PNA)の仕様の一環として、安全性の低い公開ウェブサイトからプライベート ネットワーク エンドポイントにアクセスすることを非推奨としています。
ページ ライフサイクル API
Page Lifecycle API は、モバイル オペレーティング システムで一般的なアプリ ライフサイクルの機能をウェブにもたらします。ブラウザは、リソースを節約するためにバックグラウンドのページを安全に凍結または破棄できるようになり、デベロッパーはユーザー エクスペリエンスに影響を与えることなく、このような介入を安全に処理できるようになりました。
Async Clipboard API でのサニタイズされていない HTML
Chrome 120 以降では、Async Clipboard API で新しいサニタイズされていないオプションを使用できます。このガイドでは、その使用方法について説明します。
Manifest V3 への移行を再開する
昨年 12 月、デベロッパーからのフィードバックに対応し、 移行に関する問題 のより良い解決策を提供するために、Manifest V2 のサポート終了を延期しました。こうしたフィードバックに基づき、Google は Manifest V3 にいくつかの変更を加えて、 こうしたギャップを解消 しました。変更内容は次のとおりです。 差異を解消するだけでなく、今年初めにリリースされた サイドパネル API や、現在ベータ版の Reading List API
Angular NgOptimizedImage ディレクティブの新機能
Angular アプリの画像のパフォーマンスをさらに向上させる、Angular NgOptimizedImage ディレクティブに含まれる新機能について学びます。
Manifest V3 でのコンテンツ フィルタリングの改善
過去 1 年間、Google は MV3 拡張機能プラットフォームの改善方法について、複数のコンテンツ ブロック拡張機能のベンダーと積極的に話し合いを行ってきました。これらの議論(その多くは、他のブラウザと協力して WebExtensions コミュニティ グループ( WECG )で行われました)に基づいて、Google は大幅な改善をリリースすることができました。
Service Worker Static Routing API のオリジン トライアル
Service Worker の静的ルーティング(現在オリジン トライアル中)の第 1 フェーズについて学びます。これは、Service Worker によるルートの処理方法を宣言的に指定する新しい API です。
DevTools の新機能(Chrome 120)
サードパーティ Cookie の段階的廃止に関する問題が [問題] パネルで報告されました。Cookie に関するプライバシー サンドボックス分析ツール、[アプリケーション] パネルの効果的なコンテンツ セキュリティ ポリシー、[アニメーションのデバッグの改善]、[無視リストの強化] などが報告されています。
Chrome 120 ベータ版
CSS マスキング、CSS ネストのルールの緩和、要素を使用したアコーディオン パターンの作成、Media Session API の enterpictureinpicture アクション
WebAssembly ガベージ コレクション(WasmGC)を Chrome でデフォルトで有効化
プログラミング言語には、ガベージ コレクションを使用するプログラミング言語と、手動のメモリ管理が必要なプログラミング言語の 2 種類があります。WebAssembly ガベージ コレクションを使用すると、ガベージ コレクション言語を WebAssembly に移植できます。
Chrome 119 の新機能
Chrome 119 がリリースされました。すでに保存されている Cookie の有効期限の上限が更新されます。CSS には、新しい疑似クラス、相対色構文、広告サイズマクロのようなフェンス付きフレームの改善など、多くの機能があります。
WebGPU の新機能(Chrome 119)
フィルタリング可能な 32 ビット浮動小数点数テクスチャ、unorm10-10-10-2 頂点形式、RGB10a2uint テクスチャ形式など。
- WebGpu
Chrome 118 の新機能
Chrome 118 がリリースされました。@scope css ルールを使用して、コンポーネント内の特定のスタイルを宣言します。新しいメディア機能「preferreds-reduced-transparency」を使用します。DevTools では、[ソース] パネルなど多くの機能が改善されています。
ブラウザでのファイル操作に関する API の改善
FileSystemSyncAccessHandle の複数の読み取り / 書き込みと、FileSystemWritableFileStream の排他的書き込みのサポート。 オリジンのプライベート ファイル システム (バケット ファイル システムとも呼ばれる)を使用すると、デベロッパーは読み取りと書き込みのパフォーマンスを最大化するように最適化されたファイルにアクセスできます。これは FileSystemSyncAccessHandle オブジェクトを介して行われます。現在、同じファイル
WebGPU の新機能(Chrome 118)
copyExternalImageToTexture のソース サポートの拡張、読み取り / 書き込みおよび読み取り専用ストレージ テクスチャの試験運用版サポートなど。
- WebGpu
macOS の iCloud キーチェーンで Chrome のパスキーがサポートされるようになりました
macOS 版 Chrome で iCloud キーチェーンのパスキーのサポートを開始しました。これにより、ユーザーは iCloud キーチェーンでパスキーを作成し、Apple デバイス間で同期できます。
DevTools の新機能(Chrome 118)
[要素] > [スタイル] のカスタム プロパティに関する新しいセクション、ローカル オーバーライドの改善、検索機能の強化、[ソース] のワークスペースの効率化など。
Chrome 117 の新機能
Chrome 117 がリリースされました。スムーズな開始 / 終了アニメーションの追加を容易にする 3 つの新しい CSS 機能、高階データセットを計算するための配列グループ化、DevTools によってローカル オーバーライドが簡単になるなど、さらに多くの機能が備わっています。
天体ビューの切り替え
Chrome による API の形成時に、Astro コミュニティがビュー遷移をどのように取り入れ、Astro の永続的な島でトップクラスのサポートに到達するまでの道のりを強調します。
scheduler.yield オリジン トライアルのご紹介
「scheduler.yield」は、現在オリジン トライアルでスケジューラ API に新たに追加として提案されているもので、よりレスポンシブなユーザー エクスペリエンスのためにタスクを分割する新しいアプローチです。このたびの Scheduling API 追加提案によるメリットをご理解いただき、オリジン トライアルに登録してインサイトとフィードバックをお寄せください。
新しいコマンド エディタで Chrome Devtools Protocol(CDP)コマンドを効率的に作成
Chrome Devtools Protocol(CDP)のコマンドを簡単に入力できるように、DevTools には新しいユーザー フレンドリーなエディタが導入されているため、JSON を使用する必要はありません。
DevTools の新機能(Chrome 117)
XHR/フェッチ リクエストをオーバーライドし、[ネットワーク] パネルで拡張機能リクエストを非表示にする、[パフォーマンス] パネルで取得優先度の変更を確認する、複数の UI を改善する、新しい色や試験運用版機能を確認するなど、さまざまなことができます。
「chrome://extensions」ページに安全確認を導入
Chrome 117 以降では、ユーザーがインストールした拡張機能が Chrome ウェブストアにない場合、自動的にハイライト表示されます。
Chrome 116 の新機能
Chrome 116 がリリースされました。Picture in image API を使ったドキュメントによるユーザーの生産性の向上や、不足しているスタイルシートのデバッグが DevTools で簡単になりました。
Chrome での 1 回だけのアクセス許可
「今回は許可」は、Chrome で権限を付与する 1 回限りのオプションです。当面の間、位置情報、カメラ、マイクについてはパソコンでのみご利用いただけます。
TWA 用の PostMessage
Chrome 115 以降、Trusted Web Activity(TWA)で postMessage を使用してメッセージを送信できるようになりました。このドキュメントでは、アプリとウェブ間の通信に必要な設定について説明します。
Chrome 115 の新機能
ScrollTimeline と ViewTimeline を使用して、ユーザー エクスペリエンスを高めるスクロールドリブン アニメーションを作成します。フェンス付きフレームは他のプライバシー サンドボックス API と連携して、関連コンテンツを埋め込み、不要なコンテキスト共有を防止します。Topics API を使用すると、ブラウザはプライバシーを保護しながら、ユーザーの興味 / 関心に関する情報をサードパーティと共有できます。
DevTools のヒント: ローカル ストレージとセッション ストレージ
Key-Value ペアをデバッグするには、[Application] > [Local Storage] と [Session Storage] を使用します。
DevTools の新機能(Chrome 116)
スタイルシートが欠落している問題を迅速に特定してデバッグできるように、DevTools が大幅に改善されました。 [ ネットワーク ] パネルの [ 開始元 ] 列には、読み込みに失敗したスタイルシートを参照する正確な行へのリンクが常に表示されます。 [ 問題 ] パネルには、URL の不整合、リクエストの失敗、 @import ステートメントの配置ミスなど、スタイルシートの読み込みに関するすべての問題が一覧表示されます。 Chromium の問題: 1440626 、 1442198 、
Chrome for Testing: ブラウザの自動化のための信頼性の高いダウンロード
Chrome for Testing は、ウェブアプリのテストと自動化のユースケースに特化した新しい Chrome フレーバーです。
メモリに収まるサイズの大きいファイルを Photoshop でどのように解決したか
Adobe が、象徴的な Photoshop アプリのウェブ バージョンで、最大のファイルでも編集できるようにした方法を学びます。 (この記事は動画でもご覧いただけます)。 2021 年、Adobe は Chrome エンジニアリングと共同で、 Photoshop のバージョンをウェブに導入 しました。このソフトウェアは、 SIMD 、 オリジンの非公開ファイル システム 内の高パフォーマンス ストレージ、キャンバスの P3 カラー空間 、 Lit を使用したウェブ
ベクター画像編集アプリ Boxy SVG が、Local Font Access API を使用してユーザーがお気に入りのローカル フォントを選択できるようにする方法
Local Font Access API は、ユーザーがローカルにインストールしたフォントデータにアクセスするためのメカニズムを提供します。名前、スタイル、ファミリーなどの上位レベルの詳細情報や、基盤となるフォント ファイルの未加工バイトなどです。SVG 編集アプリ Boxy SVG がこの API を使用する方法を学びます。 (この記事は動画でもご覧いただけます)。 Boxy SVG はベクター グラフィック エディタです。主な用途は、SVG
Chrome 114 の新機能
Chrome 114 がリリースされました。Chrome 114 がリリースされました。text-wrap: Balance によってテキスト レイアウトを改善する機能、Cookies Have Independent Partitioned State が導入されました。新しい Popover API では、ポップオーバーがこれまで以上に簡単になりました。
DevTools の新機能(Chrome 115)
[ 要素 ] パネルに、 サブグリッド の新しい subgrid バッジが追加されました。この機能は現在、Chrome Canary で試験運用版です。 サブグリッドであるネストされたグリッドを検査してデバッグするには、バッジをクリックします。サブグリッドは、親からトラックの数とサイズを継承します。ビューポート内の要素の上に列、行、その数を表示するオーバーレイを切り替えます。 [ 要素 ] パネルのすべてのバッジの一覧については、 バッジのリファレンス をご覧ください。 Chromium
ゲームエディタ Construct 3 が File System Access API を使用してゲームを保存できるようにする仕組み
File System Access API を使用すると、読み取り、書き込み、ファイル管理機能を利用できます。Construct 3 でこの API を使用する方法を学びます。 (この記事は動画でもご覧いただけます)。 Construct 3 は、 Thomas と Ashley Gullen 兄弟によって開発されたゲーム エディタです。ゲーム エディタの現在の第 3 版では、Windows と NW.js 向けにビルドした後、完全に「ブラウザが新しいオペレーティング システムになる」
CSS で linear() イージング関数を使用して複雑なアニメーション曲線を作成する
そこで linear() を導入しました。これは CSS のイージング関数で、ポイント間で線形に補間し、弾力効果やばね効果を再現できます。
LEGO® Education における Web Bluetooth と Web Serial API の活用
レゴ エデュケーションはウェブの機能を活用し、できるだけ簡単に LEGO モデルとパソコンを接続します。
3D モデルエディタ Blockbench は、EyeDropper API を使用して、ユーザーがどこからでも色を選択できるようにしています。
EyeDropper API は、ユーザーがブラウザ ウィンドウの外部を含む画面から色をサンプリングできるスポイトツールを作成するメカニズムを提供します。3D モデル エディタ Blockbench がコードベースでこの API を使用する方法を学びます。 (この記事は動画でもご覧いただけます)。 Blockbench は、ピクセルアート テクスチャを使用したローポリモデル用の無料の最新モデル エディタです。 Minecraft をプレイしたことがあれば、Blockbench
Storage バケットのオリジン トライアルを利用可能
Storage Standard では、永続ストレージと割り当ての見積もりのための API、およびプラットフォームのストレージ アーキテクチャが定義されています。Google では、高いメモリ負荷での永続ストレージ エビクションの予測可能性を高める API をテストしています。Chrome 115 から Chrome 118 まで実施されるオリジン トライアルで Storage Buckets API をお試しください。
画像編集アプリ Photopea が、File Handling API を使用して、ユーザーがファイル エクスプローラーからファイルを開く仕組み
File Handling API を使用すると、ウェブアプリは、アプリケーションがサポートできるファイル形式のファイル ハンドラとして自身を登録できます。画像編集アプリケーション Photopea がこの API を使用する方法を学びます。 (この記事は動画でもご覧いただけます)。 Photopea は、 Ivan Kutskir が開発した無料のオンライン画像エディタです。Ivan は 2012 年にアプリの開発を開始し、Photopea に追加した主な機能を共有する ブログ
Chrome DevTools を使用してフォームの問題を見つける
Chrome DevTools チームは、フォームの問題の検出や自動入力のデバッグに役立つ新機能を追加しています。これらの機能は設計と実装の初期段階にあるため、テストとフィードバックが必要です。
Google I/O で発表された 10 の最新情報
Google I/O 2023 で発表した重要なアップデートと新しいリリースを通じて、デベロッパーが優れたユーザー エクスペリエンスを簡単に提供できるようにする取り組みについてご確認ください。
ウェブ向けの Android の新機能(2023 年)
ウェブを Android に取り込むツールのアップデート。WebView の大画面でのプライバシー保護の強化とサポートの改善、カスタムタブの部分的なカスタムタブ、PWA のインストールの簡易化、統合機能、TWA の Play ストアの請求管理など。
iframe をまたいだ自動入力の共有: 最初の提案
一部のフォームには iframe にフィールドがあるため、ブラウザの自動入力で問題が発生します。共有自動入力を使用すると、クロスオリジンの iframe の信頼性を親フレームで指定して、自動入力のユーザー エクスペリエンスを向上させることができます。
DevTools の新機能(Chrome 114)
DevTools では、デフォルトで [ 設定 ] > [ 試験運用版 ] > [ WebAssembly デバッグ: DWARF サポートを有効にする ] が有効になっています。詳細については、 最新のツールで WebAssembly をデバッグする をご覧ください。 この試験運用版では、実行を一時停止して Wasm アプリの C コードと C++ コードをデバッグできます。デバッグ情報はすべて利用できます。 Wasm デバッグをテストするには、 C/C++ DevTools
スクロールドリブン アニメーションでスクロール時に要素をアニメーション化する
スクロール タイムラインとビュー タイムラインを使用して、宣言型の方法でスクロールドリブン アニメーションを作成する方法を学習します。
Chrome 113 の新機能
Chrome 113 がリリースされました。WebGPU が登場し、ウェブ上での高性能 3D グラフィックスとデータ並列計算が可能になります。また、devtools はネットワーク レスポンス ヘッダー、プライバシー サンドボックスの一部であるファーストパーティ セットをオーバーライドできるようになりました。これにより、関連サイトの展開が始まっていることを組織が宣言できます。
拡張機能 Service Worker のライフサイクル
拡張機能 Service Worker は、標準の Service Worker のイベントと拡張機能の名前空間内のイベントの両方に応答します。拡張機能の使用中に 1 つのタイプが別のタイプに続くことが多いため、まとめて示されています。
デスクトップでよりリッチな UI インストールが可能に
モバイル デバイスとアプリストアは、ユーザーがソフトウェアを発見、評価、インストールする方法を変えました。ウェブアプリで、デベロッパーがインストール時にアプリをハイライト表示できるようになりました。
Chromium Chronicle #33: アニメーションのビュー
ビューでレイヤベースのアニメーションを使用すると、パフォーマンスが向上し、 設定がむずかしいこともあります。「 AnimationBuilder レイヤの読みやすさを大幅に向上させ、 作成できます。 次の 2 つの間で連続的なクロスフェードをアニメーション化する必要があるとします。 ビューを示しています。 レイヤ アニメーション API を直接使用してこの処理を行う例を次に示します。 以下は、 AnimationBuilder
CSS レイアウトとソース順序の切り離しを解決する
ドキュメントのソースから切断された順序でアイテムを配置するレイアウト メソッドの問題に対して、提案するソリューションについてフィードバックを求めました。
新しい [Breakpoints] サイドバーによるデバッグの高速化
ブレークポイントの削除や無効化などの一般的な操作をより簡単に実行できるように、ブレークポイント サイドバーのデザインを変更し、ワンクリックで実行できるようにしました。
DevTools の新機能(Chrome 113)
ネットワーク パネルでレスポンス ヘッダーをオーバーライドできるようになりました。これまでは、HTTP レスポンス ヘッダーをテストするにはウェブサーバーにアクセスする必要がありました。 レスポンス ヘッダーのオーバーライドを使用すると、次のようなさまざまなヘッダーの修正をローカルでプロトタイプ化できます(ただしこれらに限定されません)。 ヘッダーをオーバーライドするには、[ ネットワーク ] > [ ヘッダー ] > [ レスポンス ヘッダー ]
Chrome 112 の新機能
Chrome 112 がリリースされました。CSS がネストルールをサポートするようになりました。ダイアログ要素に最初のフォーカスを設定するアルゴリズムが更新され、今後は Service Worker の no-op フェッチ ハンドラがスキップされ、ナビゲーションを高速化できるようになり、その他にも多くの実装が行われます。
Web SQL から SQLite Wasm へ: データベース移行ガイド
SQLite Wasm はオリジンのプライベート ファイル システムを基盤としており、非推奨の Web SQL データベース テクノロジーに代わる汎用的な方法です。この記事では、Web SQL から SQLite Wasm にデータを移行する方法について説明します。 Web SQL のサポート終了と削除 の投稿で、Web SQL データベース
Fastly との提携 - FLEDGE の k-匿名性サーバー向け Oblivious HTTP リレー
Google は Fastly と提携して FLEDGE に k-匿名性サーバーを実装することで、Chrome のプライバシー保護対策を改善しています。この実装ではデータが OHTTP リレーを介してリレーされるため、Google のサーバーはエンドユーザーの IP アドレスを受信しません。k-匿名性サーバーは、FLEDGE の完全な実装に向けた段階的な一歩です。
WebView から X-Requested-With ヘッダーを送信するオプトインを要求することで、ユーザーのプライバシーを強化
Google では、X-Requested-With ヘッダーが送信されるタイミングを制限することで、ユーザーのプライバシーを保護したいと考えています。
ブロックしているウェブ リクエスト リスナーを置き換える
3 つのセクションのうちの 2 番目のセクションでは、拡張機能 Service Worker の一部ではないコードに必要な変更について説明します。
SPA のビュー遷移を Chrome 111 でリリース
View Transition API を使用すると、シングルページ アプリ内でページ遷移を行うことができます。今後マルチページ アプリが追加される予定です。
DevTools の新機能(Chrome 112)
レコーダー で、拡張機能を使用して DevTools に埋め込むことができるカスタム リプレイ オプションのサポートが導入されました。 サンプルの拡張機能 を試す。新しいカスタム リプレイ オプションを選択して、カスタム リプレイ UI を開きます。 レコーダー をニーズに合わせてカスタマイズし、ツールと統合するには、独自の拡張機能の開発を検討してください。 chrome.devtools.recorder API を参照し、 拡張機能の例 をご確認ください。 Chromium の問題:
Chrome 111 の新機能
Chrome 111 がリリースされました。View Transitions API を使用してシングルページ アプリで洗練された遷移を作成し、CSS カラーレベル 4 のサポートによって色を一段と進化させます。新しいカラー機能を最大限に活用するため、スタイルパネルで新しいツールをご確認ください。
Project Fugu API ショーケースの新しいホーム
Project Fugu API Showcase は、Project Fugu の一部である API を使用するアプリのコレクションです。 Google の社内横断プロジェクトである Capabilities Project(コード名 Project Fugu )は、ウェブアプリがプラットフォーム固有のアプリができることすべてを可能にすることを目的としています。Google のほか、Microsoft、Intel、Samsung などのプロジェクト
業界との連携による CHIPS の進化
Chrome チームが CHIPS の実装において直面した 2 つの課題と、提案の設計を進化させるうえでコミュニティからのフィードバックが果たす重要な役割について説明しています。
スタイルクエリ スタートガイド
スタイルクエリでは、@container ルールを使って親要素のスタイル値をクエリできます。Chrome 111 では、CSS カスタム プロパティのスタイルクエリが安定版になりました。ご利用方法をご確認ください。
フォントの代替機能の改善
新しい `size-adjust` とフォント指標のオーバーライドにより、デベロッパーはウェブフォントにほぼ一致するフォントの代替を作成できます。これにより、レイアウト シフトが軽減されます。
WebHID で Stadia コントローラに話しかける
フラッシュされた Stadia コントローラは標準のゲームパッドのように動作します。つまり、Gamepad API を使用してアクセスできるボタンはすべてではありません。WebHID を使用すると、見つからなかったボタンにアクセスできるようになります。 Stadia の終了後、コントローラがゴミ埋め立て地に捨てられるのではないかと多くの人が心配していました。幸い、Stadia チームは、 Stadia Bluetooth モード のページにアクセスしてコントローラに書き込むことができるカスタム
Chrome 110 の新機能
Chrome 110 がリリースされました。新しい :Picture-in-picture 疑似クラスでカスタム スタイルをピクチャー イン ピクチャーの要素に追加したり、launch_handler でウェブアプリの起動動作を設定したり、iframe の認証情報のない属性を使用して、クロスオリジンの埋め込みポリシーを設定していないサードパーティのコンテンツを埋め込んだりできます。
サードパーティの iframe での Web Share API に関する新しい要件
プライバシーとセキュリティを強化するため、サードパーティの iframe での Web Share API 呼び出しを明示的に許可する必要があります。 この記事では、Web Share API の互換性を破る可能性がある変更について説明します。この変更はすでに Firefox で導入されており、 Chrome バージョン 110 以降 でリリースされる予定です。 Safari にも近日中に 導入される予定です。 Web Share API
プライベート ネットワーク アクセスの更新: サポート終了の試用期間延長の発表
Chrome では、プライベート ネットワーク アクセスの仕様の一環として、保護されていない公開ウェブサイトからプライベート ネットワーク エンドポイントにアクセスすることが非推奨となります。非推奨のトライアルは Chrome 113 までご利用いただけます。
拡張機能 Service Worker のライフタイムの延長
拡張機能 Service Worker は、イベントを受信している限り存続できるようになりました。これにより、拡張機能 Service Worker の信頼性は向上しますが、回避すべき落とし穴があります。
Chrome Android でのウェブアプリの基本的なオフライン ページ
Chrome 109 以降では、Android にインストールされているウェブアプリにオフライン機能がない場合に、アプリが現在オフラインであることを示すデフォルト ページが自動的に生成されます。
使用できるウェブの検出
ブラウザでサポートされている高度なウェブ機能これらの機能を利用するウェブアプリには、どのようなものがありますか?これらの質問に答えるには、ブラウザ テストサイトとブラウザ拡張機能をご確認ください。 Project Fugu は、ウェブの機能のギャップを埋め、新しいクラスのアプリケーションをウェブ上で実行できるようにするための、複数の企業による取り組みです。具体的には、アプリ デベロッパーが使用できる新しい API
iframe 認証情報なし: COEP 環境に iframe を簡単に埋め込む
Chrome 110 では、iFrame 認証情報なし機能が実装されています。デベロッパーは、新しい一時的なコンテキストを使用して、サードパーティの iframe でドキュメントを読み込むことができます。その代わり、これらは COEP 埋め込みルールの対象ではなくなります。COEP を使用するデベロッパーは、COEP 自体を使用しないサードパーティの iframe を埋め込むことができるようになりました。
Origin Private File System を基盤とするブラウザ内の SQLite Wasm
SQLite を使用して、ウェブですべてのストレージニーズを高パフォーマンスで処理します。 SQLite は、人気のある オープンソース の軽量な埋め込みリレーショナル データベース管理システムです。多くのデベロッパーは、構造化された使いやすい方法でデータを保存するためにこれを使用しています。SQLite はサイズが小さくメモリ要件が低いため、モバイル デバイス、デスクトップ アプリケーション、ウェブブラウザでデータベース エンジンとして使用されることがよくあります。 SQLite の主な機能の
Chrome 109 の新機能
Chrome 109 がリリースされました。Origin Private File System API が Android で使用可能になり、CSS に新しいプロパティ セットが追加され、MathML コアのサポートにより HTML に数学表記を簡単に追加できるようになりました。その他多くの機能があります。
Chrome のリリース チャンネルとは
Chrome で Canary、Dev、Beta、Stable の各リリース チャンネルを使用して新機能のテストやアップデートのロールアウトを行う方法をご確認ください。
Chrome ウェブストア ポリシーの更新
Chrome では、Chrome ウェブストアのデベロッパー プログラム ポリシーを更新し、Google の指針を明示し、施行についてより多くの背景情報を提供するとともに、ポリシーをよりわかりやすくします。
Chrome Android での安全なお支払いの確認
Secure Payment Confirmation は、パスキーの力を利用したフィッシング耐性のある支払い確認をウェブで提供します。Chrome 109 から Android 版 Chrome で利用可能になります。
WebAuthn パスキーの自動入力を使用したフォームへのパスワードレス ログイン
WebAuthn 条件付き UI は、ブラウザのフォーム自動入力機能を活用して、ユーザーが従来のパスワード ベースのフローでパスキーを使用してシームレスにログインできるようにします。
Chrome 108 の新機能
Chrome 108 がリリースされました。新しい Intl API が追加され、数値の書式設定をより細かく制御できるようになりました。新しい Pop Up API のオリジン トライアルも用意されており、ユーザーに重要なコンテンツを簡単に提示できます。CSS にはいくつかの改良点が加えられています。他にもたくさんあります。
Chrome ウェブストア ポリシーの更新
Chrome では、Chrome ウェブストアのデベロッパー プログラム ポリシーを更新し、Google の指針を明示し、施行についてより多くの背景情報を提供するとともに、ポリシーをよりわかりやすくします。
Payment Handler API の CanMakePayment イベントの動作を更新
販売者は、Payment Handler API の「canmakepayment」Service Worker イベントを使用して、インストール済みの支払いアプリにカードが登録されているかどうかを販売者に伝えます。Chrome では、このイベントに関連付けられたプロパティが削除されます。
Chrome 107 の新機能
Chrome 107 がリリースされました。Screen Capture API に、画面共有のエクスペリエンスを向上させる新しいプロパティが追加されました。ページ上のリソースがレンダリング ブロックかどうかを正確に特定できるようになりました。オリジン トライアルで宣言型の PendingBeacon API を使用して、バックエンド サーバーにデータを送信する新しい方法があります。他にもたくさんあります。
互換性を破る変更: AccessHandles の同期メソッド
Emscripten などのコンテキストでの AccessHandles の操作を簡素化するために、FileSystemSyncAccessHandle インターフェースのメソッドを同期化しています。
「トラスト トークン」を「プライベート ステート トークン」に名称変更
Trust Token API の名称を Private State Token API に変更し、プライバシーと実用性のメリットをより明確に表現する運びとなりました。
Chrome DevTools のレコーダー以外でユーザーフローをカスタマイズ、自動化する
Chrome DevTools のレコーダー以外でユーザーフローをカスタマイズおよび自動化する方法を学びます。
Advanced Web Apps Fund - 2022 年 10 月更新
Advanced Web Apps Fund を通じて 11 のプロジェクトを後援し、Open Collective を通じて 10 万ドル以上の寄付を行いました。その重要性を認識し、より多くの人がこれらのプロジェクトに時間を費やせるようにしました。
Chrome Dev Insider: フレームワーク エコシステムに応じたパフォーマンスのスケーリング
Chrome のウェブ プラットフォーム チームから、さまざまな視点や会話、最新情報をデベロッパーに紹介する最新情報をお届けします。
Payment Handler API には CSP の connect-src が必要
CSP を使用している場合、Payment Handler API のユーザーは「connect-src」ディレクティブに支払いエンドポイントを追加する必要があります。
Chrome 106 の新機能
Chrome 106 がリリースされました。新しい Intl API が追加され、数値の書式設定をより細かく制御できるようになりました。新しい Pop Up API のオリジン トライアルも用意されており、ユーザーに重要なコンテンツを簡単に提示できます。CSS にはいくつかの改良点が加えられています。他にもたくさんあります。
Manifest V3 に移行する際の既知の問題
先日、Manifest V2 のサポート終了スケジュールの変更についてお知らせしましたが、Google は引き続き Manifest V3 の改善に尽力していますが、Google 側で行うべき作業がまだ多くあることを認識しています。 Google は、新しい Manifest V2 のサポート終了スケジュールを発表する前に、以下のギャップを解消するよう努めています。 問題は、パートナー、バグレポート、デベロッパーからのフィードバックに基づいて収集されました。Google
ポリフィルの大規模な更新に伴い、コンテナクエリは安定版のブラウザに取り込まれ始める
"コンテナクエリを使用すると、コンポーネントが収まるスペースに基づいて、コンポーネントがレスポンシブなスタイル設定情報を所有できるようになります。この機能は最新のブラウザに展開され始めており、ポリフィルのサポートに大きなアップデートが加えられています。
匿名 iframe オリジン トライアル: COEP 環境に iframe を簡単に埋め込む
COEP を使用するデベロッパーは、COEP 自体を使用しないサードパーティの iframe を埋め込むことができるようになりました。匿名の iframe オリジン トライアルは、Chrome のバージョン 106 ~ 108 でテストできます。
DevTools のヒント: CSS Flexbox の検査とデバッグを行う方法
Chrome DevTools を使用して、CSS Flexbox レイアウトを検査、変更、デバッグする方法について説明します。
Chrome DevTools での最新のウェブ デバッグ
ここでは、バンドラ、フレームワーク、サードパーティのコードを操作する際のデバッグとプロファイリング エクスペリエンスを改善する Chrome DevTools の最近の変更を紹介します。
事例紹介: DevTools による改善された Angular デバッグ
Chrome DevTools チームと Angular チームが協力して Angular をテスト試験運用し、デバッグ エクスペリエンスを向上させました。他のフレームワークでも同様の変更が可能です。
Web SQL の非推奨化と削除
Web SQL は、2009 年 4 月に提案され、2010 年 11 月に廃止されました。このキーは段階的に Chrome から削除されました。最初は安全でないコンテキストで削除され、その後 Chrome 119 で完全に削除されます。
Chrome 105 の新機能
Chrome 105 がリリースされました。コンテナクエリと :has() は、レスポンシブに最適です。新しい Sanitizer API は、任意の文字列に対応する堅牢なプロセッサを提供し、クロスサイト スクリプティングの脆弱性を減らすことができます。Google では、WebSQL のサポート終了に向けて新たな一歩を踏み出しています。ほかにも多数あります。
Compression Streams API を使用したブラウザでの圧縮と解凍
独自の圧縮ライブラリや解凍ライブラリを用意する必要がない小規模なウェブアプリを作成する Compression Streams API は、gzip 形式または deflate(または deflate-raw)形式を使用してデータ ストリームを圧縮および解凍するために使用します。 組み込みの圧縮 JavaScript アプリケーションは、圧縮ライブラリを含める必要がないため、アプリケーションのダウンロード サイズを小さくできます。安定版の Chrome と Safari Technology
Angular Image ディレクティブを使用して画像を最適化する
新しい Angular 画像ディレクティブ(NgOptimizedImage)が導入され、Angular アプリの画像に組み込みのパフォーマンス最適化手法が導入されました。
DevTools のヒント: コンソールのショートカットでワークフローを高速化する方法
Console Utilities API のショートカットを使用すると、最近の要素の参照、オブジェクトのクエリ、イベントや関数呼び出しの監視などを簡単に行うことができます。
DevTools のヒント: ウェブサイトのパフォーマンスに関する実用的な分析情報を取得する
新しい [パフォーマンス分析情報] パネルでウェブサイトのパフォーマンスに関する行動につながるインサイトを確認する
@container と :has(): 2 つの強力な新しいレスポンシブ API を Chromium 105 でリリース
"コンテナクエリと :has() は、レスポンシブに最適です。幸いなことに、この 2 つの機能は Chromium 105 で一緒にリリースされます。今回のリリースは、レスポンシブ インターフェースに関して特にご要望の多かった機能を 2 つ含む大規模なリリースです。
NavigateEvent の変更(Chrome 105)
Navigation API が、NavigateEvent で 2 つの新しいメソッドを取得しました。Transitionwhile() は inspect() で、rereScroll() は Scroll() です。
Chrome 104 の新機能
Chrome 104 がリリースされました。リージョン キャプチャでは、getDisplayMedia() を使用して現在のタブをキャプチャする場合に、切り抜き領域を指定します。メディアクエリの構文は、数学的比較演算子を使用して記述できます。共有要素遷移がオリジン トライアルを開始します。ほかにも多数あります。
Async Clipboard API のウェブ カスタム フォーマット
ウェブ カスタム フォーマットを使用すると、ウェブサイトは標準形式を使用して任意のサニタイズされていないペイロードを読み書きできます。アプリケーションは、そのようなペイロードをサポートするようにオプトインできます。
Chrome ウェブストア デベロッパー ダッシュボードの刷新された分析機能
Google では、Chrome ウェブストア デベロッパー ダッシュボードのアイテム分析機能を改良しています。新しいダッシュボードはひと目で理解しやすくなり、特に役立つ情報が事前に集約されています。
DevTools のヒント: DevTools を使用して CSS ユーザー設定のメディア機能をエミュレートする方法
[レンダリング] タブを使用して、ユーザー設定をエミュレートし、ウェブサイトのユーザー適応動作をテストします。
Chrome Dev Insider: CSS と UI エディション
Chrome のウェブ プラットフォーム チームから、さまざまな視点や会話、最新情報をデベロッパーに紹介する最新情報をお届けします。
Chrome 103 の新機能
Chrome 103 がリリースされました。新たに HTTP ステータス コードが導入され、ページが表示される前にプリロードするコンテンツをブラウザが判断できるようになりました。Local Font Access API を使用すると、ウェブ アプリケーションはユーザーのパソコンにインストールされているフォントを列挙して使用できます。非同期 API でタイムアウトを実装する簡単な方法があります。ほかにも多数あります。
Chrome 102 の新機能
Chrome 102 がリリースされました。インストールされている PWA をファイル ハンドラとして登録できるため、ユーザーはディスクから直接ファイルを簡単に開くことができます。inert 属性を使用すると、DOM の一部を不活性としてマークできます。Navigation API を使用すると、シングルページ アプリで URL のナビゲーションと更新を簡単に処理できます。ほかにも多数あります。
WebAssembly 移行ガイド
WebAssembly はブラウザ横断型に対応しつつあるため、 サポートを終了する予定です。 2019 年第 4 四半期に PNaCl を追加(Chrome アプリは除く)。 WebAssembly 関連の活発なエコシステムは、新しいものも既存のものも含め、高性能ウェブアプリに適したものになります。また、PNaCl の利用率が低いことも、サポート終了の十分な理由となっています。 Chrome 76 以降、オープンウェブの PNaCl は オリジン トライアル の対象になりました。これは、ウェブ
ストリームによるマルチページ アプリケーションの高速化
ワークボックス ストリームを使用して、Service Worker キャッシュの部分的なマークアップとネットワークの部分的なコンテンツを使用するマルチページ アプリケーションを作成し、ほぼ瞬時にレンダリングされる高速なエクスペリエンスを作成する方法を学習します。
キャプチャ ハンドルによるタブ共有の改善
ウェブ プラットフォームには、キャプチャ ハンドルが付属するようになりました。キャプチャ ウェブアプリは、キャプチャされたウェブアプリがオプトインされている場合、キャプチャ ウェブアプリが人間工学的かつ確実に識別できるメカニズムを備えています。
Chrome 101 の新機能
Chrome 101 では、Hwb 表記を使用して色を指定する新しい方法が導入されました。また、フェッチ優先度によって、リソースをダウンロードする最適な順序をブラウザにヒントにできます。ほかにも多数あります。
Signed Exchange を使用した LCP の最適化
Signed Exchange は、ウェブ デベロッパーが Google 検索などの SXG リファラーからのページ読み込み速度を大幅に改善するための手段です。チェックボックスをオンにするだけで有効に機能するメリットもありますが、最大限に活用するには、追加の手順が必要になります。
CSS メディア機能をエミュレートする
Preferreds-color-scheme、media type、forced-colors、preferreds-contrast、preferreds-reduced-motion、color-gamut をエミュレートします。
DevTools の新機能(Chrome 101)
ユーザーフローを JSON としてインポート / エクスポートできるほか、hwb() カラーや、[Styles] ペインでカスケード レイヤを表示することも可能です。
Chrome 100 の新機能
Chrome 100 は現在、3 桁のバージョン番号でリリースされます。Chrome の初回リリース以来、#100CoolWebMoments を記念して、記念の時期をお祝いしましょう。ユーザー エージェント文字列に重要な変更がいくつかあります。Multi-Screen Window Placement API を使用すると、ユーザーのマシンに接続されているディスプレイを列挙し、特定の画面にウィンドウを配置できます。ほかにも多数あります。
パフォーマンス分析情報: ウェブサイトのパフォーマンスに関する実用的な分析情報を取得できます
[パフォーマンス分析情報] パネルで、ウェブサイトのパフォーマンスに関する行動につながるインサイトを入手しましょう。
Chrome 99 の新機能
Chrome 99 がリリースされました。CSS カスケード レイヤを使用すると、CSS をより詳細に制御でき、スタイル固有の競合を防ぐことができます。showPicker() メソッドを使用すると、日付、色、データリストなどの入力要素を選択するブラウザ選択ツールをプログラムで表示できます。Chrome と Firefox のバージョン 100 まであと数週間です。ほかにも多数あります。
Next.js でのサードパーティ スクリプトの読み込みを最適化する
この記事では、Next.js Script コンポーネントについて説明し、このコンポーネントを使用してサードパーティ スクリプトの順序を改善する方法を説明します。
プラグインの使用
Workbox には既製のユーティリティが数多く用意されていますが、アプリケーションの要件を満たすために拡張が必要になる場合があります。そこで役立つのが Workbox のプラグインアーキテクチャです。
Chrome 98 の新機能
Chrome 98 がリリースされました。自動ダークテーマのオリジン トライアルに登録済みのお客様には、要素単位でオプトアウトする新しい方法があります。COLRv0 フォント形式の進化である COLRv1 がサポートされるようになりました。他にもたくさんあります。
プライベート ネットワーク アクセス: プリフライトの導入
Chrome では、プライベート ネットワーク アクセスの仕様の一環として、保護されていない公開ウェブサイトからプライベート ネットワーク エンドポイントにアクセスすることが非推奨となります。おすすめの対応方法について以下でご説明します。
COLRv1 カラー グラデーション ベクター フォント(Chrome 98)
Chrome 98 では、Chrome チームと Fonts チームが COLRv1 のサポートを追加しました。COLRv1 は、グラデーションの追加、合成、ブレンドなどによりカラーフォントを幅広く普及させることを目的とした COLRv0 フォント形式の進化であり、圧縮に適した鮮明でコンパクトなフォント ファイルにおける内部の形状の再利用を改善します。
Chrome 97 の新機能
Chrome 97 がリリースされました。ウェブ トランスポートを使用してクライアントとサーバー間でリアルタイム メッセージを送信するための新しいオプションが追加されました。機能検出を使用すると、ブラウザでサポートされているスクリプトの種類を確認できます。JavaScript はさらに便利になり、さらに多くの機能が加わります。
フォールバック レスポンスの管理
ときどき、お客様がネットワーク障害に遭遇したり、オフラインになったりすることがあります。このような状況に対応し、フォールバック レスポンスを提供する方法について学習します。
キャッシュに保存された音声と動画の配信
Service Worker で音声や動画のリソース リクエストを処理するのは困難です。workbox-range-request を使用して、予測可能な方法でこのようなリクエストを処理する方法を学習します。
ウィンドウからキャッシュにアクセスする
キャッシュインスタンスへのアクセスは、Service Worker のスコープに限定されるものではありません。ウィンドウのコンテキストからもアクセス可能です。この記事ではその方法をご紹介します。
Chrome 96 の新機能
Chrome 96 がリリースされました。ウェブアプリ マニフェストには、2 つの新しいプロパティがあります。id プロパティを使用すると、PWA の一意の ID を指定できます。また、protocol_handlers プロパティを使用すると、インストール時に PWA をプロトコル ハンドラとして自動的に登録できます。新しいオリジン トライアルでは、リソースをダウンロードする際のフェッチ優先度を指定できます。ほかにも多数あります。
ユーザー エージェント文字列で Chrome のメジャー バージョンを 100 に強制する
Chrome のバージョン番号がまもなく 2 桁から 3 桁に変わり、ユーザー エージェント(UA)文字列を解析するすべてのコードに影響する可能性があります。Chrome 96 ~ 99 の機能フラグを使用すると、UA 文字列のメジャー バージョン番号を 100 にすることで、早期テストを行うことができます。
Chrome DevTools での CSP と Trusted Types のデバッグの実装
Chrome DevTools での、コンテンツ セキュリティ ポリシーと Trusted Types の問題のデバッグの実装方法。
EyeDropper API を使用して画面上のピクセルの色を選択する
クリエイティブ アプリケーションのデベロッパーは、EyeDropper API を使用して、ユーザーがブラウザ外のピクセルを含め、画面上のピクセルから色を選択できる選択ツールを実装できます。
効果的な画像コンポーネントの作成
画像は、ウェブ アプリケーションのパフォーマンス ボトルネックの一般的な原因であり、最適化の重要な重点分野です。このドキュメントでは、Google の Aurora チームが、デベロッパー指向のインターフェースを使用して、Next.js の強力な画像コンポーネントをどのように設計したかについて説明します。このコンポーネントは、デベロッパーにとって使いやすいインターフェースを使用して、多くの最適化が組み込まれています。この投稿では、このコンポーネントがどのように設計され、その過程で学んだ教訓についてお話しします。
Reporting API を使用してウェブ アプリケーションをモニタリングする
Reporting API を使用して、セキュリティ違反や非推奨の API 呼び出しなどをモニタリングすることができます。
Chrome 95 の新機能
Chrome 95 がリリースされました。ブラウザに組み込まれた URLPattern によってルーティングが簡単になります。また、Eye Dropper API には色を選択するための組み込みツールが用意されており、減少した UA 文字列を今すぐ受け取る新しいオリジン トライアルを利用できます。
Chrome ユーザー デバイス特性レポート
開発者は常に、どのようなユーザー層を対象にアプリを開発しているのでしょうか。RAM の容量はどれくらいですか?お使いの Wi-Fi の種類は?新しいレポートでは、さまざまな国とプラットフォームに関する回答を確認できます。
2021 年第 3 四半期における Chrome ウェブストア ポリシーの更新
拡張機能の品質とデベロッパーのエクスペリエンスの一貫性を維持するため、セキュリティ要件を更新し、いくつかのポリシーをさらに明確にしました。
Chrome 94 の新機能
Chrome 94 がリリースされました。`` 要素のデフォルトの色空間が正式に SRGB として定義され、Display P3 に変更できます。ストリーミング ゲームや動画エディタなどにとって重要な、組み込みのオーディオ コーデックや動画コーデックにアクセスするための新しい低レベルの方法があります。WebGPU がオリジン トライアルを開始します。ほかにも多数あります。
Chrome 93 の新機能
Chrome 93 がリリースされました。JavaScript モジュールと同様に、import ステートメントを使用して CSS スタイルシートを読み込めるようになりました。インストールされている PWA を URL ハンドラとして登録できるため、ユーザーは PWA に直接移動できます。皆様からのフィードバックに基づいて Multi-Screen Window Placement API が更新され、2 回目のオリジン トライアルが開始されます。安定版のリリース サイクルを 4 週間に短縮します。ほかにも多数あります。
Chromium Chronicle #24: StrongAlias、IdType、TokenType
同じ型が互換性のないドメインの値を表すことがあり、バグが発生する可能性があります。幸いなことに、Chromium の //base では明示的な明確なタイプを簡単に導入できます。
プライベート ネットワーク アクセスの更新: 非推奨トライアルのご紹介
プライベート ネットワーク アクセスの仕様の一環として、Chrome 94 より、保護されていない公開ウェブサイトからプライベート ネットワーク エンドポイントにアクセスすることができなくなります。おすすめの対応方法について以下でご説明します。
最新のクライアントサイド ルーティング: Navigation API
シングルページ アプリケーションを構築するための改善された機能を追加する新しい API である Navigation API について説明します。
DevTools の新機能(Chrome 94)
お好みの言語で DevTools を利用したり、新しい Google Nest Hub デバイスを利用したり、新しい CSS コンテナクエリのバッジなどを利用したりできます。
Chrome オリジン トライアルのトラブルシューティング
メタタグ、ヘッダー、スクリプト内のトライアル トークンに関する一般的な問題に対処します。また、Chrome DevTools でのデバッグのサポートについても学習します。
OS Login で PWA を自動的に起動する
多くのオペレーティング システムには、ユーザーがログインしたときにアプリケーションを自動的に起動する機能があります。この機能は、インストール済みのウェブ アプリケーションでも利用できるようになりました。
COEP を使用して CORP ヘッダーなしでクロスオリジン リソースを読み込む: 認証情報なし
Chrome 93 以降、「Cross-Origin-Embedder-Policy: credentialless」はオリジン トライアルの対象になります。この新しい値により、ウェブページはクロスオリジン分離を有効にできるようになります。認証情報のないリクエストを送信することで、クロスオリジン リソースが「CORP: Cross-origin」ヘッダーで応答する必要はありません。
Chromium Chronicle #23: Chrome インフラにおける検証済みビルド
Chrome とインフラストラクチャにポリシー適用チェックを実装したことで、セキュリティに関する最低限の基準を満たしていることを確認できます。
Chrome 拡張機能: 拡張機能に関するポリシーを明確化し、ウェブストアの安全性と一貫性を高めました
拡張機能の品質とデベロッパーのエクスペリエンスの一貫性を維持するため、セキュリティ要件を更新し、いくつかのポリシーをさらに明確にしました。
Chromium Chronicle #22: Know Thy(Depot)ツール
Depot Tools は、Git 上に構築されたツールのコレクションであり、Chromium コードベースと関連プロジェクトに寄与するデベロッパーのワークフローを簡素化します。
Manifest V3 での拡張機能の操作
Chrome 拡張機能には以前から Browser API と Page Actions API がありましたが、Manifest V3 はどちらも汎用の Actions API に置き換えられました。この投稿では、これらの API の歴史と Manifest V3 の変更点について説明します。
アプリ向けの高パフォーマンス ストレージ: Storage Foundation API
Storage Foundation API は、基本的なファイル システムに似ており、バッファとオフセットを介して保存済みデータに直接アクセスできるストレージ API を提案しました。
フレームワークへの準拠
この記事では、適合性(Google 内のフレームワークで使用されている手法)と、それを JavaScript フレームワーク エコシステムにオープンソース化する計画について説明します。
Memory Inspector のご紹介
この記事では、Chrome 91 で導入された Memory Inspector について説明します。ArrayBuffer、TypedArray、DataView、Wasm メモリを検査できます。
Compute Pressure API
Compute Pressure は、システムへのプレッシャーを表すハイレベルの状態を提供します。実装では、基盤となる適切なハードウェア指標を使用して、システムに管理不能な負荷がかかっている場合を除き、ユーザーが利用可能なすべての処理能力を活用できるようにします。
URL ハンドラとしての PWA
PWA を URL ハンドラとして登録した後、登録済みの URL パターンのいずれかに一致するハイパーリンクをユーザーがクリックすると、登録済みの PWA が開きます。
Chromium Chronicle #21: ChromeOS のエンドツーエンドの UI 自動化
Tast は、Chrome の a11y(ユーザー補助)ツリーを使用して ChromeOS UI を制御する新しい UI ライブラリです。このライブラリを使用すると、デベロッパーは表示されている UI サーフェスに対するエンドツーエンド テストを簡単に作成できます。
Chrome 91 の新機能
Chrome 91 がリリースされます。ファイルを操作するウェブアプリで、File System Access API の使用時にファイル名とディレクトリが提案されるようになりました。クリップボードからファイルを読み取ることもできます。サイトに複数のドメインがあり、それらが同じアカウント管理バックエンドを共有している場合は、それらのドメインを Chrome に統一して、パスワード マネージャーが適切な認証情報を提案できるようにします。I/O の動画もすべてご覧いただけます。他にもたくさんの動画が公開されています。
宣言型リンク キャプチャを使用して、スコープ内のリンクから PWA を開く方法を選択できます
宣言型リンク キャプチャは、「capture_links」と呼ばれるウェブアプリ マニフェスト プロパティの提案です。これにより、デベロッパーは、ナビゲーション スコープ外のコンテキストから、アプリケーションのナビゲーション スコープ内にある URL にブラウザが移動するように求められたときに、どうなるかを宣言的に決定できます。
Chromium でブラウザのフラグを設定する方法
Chromium で導入される新しい API の一部では、テスト用のブラウザ フラグを設定する必要があります。Google Chrome、Microsoft Edge など、さまざまな Chromium 派生プロダクトでこの操作を行う方法を学びます。
PWA の URL プロトコル ハンドラ登録
PWA をプロトコル ハンドラとして登録した後、ブラウザまたはプラットフォーム固有のアプリから、mailto、Bitcoin、Web Music などの特定のスキームのハイパーリンクをクリックすると、登録済みの PWA が開いて URL が受信されます。
MediaStreamTrack の挿入可能なストリーム
MediaStreamTrack の挿入可能なストリームとは、MediaStreamTrack のコンテンツを新しいコンテンツの生成に操作または使用できるストリームとして公開することです。
拡張機能マニフェスト コンバータ
拡張機能を Manifest V3 に変換するためのオープンソース ツール。Service Worker やスクリプト インジェクションを使用するように適応するなど、機械的ではない変更を伴う場合は、コードを手動で更新する必要があります。
Manifest V3 でアクセス可能なウェブ リソース
Manifest V3 を使用したウェブアクセス可能なリソースをリリース「manifest.json」で権限の定義がサポートされるようになりました。デベロッパーは、リクエスト元のサイトのオリジンまたは拡張機能の ID に基づいてリソースを制限できます。
Chrome 90 の新機能
Chrome 90 がリリースされました。CSS の overflow プロパティに新しい値が追加されました。Feature Policy API の名称が権限ポリシーに変更されました。また、Shadow DOM を HTML で直接実装して使用する新しい方法があります。その他にも多くの機能があります。
DevTools のアーキテクチャ更新: DevTools から TypeScript への移行
Chrome DevTools を Closure Compiler タイプ チェッカーから TypeScript に移行する方法
VersionHistory API ガイド
VersionHistory ウェブサービス API を使用して Google Chrome のバージョン履歴情報にプログラムでアクセスするための入門ガイドです。
Google Chrome のリリース サイクルを短縮
今年後半には、リリース サイクルを短縮し、現在の 6 週間から 4 週間ごとに Google Chrome の新しいバージョンを Stable チャンネルにリリースする予定です。
Chrome 89 の新機能
Chrome 89 がリリースされました。WebHID、WebNFC、Web Serial のオリジン トライアルを終了し、安定版で利用できるようになりました。数人のデベロッパーの方が PWA のインストール可否チェックで利用していた抜け道をなくします。Web Share と Web Share Target がデスクトップに届きます。ほかにも多数あります。
ハードウェア アクセラレーション アニメーション機能の更新
Chromium のハードウェア アクセラレーション機能は、SVG アニメーション、パーセンテージ ベースの変換、クリップパス、背景画像などに更新されます。
Chromium Chronicle #17: ブラウザテストのミックスイン
ブラウザのテストを作成する際に、ユーザーが手動で行えるセットアップ アクションをプログラマティックに実行したいと思うことはよくあります。そのために、Mixin は簡単なブラウザのテスト設定を再利用可能な方法で実行するためのツールスイートです。
Digital Goods API と Payment Request API を使用して Google Play 請求サービス経由で支払いを受け取る
Digital Goods API、Payment Request API、Trusted Web Activity を使用して、PWA で Google Play 請求サービス経由で支払いを受け取ります。
DevTools の新機能(Chrome 89)
Trusted Types 違反のデバッグのサポート、ビューポート以外のノードのスクリーンショットのキャプチャ、ネットワーク リクエスト用の新しい [トラスト トークン] タブなど。
Chrome 88 の新機能
Chrome 88 がリリースされました。Manifest V3 を使用した拡張機能を Chrome ウェブストアにアップロードできるようになりました。アスペクト比の CSS プロパティを使用すると、どの要素にも簡単にアスペクト比を設定できます。信頼できるウェブ アクティビティで Play 請求サービスを使用するなど、さまざまな機能をご利用いただけます。それでは、Chrome 88 のデベロッパー向けの新機能を詳しく見ていきましょう。
チェーン化された JS タイマーの大規模なスロットリング(Chrome 88 以降)
ページが 5 分以上非表示になっている、ページが 30 秒以上無音になっている、WebRTC が使用されていない、タイマーのチェーンが 5 以上の場合に、集中的なスロットリングが有効になります。
Android Chrome 88 とパソコン版 Chrome 92 での SharedArrayBuffer の更新
SharedArrayBuffer は Android Chrome 88 で利用できるようになります。クロスオリジン分離されたページでのみ利用できます。パソコン版 Chrome 92 以降では、クロスオリジン分離ページでのみ使用できるようになります。オリジン トライアルに登録すると、パソコン版 Chrome 113 まで現在の動作を維持できます。
Chromium Chronicle #16: デスクトップでの Google アプリの更新
パソコンで Chrome が自動的に最新の状態に保たれていると思ったことはありませんか?または、Chromebook、Chromecast、Android にアップデートを提供する方法も教えてください。
Google Play 請求サービスを使用
Google Play 請求サービスには、カタログ、料金、定期購入、レポートの管理、Google Play ストアを利用した購入手続きフローのためのツールが用意されています。
Chromium Chronicle #15: ターゲットの公開設定の制限
Chromium では、1 つのコンポーネント用に記述されたコードの中で、他の場所では役立つものの、隠れた制限がある可能性があるコードを見つけるのが一般的です。安全のため、ターゲットの公開設定を制限することで、危険な機能への外部アクセスを制限します。
Chrome 87 の新機能
Chrome 87 がリリースされました。パン、チルト、ズームをサポートするウェブカメラでパン、ティルト、ズームを制御できるようになりました。また、範囲リクエストや Service Worker で必要な回避策が少なく、フォント アクセス API のオリジン トライアルなど多くの機能が用意されています。では、Chrome 87 のデベロッパー向けの新機能を詳しく見ていきましょう。
信頼できるウェブ アクティビティでウェブ共有ターゲットを有効にする
Trusted Web Activity を使用してプロジェクトで Web Share Target を有効にする方法について説明します。
Puppetaria: ユーザー補助重視の Puppeteer のスクリプト
Puppetaria - ユーザー補助を重視した Puppeteer スクリプトです。CSS セレクタに依存せずに、ユーザー補助ツリーのクエリに基づいた代替クエリハンドラを使用できます。
フィードバックのお願い: プライベート ネットワーク用の CORS(RFC1918)
クライアントの内部ネットワーク上のデバイスやサーバーが意図せずウェブ全体に公開されると、悪意のある攻撃に対して脆弱になります。CORS-RFC1918 は、パブリック ネットワークからのリクエストをブラウザ上でデフォルトでブロックし、内部デバイスがそうしたリクエストをオプトインできるようにする提案です。
Chromium Chronicle #14: ウォーターフォールへのテストの追加
Chrome の新機能の回帰を検出したい場合は、ウォーターフォールである Chrome の継続的なビルドとテストのインフラストラクチャにテストを追加します。
Chrome DevTools の [WebAuthn] タブの作成方法
デベロッパーが認証システムのエミュレート、機能のカスタマイズ、ステータスの検査を行うための Chrome DevTools の [WebAuthn] タブの作成方法。
インストール済みのウェブ アプリケーションをファイル ハンドラとして指定する
アプリをオペレーティング システムにファイル ハンドラとして登録します。 ウェブアプリが ファイルの読み取りと書き込みが可能 になったので、次は、デベロッパーがアプリが作成して処理できるファイルのファイル ハンドラとして、これらのウェブアプリを宣言できるようにすることが理にかなっています。File Handling API を使用すると、まさにこのことができます。テキスト エディタ アプリをファイル ハンドラとして登録してインストールしたら、macOS で.txt
Chrome 86 の新機能
Chrome 86 がリリースされました。ファイル システム アクセス API が安定版で利用可能になりました。ウェブ HID と Multi-Screen Window Placement API の新しいオリジン トライアルがあります。CSS には新しいものもありますでは、Chrome 86 のデベロッパー向けの新機能を詳しく見ていきましょう。
Chrome DevTools の [Issues] タブの作成方法
問題の検出と解決に関するデベロッパー エクスペリエンスを向上させるために、Chrome DevTools の [Issues] タブを作成する方法。
センサー: デバイス センサーをエミュレートする
[センサー] パネルを使用して、位置情報をオーバーライドしたり、デバイスの向きをシミュレートしたり、強制タップしたり、アイドル状態をエミュレートしたりできます。
Window Management API を使用して複数のディスプレイを管理する
Window Management API を使用すると、マシンに接続されているディスプレイを列挙したり、特定の画面にウィンドウを配置したりできます。
Chrome 85 の新機能
Chrome 85 がリリースされました。content-visibility: auto を使用すると、レンダリング パフォーマンスを改善できます。CSS で CSS プロパティを設定できるようになりました。getInstalledRelatedApps() API を使用して、Windows アプリまたは PWA がインストールされているかどうかを確認できるようになりました。アプリアイコンのショートカットは Windows でも機能します(今回は)。フェッチ アップロード ストリーミングのオリジン トライアルがあります。その他多数。では、Chrome 85 のデベロッパー向けの新機能を詳しく見ていきましょう。
ローカル フォントを使用して高度なタイポグラフィを使用する
Local Font Access API は、ユーザーのインストール済みのローカル フォントを列挙し、さまざまな TrueType/OpenType テーブルへの低レベルのアクセスを提供します。
DevTools の新機能(Chrome 86)
新しいメディアパネル、キャプチャ ノードのスクリーンショット、[Issues] タブの更新、欠落しているローカル フォントのエミュレート、非アクティブなユーザー、preferreds-reduced-data
Chrome の新しいデフォルトの Referrer-Policy - strict-origin-when-cross-origin
Chrome の新しいデフォルトの Referrer-Policy - strict-origin-when-cross-origin
Keyboard Lock API でキーをキャプチャする
Keyboard Lock API を使用すると、通常は基盤となるオペレーティング システムによって予約されているキーをウェブサイトでキャプチャできます。全画面表示で没入できるエクスペリエンスを提供するウェブ アプリケーション(ゲームやリモート アクセス アプリなど)を対象としています。
browser-fs-access ライブラリを使用したファイルとディレクトリの読み取りと書き込み
最新のブラウザはすべて、ローカルのファイルとディレクトリを読み取ることができます。ただし、真の書き込みアクセス権、つまりファイルのダウンロード以外のアクセス権は、File System Access API を実装しているブラウザに限定されます。この投稿では、ブラウザ fs-access というサポート ライブラリを紹介します。これは、File System Access API 上で抽象化レイヤとして機能し、ファイル処理については従来のアプローチに透過的にフォールバックします。
フェッチ API を使用したストリーミング リクエスト
Chromium のバージョン 105 から、アップロード ストリーミングがサポートされるようになりました。つまり、全身を準備してからリクエストを開始できるようになりました。
Chrome 84 の新機能
Chrome 84 がリリースされました。ユーザーは、アプリアイコンのショートカットを使用して、アプリ内の一般的なタスクを開始できます。Web Animations API により、これまでサポートされていなかった多くの機能のサポートが追加されました。Wake Lock と Content Indexing API はオリジン トライアルを終了。アイドル検出と SIMD に新しいオリジン トライアルが追加されました。他にもさまざまな機能があります。では、Chrome 84 のデベロッパー向けの新機能を詳しく見ていきましょう。
CrUX API の使用方法
Chrome UX Report API を使用して、数百万ものウェブサイトにおける実際のユーザー エクスペリエンス データに RESTful アクセスする方法を紹介します。
User-Agent Client Hints API によるユーザーのプライバシーとデベロッパー エクスペリエンスの向上
User-Agent Client Hints は、Client Hints API の新しい拡張機能です。これにより、デベロッパーはプライバシーを保護し、使いやすい方法でユーザーのブラウザに関する情報にアクセスできます。 Client Hints を使用すると、デベロッパーは User-Agent(UA)文字列から解析する必要なく、ユーザーのデバイスや状態に関する情報を能動的にリクエストできます。この代替ルートを提供することによって、最終的にユーザー エージェント文字列の粒度を低減できます。
Looker Studio で CrUX ダッシュボードを作成する方法
Looker Studio は、Chrome UX レポートなどのビッグデータ ソース上にダッシュボードを構築できる強力なデータ可視化ツールです。このガイドでは、独自のカスタム CrUX ダッシュボードを作成してオリジンのユーザー エクスペリエンスを追跡する方法について説明します。
WebTransport の使用
WebTransport は、低レイテンシの双方向のクライアント サーバー メッセージングを提供する API です。ユースケースや、今後の実装についてフィードバックをお寄せください。
Lighthouse 6.0 の新機能
新しい指標、パフォーマンス スコアの更新、新しい監査など。 本日、Lighthouse 6.0 をリリースします。 Lighthouse は、サイトのユーザー エクスペリエンスを改善するための改善点と診断情報をデベロッパーに提供する、自動ウェブサイト監査ツールです。Chrome DevTools、npm(Node モジュールと CLI として)、ブラウザ拡張機能( Chrome と Firefox )で利用できます。 PageSpeed Insights など、多くの Google
Chrome 83 の新機能
Chrome 83 がリリースされました。クロスサイト スクリプティングの脆弱性を防ぐのに役立つ信頼できるタイプのサポートが追加されています。フォームの要素が大きく変わります。メモリリークを検出する新しい方法があります。ネイティブ ファイル システム API が、追加された機能を含む新しいオリジン トライアルを開始します。では、Chrome 83 のデベロッパー向けの新機能を詳しく見ていきましょう。
Idle Detection API で非アクティブ ユーザーを検出する
Idle Detection API は、ユーザーがアイドル状態であるときにデベロッパーに通知します。これは、キーボード、マウス、画面の操作がない、スクリーンセーバーがアクティブになっている、画面がロックされている、別の画面に移動しているなどを示します。デベロッパーが定義したしきい値で通知がトリガーされます。
Chrome 81 の新機能
Chrome 81 がリリースされました。アプリアイコンのバッジがオリジン トライアルを卒業する。ブラウザで拡張現実のヒットテストを利用できるようになりました。ウェブ NFC のオリジン トライアルを開始します。新しい Chrome のリリーススケジュールについて 最新情報をお伝えしましたでは、Chrome 81 のデベロッパー向けの新機能を詳しく見ていきましょう。
WebSocketStream: ストリームと WebSocket API の統合
WebSocketStream は、ストリームを WebSocket API と統合します。これにより、アプリは受信したメッセージにバックプレッシャーを適用できます。
Chromium Chronicle #13: RR によるタイムトラベル デバッグ
デバッガで同じテストを何度も実行して、コードがどうして不適切な状態になったのか調べたいと思ったことはありませんか?便利なツールをご用意しました。RR は実行トレースを記録し、後退したり、逆戻りしたり、変数の値が変化した場所や、オブジェクトで関数が最後に呼び出された日時を確認したりするのが容易になります。
Chrome ユーザー エクスペリエンス レポートへの通知権限データの追加
サイト所有者が通知権限の指標を理解できるように、Google は 202001 年のデータセットの Chrome ユーザー エクスペリエンス レポート(CrUX)にこのデータを追加します。これにより、サイト所有者は自分のサイトおよび同じカテゴリ内の比較サイトについて、一般的なユーザー通知権限の応答について理解を深めることができます。
Chromium Chronicle #10: Pixel テストで UI の回帰を把握する
Chrome のテスト戦略は、自動化された機能の正確性テストと手動テストに大きく依存していますが、どちらも軽微な UI の回帰を確実に検出することはできません。ピクセルテストを使用すると、パソコンのブラウザの UI テストを自動化できます。
Chrome 80 の新機能
Chrome 80 のリリースに伴い、デベロッパー向けの新機能が数多く追加されています。ワーカーのモジュール、JavaScript のオプション チェーン、新しいオリジン トライアル、オリジン トライアルから得られた機能など、さまざまなサポートがあります。では、Chrome 80 のデベロッパー向けの新機能を詳しく見ていきましょう。
Android デバイスにカスタムタブをサポートするブラウザが搭載されているかどうかを確認する
カスタムタブをサポートするブラウザが Android デバイスにあるかどうかを確認する方法について説明します。
Trusted Web Activity を構築するための新しいライブラリ android-browser-helper
Trusted Web Activity を構築するための新しいライブラリ android-browser-helper を導入しました。
Chromium Chronicle #9: ClusterFuzz
ClusterFuzz によって検出された優先度の高いセキュリティ バグを修正するよう求められる場合があります。概要: バグを真剣に受け止めるべきか?サポートするには
Content Indexing API を使ったオフライン対応ページのインデックス登録
PWA で記事やメディア ファイルがキャッシュされる場合があるかもしれませんが、そのページがオフラインでも動作することをユーザーが知るにはどうすればよいでしょうか。Content Indexing API を使えば、自分の PWA や他のインストール済みの PWA のコンテンツがインデックスに追加されると、サポートされているブラウザの専用領域に表示されます。
Chrome 79 の新機能
Chrome 79 がリリースされました。Android にインストール済みのプログレッシブ ウェブアプリで、マスク可能なアイコンがサポートされます。WebXR Device API を使用して、没入感のあるエクスペリエンスを作成できるようになりました。Wake Lock API と rendersubtree 属性のオリジン トライアルが開始されます。Chrome Dev Summit 2019 の動画はすべてオンラインでご覧いただけます。では、Chrome 79 のデベロッパー向けの新機能を詳しく見ていきましょう。
Chrome DevTools での WebAssembly デバッグの改善
DevTools 内から、コードのステップオーバー、ブレークポイントの設定、スタック トレースの解決をソース言語で行うことができます。
Chromium Chronicle #8: GWP-ASan: 野生のバグを検出する
GWP-ASan は、実際の環境で使用するように設計されたヒープのみのメモリエラー検出器です。use-after-frees、バッファのオーバーフロー/アンダーフロー、二重解放を検出します。ASan とは異なり、スタックやグローバルのエラーは検出されません。
Periodic Background Sync API によるオフライン エクスペリエンスの拡充
定期的なバックグラウンド同期を使用すると、ウェブ アプリケーションで定期的にデータをバックグラウンドで同期できるため、ウェブアプリを iOS/Android/デスクトップ アプリの動作に近づけることができます。
Web Share Target API を使用して共有データを受信する
モバイル デバイスでもデスクトップ デバイスでも、共有ボタンをタップしてアプリを選択し、共有相手を選ぶだけで簡単に共有できるようにする必要があります。Web Share Target API を使用すると、インストール済みのウェブアプリを基盤となるオペレーティング システムに登録して、共有コンテンツを受信できます。
通知トリガー API
Notification Triggers API を使用すると、デベロッパーはネットワーク接続を必要としないローカル通知をスケジュール設定できるため、カレンダー アプリなどのユースケースに最適です。
Chromium Chronicle #7: 前処理のソース
Chromium のソースファイルを 1 つ手動でコンパイルすると、コンパイラの最適化オプションを試したり、マクロの詳細を把握したり、コンパイラのバグを最小限に抑えることができます。今月は、ソースの前処理方法について説明します。
Chrome 78 の新機能
Chrome 78 がリリースされました。CSS 変数に「型」を指定できるようになりました。importScripts() によってインポートされたスクリプトにバイト単位のチェックが実行されるようになったため、Service Worker がより新鮮です。さらに、ネイティブ ファイル システムや SMS Receiver など、便利な新機能を提供する 2 つの新しいオリジン トライアルの詳細もわかりました。さらに、Chrome DevSummit は 2019 年 11 月 11 ~ 12 日に開催されます。では、Chrome 78 のデベロッパー向けの新機能を詳しく見ていきましょう。
DevTools の新機能(Chrome 79)
Cookie がブロックされた理由をデバッグし、preferreds-color-scheme(ダーク)、コード カバレッジの更新などをシミュレートします。
Chromium Chronicle #6: モノレールのグリッドビュー
Chrome の Issue Tracker の Monorail では、グリッドビューで問題をかんばんスタイルのボードで可視化できます。このエピソードでは、グリッドモードの使用方法について説明します。
デフォルトでより鮮度の高い Service Worker
Service Worker スクリプトの更新を確認する HTTP リクエストはデフォルトで HTTP キャッシュで処理されなくなり、インポートしたスクリプトが Service Worker の更新フローをトリガーできるようになります。
Chrome 77 の新機能
Chrome 77 がリリースされました。Largest Contentful Paint は、サイトのパフォーマンスをより効果的にトラッキングできる優れた方法です。フォームに新機能が追加されました。ネイティブ遅延読み込みを利用できます。Chrome DevSummit は、2019 年 11 月 11 ~ 12 日に開催されます。その他にもたくさん。では、Chrome 77 のデベロッパー向けの新機能を詳しく見ていきましょう。
DevTools の新機能(Chrome 78)
[Audits] パネルに Lighthouse 5.2 が表示され、[Performance] パネルに Largest Contentful Paint が表示されます。
Chromium Chronicle #5: サンドボックス外のコーディング
すべてのコードにバグがあります。Chrome ブラウザのプロセスにはサンドボックスがないため、そうしたバグによって悪意のあるコードがデバイス全体にフルアクセスする可能性があります。このエピソードでは、サンドボックスを使わずにコーディングする際の推奨事項と禁止事項について説明します。
ReportingObserver API でコードの状態を把握する
ReportingObserver は、サポートが終了した API をサイトで使用した場合や、ブラウザの介入が発生したときに通知を受け取ることができます。基本機能はもともと Chrome 69 で導入されました。Chrome 84 以降では、ワーカーで使用できます。とても簡単です。
ウェブ用の連絡先選択ツール
ユーザーの連絡先へのアクセスは、(ほぼ)頃から iOS/Android アプリの機能でした。Contact Picker API は、ユーザーが連絡先リストから 1 つまたは複数のエントリを選択し、選択した連絡先の限られた詳細情報をウェブサイトと共有できるオンデマンド API です。共有したいものだけを好きなときに共有でき、友だちや家族と連絡を取りやすくなる。
Chrome 76 の新機能
Chrome 76 がリリースされました。また、preads-color-scheme メディアクエリのサポートが追加され、ウェブサイトでダークモードを利用できるようになりました。アドレスバーにインストール ボタンが追加され、プログレッシブ ウェブアプリをパソコンに簡単にインストールできます。モバイルにミニ情報バーが表示されないようにする方法。WebAPK の更新頻度を増やします。その他にもたくさん。では、Chrome 76 のデベロッパー向けの新機能を詳しく見ていきましょう。
Chromium Chronicle #4: WPT を使用してウェブ プラットフォームの機能をテストする
ウェブに公開される機能をテストするには、ウェブ プラットフォーム テスト(WPT)を使用することをおすすめします。これは、GitHub を介して他のブラウザと共有されるためです。今月は、WPT のベスト プラクティスをご紹介します。
ウェブ コンポーネントの更新 - v1 API へのアップグレードに要する時間の延長
Web Components v0 ユーザーは、v1 にアップグレードする時間が長くなりますが、しっかりとテストしてください。
Chromium Chronicle #3: Gerrit でのコード カバレッジ
テストは、バグや回帰を発見し、より優れた設計を適用し、コードの保守を容易にするため、非常に重要です。今月は、Gerrit で徹底的なテストを実施する方法について説明します。
Chrome 75 の新機能
Chrome 75 がリリースされました。キャンバス要素のレイテンシを短縮する新しい方法があります。ウェブアプリで、システムレベルの共有シートを使用して、インストール済みの他のアプリとファイルを共有できるようになりました。Google I/O での講演はすべて Google の YouTube チャンネルで公開されています。その他にもたくさん。では、Chrome 75 のデベロッパー向けの新機能を詳しく見ていきましょう。
Chromium Chronicle #2: テストの不安定さへの対処
不安定なテストは、Chrome でよく見られる問題です。他のデベロッパーの生産性に影響を及ぼし、時間の経過とともに無効になります。今月は、テストの不安定さに対処する方法について説明します。
モデルビューアによる拡張現実(AR)
2 月には、ウェブページに 3D モデルを宣言的に追加できる model-viewer ウェブ コンポーネントを導入しました。今回、ar 属性が追加され、Android で AR がサポートされるようになったことをお知らせします。
Paint Holding - 同一オリジン ナビゲーションでの白いフラッシュの低減
ペイントのホールドの概要を簡単に説明します。同一オリジン ナビゲーション時に白色の点滅を減らす Chrome の機能
非同期ヒントを使用した低レイテンシのレンダリング
ウェブ用に作成されたタッチペン ベースの描画アプリケーションでは、ウェブページでグラフィックの更新を DOM と同期させる必要があるため、遅延の問題が発生します。非同期に行われるコンテキストのヒントは、DOM をバイパスして遅延をなくします。
サードパーティのコードの影響を軽減する
広告掲載ネットワークや分析サービスなどのサードパーティのコードがページ読み込みのパフォーマンスに与える影響と、サードパーティのコードを最適化する方法についてご確認ください。
既知のセキュリティの脆弱性があるフロントエンドの JavaScript ライブラリを含みます
既知の脆弱性がある JavaScript ライブラリを置き換えて、ページのセキュリティを強化する方法を学びます。
Chrome 74 の新機能
Google I/O の開催に合わせて、Chrome 74 がリリースされました。プライベート クラス フィールドのサポート、ユーザーがモーションの軽減をリクエストしたことを検出できるようにします。また、CSS 遷移イベントのサポートなど、多くの機能を追加しました。では、Chrome 74 のデベロッパー向けの新機能を詳しく見ていきましょう。
Live Expressions を使用して JavaScript 値をリアルタイムで確認する
コンソールに同じ JavaScript 式を繰り返し入力する場合は、代わりに Live Expressions をお試しください。
Chromium Chronicle #1: タスク スケジューリングのベスト プラクティス
Chrome チームが Chromium Chronicle を発表いたします。これは、ブラウザを構築するデベロッパーである Chromium デベロッパー専用の月刊シリーズです。今月は、タスクのスケジュール設定のベスト プラクティスを見ていきます。
非推奨: Chrome DevTools を使用してアプリケーション キャッシュ データを表示する
Chrome DevTools の [Application] パネルでアプリケーション キャッシュ データを表示する方法について説明します。
Chrome 73 の新機能
Chrome 73 では、Signed HTTP Exchange を使用してポータブル コンテンツを簡単に作成できるようになりました。作成可能なスタイルシートを使用すると、スタイルを動的に変更する操作がはるかに簡単になります。また、Mac のプログレッシブ ウェブアプリのサポートを追加し、すべてのデスクトップおよびモバイル プラットフォームで PWA をサポートするようになりました。これにより、ウェブ経由で配信されるインストール可能なアプリを簡単に作成できます。では、Chrome 73 のデベロッパー向けの新機能を詳しく見ていきましょう。
アプリの JavaScript のホットパスを WebAssembly に置き換える
WebAssembly が提供する主なメリットの 1 つは、ブラウザ間でのパフォーマンスが予測可能であることです。しかし、JavaScript で記述されたホットパスを WebAssembly に変換するにはどうすればよいでしょうか。
String.prototype.matchAll() で結果の一致率を向上
Chrome 73 では、String.prototype.matchAll() メソッドが導入されました。match() と同じように動作しますが、特にグループをキャプチャするためにアクセスする必要がある場合、一致を簡単に反復処理できます。
デフォルトでホイールのスクロールを高速にする
スクロールの応答性は、モバイルでのウェブサイトに対するユーザー エンゲージメントにとって重要ですが、ホイール イベント リスナーはスクロールのパフォーマンスに深刻な問題を引き起こすことがよくあります。ユーザーとデベロッパーがデフォルトで高速に動作できるよう Google がどのように支援しているかをご覧ください。
高速のテンプレートとウェブ コンポーネント - lit-html と LitElement
lit-html と LitElement は、高速で軽量なテンプレートと相互運用可能なコンポーネントを最新のウェブに提供します。
RTCQuicTransport のオリジン トライアルがまもなく開催(Chrome 73)
RTCQuicTransport は、QUIC プロトコルを使用して任意のデータをリモートピアと交換できる新しいウェブ プラットフォーム API です。
Chrome 72 の新機能
Chrome 72 では、JavaScript でのパブリック クラス フィールドの作成がはるかに見やすくなり、新しい User Activation API でページが有効になっているかどうかを確認でき、リストのローカライズがはるかに簡単になりました。では、Chrome 72 のデベロッパー向けの新機能を詳しく見ていきましょう。
Lighthouse によるスタックパックのプロトタイピング
スタックパックは、一般的なアドバイスのみを表示するだけでなく、Lighthouse を拡張して特定のツールに関する追加のメッセージを含めることもできます。
API 間で一貫したユーザー アクティベーションを実現
Chrome バージョン 72 では、User Activation v2 がリリースされます。これにより、有効化制限のあるすべての API でユーザー有効化が利用可能になり、ユーザー有効化の不整合が解消されます。
WebUSB 用デバイスの作成
WebUSB API を最大限に活用するデバイスを構築する。 この記事では、 WebUSB API を最大限に活用できるデバイスを構築する方法について説明します。API 自体の概要については、 ウェブで USB デバイスにアクセスする をご覧ください。 ユニバーサル シリアル バス(USB)は、周辺機器をデスクトップ コンピュータやモバイル コンピューティング デバイスに接続するための最も一般的な物理インターフェースになっています。USB
Screen Wake Lock API で画面をロックしない
バッテリーの消耗を防ぐため、ほとんどのデバイスはアイドル状態のままですぐにスリープ状態になります。ほとんどの場合は、これで問題ありませんが、アプリによっては、処理を完了するために画面をスリープ状態から復帰させておく必要があります。Screen Wake Lock API を使用すると、アプリケーションの実行を継続する必要がある場合に、デバイスの画面が暗くなったり、ロックされたりするのを防ぐことができます。
アプリアイコンのバッジ
App Badging API を使用すると、インストール済みのウェブアプリで、アプリケーション全体のバッジを設定できます。このバッジは、シェルフやホーム画面など、アプリケーションに関連するオペレーティング システム固有の場所に表示されます。バッジを使用すると、注意が必要な新しいアクティビティがあることをユーザーに簡単に通知したり、未読件数など少量の情報を示すために使用したりできます。
Chrome 71 の新機能
Chrome 71 では、新しい Intl.RelativeTimeFormat() API を使用して相対的な時間値を簡単に表示できるようになりました。縦方向に流れるテキストについて、テキストのどの側に下線を引くかを指定できます。また、音声合成 API を使用する場合、コンピュータが音声を認識する前にユーザー アクティベーションが必要となるようになりました。では、Chrome 71 のデベロッパー向けの新機能を詳しく見ていきましょう。
ウェブ オーディオ、自動再生ポリシー、ゲーム
2017 年 9 月に、Chrome の自動再生動作ポリシーで音声の処理方法が変更されることをお知らせしました。このポリシーの変更は、2018 年 5 月の Chrome 66 Stable でリリースされました。 Web Audio 開発コミュニティからのフィードバックを受け、デベロッパーがウェブサイトを更新するための時間を確保できるよう、自動再生ポリシーの Web Audio に関する部分のリリースを延期しました。また、Web Audio
Signed HTTP Exchange
Signed Exchange を使用すると、ウェブサイトはウェブ コンテンツへの署名が可能となり、コンテンツの配信元に対してコンテンツを安全に再配信し、確認することができます。
音声と動画の更新(Chrome 70)
Chrome 70 における音声と動画の更新の概要 - クロス コーデックとクロスバイト ストリームのバッファリングと再生、MSE 対応の MP4 の Opus、Android でデフォルトで許可される保護されたコンテンツの再生。
Chrome 70 の新機能
Chrome 70 では、Windows と Linux でのデスクトップ プログレッシブ ウェブアプリのサポート、Credential Management API の公開鍵認証情報のサポート、専任ワーカーへの名前指定など、多くの機能が追加されました。では、Chrome 70 のデベロッパー向けの新機能を詳しく見ていきましょう。
cache.addAll() と importScripts() を微調整(Chrome 71)
cache.addAll()、importScripts、および Chrome 71 には、いくつかの小さな変更が導入されます。
Chrome 69 でペイントのタイミングに関する問題
Chrome 69 では、ペイントタイミング指標に誤った変更が行われました。これはレンダリング パイプラインをより多く取得することを意図したものでしたが、タイムスタンプが不正確になっていました。
Houdini のアニメーション ワークレット
アニメーション ワークレットを使用すると、デバイスのネイティブ フレームレートで実行される命令型アニメーションを記述して、ジャンクのないスムーズさを向上させ、メインスレッドのジャンクに対するアニメーションの耐性を高め、時間ではなくスクロール可能なリンクにすることができます。
メディアの更新(Chrome 70)
クロス コーデックとクロスバイト ストリームのバッファリングと再生、MSE 対応の MP4 の Opus、Android ではデフォルトで保護されたコンテンツの再生。
HTTP Cookie への非同期アクセス
Cookie Store API は HTTP Cookie への非同期アクセスを提供し、Cookie の jar を Service Worker に開きます。
Chrome 69 の新機能
Chrome が最初にリリースされてから 10 年が経ちます。それ以降、状況は大きく変化しましたが、最新のウェブ アプリケーションの強固な基盤を構築するという Google の目標は今も変わりません。Chrome 69 では、CSS Scroll Snapping のサポート、ノッチとウェブロックのサポート、CSS4 の新機能がいくつか追加されました。では、Chrome 69 のデベロッパー向けの新機能を詳しく見ていきましょう。
ReportingObserver: コードの健全性を把握する
ReportingObserver は、デベロッパーがコードの動作に関する分析情報を提供します。ReportingObserver は、非推奨や介入、これまで DevTools コンソールでしか確認できなかったメッセージなどの問題に関する情報を表示します。
Chrome 68 の新機能
Chrome 68 では、Android でのホーム画面への追加の動作が変更され、より細かな設定が可能になりました。Page Lifecycle API は、タブが一時停止または復元されたタイミングを示します。また、Payment Handler API により、ウェブベースの支払いアプリで Payment Request エクスペリエンスをサポートできるようにします。では、Chrome 68 のデベロッパー向けの新機能を詳しく見ていきましょう。
NoState Prefetch のご紹介
Chrome 63 では NoState Prefetch が導入されました。NoState Prefetch は、非推奨の事前レンダリング プロセスよりもメモリ使用量が少ない、リソースを事前に取得するためのメカニズムです。
ウェブ デベロッパー向けのサイト分離
パソコン版 Chrome 67 では、サイト分離と呼ばれる新機能がデフォルトで有効になっています。この記事では、サイト分離の概要、必要な理由、ウェブ デベロッパーがサイト分離を認識すべき理由について説明します。
Chrome ユーザー エクスペリエンス レポートでの初回入力遅延に関するテスト
Chrome ユーザー エクスペリエンス レポートに First Input Delay(FID)の試験運用版指標が追加されました。
機能ポリシーの概要
機能ポリシーを使用すると、デベロッパーはブラウザ内の特定の API や機能の動作を選択的に有効化、無効化、変更できます。CSP に似ていますが、機能に特化しています。Chrome 60 で提供されます。
ホーム画面の動作に追加する変更
Android 版 Chrome 68 以降では、「ホーム画面に追加」の動作が変更され、ユーザーにプロンプトを表示するタイミングや方法を、より細かく制御できるようになります。サイトがホーム画面に追加するための条件を満たしている場合、Chrome では、ホーム画面に追加するためのバナーが自動的に表示されなくなります。代わりに、保存された beforeinstallprompt イベントで prompt() を呼び出して、[ホーム画面に追加] ダイアログのプロンプトをユーザーに表示する必要があります。
Chrome 67 の新機能
Chrome 67 では、プログレッシブ ウェブアプリがデスクトップで登場します。汎用センサー API のサポートを追加しました。これにより、加速度計やジャイロスコープなどのデバイス センサーに簡単にアクセスできるようになります。また、BigInts のサポートが追加され、大きな整数の処理がはるかに簡単になりました。では、Chrome 67 のデベロッパー向けの新機能を詳しく見ていきましょう。
WebAuthn による強力な認証の有効化
Chrome 67 ベータ版では、Web Authentication(WebAuthn)API が導入され、ブラウザが公開鍵ベースの認証情報を操作、管理できるようになりました。これにより、取り外し可能なセキュリティ キーと、指紋スキャナなどの組み込みのプラットフォーム認証システムを使用して、強力な認証を行うことができます。
サポートの終了と削除(Chrome 67)
計画に役立つ Chrome 67 のサポート終了と削除のまとめ。このバージョンでは、公開鍵のピニングのサポート終了、安全でないコンテキストでの AppCache の削除、接頭辞の削除が加えられています。
イベント ドリブン バックグラウンド スクリプトに移行する
Chrome 拡張機能のパフォーマンスを改善するために、永続的なバックグラウンド スクリプトをイベントベースの非永続的なモデルに移行する方法を紹介します。
Chrome 66 の新機能
Chrome 66 では、新しい CSS Typed Model Object で CSS の操作が簡単になり、クリップボードへのアクセスが非同期になりました。また、canvas 要素の新しいレンダリング コンテキストが追加され、JavaScript を使ってより効率的に音声を処理できるようになりました。では、Chrome 66 のデベロッパー向けの新機能を詳しく見ていきましょう。
セカンダリ接続ディスプレイにウェブページを表示する
Chrome 66 では、ウェブページで Presentation API を介してセカンダリ接続ディスプレイを使用し、Presentation Receiver API を介してそのコンテンツを制御できます。
Chrome 66 でのサポートの終了と削除
計画に役立つ Chrome 66 のサポート終了と削除の概要。このバージョンでは、Service Worker のセキュリティの向上、CSS の位置値の変更などが行われています。
Chrome 65 の新機能
Chrome 65 では、新しい CSS Paint API のサポートが追加され、プログラムで画像を生成できるようになりました。Server Timing API を使用すると、HTTP ヘッダーを介してサーバーのパフォーマンスのタイミング情報を提供できます。また、新しい CSS display: content プロパティを使用すると、ボックスを非表示にできます。では、Chrome 65 のデベロッパー向けの新機能を詳しく見ていきましょう。
サポートの終了と削除(Chrome 65)
計画に役立つ Chrome 65 のサポート終了と削除のまとめ。このバージョンでは、Symantec の証明書とクロスオリジン ダウンロードのブロックに関するリマインダーが表示され、document.all は読み取り専用になりました。
Chrome 64 の新機能
Chrome 64 では、要素のコンテンツ長方形のサイズが変更されたときに通知を受け取る ResizeObservers のサポートが追加されています。モジュールが import.metadata を使用して、ホスト固有のメタデータにアクセスできるようになりました。ポップアップ ブロッカーが強力になり、機能が大幅に向上しました。では、Chrome 64 のデベロッパー向けの新機能を詳しく見ていきましょう。
Headless Chrome: サーバーサイド レンダリングを行う JavaScript サイトのご紹介
ヘッドレス Chrome は、動的な JavaScript サイトを静的 HTML ページに変換するドロップイン ソリューションです。
Chrome ユーザー エクスペリエンス レポート - 上位 100 万以上のオリジンに拡大
本日、Google は新しい Chrome ユーザー エクスペリエンス レポートを発表いたします。このレポートでは、ウェブ上の 100 万を超える上位のオリジンの対象範囲が拡大されます。
Chrome 64 で chrome.loadTimes() API のサポートを終了
標準以外の chrome.loadTimes() API は、すべての便利な機能について標準ベースの同等の API が存在するため、Chrome 64 でサポートが終了します。
サポートの終了と削除(Chrome 64)
計画に役立つ Chrome 64 のサポート終了と削除の概要。このバージョンでは、パフォーマンス API の変更、複数のシャドウルートのサポート終了、WebKit API の削除が行われています。
Chrome 63 の新機能
Chrome 63 では、JavaScript モジュールを動的にインポートできます。私が好きな面接のコーディングに関する質問は、非同期イテレータとジェネレータを使えば簡単に実現できます。また、CSS の overscroll-behavior プロパティで、ブラウザのデフォルトのオーバーフロー スクロール動作をオーバーライドできます。
Chrome 63 でのサポートの終了と削除
計画に役立つ Chrome 63 のサポート終了と削除の概要。このバージョンでは、インターフェース プロパティの新しい動作、Webkit 関数の削除、RTCRtcpMuxPolicy の変更が行われています。
Chrome 62 の新機能
Chrome 62 では、ネットワーク品質インジケーターによってネットワーク情報 API が改善され、OpenType 可変フォントのサポートが開始され、Media Capture from DOM element API を使用して HTMLMediaElements からメディア ストリームをキャプチャして処理できるようになりました。
CSS position:sticky イベント
position - sticky と IntersectionObserver を併用して、要素が固定表示されるタイミングを判断します。スクロール イベントなしでスクロール効果を適用できます。
ウェブ向けセンサー
センサーは多くのアプリで使用され、実行するデバイスの向きや加速度を考慮するゲームなどの高度な機能を可能にします。Generic Sensor API は、ウェブ上でこのようなセンサーデータにアクセスするための汎用インターフェースを提供します。
サポートの終了と削除(Chrome 62)
計画に役立つ Chrome 62 のサポート終了と削除の概要。このバージョンでは、セキュリティの改善、Webkit のサポート終了などについて説明しています。
メディアの更新(Chrome 62)
永続ライセンスと Widevine L1 を使用した Android のオフライン再生、動画トラックの最適化、デバイスを回転させたときの動画フルスクリーンの自動表示、MS のライブ ストリームでのシーク可能な範囲のカスタマイズ、MSE 対応の MP4 形式の FLAC を利用できます。
Chrome 61 の新機能
Chrome 61 では JavaScript モジュールがネイティブでサポートされ、モジュラー JavaScript の記述方法が統一されました。navigator ドット共有を使用して、Android のネイティブ共有ダイアログをトリガーできるようになりました。また、WebUSB API もリリースされ、ユーザーが許可された USB デバイスにウェブアプリからアクセスできるようになりました。ほかにも多数あります。
サポートの終了と削除(Chrome 61)
計画に役立つ Chrome 61 のサポート終了と削除の概要。このバージョンでは、セキュリティの改善、Webkit のサポート終了などについて説明しています。
Chrome 60 の新機能
Chrome 60 では、Paint Timings API を使用して、First Paint の時間と First Contentful Paint の時間を測定できるようになりました。フォントのレンダリング方法は font-display CSS プロパティで制御できます。WebAssembly がリリースされ、さらに多くの機能が実装されました。
配置された入力イベント
スムーズなユーザー エクスペリエンスを提供することは、ウェブにとって重要です。Google では、Chrome の過去数回のリリースにおいて、こうしたデバイス全体で入力レイテンシを短縮してきました。
Chrome 60 でのサポートの終了と削除
計画に役立つ Chrome 60 のサポート終了と削除の概要。このバージョンでは、セキュリティの改善、Webkit のサポート終了などについて説明しています。
Chrome 59 の新機能
Chrome 59 では、ユーザー インターフェースや周辺機器を使わずに、自動化された環境で Chrome を実行できます。macOS の通知はネイティブ macOS の通知システムから直接表示されます。また、画像キャプチャ API を使用して最大解像度の写真をキャプチャするなど、さまざまな機能が追加されました。
Chrome 58 の新機能
Chrome 58 では、プログレッシブ ウェブアプリでの全画面表示による没入感が増しています。IndexedDB 2.0 がサポートされるようになりました。また、サンドボックス化された iFrame のオプションが増えました。ピート レページが、Chrome 58 の新しいデベロッパー機能の使い方や使い方を詳しく説明します。
JavaScript ダイアログに関する Chromium ポリシー
同期型のアプリモーダルの JavaScript ダイアログは、残念ながらユーザーに害を及ぼすためによく使用されています。そのため、Chromium チームでは JavaScript ダイアログを使用しないことを強くおすすめします。
メディアの更新(Chrome 58)
メディア コントロールのカスタマイズ、ホーム画面に追加されたプログレッシブ ウェブアプリの自動再生、非表示になっているときはミュートされた動画の自動再生の一時停止、色域のメディアクエリなどを利用できます。
(メディアの)ストリームを横断します
現在、Chrome で Media Source Extensions(MSE)を使用する場合、暗号化されたストリームとクリアされたストリームを切り替えることはできません。Chrome 58 以降では、この点がすべて変更されています。
Chrome 57 の新機能
Chrome 57 では、display: grid を使用したグリッドベースのレイアウト、メディア セッション API を使用してロック画面と再生中のメディアに関する情報を含む通知などをカスタマイズできるようになりました。ピート レページが、Chrome 57 の新しいデベロッパー機能の使い方や使い方を詳しく説明します。
Payment Request API の変更点
Chrome 56 と 57 では、仕様の変更に伴い、Payment Request API にいくつかの変更が加えられています。概要をご確認のうえ、ご自身で実装に変更を加えてください。
Chrome 56 の新機能
Chrome 56 では、ウェブアプリは Web Bluetooth API を使用して付近の Bluetooth Low Energy デバイスと通信できるようになりました。CSS の位置は固定され、元の位置に戻ります。これにより、ビューポートの上部に固定されるまで通常どおりスクロールする要素を簡単に作成できます。また、HTML5 by Default がすべてのユーザーに有効になっています。
デフォルトでタップ スクロールを高速にする
スクロールの応答性は、モバイルのウェブサイトに対するユーザー エンゲージメントにとって重要ですが、タッチイベント リスナーはスクロールのパフォーマンスに深刻な問題を引き起こすことがよくあります。ユーザーとデベロッパーがデフォルトで高速に動作できるよう Google がどのように支援しているかをご覧ください。
Chrome DevTools - JavaScript CPU プロファイリング(Chrome 58)
Chrome 58 では "JavaScript CPU プロファイルを記録" が変更されました。
Chrome 55 の新機能
Chrome 55 では、async と await を使用して、Promise ベースのコードを同期のように記述できます。PointerEvents は、すべての入力イベントを処理する統一された方法を提供します。永続ストレージはオリジン トライアルを卒業する。
Chrome で安全でないという警告を回避する
Chrome ではまもなく、パスワードやクレジット カードの入力欄を含む安全でないページについて、URL バーに「保護されていません」というマークが表示されます。
キャンバス、動画、またはオーディオ要素から MediaStream をキャプチャする
captureStream() メソッドを使用すると、Android およびデスクトップのキャンバス、音声、または動画要素から MediaStream をキャプチャできます。
Chrome 54 の新機能
Chrome 54 では、カスタム要素 v1 を使用して独自のカスタム HTML タグを作成し、再利用可能なウェブ コンポーネントを作成できるようになりました。BroadcastChannel API を使用すれば、同じオリジンの開いているウィンドウやタブ間でメッセージを簡単に送信できるようになります。Android ではメディア エクスペリエンスが向上し、外部取得もオリジン トライアルとしてご利用いただけるようになりました。
CacheQueryOptions が Chrome 54 で到着
CacheQueryOptions の全セットがサポートされているため、必要なキャッシュに保存されているレスポンスを簡単に見つけることができます。
BroadcastChannel API - ウェブ用のメッセージバス
BroadcastChannel API は、ウィンドウ、タブ、iframe、ワーカーの間の単純な Pub/Sub に使用できます。
Web Animations API がクロスブラウザのマイルストーンを達成
Chrome に Firefox 48 が加わり、Web Animations API のネイティブ実装がリリースされます。
ウェブプッシュの相互運用性の成功事例
Chrome の最新版では、ウェブプッシュにいくつかの更新が行われています。GCM でウェブ プッシュ プロトコルがサポートされるようになりました。VAPID を使用している場合は、Google デベロッパー プロジェクトに登録する必要はなく、FCM エンドポイントが提供されます。
モバイルでのミュート状態での自動再生 - キャンバスのハッキングやアニメーション GIF は不要です。
Chrome 53 以降、Android で動画のミュートされた自動再生がサポートされるようになりました。これまで、動画要素で再生を開始するにはユーザーの操作が必要でした。
プログレッシブ ウェブアプリをデバッグする
[Application] パネルを使用して、ウェブアプリ マニフェスト、Service Worker、Service Worker のキャッシュを検査、変更、デバッグします。
WebRTC 向け ECDSA - セキュリティ、プライバシー、パフォーマンスの向上
Chrome バージョン 52 以降では、デフォルトで ECDSA が使用されます。ECDSA は WebRTC 証明書の鍵生成の効率的で安全なアルゴリズムです。また、RTCCertificates を IndexedDB で保存できるようになりました。
Chrome for Android での Service Worker のキャッシュ保存、PlaybackRate、音声と動画の blob URL
バージョン 52 以降の Android Chrome では、基盤となるプラットフォームの実装に依存するのではなく、デスクトップ Chrome と同じメディア スタックを使用します。これにより、Service Worker のメディア キャッシュ保存、可変再生レート、Android での blob URL、API 間の MediaStream 受け渡し、容易なクロス プラットフォーム デバッグが可能になります。
パフォーマンス オブザーバー - パフォーマンス データに効率的にアクセス
Chrome 52 の新機能である Performance Observer のインターフェースでは、パフォーマンスのタイムライン データに、より効率的にイベント単位でアクセスできます。
パッシブ イベント リスナーによるスクロール パフォーマンスの改善
Chrome 51 の新機能であるパッシブ イベント リスナーを使用すると、スクロールのパフォーマンスが大幅に向上する可能性があります。
保護されていないオリジンから Geolocation API を削除(Chrome 50)
Chrome バージョン 50 以降、保護されていない接続を介した HTML5 Geolocation API のサポートを終了しました。
認証情報管理 API を使用したログインフローの効率化
高度なユーザー エクスペリエンスを提供するには、ユーザーがウェブサイトで認証できるようにすることが重要です。しかし、エンドユーザーにとって、パスワードの作成、記憶、入力は面倒な作業になりがちです(特にモバイル デバイスの場合)。
Intel Edison を使用したウェブ対応 IoT デバイスの作成
最近ではモノのインターネットが身近な存在ですが、ウェブブラウザからアクセスする IoT デバイスを作成できるとしたらどうでしょうか。この記事では、Intel® Edison Arduino ブレイクアウト ボード上で動作する、フィジカル ウェブ、ウェブ Bluetooth、Node.js を使用してこれを行う方法について説明します。
Chrome 50 でデバイスの向きが変更されます
DeviceOrientationEvent では相対角度が使用され、新しい DeviceOrientationAbsoluteEvent が追加されました。
フォーカス管理の悩みを解消
「シーケンシャル フォーカス ナビゲーション開始ポイント」機能は、フォーカスされたエリアがないときにシーケンシャル フォーカス ナビゲーション([Tab] または [Shift-Tab])でフォーカス可能な要素の検索を開始する場所を定義します。特に、リンクのスキップやドキュメント内のフォーカスの管理などのユーザー補助機能に役立ちます。
Media Source API - メディア セグメントが付加順に自動でシームレスに再生される
Media Source API を使用すると、JavaScript で再生用のメディア ストリームを作成できます。Chrome 50 以降では、SourceBuffer シーケンス モードを使用して、メディア セグメントを追加の順序で、ギャップなしにタイムラインで自動的に再配置できるようになりました。
link rel='preload' を使ってリソースの優先順位を付ける
Chrome 50 では rel='preload' のサポートを追加し、rel='subresource' のサポートを終了しました。
リモート デバッグ、授業、深夜の独自ショーなど、
刷新された [デバイスの検査] UI のすべてを学び、修正されたスタイルパネルでクラスを簡単に切り替えたり、DevTools Tonight のパイロット プログラムの様子をご覧ください。
DevTools がダークに、@keyframe の編集、よりスマートなオートコンプリートが使用可能に
DevTools でよりスマートなコンソール オートコンプリートを使用して入力を減らす方法、[Styles] ペインで直接 @keyframe ルールを編集する方法、CSS カスタム変数の活用方法、ダークサイドに参加する方法について学びます。
ES2015 プロキシの概要
ES2015 プロキシ(Chrome 49 以降)は、介入 API を備えた JavaScript を提供します。これにより、ターゲット オブジェクトに対するすべてのオペレーションをトラップまたはインターセプトし、このターゲットの動作を変更できます。
font-display によるフォント パフォーマンスの制御
@font-face 用の新しいフォント表示記述子により、デベロッパーはウェブフォントをどのようにレンダリング(またはフォールバック)するかを、読み込みにかかる時間に応じて決定できます。
CSS 変数 - メリット
Chrome 49 で CSS 変数(より正確には「CSS カスタム プロパティ」)が導入されます。これは、CSS の繰り返しを減らすためだけでなく、テーマの切り替えや、将来的な CSS 機能の拡張/ポリフィルといったランタイムで効果を発揮する場合にも役立ちます。
MediaRecorder で音声と動画を記録する
MediaRecorder API を使用すると、ウェブアプリから音声と動画を記録できます。この機能は現在 Firefox、Chrome for Android、およびデスクトップでご利用いただけます。
VP9 が WebRTC で利用可能に
パソコン版 Chrome 48 および Android 版 Chrome 48 以降では、WebRTC を使用したビデオ通話用のビデオ コーデックとして VP9 がオプションになります。
Android 版 Chrome 用 Google Cast
Android 版 Chrome で、Presentation API と Cast Web SDK を使用してモバイルサイトを Google Cast デバイスに表示できるようになりました。
バックグラウンド同期の導入
バックグラウンド同期は、ユーザーの接続が安定するまでアクションを延期できる新しいウェブ API です。これは、ユーザーが送信したいものがすべて実際に送信されるようにする場合に便利です。
DevTools Digest(CDS Edition): 将来像と RAIL プロファイリング
効率化された新しい Device Mode の常時稼働により、DevTools のモバイル ファースト化について説明します。カラーボタンを使ってセレクタに色を簡単に追加したり、DevTools に近日追加される機能を確認したりできます。
Application Shell アーキテクチャによるウェブアプリの即時読み込み
Application Shell アーキテクチャは、さまざまなテクノロジーを活用してプログレッシブ ウェブアプリを構築するための手法です。
DevTools ダイジェスト - 効率的な要素編集、Service Worker のデバッグ、マテリアル デザイン シェード
DOM パネルの新しいコンテキスト メニューを使用して、ノードを効率的に編集できます。[リソース] パネルから直接 Service Worker をデバッグできます。カラー選択ツールですべてのマテリアル デザイン シェードから選択できます。JS ライブラリのブラックボックス化が簡単に。
DevTools ダイジェスト - タブの並べ替え、Console on 2、フレームワーク イベント リスナー
DevTools のタブを好みに合わせて並べ替え、フレームワーク イベントがバインドされた正確な場所を確認します。
JavaScript のスニペットを実行する
スニペットは、Chrome DevTools の [ソース] パネルで作成および実行できる小さなスクリプトです。どのページからでもアクセスして実行できます。スニペットを実行すると、現在開いているページのコンテキストから実行されます。
EME ロガー拡張機能
EME Logger は、Encrypted Media Extensions(EME)のイベントと呼び出しを DevTools コンソールに記録する Chrome 拡張機能です。
DevTools ダイジェスト - タイムラインの詳細、カラーパレットなどを集約
タイムラインの集計詳細でパフォーマンスの問題を引き起こすサードパーティ スクリプト、新しいカラーパレットで一貫した色を選択する方法などをご確認ください。
プラグイン コンテンツでのポスター画像の使用
Chrome でオブジェクト要素にカスタムのポスター画像を追加できるようになりました。これにより、Flash などのプラグインの読み込みのパフォーマンスが向上します。
DevTools の新しいホーム
developers.google.com/web/tools/chrome-devtools という新しいホーム画面で、新しいチュートリアルやヒントをご覧いただけます。
MediaStream のサポート終了
MediaStream API は、同期された音声または動画のストリームを表します。MediaStream.ended、MediaStream.label、MediaStream.stop() が非推奨になりました。代わりに MediaStream.active、MediaStreamTrack.label、MediaStreamTrack.stop() を使用してください。
Service Worker でのパフォーマンスを測定する
Service Worker でリクエストのパフォーマンスを測定できない場合、パフォーマンスの向上をどう表現できるでしょうか。そこで、Chrome の最近の変更内容をご紹介します。
Android 版 Chrome でのメディア再生通知
ウェブページで音声または動画を再生しているときに、通知トレイとロック画面にページタイトルを示す通知と再生/一時停止ボタンが表示されます。この通知を使用して、再生を一時停止/再開したり、メディアを再生しているページに戻ることができます。
オーディオ用 Media Source Extensions
Media Source Extensions(MSE)は、HTML5 の音声要素と動画要素向けの拡張バッファリングと再生コントロールを提供します。もともと Dynamic Adaptive Streaming over HTTP(DASH)ベースの動画プレーヤーをサポートするために開発されましたが、MSE はオーディオ、特にギャップレス再生に使用できます。
コンソール パネルからイベントを迅速にモニタリング
コマンドライン API のメソッド monitorEvents(object [, events]) を使用して、オブジェクトにディスパッチされたすべてのイベントをログに記録できます。
ハードウェア デコードを備えた高性能な動画
ハードウェア動画のサポートにより、HTML5 動画だけでなくプラグインでも効率的なデコードが可能になります。Flash ユーザーは、古いスタイルの Video から StageVideo オブジェクトに切り替える必要があります。
コンソール パネルからイベントを迅速にモニタリング
コマンドライン API のメソッド monitorEvents(object [, events]) を使用して、オブジェクトにディスパッチされたすべてのイベントをログに記録できます。
タイムライン イベントのリファレンス
タイムライン イベント モードでは、記録中にトリガーされたすべてのイベントが表示されます。タイムライン イベントのリファレンスで、各タイムライン イベントのタイプの詳細を確認してください。
他のブラウザのエミュレートとテスト
仕事は Chrome と Android でサイトが適切に動作するかどうかを確認することで終わります。Device Mode は iPhone などの他のさまざまなデバイスをシミュレートできますが、エミュレーションについては、他のブラウザ ソリューションを確認することをおすすめします。
DevTools のタイムライン - 詳細を説明します
Chrome DevTools の [タイムライン] パネルがアップグレードされ、サイトのランタイム パフォーマンスをより詳しく把握できるようになりました。
ネイティブ アプリのインストール プロンプト
ネイティブ アプリ インストール バナーを使用すると、ユーザーがブラウザを離れることなく、アプリストアからデバイスにネイティブ アプリを迅速かつシームレスにインストールできます。
デベロッパーからのフィードバックが必要 - Frame Timing API
現在、実際の 1 秒あたりのフレーム数を測定するための新しい API の開発が進行中ですが、皆様のフィードバックが必要です。
精密なタッチ操作で正確な操作が可能
画面密度の変化に対応するために、Chrome で TouchEvents が整数ではなく浮動小数点値を返すように変更されました。これにより、遅いジェスチャーでも詳細なフィードバックが得られます。
Encoding API を使用した ArrayBuffer から文字列への変換を容易に
ネイティブの Encoding API を使用すると、未加工のバイナリデータと JavaScript 文字列を簡単に変換できます。
Chrome Dev で IndexedDB の Blob サポートを開始
Chrome で待望の機能である IndexedDB に対する Blob のサポートが Chrome Dev でリリースされました。
ウェブ アニメーション - element.animate() を Chrome 36 で利用可能に
Web Animations は、ウェブ プラットフォームでのアニメーションと同期をサポートするためのモデルを定義します。element.animate() は、これらのピースのうち Chrome に最初に導入されるものです。
互換性が向上し、スムーズなタッチ操作を実現
タッチに反応してスムーズにスクロールするモバイル ウェブアプリが必要です。開発は簡単であるべきですが、残念ながら、スクロール中にモバイル ウェブブラウザがタッチイベントにどのように反応するかについては、[TouchEvent](https://www.w3.org/TR/touch-events/) の仕様の実装の詳細として残されています。
Apache Cordova を使用してモバイルで Chrome アプリを実行する
Apache Cordova を使用して Android デバイスや iOS デバイスで動作する Chrome アプリを設定する方法についてのガイドです。
Chrome DevTools を使用して非同期 JavaScript をデバッグする
JavaScript を独自たらしめている強力な機能の 1 つが、コールバック関数を介して非同期で動作する機能です。非同期コールバックを割り当てると、イベントドリブン コードを記述できますが、JavaScript がリニアに実行されないため、バグの追跡が困難になります。 幸い、Chrome DevTools では、非同期 JavaScript コールバックの 完全な コールスタックを確認できます。 DevTools
Chrome Dev Summit - オープン ウェブ プラットフォームの概要
Open Web Platform の機能は、かつてないスピードで進化しています。Chrome Dev Summit では、プラットフォーム向けに Blink、セキュリティ、メディアを改善する取り組みについてお話ししました。
Chrome Dev Summit - Polymer の宣言型、カプセル化、再利用可能なコンポーネント
Polymer は、ウェブ コンポーネントの未来の未来を築く入り口としての役割を果たします。Chrome Dev Summit でウェブ コンポーネントと Polymer について詳しく知る
Chrome Dev Summit - モバイルの概要
これは Chrome Dev Summit のレポートのパート 1 です。これまでモバイルとクロスデバイス開発に重点が置かれていたため、本編からスタートします。
blink の新しいウェブ アニメーション エンジンで CSS アニメーションと遷移を制御
CSS のアニメーションと遷移を強化する Web Animations 1.0 の実装が Blink に導入されました。
Chrome DevTools 11 月のダイジェスト
Chrome DevTools は急速に進化しています。今回は、いくつかのコンポーネントに導入された新機能と改善点についてお知らせします。具体的には、UI の変更、高解像度 JS プロファイリング、Workspaces の新機能について説明します。 CPU プロファイリング は、JavaScript の効率を確認するのに非常に便利な機能です。今年の夏に、従来のプロファイル ビューに加えて、ページの JavaScript 処理の経時的な変化を視覚的に示す 炎グラフ
ウェブオーディオのライブ音声入力 - Android で利用可能に
Chrome for Android(v31.0.1650)で、Web Audio API を介した音声入力のサポートを開始しました。
DevTools での回答 - フォントは何でしょうか?
テキストのレンダリングにどのフォントが実際に使用されているのか疑問に思ったことはありませんか?Chrome DevTools ですべてがわかるので、もう心配する必要はありません。
Chrome DevTools の革命(2013 年)
ウェブ アプリケーションの複雑さと機能が増加するにつれ、Chrome DevTools も進化してきました。Paul Irish による Google I/O 2013 の講演「 Chrome DevTools Revolutions 2013 」のまとめでは、ウェブ アプリケーションの構築とテスト方法に革命をもたらす最新機能をご紹介します。 ポールの講演をご覧いただけなかった場合は、上記の動画をご覧ください(どうぞ、お待ちしております)。または、新機能のまとめに直接進んでください。
WebRTC - RTCDataChannel デモ、API の変更、Chrome と Firefox の通信
WebRTC - RTCDataChannel デモ、API の変更、Chrome と Firefox の通信
OAuth2: Google でユーザーを認証する
Google People API、Chrome Identity API、OAuth2 を介してユーザーの Google コンタクトにアクセスする拡張機能を作成する詳細な手順。
OAuth 2.0: Google Cloud でユーザーを認証
Google People API、Chrome Identity API、OAuth2 を介してユーザーの Google コンタクトにアクセスする拡張機能を作成する詳細な手順。
Chrome Canary 版データリストの提供
「datalist」を使用すると、ユーザーが選択する必要がある検索結果候補のリストをアプリで定義できます。リストからオプションを選択するか、自由形式のテキストを入力します。
DOM パフォーマンスが大幅に向上 - WebKit の innerHTML は 240% 高速になりました
Chrome エンジニアの原健太氏は、WebKit 内で 7 つのコードを最適化し、Safari(JavaScriptCore)と Chrome(V8)のパフォーマンスを向上させました。
HTML5 FileSystem API を使用してページ全体をオフラインにする
FileSystem API を使用すると、プログラムによってローカル(サンドボックス化された)ファイル システムにファイルとフォルダ階層を保存し、必要に応じて個々のリソースを追加、更新、削除できます
JavaScript ソースマップの概要
クライアントサイド コードを結合して圧縮した後でも、パフォーマンスに影響を与えることなく、コードの可読性と、さらに重要なデバッグ機能を維持したいと思ったことはありませんか? ソースマップ を使えば、その問題を解決できます。 ソースマップは、結合または圧縮されたファイルをビルド前状態にマッピングする方法です。本番環境用にビルドするときに、JavaScript ファイルの圧縮と結合とともに、元のファイルに関する情報を保持するソースマップが生成されます。生成された JavaScript
SwiftShader が Chrome にソフトウェア 3D レンダリングを導入
SwiftShader は、Chrome 18 で使用されるソフトウェア 3D レンダラです。これにより、拒否リストに入っている GPU でも CSS 3D と WebGL を使用できます。
Gmail ですべての mailto を処理する - registerProtocolHandler を使用するリンク
navigator.registerProtocolHandler() を使用すると、すべての mailto リンクに対して Gmail をデフォルトのメール クライアントとして設定できます。
Chrome for Android - モバイルウェブの高速化
Chrome for Android(ベータ版)は、Chromium オープンソース プロジェクトのベースであり、Chrome デベロッパーが慣れ親しんでいる最新の HTML5 機能の多くが組み込まれています。
HTML5 オーディオと Web Audio API は BFF
createMediaElementSource() を使用すると、HTML5 と Web Audio API の可視化、フィルタ、処理能力を組み合わせることができます。
同期 XHR の廃止
ご案内: XMLHttpRequest2 の仕様は最近、XMLHttpRequest.responseType が設定されているときに同期リクエストの送信を禁止するように変更されました。
動画プレーヤーのサンプルのご紹介
Video Player Sample は、60 Minutes アプリや RedBull.tv アプリと同じアーキテクチャを使用して構築されたオープンソースの動画プレーヤー ウェブアプリです。
WebKit への CSS フィルタ エフェクトの適用
Adobe は、この素晴らしいテクノロジーを CSS にもたらすべく懸命に取り組んできました。具体的には、WebKit が実装を開始した CSS Filter Effects 1.0 です。
転送可能なオブジェクト - 超高速
転送可能なオブジェクトを使用すると、データはあるコンテキストから別のコンテキストに転送されます。ゼロコピーであるため、Worker にデータを送信するパフォーマンスが大幅に向上します。
MediaSource API を使用して動画をストリーミングする
MediaSource API は `HTMLMediaElement` を拡張し、JavaScript が再生用のメディア ストリームを生成できるようにします。
コンテンツでの説明 - Fullscreen API
Fullscreen API を使用すると、ウェブアプリはページ上のコンテンツを JavaScript からプログラマティックに指示し、ブラウザの全画面表示モードに移行させることができます。
HTML5 ゲーム デベロッパー向け New Game Conference のクーポン
New Game で HTML5 と WebGL のゲームの書き方を学んで、TPS レポートの完成を控えてほしい。
File System API でローカル ファイルをシークする
File オブジェクトがある場合は、ファイル全体をメモリに読み込まなくても、そのオブジェクト内をシークしてチャンクを読み取ることができます。
HTML5 ゲーム デベロッパー向けカンファレンス、New Game のお知らせ
2011 年 11 月 1 日~ 2 日にカリフォルニア州サンフランシスコで開催される New Game へのご参加をお待ちしております。
updates.html5rocks.com へようこそ
デベロッパーの皆様に情報を速やかにお届けするため、この「HTML5 更新ストリーム」は、共有する価値のある魅力的なコンテンツを紹介することを目的としています。
ウェブアプリの速度を監査する
高速なウェブアプリは成功するウェブアプリです。デベロッパーとしての作業は、アプリの実際のパフォーマンスとユーザーが感じるパフォーマンスの両方を最適化するまで完了しません。これは、ユーザーに優れたエクスペリエンスを提供するために必要なことであるだけでなく、最適化には実用的で重要なビジネス上の理由もあります。Amazon では、サイトのレイテンシが 100 ミリ秒長くなるごとに売り上げが 1% 減少し、Google では、遅延が 0.5 秒長くなるごとにトラフィックが 20%
Chrome デベロッパー ツールの概要(パート 1)
Google Chrome は、ウェブ上のアプリケーションの可能性を切り開く、豊かで強力なウェブブラウザです。Google は、エンドユーザーに非常に高速で安定した、機能豊富なブラウジング エクスペリエンスを提供できるよう取り組んできました。また、デベロッパーの皆様が Chrome を快適にご利用いただけるよう、Google はさまざまな取り組みを行っています。Chrome と Safari にバンドルされているデベロッパー ツールを使用すると、ウェブ
Use the Chrome Web Store Publish API
How to programmatically create, update, and publish items in the Chrome Web Store.