文字起こし · CC BY 3.0

Chrome Dev Summit 2021 | 基調講演：Chromeの新機能

このページのタイトル、字幕、要約、読書メモは保存済みの AI 翻訳です。誤りが含まれる場合があります。タイムスタンプは原文と同じです。原文の字幕を開き、元の動画と照合できます。

Chrome Dev Summit 2021 基調講演：Compat 2021、Privacy SandboxとUser-Agent削減、ウェブ上のPhotoshop、Core Web Vitals、コンテナクエリ。

Chrome for Developers · 公開日 2021-11-03 · 47分 · 英語 · ライセンス：CC BY 3.0 · ソース：YouTubeで視聴

文字起こしの出典：YouTubeに作成者がアップロードしたキャプション。AIによる句読点の付加はVidleafによるもので、元の文言とタイムスタンプのアンカーは保持されています。元の文字起こしは以下でご覧いただけます。

AI生成の要約

このChrome Dev Summit 2021のセッションでは、クロスブラウザ互換性に関する開発者からのフィードバックに導かれながら、高速で安全かつ強力なウェブに向けたChromeの取り組みを振り返ります。Compat 2021は、Web Platform Testsを用いてChrome、Edge、Firefox、Safariの開発ビルド間の互換性を採点しており、作業は続いているものの、スコアは三月以降大幅に改善しています。プライバシーに関しては、Privacy SandboxがサードパーティCookieのような汎用メカニズムを目的特化型APIに置き換えます。FLEDGEは100を超える組織をW3C会議に、そして200を超えるオンライン議論スレッドを集め、その初期バージョンのテストがChromeでフラグの背後で始まっています。User-Agent Client Hintsは規模拡大の準備が整い、Chromeは2022四月からUser-Agent文字列の粒度を減らす計画で、2023三月までオプトアウトが可能です。このセッションではまた、クリエイティブ、コミュニケーション、ソーシャル製品にわたるウェブ機能とPWAを概観し、パフォーマンス測定、新しいUXメトリクス、RenderingNG、CSSの更新、accent-color、ダークモードを扱います。これには、単一のPixel 6デバイスでダークテーマが11%少ない電力を使用したという実験室研究も含まれます。

文字起こしから生成されました。リンクされた箇所を元の動画と照合して確認してください。

タイムスタンプ付きの章の要約

Chrome Dev Summit 2021：ウェブの進化とクロスブラウザ互換性

[0:24] Benが視聴者をバーチャルなChrome Dev Summit 2021へ歓迎し、チームの過去一年のハイライトを紹介します。
[0:39] Chromeの2008ビジョンは、ウェブがリンクを通じて即座に利用可能で、デバイス間で高速、安全、強力なアプリケーションを可能にするというものでした。
[0:53] このビジョンは、人々が日常的に物事を成し遂げるためにウェブとブラウザにますます依存するようになったパンデミック期間中により関連性が高まりました。
[1:07] ウェブの継続的な成功は、技術の進歩と期待の変化に合わせて進化し続けてきたからこそ可能なのです。
[1:19] Googleは透明性とオープン性を追求し、開発者、ユーザー、そしてエコシステムの他の人々と協力しています。
[1:43] 調査や個別の会話を通じた開発者からのフィードバックは、クロスブラウザ互換性の重要性を一貫して強調しています。
[2:04] 過去の取り組みには、GitHub上のWeb Platform Testプロジェクトや、MozillaのDeveloper Networkのドキュメントに貢献するOpen Web Docsイニシアチブが含まれます。
[2:25] 今年は、CSSに関連する五つの主要領域における互換性の改善に焦点を当てたクロスブラウザの取り組みであるCompat 2021が加わります。
[2:41] Compat 2021チームは、Web Platform Testプロジェクトを使用して、Chrome、Edge、Firefox、Safariの最新開発ビルド間の互換性スコアを定量化しました。
[2:58] 三月以降、大幅な改善が見られていますが、作業は完了しておらず、これらの領域およびその他の重要な領域で推進が続けられます。

Privacy SandboxとサードパーティCookieの段階的廃止

[3:09] ウェブは、グローバルなウェブエコシステムにとって重要な機能を維持しながら、サードパーティのトラッキングを削減しようとプライバシーに関して進化しています。
[3:30] 人々はオンライン活動を含む自分の情報を管理すべきであり、プライバシーへの懸念がオンラインでの選択をますます左右しています。
[3:46] 世界中の規制がプライバシー要件を急速に強化していますが、多くの機能がプライバシーを考慮せずに設計されたサードパーティCookieやクロスサイトトラッキングメカニズムに依存しているため、開発者はそれらを満たすのに苦労しています。
[4:12] Privacy Sandboxは、広告、不正検出、アイデンティティ、デバイスカスタマイズコンテンツ向けの目的特化型APIを含め、ウェブコミュニティや業界関係者と協力して新しいプライバシー保護技術を開発しています。
[4:50] 目的特化型APIはサードパーティCookieのような汎用技術を置き換え、ブラウザが適切なプライバシー保護を適用し、ユースケースごとにより有用なコントロールを人々に提供できるようにします。
[5:26] 新しいAPIが導入された後、ChromeがサードパーティCookieを安全に段階的廃止する前に、開発者はそれらを採用する時間を得られます。一方、クロスサイトトラッキングが隠れた方法に移行しないよう、他のトラッキングを緩和する作業が続けられます。
[5:48] 進捗はprivacysandbox.comで共有されており、ビジョン、目標、概念、毎月更新されるタイムラインが説明されています。また、技術的詳細と実装ガイダンスについてはdeveloper.chrome.comのPrivacy Sandboxセクションで共有されています。
[7:06] 最初の開発段階は議論であり、誰でも提案し意見を述べることができます。数十のプライバシー保護提案がオンラインにあり、W3Cグループがライブ会話を主催しています。
[7:45] FLEDGEは、クロスサイトトラッキングなしの興味関心に基づく広告の提案であり、プライバシー擁護者や業界関係者の意見を取り入れながら、以前の二つの提案から発展したもので、100を超える組織をW3C会議に、200を超えるオンライン議論スレッドを集めました。
[8:18] FLEDGEの初期バージョンの開発者テストがChromeのフラグの背後で開始されており、すべての提案がこのような集中的なインキュベーション期間を経るわけではありません。

Privacy Sandbox APIのテストとUA-CHの起動

[8:41] いくつかの提案が開発者テストの準備ができており、2022にはさらに多くの提案が期待され、反復的な議論とテストのサイクルが続く可能性があります。
[9:01] Chromeのテストは通常、ローカル開発者テスト用のフラグの背後にある機能から始まり、このコードはしばしば新しいため問題が予想されます。
[9:15] オリジントライアルは限られた期間、限られたChromeユーザー集団で実行され、公開されており、オプトイン登録したすべての開発者が利用できます。
[9:36] この段階での成功は、開発者が実際に手を動かしてテストを行い、学んだことを進んで共有する意欲があるかどうかにかかっています。
[9:45] Yahoo! JapanはAttribution Reporting APIのテストに関する詳細な分析を公開し、コンバージョンレポートを配信するより良い方法の必要性を強調しました。その方法は現在追加されています。
[10:10] FLoCのOrigin Trialでは、CafeMediaなどの企業が分析と知見を公開し、他の人々が彼らの学んだことを見られるようにしました。
[10:36] Criteoは150チーム以上が参加するコンペティションを開催し、機械学習モデルをテストして、ノイズ挿入や集約といった差分プライバシーの概念が広告パフォーマンスにどのような影響を与える可能性があるかを評価しました。
[11:19] User-Agent Client Hintsは今年初めにChromeでローンチされ、ブラウザフィンガープリンティングのような隠れたトラッキングを削減するPrivacy Sandboxのワークストリームの一環として、規模を拡大する準備が整いました。
[11:54] Chromeは2022四月からUser-Agent文字列の情報の粒度を減らす計画で、User-Agent Client Hintsへの移行が必要になります。
[12:59] Origin Trialにより開発者は早期に短縮されたUA文字列へオプトインでき、より多くの時間を必要とする者は2023三月までUser-Agent文字列をそのまま使い続けることにオプトインできます。

ウェブの健全性と機能

[14:10] ウェブの継続的な健全性と成功は、今後数十年にわたる目標です。
[14:14] 次に取り上げるテーマはウェブの機能です。

ウェブの新機能とバーチャルへの移行

[14:20] ウェブは強力な新しい統合機能を獲得し、ウェブアプリがより多くのことをできるようにしました。
[14:25] Fuguプロジェクトはエコシステムと協力して、安全なファイルシステムアクセスやOSランチャーとの統合といった機能を実現しました。
[14:40] 開発者はこれらの新しいウェブ機能を魅力的な方法で活用しています。
[14:59] 多くの人が自宅にいて、その場所はここ数年でテクノロジー主導のハブへと変貌しました。
[15:18] バーチャルへの移行は、私たちの生活と働き方に深い影響を与えました。
[15:24] 動画と創作の世界では規範が大きく変わり、リアルタイムの編集、共有、コラボレーションが完全にバーチャルになりました。
[15:51] チームは、既存の体験をアップグレードしたり最先端のものを構築したりするための新しいウェブの力を解き放つために取り組んできました。
[16:01] 世界中のパートナーが、創造性、表現、コミュニケーション、エンターテインメントを可能にするウェブ体験を構築しており、Kapwingはその一例です。

Kapwingウェブ動画エディターの概要

[16:17] Kapwingは月間アクティブユーザーが三百万を超え、一日に100,000本の動画を処理する共同動画編集ツールです。
[16:32] Kapwingはウェブベースのコラボレーティブエディターで、主にゲーム配信者、ミュージシャン、YouTubeクリエイター、ミーマーなどのカジュアルなクリエイター向けに設計されています。
[16:41] また、FacebookやInstagramの広告など、ソーシャルコンテンツを簡単に制作する必要があるビジネスオーナーにとっても頼りになるリソースです。
[16:48] ユーザーは通常、動画のトリミング、音楽の追加、動画のサイズ変更といった特定のタスクを検索してKapwingを見つけ、アプリストアからダウンロードすることなくワンクリックで即座に実行できます。
[17:09] Kapwingは有料獲得に$0を費やしており、講演者はこの戦略がいかにうまく機能したかの証左だと述べています。
[17:15] 最初のクリックの後、ユーザーは無料テンプレートを探したり、無料のストック動画を追加したり、字幕を挿入して動画を文字起こししたり、BGMをアップロードしたりできます。
[17:27] ユーザーはデバイスやオペレーティングシステムに関係なく、共有をクリックしてリンクを送ることで、友人や同僚とコラボレーションできます。
[17:55] 高性能な編集には、IndexedDB、Web Sockets、Web Audio API、Media Recorder API、Web Workersを使用し、可能な限りネットワークを避けてコンテンツをクライアント上に置く必要があります。

KapwingのPWAとWeb APIの計画

[18:31] 動画からの背景除去は、メインスレッドのパフォーマンスに影響を与えることなく行われます。
[18:35] KapwingはPWAとして構築されているため、ユーザーが検索で見つけた後はインストール可能で、デスクトップから簡単に再起動できます。
[18:45] 将来的にKapwingは、フレーム描画を高速化するためにWeb Codecsを使用することに期待を寄せています。
[18:50] 彼らはより高度なアニメーションを可能にするためにWebGLを使用する計画です。
[18:54] 彼らはクリップからクリップへのよりシームレスなトランジションのためにMedia Source Extensionsを使用する計画です。
[18:58] これらのAPIはいずれも全く新しいものではありませんが、組み合わせることでユーザーがコラボレーションし、アイデアを素早く形にするのがずっと容易になります。
[19:09] Kapwingにとって、ウェブはより多くのユーザーにリーチして関与するための効率的な方法を提供します。

ZoomのPWAとウェブビデオ会議

[19:21] 講演者はKapwingを試すことを勧め、とても使いやすいと評しています。
[19:25] このセクションは、おなじみのウェブ機能であるビデオ会議に移ります。
[19:36] 2020年、Zoomはバーチャル懇親会、グループワークショップ、オンラインウェビナーにウェブアプリを使う人々の急増を経験しました。
[19:48] Zoomはこの機会を利用して、PWAでウェブ体験を改善し、ネイティブアプリとより遜色のない体験を提供しました。
[19:56] またPWAは、Zoomの数百万のChrome OSユーザーに、Chromeアプリに代わる強力な選択肢を提供しました。
[20:04] Zoomは動画のエンコードとデコードに新しいWebCodecs APIを使用しており、これによりパフォーマンスが向上し、高速でクリーンな動画でユーザー体験が強化されます。
[20:16] リンクキャプチャにより、メール内のZoomミーティングリンクをクリックすると、ブラウザタブではなくPWAで開くことが保証されます。
[20:25] Chrome OSユーザーの場合、管理設定により企業は従業員全体にPWAを簡単にインストールできます。
[20:34] PWAを公開して一か月後、Zoomでは16.9百万人の新規ユーザーがウェブ会議に参加し、前年同期比で七百万増加しました。
[20:44] WebRTCとFugu APIの発展により、以前は不可能だった音声・ビデオ通話の体験が今では利用可能になっています。

FaceTimeのウェブリンクとGoogle MeetのPWA

[20:53] AppleはFaceTimeリンクをウェブに導入し、AndroidやWindowsのユーザーがブラウザから通話に参加できるようにしました。
[21:02] 基調講演ではGoogle MeetのPWAが取り上げられました。
[21:06] 基調講演は複数のGoogle Meetのウェブ通話を通じて制作され、その後スタジオでリモート制作されました。
[21:19] MeetチームはWASM SIMDとWebGLを使用して、PWAにカスタム背景と明るさ調整を実装しました。

YouTube Premium PWAのオフライン機能

[21:27] 速度と動画・音声の品質が大幅に向上しました。
[21:40] YouTube Premiumは、広告なしの視聴、バックグラウンド再生、オフラインダウンロードを可能にする有料サブスクリプションです。
[21:50] ラップトップやハイブリッドデバイスでのオフライン視聴は、YouTube Premiumユーザーから最も要望の多かった機能の一つでした。
[21:58] これを実現するため、YouTubeは自社サイトをインストール可能なPWAにするために必要なすべてを追加しました。
[22:07] オフライン体験のために、サービスワーカー、キャッシュストレージ、IndexedDBを組み合わせて使用しています。
[22:15] Web Share APIを使用して、ユーザーがデバイス上の他のインストール済みアプリと動画リンクを共有できるようにしています。
[22:23] サービスワーカーのパフォーマンスを向上させるためにナビゲーションプリロードを使用しています。
[22:27] Chrome、Edge、OperaでYouTube Premiumユーザーがオフライン視聴用に動画をダウンロードできるようにする実験を実施しています。

