Chrome Dev Summit 2021 で発表された内容

2021 年 Chrome Dev Summit での重要な発表のまとめと、詳細を確認するためのリンクです。

この投稿では、2021 年の Chrome Dev Summit での重要な発表をまとめています。詳細情報へのリンクも掲載しています。

ウェブの相互運用性を高める

ウェブの互換性はウェブ デベロッパーにとって最大の課題の一つです。そこで Google は、他のブラウザ ベンダーと協力して、互換性に関する上位 5 つの課題(Flexboxグリッドposition: stickyaspect-ratiotransforms)を修正しています。

この取り組みは、すでに以下の主要領域の改善につながっています。詳しくは、Compat 2021 年半ばのアップデートをご覧ください。

新しいクラスのアプリケーションをウェブで実行できるようにする

プロジェクト Fugu は、新しいクラスのアプリケーションをウェブで利用できるようにする取り組みです。Fugu API の最新情報については、fugu-tracker.web.app をご覧ください。

Adobe は先日、Photoshop をウェブに導入することを発表しました。これは、Adobe、Google、ウェブ標準化団体の協力によって実現した取り組みです。詳しくは、Photoshop のウェブへの移行の投稿をご覧ください。

プライバシーを確保する

一般的なウェブ機能の多くは、プライバシーに配慮していないサードパーティ Cookie やその他のクロスサイト トラッキング メカニズムに依存しているため、プライバシーに対するニーズの高まりにデベロッパーが対応することは困難です。

Google は、サードパーティ Cookie を段階的に廃止し、隠れたトラッキングとブラウザのフィンガープリントを減らすことを目的として、ウェブ コミュニティや業界の関係者と協力して、エコシステムをサポートする新しいプライバシー保護技術を開発しています。

この取り組みについては、プライバシー サンドボックスのサイトをご覧ください。 また、デベロッパー向けの提案に関する情報とガイド毎月の更新または変更と進捗状況ユーザー エージェント文字列の変更のタイムラインとテストの詳細に関する情報も掲載しています。

Core Web Vitals を改善する

Google は、一般的な JavaScript フレームワークのデベロッパーと協力して Core Web Vitals の改善に取り組んでおり、その取り組みの一環として 2 つの新しい指標を特定しました。ぜひフィードバックをお寄せください。全体的な応答性スムーズさについてご覧いただき、ご意見をお聞かせください。

また、PageSpeed Insights の更新版、新しい Chrome DevTools のレコーダー パネル(現在は Canary 版で利用可能)、新しい Lighthouse 向けのユーザーフロー API についても発表しています。

新しいウェブ プラットフォーム機能を有効にする

RenderingNG は、Chromium のレンダリング エンジンの大胆なリファクタリングであり、Chrome の長年にわたるバグを修正し、新機能を提供するプロジェクトです。その一つが、長年にわたりウェブ デベロッパーから最も多くのご要望をいただいていた、コンテナクエリです。

コンテナクエリは、メディアクエリを使用してレスポンシブ デザインを作成したことがある方なら誰でもおなじみです。ただし、ビューポート サイズのクエリ内で、コンポーネントが含まれているコンテナのサイズをクエリできます。Google は、Chrome の #enable-container-queries フラグの背後で、この新しい仕様のトライアル実装に取り組んでいます。

RenderingNG の詳細に関するブログ投稿をご覧ください。また、こちらの動画では、これまで実現不可能と考えられていた機能の実装を、この作業によってどのように実現できるのかについて詳しく説明しています。

美しくレスポンシブなサイトの作成をサポート

新しいレスポンシブ デザインでは、単なる画面(コンテナ)のサイズだけにとどまりません。 最新のレスポンシブ サイトを作成する方法については、コース「Learn Design」をご覧ください。最初の 5 つのモジュールは本日公開され、残りは数週間かけて投稿されます。

今年、Chrome やその他のブラウザに新しい CSS プロパティが導入されました。これにより、美しいエクスペリエンスを簡単に作成できるようになります。詳しくは、accent-colorsize-adjust に関する記事をご覧ください。

新しい CSS をすぐに利用できるように、一連のレイアウト パターンをリリースしました。 これらは、多くの一般的なインターフェース パターンの堅牢な出発点となります。

ウェブ技術の学習に役立つコースを提供する

デザインの学習に加えて、今年初めに開始した包括的な CSS コースである CSS の学習の新しいモジュールをリリースします。

また、機能的で利用しやすいフォームの設計に役立つ Google フォームについて学ぶのコースもご用意しました。 これらのコースと併せて、PWA についての最初のいくつかのモジュールが用意されています。