TikTokのウェブ戦略とPWAの成果

[22:41] ショートフォーム動画はソーシャルとエンターテインメントの重要な要素であり、TikTokがその先頭を走っています。
[22:49] TikTokはウェブを、より多くのユーザーを獲得し満足させ続けるためのチャネルと見なしています。
[22:54] TikTokはマルチフォームファクターで摩擦のない体験の創出に注力しました。
[22:59] TikTokはWorkboxを使用して動画をプリフェッチし、動画の切り替え間の遅延を減らすことで、ウェブアプリのパフォーマンスを最適化しました。
[23:08] TikTokはPWAをデスクトップに拡張し、一度構築するだけでTikTokをあらゆるデバイスで利用できるようにしました。
[23:19] これらのモバイルとデスクトップの改善により、TikTokは検索からのトラフィックが10倍に向上したことを確認しました。

デスクトップウェブのイノベーションとAdobeとの提携

[23:27] デスクトップウェブはここ数年で画期的なイノベーションを遂げてきました。
[23:33] ユーザーは今や、即時の表現とコラボレーションを可能にする複雑なクリエイティビティと生産性のツールにアクセスできます。
[23:42] 学習や上司との会話から美しいものの制作まで、あらゆるユースケースに対応する強力なウェブアプリがあります。
[23:51] 続いて、Adobeとの約三年間にわたる継続的な強力なパートナーシップを経て、エキサイティングなニュースがあります。

Adobe Creative Cloudがウェブに登場

[23:59] Adobe Creative Cloudの多くの主力アプリがまもなくウェブに登場します。
[24:15] Adobeは、これらのコラボレーションがユーザー向けの体験を創出する新たな機会を開くことで、すべての開発者に利益をもたらすと考えています。
[24:57] ユーザーはPSDをクラウドに保存し、すべてのデバイスで単一のドキュメントを編集できるようになりました。
[25:05] ユーザーはクラウドPSDへのリンクを作成・共有し、共同編集者と共同編集し、レビューやコメントのためにウェブで共有できます。
[25:41] Photoshopは、数十年にわたるデスクトップ専用の使用とその後のiPadを経て、パブリックベータを通じてウェブブラウザでアクセスできるようになりました。
[25:56] Photoshop on Webベータでは、レビューとコメントのワークフローにアクセスでき、ユーザーは一部のパイロット編集機能を試すことができます。
[26:29] Web AssemblyはAdobeのコードベースの大部分をウェブに持ち込み、ゼロコストの例外処理によりパフォーマンスの低下を回避します。
[26:43] Canvas 2Dはカラーマネジメントに対応し、高忠実度の作業のためにsRGBとP3色空間をサポートするようになりました。
[26:56] Storage Foundation APIにより、ユーザーはサイズやレイヤー数に関係なくPSDで作業できます。
[27:18] Adobeはまた、Creative Cloud SpacesとCreative Cloud Canvasを発表しました。いずれもプライベートベータです。

Web VitalsとCore Web Vitals

[28:07] 講演者は、ハイライトを説明してくれたPam、Josh、Aanchalに感謝します。
[28:11] ウェブの進歩は一般に、年ごとに、一歩ずつ、反復の中で進みます。
[28:25] ウェブが新たな機能と能力を獲得するにつれ、開発者が最新のウェブプラットフォームから最高の結果を引き出せるよう支援することが重要なテーマです。
[28:36] Web Vitalsプログラムは開発者を支援する一つの方法であり、優れたウェブ体験を構成する要素に関する多くの研究の成果です。
[28:45] Core Web Vitalsでは、高品質なユーザー体験につながる多くの要因が検討され、大きな影響を持つ三つの定量化可能な指標が特定されました。
[28:56] その三つの指標とは、ユーザーがサイトの最も重要なコンテンツをどれだけ早く見られるか、ユーザーがどれだけ早くサイトと対話を始められるか、そしてサイトのレイアウトが時間経過に対してどれだけ安定しているかです。
[29:09] これらの指標を最適化しているウェブサイトは、一貫してより成功していることが判明しました。

Core Web Vitalsの進捗とAuroraイニシアチブ

[29:21] 優れたウェブサイトを構築するには、実際のユーザーの視点からそのパフォーマンスを理解する必要があります。
[29:27] Web Vitalsイニシアチブは、開発者とサイト所有者に、すべてのユーザーに優れた体験を提供するための指標、ツール、ガイダンスを提供します。
[29:38] Core Web Vitalsは、読み込みパフォーマンス、読み込み中の入力応答性、コンテンツの視覚的安定性をカバーする三つの指標のセットです。
[30:04] 一年前と比べて、Chromeにおける20%多いページビューが現在、推奨されるCore Web Vitalsのしきい値を完全に満たしています。
[30:11] これらのしきい値を満たすChromeでのページ訪問の合計割合は現在60%です。
[30:33] 新しいCore Web Vitalsテクノロジーレポートによると、多くのプラットフォームが急激に改善しており、一部は前年比200%倍以上の改善を達成し、DudaやJimdoなどのリーダーは良好なスコアを持つオリジンの50%を超えています。
[31:06] AuroraイニシアチブはNext.jsやAngularを含む人気のJavaScriptフレームワークと連携しており、一年足らずで、良好なCore Web Vitalsスコアを持つモバイルのNext.jsとAngularのOriginはそれぞれ91%と111%増加しました。
[31:35] Core Web Vitalsの最適化は、日常の開発者にとって依然として難しい場合があります。

パフォーマンスツールのアップデート：PageSpeed、Lighthouse、Recorder

[31:46] PageSpeed InsightsのUIは、プロセスをより簡単にするために全面的に刷新されました。
[31:53] PageSpeed Insightsは、Chrome UX Reportからの実ユーザーデータを表示し、合成ラボ負荷に基づく提案を含むLighthouseレポートを実行します。
[32:05] 新しいUIにより、どのデータが実ユーザーからのフィールドデータで、どれがLighthouseレポートからのラボデータかがより明確になります。
[32:13] Core Web Vitalのスコアは実ユーザーのフィールドデータで確認すべきですが、Lighthouseレポートは実行可能な改善提案の良い出発点です。
[32:25] これまでのツールには盲点がありました。ページの読み込み時のみを評価し、スクロールやクリックなどのユーザーフローは評価していませんでした。
[32:44] チェックアウトフローの例では、ユーザーが複数のページにわたって多くの操作を行いますが、以前はページごとにしか測定できませんでした。
[33:09] Lighthouseはユーザーフローをサポートするようになり、ページナビゲーション、一定期間中のユーザーインタラクション、スナップショットについて個別のレポートを提供します。
[33:38] DevToolsの新しいRecorderパネルは、ユーザージャーニー全体を記録し、ナビゲーションやクリックなどの操作を表示し、Puppeteerスクリプトへのエクスポート、再生、パフォーマンストレースの測定ができます。
[34:16] Recorderパネルは現在プレビュー段階であり、チームは積極的に取り組んでいます。

新しいUXメトリクスとツール

[34:44] 優れたユーザー体験には既存の三つの領域以上のものが関わり、チームは現在の指標がまだ扱えていないギャップを埋めています。
[34:55] ウェブ上でのユーザー体験の測定方法を改善するため、二つの新しい実験的指標が導入され、フィードバックが求められています。
[35:06] 最初のメトリクスは全体的な入力応答性を測定し、最初の入力だけでなく、サイトへの訪問から離脱までのすべてのユーザー入力を対象に拡張します。
[35:22] イベントタイミングAPIが改善され、イベントのライフサイクル全体をより適切に監視し、複数のイベントをトリガーする複雑な入力を処理できるようになりました。
[35:34] 二つ目の指標はスクロールとアニメーションの滑らかさを測定し、ページがどれほど頻繁に、またどれほど深刻にカクついたりフリーズしたりするかを把握します。
[35:49] 両方のメトリクスはまだ進行中で、記事で現在の考え方が説明されています。フィードバックはメールで送信できます。
[36:20] PageSpeed InsightsはCore Web Vitalsのスコアを表示し、サイトのパフォーマンスを継続的に監視・最適化するための他のツールも利用できます。

Core Web Vitalsと高品質なウェブ体験

[36:43] スピーカーはHousseinに感謝します。
[36:44] スピーカーは、今後数年間でCore Web Vitalsがどのように進化するかを見るのを楽しみにしています。
[36:49] 高品質なウェブ体験には、測定と最適化だけでは不十分です。
[36:53] それには、舞台裏で働く情熱的なデザイナーと開発者が、魅力的なデジタルインターフェースを作り出すことが必要です。

RenderingNGとウェブUXの進化

[37:04] エンジニアのグループが、ChromiumのHTML、CSS、グラフィックスのサポートを再考し、RenderingNGと呼ばれる取り組みにつながりました。
[37:16] RenderingNGは、Chromiumのレンダリングエンジンの野心的なリファクタリングと説明されています。
[37:21] この作業は現在ほぼ完了しており、ウェブユーザー体験設計の大きな進化を可能にしています。
[37:32] 議論されたすべてのことはユーザー体験に帰着し、プライバシー、測定、次世代のウェブ機能がウェブのビジョンに向けて協働しています。
[37:44] 開発者には、そうした体験を構築するために必要なツールと機能が提供されます。

新しいレスポンシブとコンテナクエリ

[37:48] この講演では、UIスタイリングとDevToolsの今後のアップデートについて説明します。
[37:58] レスポンシブデザインはもはや、デスクトップとモバイルで見栄えよくすることだけではありません。
[38:04] 開発者は現在、コンポーネント駆動型アーキテクチャにおいて、パーソナライズされた好みに基づいてカスタマイズされたユーザー体験を作成できます。
[38:14] 「新しいレスポンシブ」には、ダークモードやprefers-reduced-motionなどのユーザー設定への対応、折りたたみデバイスなどの新しいフォームファクター、コンテナクエリを介した他のコンポーネントへの対応が含まれます。
[38:36] コンテナクエリはCSSワーキンググループとともに仕様化され、Chromeレンダリングエンジンの最近の変更によって実現しました。
[38:44] コンテナクエリの仕様では、親要素の幅にアクセスして子要素をスタイリングでき、クエリはネストしたり名前を付けたりできます。
[39:02] デモでは、商品カードのコンテナをクエリすることでレスポンシブな「カートに追加」ボタンが再スタイリングされ、中央揃えから左揃えに変わります。
[39:17] これは以前は、ページを大幅に遅くする重いスクリプトなしでは不可能でした。
[39:23] コンテナクエリのポリフィルがオープンソースコミュニティとともに構築されています。
[39:33] コンポーネントはグローバルなビューポートに依存するのではなく、レスポンシブスタイルをローカルに所有します。
[39:48] コンテナクエリはChrome Canaryでフラグの背後でテストできます。
[39:56] コンテナクエリを使ったデバッグとスタイリングのためのDevToolsサポートが提供され、コンテナを表示して適用されたスタイルをハイライトします。

新しいGridとFlexboxのDevTools

[40:17] Gridレイアウトツールでは、特定のグリッド線に名前を追加でき、Gridエリアのサイズが表示されるようになりました。
[40:24] FlexboxとGridの新しい動的ツールにより、さまざまなプロパティ値がページ上で何をするのかを確認できます。
[40:32] これらのツールにより、ボタンをクリックするだけでレイアウトルールを簡単に変更できます。
[40:36] 新しいDevToolsは、CSSレイアウトをより簡単に可視化して理解できるように設計されています。
[40:41] これにより、justifyとalignの違いを調べる時間が減り、新機能の構築に多くの時間を費やせるようになります。
[40:48] プロセスを簡素化する別の方法として、web.dev patternsが立ち上げられました。

UIパターンとレスポンシブデザインのコース

[40:53] ウェブプロジェクトで使用できる既製のUIパターンのコレクションが利用可能です。
[41:00] レイアウトパターンは、大きなフルページの見開きやカードセットから、カード自体のような小さなレイアウトまで多岐にわたります。
[41:10] すべてのパターンはCSS Grid、Flexbox、またはコンテナクエリを使用しており、これらのツールがいかに素早く習得できるかを示しています。
[41:20] GoogleはClearleftのJeremy Keithと提携し、web.devで無料の「Learn Responsive Design」コースを公開しました。
[41:31] このコースでは、テーマ設定、アートディレクション、国際化のための論理プロパティ、および設定クエリを扱います。
[41:39] コースの最初のいくつかのモジュールは本日web.dev/learn/designで公開され、残りは今後数週間で公開される予定です。
[41:46] 「Learn CSS」は、リスト、背景、トランジション、テキストとタイポグラフィ、メディアクエリなどを扱う六つの新しいモジュールで更新されています。
[42:10] チームはコンテナクエリに加えて、スコープ付きスタイルやカスケードレイヤーを含む新しいCSS機能に取り組んでいます。

新しいCSS APIと機能

[42:26] Scroll Timelineは、試用可能な新しいAPIです。
[42:32] これまでCSSアニメーションは時間ベースでしたが、Scroll Timelineでは代わりにスクロールベースのオフセットとタイミングを設定できます。
[42:44] これにより、ページを下または横にスクロールするにつれて要素をアニメーションさせることができます。
[42:50] Scroll Timelineは、Canaryの実験的なウェブプラットフォーム機能フラグを使用して試すことができます。
[42:56] CSSネスティングは最近、最初の公開ワーキングドラフトに到達しました。
[43:02] ネスティングは、人気のあるCSSプリプロセッサ機能をウェブにもたらし、よりクリーンな開発者体験を実現するシンタックスシュガーです。
[43:15] 最高のパフォーマンスを確保するため、三層より深くしないことを推奨しています。
[43:20] タイポグラフィ用のsize-adjustプロパティは、デフォルトフォントをウェブフォントに一致させることで、Core Web Vitalsのための累積レイアウトシフトを防ぐのに役立ちます。
[43:35] accent-colorは、フォームコントロール向けの一行のCSS機能としてChromiumとFirefoxの安定版に搭載されました。

ダークモードの利点と実装

[43:56] ダークモードは要望の多い人気機能であり、その影響がユーザーインターフェースにとどまらないため重視されています。
[44:05] ダークテーマは、OLEDデバイスにおいてライトテーマよりも測定可能なバッテリー寿命の節約を示しています。
[44:11] 単一のPixel 6デバイスを使用した実験室での調査では、明るさ60%において、OLEDスクリーンでダークテーマはライトテーマよりも11%消費電力が少なくなりました。
[44:25] Twitterが新しいプログレッシブウェブアプリの最初のプレビューを公開したとき、ユーザーはダークモードがどこにあるのかと尋ね、調査ではユーザーがダークモード、絵文字ピッカー、そしてさらなるダークモードを挙げました。
[44:45] ダークテーマを作成するには、CSSカスタムプロパティと、すべてのエバーグリーンブラウザでサポートされているprefers-color-schemeメディア機能を使用して、ユーザーの好みに基づいてテーマの色を切り替えます。
[45:04] Material Designは、影の代わりに明度で奥行きを調整することや、視覚的な振動を減らすために色の鮮やかさを調整することを含む、ダークテーマ構築のガイダンスを提供しています。
[45:19] Chromeは、細かいオプトアウト手段を備えた機械学習支援の自動ダークアルゴリズム機能に取り組んでおり、まだ初期開発段階です。
[45:36] 試すには、Chrome CanaryでDevToolsのRenderingパネルを開き、Auto Dark Mode Emulationを有効にします。

結びの言葉と参加方法

[45:50] 過去一年のウェブにおける多くの変化にもかかわらず、彼らはプラットフォームの未来についてかつてないほど楽観的であり続けています。
[46:01] 今後数年間、彼らはウェブをよりプライベートで強力なものにし、開発者に最高品質の体験のためのより良いツールとガイダンスを提供するために推進し続けます。
[46:17] ウェブが特別である理由の一つは、それがオープンで分散型のエコシステムであり、誰もがその未来を形作る手助けをする多くの方法を提供していることです。
[46:28] 人々は、Chromiumオープンソースプロジェクト、W3Cやその他の標準化団体を通じて、あるいはweb.devや@ChromiumDevをフォローすることで参加するよう招かれています。
[46:42] バーチャルCDS 2021の一環として、今後数週間にわたり、Chromeチームと直接関わるためのワークショップ、グループ学習ラウンジ、一対一のオフィスアワーを開催します。
[47:00] 彼は視聴者に感謝し、将来のChrome Dev Summitイベントで直接会えることを楽しみにしています。

[0:24] こんにちは、そして非常にバーチャルなChrome Dev Summit 2021へようこそ。私はBenです。これから数分間、同僚たちと数名のゲストとともに、ウェブを改善するための過去一年の取り組みのハイライトのいくつかをお伝えします。2008に、Chromeはウェブが単なるリッチなドキュメント以上のものになり得るというビジョンを打ち出しました。つまり、リンクをクリックするだけで即座に利用可能な、デバイスを問わず高速で安全かつ強力なアプリケーションを実現できるというものです。このウェブのビジョンは、パンデミックの間にこれまで以上に重要になっています。世界中の人々がウェブプラットフォームがいかに強力になったかを実感し、日々の用事を済ませるためにますますウェブとブラウザに頼るようになっているからです。

[1:07] そして、ウェブの継続的な成功は、技術の進歩や人々の期待の変化に適応しながら、長年にわたって進化し続けてきたからこそ可能なのです。Googleでウェブの進化を支援するにあたり、私たちは行うすべてのことにおいて透明性とオープン性を追求し、開発者、ユーザー、そしてエコシステムのその他の人々と緊密に協力しています。さて、このウェブの進化というテーマがこの動画の中心であり、ウェブの継続的な進歩を表す数多くの例を紹介します。

[1:43] これらのテーマの中で最も重要なものの一つは、アンケートや個別の会話を通じてウェブ開発者から一貫して寄せられるフィードバックに由来しており、そのテーマとはクロスブラウザ互換性の重要性です。もちろん、このテーマは新しいものではなく、長年にわたりChromeチームはさまざまな取り組みで他者と協力してきました。最近の例としては、GitHub上でホストされている新しいウェブプラットフォーム機能のための包括的なクロスブラウザテストスイートであるWeb Platform Test Projectや、MozillaのDeveloper Network上でホストされているウェブプラットフォームのドキュメントに大規模な連合が協力して貢献するOpen Web Docsイニシアチブがあります。

[2:25] 今年、私たちはリストに新しい取り組みを加えました。Compat 2021 と呼ばれるクロスブラウザの取り組みで、ウェブの五つの主要領域における互換性の向上に焦点を当てています。驚くべきことに、そのすべてが CSS に関連しています。進捗を測定するために、Compat 2021 チームは前述の Web Platform Test プロジェクトを活用し、Chrome、Edge、Firefox、Safari の最新開発ビルド全体でこれらの領域の互換性スコアを数値化することができました。

[2:58] まだ完了してはいませんが、三月以降すでに大幅な改善が見られており、これらの領域やその他の重要な領域でウェブをさらに互換性の高いものにするために取り組み続けます。ウェブが進化しているもう一つの領域はプライバシーです。私たちは、活気あるグローバルなウェブエコシステムを支える重要かつ不可欠な機能を維持しながら、第三者によるトラッキングの慣行を抑制しようとしています。詳しくお話しするために、同僚のバーブを紹介したいと思います。ありがとう、ベン。

[3:30] 私たちは、人々がオンラインでの活動を含む自分の情報を管理できることが重要だと考えています。ほとんどのユーザーもそれが重要だと考えており、プライバシーへの懸念が人々のオンラインでの行動の選択をますます左右しています。また、世界中で規制がプライバシー要件を急速に強化していることも目にしています。しかしながら、非常に多くの機能が第三者Cookieやその他のクロスサイトトラッキングの仕組みに依存しており、これらはプライバシーを考慮して設計されたものではないため、開発者が高まるプライバシーへの期待に応えることは困難です。

[4:07] 私たちには、現代的でプライバシーを重視したウェブのための新しい技術が必要であり、それがPrivacy Sandboxの目的です。私たちはウェブコミュニティや業界の関係者と協力して、健全で持続可能なエコシステムを支えることができる新しいプライバシー保護技術を開発しています。これには、エコシステムの重要な部分でありウェブのコンテンツの多くを支えている広告をサポートするための専用APIや、不正検出、アイデンティティ、ユーザーのデバイスに合わせてカスタマイズされたコンテンツなど、現代のサイトが必要とする他の多くの機能が含まれます。

[4:46] ここで、専用APIとは何を意味するのかを明確にするために少し時間をいただきます。先ほど述べたユースケースの多くは、実際にはウェブプラットフォームに組み込まれたものではなく、第三者Cookieのような汎用技術を用いてその上に重ねられたものでした。ブラウザは、第三者Cookieがカスタマイズされた体験の提供やユーザーのログイン状態の維持といった役立つ目的に使われているのか、それともクロスサイトトラッキングに使われているのかを判別する方法がありません。各特定のユースケースごとにAPIを設計することで、適切なプライバシー保護を確保し、人々により有用なコントロールを提供し、理想的には各APIが時間とともにその機能を向上させることができます。

[5:26] これらの新しい API が導入されたら、開発者がそれらを採用する時間を確保できるようにします。そうすることで、Chrome における第三者 Cookie のサポートを安全に段階的に廃止しつつ、他の種類のトラッキングを緩和する取り組みを続け、クロスサイトトラッキングが単に第三者 Cookie から隠れた手法へと移行するだけにならないようにできます。この複雑なプロジェクトを追いやすくするために、私たちは二つの場所で進捗を共有しています。privacysandbox.com では、この取り組みの背景にあるビジョン、目標、概念を説明しています。

[5:57] また、毎月更新している大まかなタイムラインも含まれています。タイムラインは、私たちがテストおよびローンチに取り組んでいる各技術にリンクし、Chrome における第三者 Cookie の段階的廃止に向けた段階的な計画を示しています。二つ目のリソースは、developer.chrome.com の Privacy Sandbox セクションです。ここでは、より技術的な詳細と実装のガイダンスを見つけることができ、開発者向けの最新情報を掲載したブログも含まれています。このセッションのすべてのリンクと更新情報をまとめた投稿をちょうど追加したところです。

[6:29] さて、私たちはこのプロジェクトにおける協力の重要性について多くを語っていますが、開発の各段階でそれがどのようなものかを示したいと思います。例としていくつかのAPIに言及しますが、より広い考え方は、エコシステムの関与がこの取り組みをどのように形作っているかを示すことです。このプロセスはウェブ開発コミュニティの多くの方にとって馴染み深いものですが、Privacy Sandboxはこのプロセスに多くの新参者を呼び込んでおり、これらの専用APIを使用し、その開発において専門知識が不可欠な業界の関係者も含まれています。

[7:06] プロセスの最初の段階は議論であり、誰でも新しい技術のアイデアを提案し、意見を述べることができます。過去数年間にChromeやその他から数十件のプライバシー保護の提案がなされてきました。それらはすべてオンラインにあるので、読んだり、質問したり、改善のためのアイデアを提供したり、他の人が何を言っているかを見たりすることができます。提案されたすべてのソリューションが一緒に議論され検討されているライブの会話を見つけるために、関心のあるユースケースの種類に応じて参加または監視できる多数のW3Cグループがあります。

[7:40] この議論の段階がどれほど複雑になり得るかを示す一例を挙げます。FLEDGE は、クロスサイトトラッキングなしで興味関心に基づく広告を支援するための提案です。プライバシー擁護者や多くの業界関係者からの貴重な意見を得て、FLEDGE は以前の二つの提案から進化しました。100 を超える組織が W3C の会議に参加して現在のバージョンの改良を助け、200 を超えるオンライン討論スレッドが存在します。同じソリューション領域には、他にも六つ以上の提案があります。

[8:12] 継続的なインキュベーションを通じて、私たちは前進する道筋について合意に達することを望んでいます。同時に、開発者が実際に手に取れるよう、Chromeのフラグの背後でFLEDGEの初期バージョンの開発者テストを開始しています。これらの提案すべてがこれほど集中的なインキュベーション期間を経るわけではありません。もっと迅速に進むものもありますが、ここでは多くのイノベーションが起きています。これらは新しいアイデアであり、正しく仕上げるには多くの作業が必要になることがあります。次の段階はテストです。今日すでに開発者テストの準備が整った提案がいくつかあり、2022に向けてさらに増えると予想されます。

[8:49] また、議論とテストの反復サイクルが繰り返されることも珍しくありません。テストが重要であるのはまさに、さらなる作業を必要とする可能性のある問題やギャップを明らかにするからです。Chromeでのテストは通常、開発者がローカルでテストできるようフラグの背後にある機能から始まります。つまり、試すにはブラウザでそれを有効にする必要があります。このコードは多くの場合非常に新しいため、いくつかの問題が見つかることを想定しておいてください。その後、それぞれ限られた期間、限られたChromeユーザー集団を対象に実行されるOrigin Trialsがあります。

[9:21] Origin Trialsは公開されており、すべての開発者が利用できます。サイトやサービスをオプトインするために登録するだけで済みます。ここで私たちは、何が機能し、何が機能しないのか、そしてギャップがどこにあるのかについて、開発者から実行可能なフィードバックを得ます。この段階での成功は、開発者が実際に手を動かしてテストを行うことだけでなく、学んだことを共有する意欲があるかどうかにかかっています。例えば、Yahoo! JAPANは最近、Attribution Reporting APIのテストに関する詳細な分析を公開し、コンバージョンレポートを配信するより良い方法の必要性など、改善すべき領域を強調しました。これは現在追加されています。

[9:59] これらは、開発者がAPIを実際に手に取ると明らかになる類のものです。また、企業がテストへの取り組み方やAPIをどのように使用する見込みかを語ることも期待しています。興味関心に基づく広告とコンテンツを支援する提案であるFLoCの最初のバージョンのOrigin Trialでは、CafeMediaのような企業が分析と洞察を公開し、他の企業が学んだことを見られるようにしてくれたことを嬉しく思いました。また、Chromeでのテストだけが新しいテクノロジーの仕組みを探る唯一の方法ではありません。

[10:30] 一部の企業はPrivacy Sandboxの概念に基づくシミュレーションも構築しています。広告プラットフォームのCriteoは最近、150を超えるチームが参加するコンペティションを開催し、ノイズ挿入や集約といった差分プライバシーの概念が広告パフォーマンスにどのような影響を与えるかを評価するため、さまざまな機械学習モデルをテストしました。これらの概念はいくつかのPrivacy Sandbox APIの基盤となっているため、検討することは有益です。これらの新しいテクノロジーのテストに時間を投資し、その視点や学びを公に共有してくれる企業に、私たちは心から感謝しています。

[11:09] さて、APIがテストされ、Chromeで一般利用の準備が整うと、私たちはローンチを発表し、大規模な採用に向けて公開ドキュメントが整っていることを確認します。User-Agent Client Hints（UA-CH）は今年初めにChromeでローンチされ、現在は大規模展開の準備が整っています。これは、ブラウザフィンガープリンティングなどの隠れたトラッキングを削減するPrivacy Sandboxのワークストリームの一部です。しかしまず、それが置き換えるレガシーな仕組みに立ち返って見てみましょう。Cookieと同様、User-Agent文字列は初期のウェブ機能です。

[11:43] デフォルトでは、ユーザーのブラウザとデバイスに関する多くの情報を提供するため、フィンガープリンティングに容易に利用できる表面となります。また、解析が頭痛の種になり得る形式でもあります。私たちは最近、2022 年四月から Chrome の User-Agent 文字列で利用可能な情報の粒度を減らす計画を発表しました。将来その情報を取得するには、User-Agent Client Hints に移行する必要があります。これはデフォルトで一部の情報を提供し、おそらくほとんどのユースケースをカバーできます。より詳細な情報は、わかりやすい形式でリクエストに応じて提供されます。

[12:18] 開発者にとってこの使い勝手の向上を実現できたことを嬉しく思います。同時に、User-Agent 情報の大部分をデフォルトで利用可能なモデルからリクエストに応じるモデルへと移行しました。そうすることで、必要な情報だけをリクエストでき、これは今日の良い慣行であり、将来に向けて設定したいパターンです。では、先ほどお見せしたタイムラインに戻りましょう。UA 文字列の段階的な削減は 2022 年四月に始まります。代替ソリューションである User-Agent Client Hints はすでにローンチされ、三月以降、大規模な採用に向けて準備が整っています。

[12:54] ですから、今すぐテストと移行を始めることができます。それを支援するために、削減された UA 文字列に早期にオプトインできる Origin Trial があり、将来の状態がどのようになるかを確認できます。そして、もっと時間が必要だと判明した場合は、2023 年三月まで User-Agent 文字列をそのまま使い続けることにオプトインできます。この計画の詳細はすべてオンラインにあり、大規模採用の段階は他の API ではこれとまったく同じようには見えないかもしれませんが、全体的なアプローチには一貫性があると期待できます。

[13:31] 私たちは何が起きているかの説明を続け、可能な限り多くの可視性を提供し、皆様の参加を促し、ご意見を伺います。幅広い有用性とユーザーに対する強力なプライバシー保護を備えた持続可能なウェブ機能の実現を目指す中で、この複雑かつ極めて重要なプロジェクトへのあらゆる貢献に感謝します。基盤を正しく築くことは、この努力に値します。それではベン、お返しします。ありがとう、バーブ。

[14:02] Privacy Sandboxは、私たちが目にしてきたウェブを進化させるための最大級の取り組みの一つです。今後数十年にわたりウェブの健全性と成功が継続することを確実にする一助となることが極めて重要だと私たちは考えています。次に取り上げるテーマはウェブ機能です。ここ数年、ウェブは数多くの強力な新しい統合機能を獲得し、ウェブアプリがより多くのことを行えるようになりました。私たちはFuguプロジェクトを通じてこれに深く関わっており、エコシステムの他の人々と協力して、安全なファイルシステムへのアクセスやオペレーティングシステムのランチャーとの豊かな統合などを実現してきました。

[14:37] そしてウェブがこれらの新しい機能を獲得するにつれ、開発者たちはそれらを魅力的な方法で活用してきました。詳しくお話しするために、同僚のAanchalを紹介したいと思います。ありがとう、ベン。始める前に、数秒間周りを見渡してみてください。いいえ、本当です。身の回りをよく見てください。皆さんのほとんどは今、おそらく家にいるでしょう。その場所はここ数年で、活気あるテクノロジー主導のハブへと変貌しました。

[15:08] 子どもたちはダイニングルームをバーチャル教室に変え、私たちはキッチンをオフィスに変え、そして私たちは皆、世界中のリビングルームで家族や友人とつながっています。バーチャルへの移行は、私たちの生活と働き方に深い影響を与えました。特に、ビデオとクリエーションの世界では、規範に力強い変化が見られました。カジュアルなクリエイターからプロのデザイナーまで、リアルタイムの編集、共有、コラボレーションがありますが、それは完全にバーチャルです。

[15:39] 家のどこかからビデオ会議に参加したり主催したりすることは、今や私たちの日常の一部であり、正直に言えば、私たちはこれまで考えられなかったほど多くのコンテンツをストリーミングし、一気見してきました。私たちのチームは、既存の体験を次のレベルに引き上げる場合でも、最先端でこれまでにないものを構築する場合でも、ウェブに新たな力を解き放つために懸命に取り組んできました。世界中のパートナーが、創造性、表現、コミュニケーション、エンターテインメントなどを可能にするウェブ体験をどのように構築しているかを見て、私たちは刺激を受け、感謝しています。

[16:14] 一例が Kapwing です。Kapwing は共同作業型の動画エディターで、三百万人以上の月間アクティブユーザーが一日に 100,000 本の動画を処理しています。詳しくお話しするために、特別ゲストのジョシュ・グロスバーグを招待したいと思います。こんにちは、Kapwing の CTO のジョシュです。Kapwing はウェブベースの共同作業型動画エディターで、主にゲームストリーマー、ミュージシャン、YouTube クリエイター、ミーマーなどのカジュアルなクリエイター向けに設計されています。また、Facebook や Instagram の広告など、独自のソーシャルコンテンツを簡単に制作する必要があるビジネスオーナーにとっても頼りになるリソースです。

[16:48] 人々は通常、「動画をトリミングする方法」「動画に音楽を追加する」「動画のサイズを変更する」といった特定のタスクを検索して私たちを見つけます。Kapwingでは、ユーザーが検索したことをワンクリックで即座に実行できます。アプリをダウンロードするためにアプリストアに移動させるといった余計な摩擦はありません。ウェブは、人々が助けを必要としていることを正確に検索し、それを実行することをより簡単にします。私たちが有料獲得に$0を支払っているという事実は、この戦略がどれほど効果的だったかの証です。そして、最初のクリックの後、彼らはさらに多くのことができるのです。

[17:18] 彼らは無料テンプレートを探索し、無料のストック動画の新しいレイヤーを追加し、字幕を挿入して動画を文字起こしし、BGMをアップロードできます。また、ユーザーはデバイスやオペレーティングシステムに関係なく、友人や同僚とKapwingで簡単にコラボレーションできます。「共有」をクリックして共有リンクを取得し、コラボレーターに送るだけです。相手はリンクをクリックするだけで、あなたと一緒に編集できます。そして、異なるデバイスやOSをサポートすることはウェブでは最小限の作業で済むため、このレベルのコラボレーションを可能にする理想的な環境なのです。

[17:51] Kapwingでの動画編集は、すべてのモダンブラウザで簡単かつシームレスに動作します。高性能な編集には、ユーザーのすべてのコンテンツがクライアント上に存在し、可能な限りネットワークを避けることが必要です。そのために私たちはIndexedDBを使用しています。Webソケットは、モダンなウェブアプリでユーザーが期待するリアルタイムコラボレーションを可能にします。波形を生成し、ユーザーが正確な位置で音声をつなぎ合わせられるようにするために、私たちはWeb Audio APIを使用しています。Media Recorder APIにより、ユーザーはウェブカメラと画面を同時に録画でき、スクリーンキャスト作成時に表情を捉えるのに最適です。Web Workersにより、計算負荷の高い処理をオフロードでき、メインスレッドのパフォーマンスに影響を与えることなく動画から背景を除去できます。

[18:35] そしてもちろん、私たちはKapwingをPWAとして構築したので、ユーザーが検索から一度見つければインストール可能で、デスクトップから起動するのと同じくらい簡単に戻ってくることができます。将来的には、Web Codecsを使ってフレーム描画を加速し、WebGLを使ってより洗練されたアニメーションを可能にし、Media Source Extensionsを使ってクリップ間のよりシームレスなトランジションを実現することを楽しみにしています。これらのAPIはいずれも真新しいものではありませんが、組み合わせることで、ユーザーが互いにコラボレーションし、アイデアを素早く実現することがはるかに容易になります。

[19:09] 私たちにとって、ウェブはより多くのユーザーにリーチして関与するための合理化された方法を提供してくれます。アーンシャル、どうぞ。ありがとう、ジョシュ。本格的なミームを作りたいなら、どこに行けばいいかご存じでしょう。Kapwing を試すことを強くお勧めします。本当に使いやすいです。さて、次は私たち全員がよく知っているウェブ機能、ビデオ会議です。過去二年間に Zoom ミーティングをクリックしたことがない人を見つけるのは難しいでしょう。2020 年、Zoom はウェブアプリを使ってオンラインでチャットやつながる人々の急増を経験しました。バーチャル飲み会、グループワークショップ、オンラインウェビナーなど、何でもです。

[19:48] Zoomはこの機会を捉えて、PWAでウェブ体験を改善し、ネイティブアプリとより比較可能な体験を提供しました。また、これはZoomが数百万のChrome OSユーザーに、Chromeアプリに代わる強力な選択肢を提供する機会でもありました。彼らはビデオのエンコードとデコードに新しいWebCodecs APIを使用しており、これによりパフォーマンスが向上し、高速でクリーンなビデオでユーザー体験が強化されています。リンクキャプチャにより、ユーザーがメール内のZoomミーティングへのリンクをクリックすると、ブラウザタブではなくPWAで開くことが保証されます。

[20:25] また、Chrome OS ユーザーにとって、管理された構成により企業は従業員全体に PWA を簡単にインストールできます。PWA をローンチしてわずか一か月後、Zoom は 16.9 百万人の新規ユーザーがウェブ会議に参加したことを確認しました。これは前年比で七百万の増加に相当します。WebRTC と Fugu API の発展により、以前は不可能だった音声・ビデオ通話の体験が今では利用可能です。Apple は Android および Windows ユーザー向けに FaceTime リンクをウェブに提供したため、人々はウェブブラウザから FaceTime 通話に参加できます。

[21:02] そして、この基調講演はGoogle Meet PWAのおかげです。私たちは協力して、今日皆さんが見ているすべてを複数のGoogle Meetウェブ通話で作り上げました。本当に複数回です。その後スタジオでリモート制作し、皆さんはおそらく自宅でYouTubeで視聴しているでしょう。MeetチームはWASM SIMDとWebGLを使用して、PWAでカスタム背景と明るさ調整を提供しました。これにより速度だけでなく、ビデオとオーディオの品質も大幅に向上しました。そして、より良いビデオとオーディオは仕事だけでなく遊びにも役立ちます。

[21:36] エンターテインメントとソーシャルメディアの世界はウェブ上で繁栄しています。YouTube Premiumは、メンバーが広告なしでYouTubeを視聴し、バックグラウンドで動画を再生し、オフライン視聴用に動画をダウンロードできる有料サブスクリプションです。ラップトップやハイブリッドデバイスでのオフライン動画視聴は、YouTube Premiumユーザーからの最も要望の多かった機能の一つでした。これを実現するために、彼らはサイトをインストール可能なPWAに変えるために必要なすべてを追加しました。オフライン体験のために、サービスワーカー、キャッシュストレージ、IndexedDBを組み合わせて使用しています。

[22:11] もちろん、チームはオフライン体験だけに焦点を当てたわけではありません。例えば、ユーザーがデバイスにインストールされた他のアプリと動画へのリンクを共有できるようにWeb Share APIを使用し、サービスワーカーのパフォーマンスを向上させるためにナビゲーションプリロードを使用しています。彼らはYouTube PremiumユーザーがChrome、Edge、Operaでオフライン視聴できる動画をダウンロードできるようにする実験を進めています。彼らはまもなくこの新機能でPremiumユーザーを喜ばせることを楽しみにしています。ソーシャルとエンターテインメントについて話すなら、ショートフォーム動画に触れないわけにはいきません。

[22:46] そこで先頭を走っているのがTikTokです。TikTokはウェブをより多くのユーザーを獲得し、彼らを満足させ続けるためのチャネルと見なし、マルチフォームファクターで摩擦のない体験の創出に注力しました。彼らはWorkboxを使用してウェブアプリのパフォーマンスを最適化し、動画をプリフェッチして、ユーザーが動画間を移動する際の遅延を減らしています。また、PWAをデスクトップに拡張し、一度だけ構築してあらゆるデバイスでTikTokを利用可能かつアクセス可能にするというウェブの超能力を活用しています。

[23:19] モバイルとデスクトップ全体でのこれらの改善により、TikTokは検索からのトラフィックが10倍に向上したことを確認しました。ご覧のとおり、デスクトップ上のウェブはここ数年で画期的なイノベーションを見せています。ユーザーは今、複雑な創造性と生産性のツールにアクセスでき、即時の表現とコラボレーションを可能にしています。新しいことを学ぶときでも、上司と話すときでも、単に美しいものを作るときでも、あらゆるユースケースに対応する強力なウェブアプリがあります。

[23:51] そして、皆さんにぜひお伝えしたい嬉しいニュースがあります。Adobeとの約三年間にわたる強力なパートナーシップを経て、Adobe Creative Cloud Suiteの多くの主要アプリがまもなくウェブに登場します。Adobeのような、可能性の限界を押し広げる企業による実際の利用なくして、高度な機能や能力をプラットフォームに提供することは完結しません。これらの協業はすべての開発者に利益をもたらし、ユーザーにとって信じられないような体験を創造する新たな機会を開くと信じています。

[24:24] そして今、別の特別ゲスト、Adobe Photoshopの製品管理および戦略担当バイスプレジデントであるPam Clarkを迎え、これらのローンチについて詳しくお話しいただきたいと思います。皆さん、こんにちは。Chrome Dev Summitでここにいられて興奮しています。Adobeでは、創造性とコラボレーションは密接に関係していると信じており、過去一年間、お客様が求めるモバイルやコラボレーションのワークフローをサポートするために、Photoshopなどの製品に多くの進歩を遂げてきました。

[24:57] 例えば、PSDをクラウドに保存できるようになったため、すべてのデバイスで単一のドキュメントを操作できます。また、クラウド内のそれらのPSDへのリンクを作成して共有することもできます。共同編集者と共同編集し、レビューとコメントのためにウェブで共有できます。私たちは、どのように作業したいかに関係なく、人々が創造し協力することを支援することに尽力しており、そのため先週のAdobe MAXで、Creative Cloudの次の進化のビジョンを共有しました。それは、創造的なツールと同様に、互いにつながることも重視するものです。

[25:31] 何十年もの間、Photoshopはコンピュータ、それも強力なコンピュータ上でしか使えませんでした。その後PhotoshopはiPadでモバイル化され、そして今、パブリックベータを通じてウェブブラウザでPhotoshopにアクセスできるようにしています。GoogleのChromeおよびWeb Platformチームとの緊密な協力のおかげで、Adobeは世界中のさらに何百万人もの人々にPhotoshopの魔法を届けることができます。Photoshop on Web Betaでは、レビューとコメントのワークフローにアクセスし、試験的に提供しているいくつかのPhotoshop編集機能を試すことができます。

[26:06] 共同作業者はブラウザで作業を開いて表示し、フィードバックを提供し、基本的な編集を行うことも、デスクトップやiPadでPhotoshopアプリケーションをダウンロードしたり起動したりすることなく、すべて一か所で行えます。Adobe、Google、そして標準化団体間の協力により、Photoshopに必要な機能をブラウザにもたらすことができました。Web Assemblyにより、コードベースの大部分をウェブに持ち込むことができました。そのコードの一部はフロー制御に例外を利用しており、ゼロコスト例外処理の追加によりパフォーマンスの低下はありません。

[26:43] 高忠実度の作業のために、Canvas 2Dはカラーマネジメントに対応し、sRGBとP3色空間をサポートするようになりました。ファイルのディスクへの読み書きは自然に感じられる必要があり、Storage Foundation APIにより、PSDがどれほど大きくても、またレイヤーがどれほど多くても、作業を続けられます。私たちはウェブ上のPhotoshop編集機能の探求を始めたばかりであり、Adobeコミュニティからのフィードバックを楽しみにしています。それがブラウザ体験の能力と機能を成長させる助けとなるでしょう。

[27:18] Photoshop on Web Betaに加えて、先週私たちはCreative Cloud SpacesとCreative Cloud Canvasを発表しました。どちらもプライベートベータです。Spacesは、チームがすべてのクリエイティブプロジェクトファイルにアクセスして整理できる共有スペースです。Canvasは、チームがクリエイティブな作業を一緒に表示、視覚化、レビューできる新しいサーフェスです。誰もが私たちのツールにアクセスする方法を増やすというアイデアに興奮しています。それらをウェブに持ち込むことで、プロジェクトのためのより流動的で、よりつながりがあり、より協調的な環境を作る手助けをしています。

[27:54] これはCreative Cloudのより広範な進化のほんの始まりにすぎません。お時間をいただきありがとうございました。そして今、Benがユーザーエクスペリエンスについてさらに話すために引き継ぎます。Pam、Josh、Aanchal、これらのハイライトを案内してくれてありがとう。ご存じのとおり、ウェブの進歩は一般に年々、一歩ずつ反復して進むものであり、これらの例が示すように、時間をかけてプラットフォームで可能になったことを振り返ることができるのは素晴らしいことです。

[28:25] そして、ウェブが新たな機能や能力を獲得するにつれて、もう一つよく耳にするテーマは、開発者が現代のウェブプラットフォームから最高の結果を引き出せるよう支援することの重要性です。その方法の一つがWeb Vitalsプログラムであり、これは優れたウェブ体験を構成する要素を知るための多くの研究の成果です。Core Web Vitalsでは、高品質なユーザー体験につながる多くの要因を詳細に調べ、大きな影響を与える三つの定量化可能な指標を特定しました。

[28:56] これらは、第一に、ユーザーがサイトの最も重要なコンテンツをどれだけ早く見ることができるか、第二に、ユーザーがそのサイトとの対話をどれだけ早く開始できるか、第三に、サイトのレイアウトが時間の経過とともにどれだけ安定しているかです。これらの指標を最適化しているウェブサイトは一貫してより成功していることがわかりました。詳しく説明するために、フセインを紹介したいと思います。ありがとう、ベン。優れたウェブサイトを構築したいなら、実際のユーザーの視点からそれがどのように機能するかを理解する必要があります。

[29:27] それがWeb Vitalsイニシアチブの目的であり、開発者やサイト所有者に、すべてのユーザーに素晴らしい体験を提供するために必要な指標、ツール、ガイダンスを提供することです。昨年、私たちはCore Web Vitalsを発表しました。これは、読み込みパフォーマンス、読み込み中の入力応答性、コンテンツの視覚的安定性をカバーする三つの指標のセットで、開発者が優れたユーザー体験を構築できるよう、Googleが提供するツール全体でサービスが開始されます。では、過去一年間に何が起こったのでしょうか？世界中の開発者がサイトの改善に熱心に取り組んだおかげで、エコシステム全体は着実に改善しています。

[30:04] 一年前と比較して、Chromeでの20%多くのページビューが、推奨されるCore Web Vitalsのしきい値を完全に満たすようになりました。そして、これらのしきい値を満たすChromeでのページビューの合計パーセンテージは現在60%であり、これは大きなことです。これらの進歩の多くは、多くのコンテンツ管理システム、ウェブサイトビルダー、eコマースプラットフォームが行った改善を含む、開発者コミュニティの取り組みの直接的な結果です。この春、私たちは新しいCore Web Vitalsテクノロジーレポートを立ち上げ、これらのプラットフォーム上に構築されたサイトがどのようにパフォーマンスを発揮しているかを示しました。

[30:40] 多くが急上昇して右肩上がりであり、前年比で200%以上の改善を示すものもあることがわかります。また、DudaやJimdoのようなリーダーは、良好なCore Web Vitalsスコアを持つオリジンの50%を超えています。また、Next.jsやAngularを含む人気のJavaScriptフレームワークと協力して、開発者体験を犠牲にすることなく最高のユーザー体験を提供しています。私たちはこのイニシアチブをAuroraと呼んでおり、強力なデフォルトを実現しパフォーマンスを最適化するための取り組みのおかげで、一年足らずで、良好なCore Web Vitalsスコアを持つモバイルNext.jsおよびAngularオリジンの数がそれぞれ91%および111%増加しました。

[31:25] これは短期間での驚くべき進歩であり、近い将来にNuxtのような他のフレームワークエコシステムでも同様の成長が見られることを楽しみにしています。Core Web Vitalsの最適化は日常の開発者にとって依然として難しい場合があることを認識しているため、そのプロセスをはるかに容易にするパフォーマンスツールの新しいアップデートをいくつか用意しました。まず、PageSpeed Insights UIの完全な刷新から始めました。PageSpeed Insightsは、Chrome UX Reportからの実ユーザーデータを表示し、さらにLighthouseレポートを実行して、ラボ環境でのページの合成読み込みに基づく改善のための提案と機会を表示するため、優れたツールです。

[32:05] 新しいUIにより、どのデータが実ユーザー体験からの「フィールドデータ」で、どのデータがLighthouseレポートからの「ラボデータ」であるかがはるかに明確になります。Core Web Vitalスコアを確認したい場合は、実ユーザーのフィールドデータを見るべきです。パフォーマンスを改善するための具体的で実行可能な提案を求める人にとっては、Lighthouseレポートが最適な出発点です。次に、私たちのツールがまだ捉えられていなかった盲点であるユーザーフローに取り組みました。私たちのツールのいくつかは、ページの読み込み中のみを評価するという制限がありました。

[32:37] ユーザーはページを下にスクロールしたり、あちこちをクリックしたり、ウェブを閲覧する際に通常行うその他のことをしたいと考えています。たとえば、コーヒーを注文するためにいくつかの異なるアクションを実行する必要がある典型的なチェックアウトフローを考えてみましょう。複数のページを移動し、商品をカートに追加し、支払い詳細を確認するといったことです。以前は各ページのパフォーマンスを個別にしか測定できませんでしたが、その間のすべてのアクションとナビゲーションを測定することで、全体的なユーザー体験についてどれほど多くを学べるか考えてみてください。

[33:09] Lighthouseでユーザーフローのサポートを展開したことを発表できることを嬉しく思います。これにより、ユーザージャーニー内のパフォーマンス問題を診断し、改善方法の提案を得ることがさらに容易になります。Lighthouseは、ページナビゲーション、特定の時間範囲中に発生したユーザーインタラクション、およびページのキャプチャされた状態を表すスナップショットを区別し、個別のレポートを提供できるようになります。ユーザーフローの分析のサポートを導入しているのはLighthouseだけではありません。DevToolsにまったく新しいRecorderパネルを立ち上げました。これにより、ウェブサイト上のユーザージャーニー全体を記録し、ナビゲーション、キー押下、リンククリックなど、ユーザーが行ったすべてのアクションをパネルで直接簡単に表示できます。

[33:54] ユーザーフローをダウンロードしてテスト用のPuppeteerスクリプトとしてエクスポートしたり、再生したり、クリックしてパフォーマンスパネルでパフォーマンストレースを簡単に測定することもできます。これにより、インタラクションを理解してデバッグするプロセスが容易になるだけでなく、ユーザージャーニー全体を通じてパフォーマンスの機会をより適切に特定できるようになります。Recorderパネルは現在プレビュー段階にあり、チームは積極的に取り組んでいるので、さらなる機能にご期待ください。私たちのすべてのツールは、Core Web Vitalsメトリクスが開発者が世界中の何百万ものサイトのユーザー体験を改善するのに成功するのをどのように支援してきたかに大きく貢献しており、これらの新しい変更はすべて、どこでどのように改善を続けられるかを正確に理解するのに大いに役立ちます。

[34:41] では、Core Web Vitals指標自体の次は何でしょうか？優れたユーザー体験には、三つの領域だけでは足りません。私たちは、現在の指標セットがまだ対応していないギャップを埋めるために熱心に取り組んでいます。私たちは、ウェブ上でのユーザー体験の測定方法を改善すると考える、実験中の二つの新しい指標を紹介できることを嬉しく思います。ぜひ皆さんのフィードバックをお聞かせください。一つ目は、全体的な入力応答性を測定する指標です。現在、私たちは最初のユーザー入力の応答性を測定していますが、理想的には、ユーザーがサイトに到着した瞬間から離れる瞬間までのすべてのユーザー入力を捉えるように拡張したいと考えています。

[35:22] また、イベントタイミングを捉えるAPIも改善し、イベントのライフサイクル全体をより適切に監視し、複数のイベントをトリガーする複雑なユーザー入力をより適切に処理できるようにしました。二つ目の指標は、スクロールとアニメーションの滑らかさを測定します。ページがスクロールやアニメーション中に途切れたりフリーズしたりする経験は、誰にでもあるでしょう。私たちは、これがどのくらいの頻度で発生し、どの程度深刻かをよりよく理解したいと考えています。これらの指標はまだ作業中であり、皆さんのフィードバックをお待ちしています。

[35:53] これらの記事は私たちの現在の考えを詳細に説明しているので、ぜひ読んで、それらを使用することがサイトのユーザー体験の改善にどのように役立つかを考えてみてください。ご意見やご提案があれば、お気軽にメールをお送りください。メトリクス自体、コミュニティから、そして多くのツールやプラットフォームで直接、開発者がユーザー向けの高速で快適な体験を構築するのに成功するためのすべての進歩に興奮しています。まだの方は、PageSpeed Insightsにアクセスして、あなたのサイトがCore Web Vitalsメトリクスでどのようにスコアリングされているかを確認してください。

[36:25] また、サイトのパフォーマンスを継続的に監視および最適化するために使用できる他の優れたツールも多数あるので、ぜひチェックして、どれが最適かを確認してください。それでは、UXデザインに関するエキサイティングなアップデートを共有する前に、Benに戻します。ありがとう、Houssein。Core Web Vitalsが今後数年でどのように進化するか、とても楽しみにしています。もちろん、質の高いウェブ体験は測定と最適化だけではありません。それには、魅力的なデジタルインターフェースを作成するために舞台裏で働く情熱的なデザイナーと開発者の努力が必要であり、そのために適切なツールと能力を備えている必要があります。

[37:04] 数年前、エンジニアの一団がChromiumのHTML、CSS、グラフィックスへの対応を見直す取り組みを始め、それがRenderingNGと呼ばれる、Chromiumのレンダリングエンジンの野心的なリファクタリングへと発展しました。この作業は今や大部分が完了し、ウェブのユーザーエクスペリエンス設計における大きな進化を可能にしています。詳しくはUnaにお任せします。ありがとうございます。今日お話ししたことはすべて、ユーザーエクスペリエンスに帰結します。

[37:36] プライバシー、計測、次世代のウェブ機能が連携し、ウェブに対する私たちのビジョンに沿ったより良い体験を生み出すと同時に、開発者がそれらを構築するために必要なツールと機能を提供します。そこで今日は、UIスタイリングとDevToolsに関して今後登場する数多くのアップデートと変更を共有できることを嬉しく思います。まずはレスポンシブデザインと、それがどのように進化しているかについてお話ししましょう。レスポンシブデザインはもはや、インターフェースがデスクトップとモバイルの両方で見栄えよく見えることを保証するだけのものではありません。開発者は今や、コンポーネント駆動型のアーキテクチャモデルにおいて、パーソナライズされたユーザー設定に基づいて真にカスタマイズされたユーザーエクスペリエンスを生み出すツールを手にしています。

[38:14] 私たちはこれを「The New Responsive」と呼んでおり、これにはユーザー設定クエリやダークモード、prefers-reduced-motionといったモダリティによるユーザーへの応答性、マルチディスプレイ機能を可能にする折りたたみ式デバイスのような新しいフォームファクタへの応答性、そしてコンテナクエリによるページ上の他のコンポーネントへの応答性が含まれます。これは開発者から非常に要望の多かった機能です。私たちはこの機能を仕様化するためにCSSワーキンググループと協力しており、Chromeレンダリングエンジンの最近の変更を通じて実装を解禁することができました。

[38:44] 新しいコンテナクエリの仕様では、親要素の幅にアクセスして、その子要素のスタイリングを決定できます。コンテナクエリをネストしたり、名前付きクエリを作成してアクセスと整理を容易にしたりすることもできます。例を見てみましょう。ここにレスポンシブな「カートに追加」ボタンがあり、コンテナ内のどこにでも配置できます。次に、これもコンテナであるこの商品カードの中に置くと、商品カード自体にクエリを実行して、すでにレスポンシブなボタンを再スタイリングし、中央揃えから左揃えにシフトできます。

[39:15] 表面的には簡単に見えるかもしれませんが、これは大量の重いスクリプトなしにはこれまで不可能だったことであり、そうしたスクリプトはページを大幅に遅くしてしまうでしょう。私たちはこの機能をプラットフォームに組み込むと同時に、コンテナクエリのポリフィルを提供するためオープンソースコミュニティと協力しています。コンテナクエリを使うことで、インターフェースははるかに柔軟になります。コンポーネントは個々のレスポンシブスタイルをすべてその場で所有し、スタイルを調整するためにグローバルなビューポートに依存しません。これはコンポーネントベースの開発にとって大きなパラダイムシフトであり、皆さんがこの新機能をどう活用するのか楽しみにしています。

[39:48] 試してみたい方は、コンテナクエリがChrome Canaryでフラグの背後でテスト可能になっています。そして、この大きな変化に伴い、機能のローンチに合わせてコンテナクエリでのデバッグとスタイリングを可能にするDevToolsを提供することで、皆さんを支援すべく取り組んできました。ここでは、DevToolsが子要素のコンテナがどこにあるかを示し、それによって適用されているスタイルをハイライトしているのがわかります。レスポンシブなDevToolsと言えば、今年はより良いレイアウトデバッグのための新しいツールをいくつかリリースしました。Gridのレイアウトツールでは、特定のグリッド線に名前を追加できるようになり、Gridエリアのサイズも表示されます。

[40:24] また、FlexboxとGridのための動的な新しいツールも気に入っています。これらを使うと、さまざまなプロパティ値がページ上で何をするのかを実際に確認でき、ボタン一つでレイアウトルールを簡単に変更できます。これらの新しいDevToolsは、CSSレイアウトを視覚化して理解しやすくするように設計されており、justifyとalignの違いを調べる時間を減らし、ユーザーのために新機能を構築する時間を増やすことができます。プロセスを簡素化するもう一つの方法として、ウェブプロジェクトで使用できる既製のUIパターンのコレクションであるweb.dev patternsを立ち上げました。

[40:57] UIの基盤構築を素早く始められるよう、大きなフルページの見開きやカードセットから、そうした大きなレイアウト内に収まるカード自体のような小さなレイアウトまで、あらゆるレイアウトパターンを追加しました。これらのパターンはすべてCSS Grid、Flexbox、またはコンテナクエリを使用しており、これらのツールをいかに素早く習得してインターフェースをゼロから構築できるかを示しています。また、ClearleftのJeremy Keithと提携して、web.devで「Learn Responsive Design」を立ち上げました。これは、今日の新しいレスポンシブウェブのためのデザインについて知っておくべきすべてを学べる無料のオンラインコースです。

[41:31] テーマ設定、アートディレクション、国際化のための論理プロパティ、設定クエリの活用など、さまざまなことを学べます。本日、web.dev/learn/designで最初のいくつかのコースモジュールを公開し、今後数週間でさらに追加されます。また、「Learn CSS」コースを六つの新しいモジュールで更新しています。「Learn CSS」は、web.dev上のもう一つの無料で常設のコースとリファレンスで、CSSの知識をレベルアップし、スキルをテストできます。今年のGoogle I/Oで最初の24モジュールを公開し、今ではリスト、背景、トランジション、テキストとタイポグラフィ、メディアクエリなどを導入しています。

[42:07] ぜひ新しいモジュールをチェックして、準備ができたら飛び込んでみてください。また、CSS に新しい機能を展開する作業も進めています。コンテナクエリに加えて、チームではスコープ付きスタイルとカスケードレイヤーの導入方法を検討しています。まだ準備はできていません。今後数か月の間に、皆さんやウェブコミュニティと協力してこれらを前進させられることを楽しみにしています。特に楽しい新しい API が探索可能な状態になっており、それが Scroll Timeline です。これまでは、時間を基準にした CSS アニメーションを作成し、一定の時間をかけて動かすことができました。

[42:38] Scroll Timeline を使うと、代わりにスクロールベースのオフセットとタイミングをアニメーションに設定できます。つまり、ページを下または横にスクロールするのに合わせて要素をアニメーションさせることができます。なかなか素晴らしいですね。Scroll Timeline は、Canary の実験的なウェブプラットフォーム機能フラグを使って試すことができます。最近、最初の公開ワーキングドラフトに到達したもう一つのエキサイティングな追加機能が CSS ネスティングです。ネスティングは、CSS プリプロセッサの最も人気のある機能の一つをウェブにもたらす構文糖であり、スタイルを入れ子にしてよりクリーンな開発者体験を実現します。

[43:11] ネスティング仕様により、スタイルをより小さく、よりカプセル化された状態に保つことができますが、最高のパフォーマンスを確保するために三層以上深くしないことをお勧めします。また、タイポグラフィ用のsize-adjustプロパティも立ち上げました。これは、Core Web Vitalsの累積レイアウトシフトを防ぐのに特に役立ちます。デフォルトのフォントを調整してウェブフォントによりよく一致させることができるためです。これにより、ウェブフォントの読み込み時のジャンクが少なくなります。最後に、accent-colorがChromiumとFirefoxの安定版に登場しました。accent-colorは、チェックボックスやラジオボタンなどのフォームコントロールにブランドに合ったテーマカラーを与える、一行のCSSスーパーパワーです。

[43:47] 開発者からもユーザーからも多くの機能リクエストを受け取りますが、特に夜間にウェブを閲覧するのが好きな方々にとって明らかな人気があるものがあります。ダークモードは人気の機能であり、私たちがさらに発展させていくことを楽しみにしています。皆さんが求めたからというだけでなく、その影響がユーザーインターフェースを超えて広がるからです。ダークテーマは、OLED デバイスにおいてライトテーマと比べて測定可能なバッテリー寿命の節約を示しています。単一の Pixel 6 デバイスを使った当社のラボ調査では、60% の明るさで、OLED スクリーンにおいてダークテーマがライトテーマより 11% 少ない電力を使用するという兆候が見られました。

[44:23] そしてこれはユーザーにも愛されている機能です。Twitterが新しいTwitterプログレッシブウェブアプリの最初のプレビューをリリースしたとき、誰もが「わあ、新しくて速いけど、ダークモードはどこ？」と言いました。彼らはユーザーに何を追加する必要があるかアンケートを取り、ユーザーは三つのことを挙げました。ダークモード、絵文字ピッカー、そしてもっとダークモードです。つまり、多くの声の大きいユーザーにとってはかなり大きな問題なのです。ダークテーマを作成するには、CSSカスタムプロパティと「prefers-color-scheme」メディア機能の使用をお勧めします。これはすべてのエバーグリーンブラウザでサポートされています。

[44:53] これにより、ユーザーの好みに基づいてテーマカラーを切り替えられます。これは新しいレスポンシブフレームワークと一連の目標の中核部分です。ダークモードを好みに合わせて設定するのに助けが必要な場合は、Material Design チームによる、美しいダークテーマを構築するための研究を通じた優れたガイダンスがあります。これには、影の代わりに明度を使って奥行きを調整する方法、視覚的な振動を減らすために色の鮮やかさを調整する方法などが含まれます。チームにとってさらに簡単にするため、Chrome は機械学習を活用した自動ダークアルゴリズム機能に取り組んでいます。この機能には、自動でダーク化されたウェブサイトに加えて、自動ダーク機能をより細かいレベルでオプトアウトするためのいくつかの手段が含まれます。

[45:31] 私たちはまだ機能開発の初期段階にあり、正しく仕上げるために皆さんの助けが必要です。今すぐ試すには、Chrome CanaryでDevToolsのレンダリングパネルを開き、自動ダークモードエミュレーションを有効にしてください。詳細を知り、ご意見をお寄せいただくにはリンクをご覧ください。それでは、最後にもう一度ベンに戻します。ありがとう、ウナ。ご存じのとおり、過去一年間でウェブには多くの変化がありましたが、私たちは今話した分野をはじめ、さらに多くの分野におけるプラットフォームの未来について、これまで以上に楽観的です。今後数年間、私たちはウェブをよりプライベートで強力なものにするために、そして世界中の人々に最高品質の体験を生み出すためのより良いツールとガイダンスを開発者に提供するために、引き続き全力で取り組んでいくことを期待していただけます。

[46:17] ウェブを特別なものにしている要素の一つは、それがオープンで分散型のエコシステムであることです。これにより、誰もがその未来の形成に参加できる多くの方法が生まれます。Chromiumオープンソースプロジェクト、W3Cやその他の標準化団体を通じてであれ、あるいは単にweb.devや私たちの@ChromiumDev Twitterアカウントで私たちをフォローするだけであれ、この取り組みに参加することをお勧めします。そして、このバーチャルCDS 2021の一環として、今後数週間にわたり、多数のワークショップ、グループ学習ラウンジ、一対一のオフィスアワーを開催します。そこではChromeチームと直接交流し、専門家の指導を受けながら自分のサイトを監査し、フィードバックを提供し、ウェブの未来についてアイデアを共有することができます。

[47:00] それでは、ご視聴ありがとうございました。また近いうちに、将来の Chrome Dev Summit イベントで直接お会いできることを楽しみにしています。それまで。

英語の原文字幕を見る

[0:24] Hello, and welcome to a very virtual Chrome Dev Summit 2021. I’m Ben, and in the next few minutes, my colleagues and I, along with a few guests, will share some of the highlights of our work over the past year to improve the web. In 2008, Chrome launched a vision the web could be more than just rich documents, that it could enable fast, safe and powerful applications across devices available instantly with just the click of a link. This vision of the web has become more relevant than ever during the pandemic, as people around the world realize how powerful the web platform has become, and look increasingly to the web and their browser to get things done every day.

[1:07] And the web's continued success is only possible because it's continued to evolve through the years, adapting as technology advances and as people’s expectations shift. As we at Google help evolve the web, we strive for transparency and openness in all that we do, collaborating closely with developers, users, and the rest of the ecosystem. Now, this theme of web evolution is the central one for this video, and we’re gonna highlight a number of examples that represent the web's continual progress.

[1:43] One of the most important of these themes comes from feedback we consistently receive from web developers, both via surveys and individual conversations, and this theme is the importance of cross-browser compatibility. Now, of course, this theme isn’t new, and through the years, the Chrome team has joined with others on various initiatives to help. Recent examples include the Web Platform Test Project, which is a comprehensive cross-browser test suite for new web platform features, hosted on GitHub, and the Open Web Docs initiative that brings together a large coalition to collaboratively contribute to the web platform documentation that’s hosted on Mozilla’s Developer Network.

[2:25] This year, we’ve added a new initiative to the list, a cross-browser effort called Compat 2021 that’s focused on improving compatibility in five key areas of the web, all related, shockingly, to CSS. To measure our progress, the Compat 2021 team was able to use the aforementioned Web Platform Test project to quantify compatibility scores for these areas across the latest development builds of Chrome, Edge, Firefox, and Safari.

[2:58] Now, while we’re not done yet, we’ve already seen significant improvement since March, and we’ll keep pushing to make the web much more compatible in these and other critical areas. Another area in which the web is evolving is privacy, as we seek to curtail third-party tracking practices while preserving important and critical capabilities that enable a vibrant, global web ecosystem. To tell us more, I’d like to introduce my colleague Barb. Thank you, Ben.

[3:30] We believe it’s important for people to be in control of their information, including their online activity. Most users believe it’s important too, with privacy concerns increasingly driving choices about what people do online. We also see regulations around the world stepping up privacy requirements rapidly. And, yet, it’s difficult for developers to meet growing expectations for privacy, when so many capabilities rely on third-party cookies and other cross-site tracking mechanisms that weren’t designed with privacy in mind.

[4:07] We need new technologies for a modern, privacy-focused web, and that’s what the Privacy Sandbox is about. We’re working with the web community and industry stakeholders to develop new privacy-preserving technologies that can support a healthy, sustainable ecosystem. This includes purpose-built APIs to support advertising, which is a critical part of the ecosystem and funds much of the web's content, as well as many other capabilities that modern sites need, like fraud detection, identity, or content that’s customized to a user’s device.

[4:46] Now, let’s take a minute to clarify what we mean by purpose-built APIs. Many of the use cases that I just mentioned were never really built into the web platform but layered over it using general purpose technologies like third-party cookies. The browser has no way to tell whether you’re using third-party cookies for something helpful, like providing a customized experience or keeping a user logged in, or for cross-site tracking. By designing APIs for each specific use case, we can ensure appropriate privacy protections, give people more useful controls, and ideally, make each API better at what it does over time.

[5:26] Once these new APIs are in place, we’ll make sure that developers have time to adopt them, so that we can safely phase out support for third-party cookies in Chrome while continuing our work to mitigate other types of tracking so cross-site tracking doesn’t simply shift from third-party cookies to covert methods. To make this complex project easier to follow, we’re sharing progress in two places. privacysandbox.com explains the vision, goals, and concepts behind this initiative.

[5:57] It also includes a high-level timeline that we’re updating every month. The timeline links to each technology we’re working to test and launch, and lays out a stage plan for phasing out third-party cookies in Chrome. The second resource is the Privacy Sandbox section at developer.chrome.com. Here, you’ll find more technical detail and implementation guidance, including a blog with the latest updates for developers. We've just added a post with all the links and updates from this session.

[6:29] Now, we talk a lot about the importance of collaboration in this project, and I’d like to show you what that looks like at each stage of development. I'll mention some APIs as examples, but the broader idea is to illustrate how ecosystem involvement is shaping this work. This process will be familiar to many of you in the web development community, but the Privacy Sandbox is bringing a lot of newcomers to this process, including industry stakeholders who will use these purpose-built APIs and whose expertise is critical in their development.

[7:06] The first stage of the process is discussion, where anyone can propose and weigh in on ideas for new technologies. There have been dozens of privacy-preserving proposals offered by Chrome and others over the last couple of years. They’re all online, so you can read them, ask questions, offer ideas to improve them and see what others are saying. To find live conversations where all of the proposed solutions are being discussed and debated together, there are a number of W3C groups that you can join or monitor, depending on the types of use cases you’re interested in.

[7:40] Here’s one example to illustrate how involved this discussion stage can get. FLEDGE is a proposal to support interest-based advertising without cross-site tracking. With valuable input from privacy advocates and many industry stakeholders, FLEDGE has evolved from two previous proposals, with more than 100 organizations joining W3C meetings to help refine the current version and over 200 online discussion threads. There have also been more than half a dozen other proposals in the same solution space.

[8:12] Through continued incubation, we hope we’ll reach consensus on a path forward, and at the same time, we’re starting developer testing for the initial version of FLEDGE behind a flag in Chrome so that developers can get their hands on it. Not all of these proposals will go through such an intense incubation period. Some will move much more quickly, but there’s a lot of innovation happening here. These are new ideas, and it can take a lot of work to get them right. The next stage is testing. There are already a handful of proposals ready for developer testing today, and you can expect more as we head into 2022.

[8:49] And don’t be surprised to see some iterative cycles of discussion and testing. Testing is important precisely because it surfaces issues or gaps that may require more work. Testing in Chrome usually starts with a feature behind a flag for developers to test locally. This means you need to turn it on in your browser to try it out. This code is often very fresh, so you can expect to find some issues. And then Origin Trials, each running for a limited time with a limited population of Chrome users.

[9:21] Origin Trials are public and open to all developers. You just need to register to opt-in your site or service. This is when we get actionable feedback from developers on what works, what doesn’t, and where those gaps are. Success at this stage depends not only on developers doing hands-on testing, but on their being willing to share what they learn. For example, Yahoo! Japan recently published a detailed analysis of their test of the Attribution Reporting API, highlighting areas for improvement, like the need for a better way to deliver conversion reports, which has now been added.

[9:59] These are the sorts of things that turn up once developers get their hands on an API. We also hope to see companies talking about their approach to testing and how they expect to use an API. During the Origin Trial for the first version of FLoC, a proposal to support interest-based advertising and content, we were pleased to see companies like CafeMedia publishing their analysis and insights so that others could see what they’d learned. And Chrome tests aren’t the only way to explore how new technologies might work.

[10:30] Some companies are also building simulations based on Privacy Sandbox concepts. Advertising platform Criteo recently ran a competition with more than 150 teams testing different machine learning models to evaluate how differential privacy concepts such as noise insertion and aggregation might impact advertising performance. It’s helpful to examine these concepts since they underlie several of the Privacy Sandbox APIs. We are truly appreciative of the companies investing their time to test these new technologies, and of their being willing to share their perspectives and learnings publicly.

[11:09] Now, once an API is tested and ready for general use in Chrome, we'll announce the launch and make sure public documentation is ready for scaled adoption. User-Agent Client Hints, or UA-CH, launched in Chrome earlier this year and is now ready to scale. It's part of the Privacy Sandbox workstream to reduce covert tracking, such as browser fingerprinting. But first, let’s back up and take a look at the legacy mechanism it’s replacing. Like cookies, the User-Agent string is an early web feature.

[11:43] By default, it provides a lot of information about the user's browser and device, making it a readily available surface for fingerprinting. It also has a format that can be a headache to parse. We recently announced plans to reduce the granularity of information available in Chrome’s User-Agent string starting in April of 2022. To get that information in the future, you’ll need to transition to User-Agent Client Hints. It'll give you some information by default, which may cover most of your use cases, with more detailed information on request in a straightforward format.

[12:18] We were happy to make this ergonomic improvement for developers, while at the same time moving the majority of User-Agent information from an available by default model to an on request model. That way, you can request only the information you need, which is good practice today and the pattern we want to set for the future. So let's go back to the timeline I showed you a moment ago. Gradual UA string reduction starts in April of 2022. The replacement solution, User-Agent Client Hints, has been launched and ready for scaled adoption since March.

[12:54] So you can begin testing and migrating to it any time now. To help with that, there’s an Origin Trial to opt in to the reduced UA string early, so that you can see what that future state will look like. And if it turns out that you need more time, you’ll be able to opt in to keep using the User-Agent string as-is through March 2023. The details of this plan are all online, and while the scaled adoption stage might not look exactly like this for other APIs, you can expect to see consistency in the overall approach.

[13:31] We’ll continue to explain what’s happening, provide as much visibility as we can, encourage your involvement and hear your input. We appreciate all contributions to this complex and vitally important project as we seek to create durable web features with broad utility and strong privacy protections for users. It’s worth this effort to get the foundations right. And Ben, I will hand it back to you. Thanks, Barb.

[14:02] The Privacy Sandbox is one of the largest efforts we’ve seen to evolve the web. We believe that it’s critically important to help ensure the web’s continued health and success for decades to come. The next theme we’ll highlight is web capabilities. Over the past several years, the web’s gained a number of powerful new integrations that enable web apps to do more. We’ve been heavily involved in this with the Fugu Project, collaborating with others in the ecosystem to unlock things like secure file system access and rich integration with operating system launchers.

[14:37] And as the web has gained these new capabilities, developers have embraced them in compelling ways. To tell us more, I’d like to introduce my colleague Aanchal. Thanks, Ben. Before we dive in, take a couple of seconds to look around you. No, really. Look closely at your surroundings. Most of you are probably at home right now, a place that, in the last couple of years, has transformed into a buzzing, tech-driven hub.

[15:08] Our kids have turned the dining room into a virtual classroom, we’ve turned the kitchen into our office, and we’re all connecting with family and friends in living rooms around the world. The pivot to virtual has had profound impact on how we live and work. In particular, it’s the world of video and creation that has seen a powerful shift in norms. From casual creators to professional designers, there’s real-time editing, sharing and collaboration, but it’s entirely virtual.

[15:39] Hosting and attending video conference calls from some part of the house is now a regular part of our day, and let’s be honest, we’ve been streaming and binge-watching more content than we ever thought possible. Our team has worked hard to unlock new powers for the web, whether you’re taking your existing experience to the next level, or building something that’s cutting edge and never been done before. We’re inspired and grateful to see how our partners around the world are building web experiences that enable creativity, expression, communication, entertainment and so much more.

[16:14] One example is Kapwing. Kapwing is a collaborative video editor with more than three million monthly active users processing 100,000 videos a day. To tell you more, I’d like to invite a special guest, Josh Grossberg. Hi, I’m Josh, CTO at Kapwing. Kapwing is a web-based collaborative video editor designed mainly for casual creatives like game streamers, musicians, YouTube creators and memers. We’re also a go-to resource for business owners who need an easy way to produce their own social content, like Facebook and Instagram ads.

[16:48] People usually discover us by searching for a specific task, like “how to trim a video,” “add music to my video,” or “resize a video.” Kapwing lets users instantly do what they search for with one click. There's no added friction by making them navigate to an app store to download an app. The web makes it simpler for people to search for precisely what they need help with, and then do it. The fact that we pay $0 in paid acquisition is a testament to how well this strategy has worked. And, after that first click, they can do a whole lot more.

[17:18] They can explore free templates, add new layers of free stock videos, insert subtitles and transcribe videos, and upload background music. Also, it’s simple for users to collaborate on Kapwing with friends and colleagues, regardless of their device or operating system. Just click “Share,” get a share link and send it to your collaborator. All they have to do is click the link and they are editing with you. And, because supporting different devices and OSs takes minimal work on the web, it’s the ideal environment to enable this level of collaboration.

[17:51] Editing videos in Kapwing works easily and seamlessly in all modern browsers. High-performance editing requires all of our users’ content to live on the client, avoiding the network whenever possible. For that, we use IndexedDB. Web sockets enables real-time collaboration users expect in modern web apps. To generate waveforms and allow users to splice together audio in exactly the right place, we use the Web Audio API. The Media Recorder API allows users to simultaneously record their webcam and screen, perfect for catching facial expressions when creating screencasts, Web Workers allow us to offload computationally intensive work, removing the background from videos without affecting the performance of the main thread.

[18:35] And, of course, we’ve built Kapwing as a PWA, so once users have found it from search, it’s installable, and coming back to it is as easy as launching it from their desktop. In the future we’re excited to use Web Codecs to accelerate our frame drawings, use WebGL to enable more sophisticated animations, and use Media Source Extensions to have more seamless transitions from clip to clip. None of these APIs are brand new, but when combined together, they make it a lot easier for our users to collaborate with each other and quickly bring their ideas to life.

[19:09] For us, the web gives us a streamlined way to reach and engage more users. Back to you, Aanchal. Thanks, Josh. If you’re looking to create a serious meme, you know where to go. I highly recommend trying out Kapwing. It’s really easy to use. And now onto a web feature we’re all more than familiar with: Video Conferencing. It’ll be hard to find someone who hasn’t clicked on a Zoom meeting in the last two years. In 2020, Zoom saw a huge influx of people using its web app to chat and connect online for virtual happy hours, group workshops, online webinars, you name it.

[19:48] Zoom took this opportunity to improve their web experience with a PWA, and to provide a more comparable experience to their native apps. It was also a chance for Zoom to offer its millions of Chrome OS users a powerful alternative to their Chrome app. They’re using the new WebCodecs API for video encoding and decoding, which improves the performance and enhances the user experience with fast, clean video. Link capturing ensures that when a user clicks on a link to a Zoom meeting in their email, it opens in the PWA and not in a browser tab.

[20:25] And, for Chrome OS users, managed configurations allow enterprises to easily install the PWA across the workforce. Just one month after launching the PWA, Zoom saw 16.9 million new users join web meetings, which amounts to an increase of seven million year-over-year. With developments in WebRTC and Fugu APIs, audio and video call experiences previously not possible are now available. Apple has brought FaceTime links to the web for Android and Windows users so people can join a FaceTime call from their web browser.

[21:02] And we have the Google Meet PWA to thank for this keynote. We collaborated and created everything you see today on several Google Meet web calls, and I mean several, then produced it remotely in a studio, and you’re most likely watching it on YouTube at home. The Meet team shipped custom backgrounds and light adjustments in their PWA using WASM SIMD and WebGL. This has drastically improved the speed as well as the video and audio quality. And better video and audio aren’t all work and no play.

[21:36] The world of entertainment and social media is thriving on the web. YouTube Premium is a paid subscription enabling members to watch YouTube ad-free, play videos in the background and download videos to watch offline. Watching videos offline on laptops and hybrid devices was one of the top requested features from YouTube Premium users. To make this possible, they added everything necessary to turn their site into an installable PWA. For the offline experience, they use a combination of service workers, cache storage, and IndexedDB.

[22:11] Of course, the team focused on more than just the offline experience. For example, they use the Web Share APIs so users can share links to videos with other installed apps on the device, and navigation preload to increase service worker performance. They're running an experiment to enable YouTube Premium users to download videos that can be watched offline on Chrome, Edge or Opera. They’re looking forward to delighting Premium users with the new feature soon. I can’t talk about social and entertainment without mentioning short-form videos.

[22:46] That's where TikTok is leading the way. TikTok views the web as a channel to acquire more users, keep them happy, and they focused on creating a multi-form-factor, frictionless experience. They’ve optimized the performance of their web app using Workbox to prefetch videos to reduce any lag as users transition between videos. They’ve also expanded the PWA to desktop, leaning in on the web superpower of building just once and making TikTok available and accessible on any device.

[23:19] With these improvements across mobile and desktop, TikTok has seen the traffic from search has improved by 10x. As you can see, web on desktop has seen path-breaking innovation in the last years. Users now have access to complex creativity and productivity tools that are enabling instant expression and collaboration. There’s a powerful web app for every use case whether you’re learning something new, talking to your boss, or simply creating something beautiful.

[23:51] And that brings us to some exciting news that I'm thrilled to share with you. After nearly three years of an ongoing strong partnership with Adobe, many flagship apps in the Adobe Creative Cloud Suite are soon coming to the web. Bringing advanced features and capabilities to the platform would be incomplete without real use by companies like Adobe that are pushing the edge of what’s possible. We believe these collaborations benefit all developers, opening up new opportunities to create incredible experiences for their users.

[24:24] And now I’d like to welcome another special guest, Pam Clark, VP of Product Management and Strategy for Adobe Photoshop, to tell us more about these launches. Hello, everyone. I’m excited to be here with you at Chrome Dev Summit. At Adobe, we believe creativity and collaboration go hand in hand, and over the past year, we’ve made lots of advancements to products like Photoshop to support the kinds of mobile and collaborative workflows our customers want.

[24:57] For instance, you can now store PSDs in the cloud, so you can work on a single document across all of your devices. You can also create and share links to those PSDs in the cloud. You can co-edit them with your collaborators and share them on the web for review and comment. We are committed to helping people create and work together, no matter how they want to work, which is why at Adobe MAX last week, we shared a vision for the next evolution of Creative Cloud, one that is as much about connecting with each other as it is about creative tools.

[25:31] For decades, you could only use Photoshop on a computer, a powerful computer at that. Then Photoshop went mobile on the iPad, and now we’re making Photoshop accessible in a web browser via a Public Beta. Thanks to the close collaboration with the Chrome and Web Platform Team at Google, Adobe is able to bring Photoshop magic to millions more people around the globe. The Photoshop on Web Beta allows you to access review and comment workflows and test out some Photoshop editing features we are piloting.

[26:06] Your collaborators will also be able to open and view your work in the browser, provide feedback, and make basic edits, all in one place, without having to download or launch the Photoshop application on the desktop or iPad. The collaboration between Adobe, Google, and within the standards bodies helped bring the functionality needed for Photoshop into the browser. Web Assembly allowed us to bring large portions of our codebase to the web. Some of that code relies on exceptions for flow control, the addition of zero-cost exception handling means there’s no performance penalties.

[26:43] For high fidelity work, Canvas 2D is now color-managed and supports sRGB and the P3 color space. Reading and writing your files to disk had to feel natural, and the Storage Foundation API ensures that you can work on your PSDs no matter how big or how many layers they have. We are still at the beginning of exploring Photoshop editing features on the web, and we are looking forward to the feedback from the Adobe Community, which will help us grow the capabilities and functionality of the browser experience.

[27:18] In addition to Photoshop on Web Beta, last week we also announced Creative Cloud Spaces and Creative Cloud Canvas, both in Private Beta. Spaces are a shared place that allows teams to access and organize all their creative project files. Canvas is a new surface where teams can display, visualize, and review creative work together. We are excited by the idea of giving everyone more ways to access our tools. By bringing them to the web, we are helping to create a more fluid, more connected and more collaborative environment for your projects.

[27:54] This is just the beginning of a broader evolution of Creative Cloud. Thanks so much for your time. And, now, Ben will pick things back up to talk some more about user experiences. Thanks, Pam, Josh and Aanchal, for walking us through these highlights. You know, progress on the web generally comes in iterations, year-over-year, step by step, and so it’s amazing to me when we can take a step back and reflect on what’s become possible in the platform over time, as these examples have shown.

[28:25] And, as the web gains new features and capabilities, another theme we hear is the importance of helping developers get the best results they can out of the modern web platform. And one way we’re doing this is the Web Vitals program, which is the result of much research to know what makes a web experience great. With Core Web Vitals, we closely examined many factors that lead to high-quality user experiences, and we identified three quantifiable measures that have a big impact.

[28:56] These are, one, how quickly a user can see a site’s most important content; two, how quickly a user can start to interact with that site; and three, the stability of the site’s layout over time. We found websites optimizing these measures are consistently more successful. To tell us more, I’d like to introduce Houssein. Thanks, Ben. If you want to build a great website, you need to understand how it performs from a real user’s point of view.

[29:27] That’s what the Web Vitals initiative is all about, giving developers and site owners the metrics, tools and guidance they need to deliver a great experience for every user. Last year, we announced Core Web Vitals, a set of three metrics that covers loading performance, input responsiveness during load, and the visual stability of content will begin to be serviced across tools provided by Google to help developers build great user experiences. So what’s happened in the past year? Thanks to developers around the world working hard on improving their sites, the ecosystem as a whole is steadily improving.

[30:04] 20% more page visits in Chrome now fully meet the recommended Core Web Vitals thresholds compared to a year ago. And the total percentage of page visits in Chrome that meet these thresholds is now 60%, which is a big deal. Much of these advancements are a direct result of the work being done by developer communities, including the improvements that many content management systems, website builders, and e-commerce platforms have made. This past spring, we launched the new Core Web Vitals Technology Report to show how sites built on these platforms perform.

[30:40] You can see that many are sharply up and to the right with some showing more than 200% improvement year-on-year. And leaders like Duda and Jimdo surpassing 50% of Origins with good Core Web Vitals scores. We've also worked with some popular JavaScript frameworks, including Next.js and Angular, to deliver the best user experiences possible without sacrificing developer experience. We’re calling the initiative Aurora, and thanks to the work we’ve done to land strong defaults and optimize performance, in less than a year, we’ve seen 91% and 111% increases in the number of mobile Next.js and Angular Origins, respectively, that have good Core Web Vitals scores.

[31:25] That's incredible progress in a short time span, and we can’t wait to see similar growth in other framework ecosystems in the near future, like Nuxt. We know optimizing for Core Web Vitals can still be challenging for the everyday developer, so we’ve got a couple of new updates to our performance tooling that make the process a lot easier. First, we started with a complete revamp of the PageSpeed Insights UI. PageSpeed Insights is a great tool because it’ll show you real-user data from the Chrome UX Report, and it’ll also run a Lighthouse report and show suggestions and opportunities to improve based on a synthetic load of the page in a lab environment.

[32:05] The new UI makes it much clearer which data is “Field Data” coming from real-user experiences, and which data is “Lab Data” coming from the Lighthouse report. If you want to check a Core Web Vital Score, you should look at real user field data. For anyone who wants specific, actionable suggestions for how to improve performance, the Lighthouse report is a great place to start. Next up, we’ve worked on addressing a blind spot that our tooling hasn’t been able to capture yet: user flows. Some of our tools have been limited by only assessing your pages during load.

[32:37] They want to scroll down the page, click around, or do anything else users typically do as they browse the web. For example, consider a typical checkout flow where someone needs to perform a number of different actions to order some coffee, like navigating through several pages, adding items to a cart, and confirming their payment details. In the past, we could only measure the performance of each page separately, but think about how much more we could learn about the overall user experience by measuring every action and navigation in between.

[33:09] We’re glad to announce we’ve rolled out support for user flows in Lighthouse, which will only make it easier to diagnose performance issues within a user journey and get suggestions for how to improve. Lighthouse will be able to distinguish and provide separate reports for page navigations, any user interactions that occurred during a given time span, and snapshots to represent a captured state of a page. It’s not just Lighthouse where we’re introducing support to analyzing user flows. We launched a completely new Recorder Panel in DevTools that will also let you record an entire user journey on your website and easily view all the actions taken by the user directly in the panel, such as navigations, key presses, link clicks and so on.

[33:54] You can download the user flow and export it as a Puppeteer script for testing, replay it, and even click and easily measure the performance trace in the performance panel. Not only will this make the process of understanding and debugging interactions easier, it will also help you better identify performance opportunities throughout the user journey. The Recorder Panel is currently in the preview stage, and the team is working on it actively, so stay tuned for more features. All our tooling has been instrumental to how the Core Web Vitals metrics have helped developers succeed in improving the user experiences of millions of sites around the world, and all of these new changes will go a long way to help you understand precisely where and how you can keep getting better.

[34:41] Now, what’s next for the Core Web Vitals metrics themselves? Well, there's more to great user experiences than just three areas. We’re working hard to fill the gaps that the current set of metrics don’t address just yet. We’re excited to introduce two new metrics we’ve been experimenting with that we think will improve how user experience is measured on the web, and we’d love to get your feedback on them. The first is a metric to measure Overall Input Responsiveness. Today, we measure the responsiveness of the first user input, but ideally we want to extend that to capture every user input from the moment they land on your site to the moment they leave.

[35:22] We’ve also made improvements to the APIs that capture event timing, so we can better monitor the full event lifecycle and better handle complex user inputs to trigger more than one event. The second metric measures scrolling and animation smoothness. I’m sure we’ve all had experiences where a page will stutter or freeze during scrolling or animations. We want to better understand how often this happens and how severe it is. We’re still working on both of these metrics, and we’d love to hear your feedback.

[35:53] These articles explain our current thinking in detail, so give them a read and think about how using them can help improve the user experience of your site. Feel free to send us an email if you have any thoughts or suggestions. We’re excited about all the advancements made to help developers succeed in building fast, delightful experiences for their users, in the metrics themselves, from the community, and directly in many tools and platforms. If you haven’t, go to PageSpeed Insights to see how your site scores on the Core Web Vitals metrics.

[36:25] We also have a number of other great tools that you can also use to continuously monitor and optimize your site’s performance, so be sure to check them out to see which one works best for you. Now, I’ll pass it back to Ben before we share some exciting updates about UX design. Thanks, Houssein. I’m really excited to see how Core Web Vitals evolves in the coming years. Of course, quality web experiences are about more than just measurement and optimization. They require the efforts of passionate designers and developers who work behind the scenes to create delightful digital interfaces, and need to be armed with the right tools and capabilities to do that.

[37:04] A few years ago, a group of engineers set about rethinking Chromium’s support for HTML, CSS, and Graphics, which led to an effort called RenderingNG, an ambitious refactoring of Chromium’s rendering engine. This work has now largely landed, and it’s enabling a major evolution in web user experience design. To tell us more, I’ll hand things over to Una. Thank you. Everything we’ve talked about today comes back to the user experience.

[37:36] Privacy, measurement, next-gen web capabilities, working together to create better experiences that align with our vision for the web, while giving developers the tools and capabilities they need to build them. So, today, I’m excited to share a ton of updates and changes coming down the pipeline for UI styling and DevTools. First, let’s talk about responsive design and how it’s evolving. Responsive design is no longer about making sure an interface looks good on both desktop and mobile devices. Developers now have the tools to really create customized user experiences based on personalized user preferences in a component-driven architecture model.

[38:14] We’re calling this The New Responsive, and it includes being responsive to the user, with user preference queries and modalities like dark mode and prefers-reduced-motion, being responsive to new form factors like foldable devices, which allow for multi-display functionality, and being responsive to other components on the page with container queries. This is a feature that’s been highly requested by developers. We’ve been working with the CSS working group to spec this feature and have been able to unlock the implementation through recent changes in the Chrome Rendering Engine.

[38:44] The new container queries spec lets you access a parent element’s width to make styling decisions for its children. You can even nest container queries and create named queries for easier access and organization. Let’s take a look at an example. Here’s a responsive “Add to Cart” button that I can place anywhere in the container. Then when I put it inside of this product card, which is also a container, I can query the product card itself to restyle the already-responsive button and shift it from being center-aligned to left-aligned.

[39:15] This might look easy on the surface, but it’s something no previously possible without a lot of heavy scripting, which would significantly slow down your page. We’re working with the open-source community to provide a polyfill for container queries as we build the feature into the platform. Using container queries makes your interfaces much more flexible. Components own all of their individual responsive styles right where they are, and don’t rely on the global viewport to adjust styles. This is a huge paradigm shift for component-based developments, and we’re excited to see how you make the most of this new feature.

[39:48] If you wanna try it out, container queries are now available for testing behind a flag in Chrome Canary. And, because of this big shift, we’ve been working hard to support you by providing DevTools that allow you to debug and style with container queries as the feature launches. Here, you see that DevTools is pointing out where the container for the child is and highlighting the styles being applied by it. Speaking of responsive DevTools, we released several new tools this year for better layout debugging. Layout tooling for Grid now allows you to add names to specific grid lines and also shows you the size of your Grid areas.

[40:24] I also love the dynamic new tools for Flexbox and Grid. These let you actually see what different property values do on the page and give you the ability to easily change layout rules with the click of a button. These new DevTools are designed to make CSS Layout easier to visualize and understand which frees up more time to build new features for your users and less time looking up the differences between justify and align. Another way we help simplify the process is by launching web.dev patterns, a collection of off-the-shelf UI patterns you can use in your web projects.

[40:57] To help you quickly get started with building the base of your UI, we’ve added layout patterns for everything from large, full-page spreads and card sets to smaller layouts that can live within those larger layouts, such as the cards themselves. All of these patterns use CSS Grid, Flexbox, or container queries to showcase how quickly you can pick up these tools and build interfaces from the ground up. We also partnered with Jeremy Keith of Clearleft to launch “Learn Responsive Design” on web.dev. This is a free online course with everything you need to know about designing for the new responsive web of today.

[41:31] You'll learn about theming, art direction, logical properties for internationalization, utilizing preference queries, and so much more. Today, we’re launching the first few course modules at web.dev/learn/design, with more to come in the following weeks. We’re also updating our “Learn CSS” course with six new modules. “Learn CSS” is another free, evergreen course and reference on web.dev where you can level up your CSS knowledge and test your skills. We launched the first 24 modules at Google I/O this year, and now we're introducing lists, backgrounds, transitions, text and typography, media queries, and more.

[42:07] Be sure to check out those new modules and dive in when you’re ready. We’re also working on rolling out some new features in CSS. In addition to container queries, our team’s thinking about how to introduce scoped styles and cascade layers. They’re not ready just yet. We’re excited to work with you and the web community over the next few months to push them forward. We do have a particularly fun new API that’s ready for exploration, and that’s Scroll Timeline. Before, you could create CSS animations with a time-basis and moved over a length of time.

[42:38] Scroll Timeline lets you set scroll-based offsets and timings for animations instead. That means you can set an element to animate as you scroll down or across a page. Pretty neat. You can explore Scroll Timeline using the experimental web platform features flag in Canary, We have another exciting addition recently reaching its first public working draft, and that’s CSS nesting. Nesting is a syntactic sugar that brings one of the most popular features of CSS preprocessors to the web, stacking your styles for a cleaner developer experience.

[43:11] While the nesting spec will let you keep your styles tinier and more encapsulated, we recommend you don’t go more than three layers deep to ensure the best performance. We’ve also launched the size-adjust property for typography. This is particularly useful for preventing Cumulative Layout Shift for Core Web Vitals, as you can adjust the default font to better match your web font. This causes less jank as the web font loads in. And last but not least, accent-color just landed in Chromium and Firefox stable. Accent-color is a one-line CSS superpower that gives your form controls, like checkboxes and radios, a theme color to match your brand.

[43:47] We get a lot of feature requests from developers and users alike, but one is a clear favorite, especially for those of you who love to browse the web at night. Dark Mode is a popular feature we’re excited to build on, and not because you asked for it but because its impact extends beyond the user interface. Dark themes have shown measurable battery life savings over their light theme counterparts on OLED devices. In our lab study with a single Pixel 6 device, we found an indication that at 60% brightness, dark theme used 11% less power than light themes for OLED screens.

[44:23] And it’s a feature that users love too. When Twitter released the first preview of their new Twitter progressive web app, everyone said, “Wow, it’s new and fast, but where’s dark mode?” They surveyed users on what they needed to add, and users said three things: dark mode, an emoji picker, and more dark mode. So it’s kind of a big deal to a lot of very vocal users. To create a dark theme, we recommend using CSS custom properties and the “prefers-color-scheme” media feature, which is supported in all evergreen browsers.

[44:53] This lets you swap theme colors in and out based on what your users prefer, a core part of our new responsive framework and set of goals. If you need help getting dark mode set up the way you like it, there’s excellent guidance from the Material Design team via their research on building beautiful dark themes. This includes how to adjust depth by using lightness instead of shadows, how to adjust color vibrancy to reduce visual vibration, and more. To make it even easier for your team, Chrome is working on a machine learning-aided auto-dark algorithm feature. This feature will include auto-darkened websites, along with a few affordances to opt-out of the auto dark functionality on a more granular level.

[45:31] We’re still in the early stages of feature development, and we need your help to get it right. To try it out now, open the DevTools Rendering Panel in Chrome Canary and enable Auto Dark Mode Emulation. Check out the link to learn more and to give us your thoughts. Now, I’ll pass back to Ben one last time. Thanks, Una. You know, we’ve seen a lot of change in the web over the past year, and we’re still more optimistic than ever about the future of the platform across the areas we just talked about and more. In the years ahead, you can expect to see us continue to push hard to make the web more private and powerful and to provide developers with better tools and guidance to create top-quality experiences for people all over the world.

[46:17] Part of what makes the web so special is that it’s an open, decentralized ecosystem, which presents lots of ways for anyone to get involved to help shape its future. We invite you to participate with this effort, whether that’s through the Chromium open source project, the W3C and other standards bodies, or simply following along with us on web.dev and our @ChromiumDev Twitter account. And, over the next couple of weeks, as part of this virtual CDS 2021, we're hosting a number of workshops, group learning lounges, and one-on-one office hours where you can engage directly with the Chrome team, audit your own sites with expert guidance, give us feedback, and share your ideas for the future of the web.

[47:00] And, with that, thank you for watching, and I hope to see you again in person sometime soon at a future Chrome Dev Summit event. Until then.

Vidleafワークベンチで開く

トランスクリプトを検索し、行を選択し、タイムスタンプ付きの引用をコピーし、翻訳します。

ワークベンチで開く →

帰属

「Chrome Dev Summit 2021 | 基調講演: Chrome の新機能」by Chrome for Developers（https://www.youtube.com/@chromedevs）、CC BY 3.0（https://creativecommons.org/licenses/by/3.0/）の下でライセンスされています。ソース動画: https://www.youtube.com/watch?v=Df2U9-R-OJs。このページは、段落区切りとタイムスタンプを追加した動画のテキスト文字起こしです。作成者は Vidleaf と提携しておらず、Vidleaf を推奨するものでもありません。Vidleaf は AI による句読点と AI 生成の要約を追加しました。元の文言はこのページで引き続き確認できます。

あなたは制作者または権利者ですか？訂正や削除をリクエストする：copyright@vidleaf.app（これらのページについてを参照）。

最終更新 2026-10-20

すべての文字起こしページ YouTube文字起こしツール