Chrome Dev Insider の第 2 版へようこそ。このニュースレターでは、Chrome コミュニティと Chrome の最新情報をお届けします。今回は、Google の取り組みに関する内部関係者のストーリーをお届けするとともに、注目すべき重要な最新情報の一部を簡単にご紹介します。
Chrome デベロッパー リレーションズ チームに所属し、web.dev および developer.chrome.com のコンテンツ リードを務めている Rachel Andrew です。20 年以上ウェブに携わり、オープンウェブ標準と CSS に重点を置いています。また、CSS ワーキング グループのメンバーでもあります。
2 か月前に開催した Google I/O では、ユーザー情報の安全性とプライバシーを確保しながら、ウェブをより高速かつ強力にするための Google の取り組みに関する重要な最新情報をお知らせしました。
特に注目すべき点の一つは、ウェブ上の CSS や UI 機能をサポートするためにチームが多大な労力を費やしていることです（コミュニティが注目を浴びた）。今回の Chrome Dev Insider では、この取り組みの舞台裏、CSS および UI デベロッパーの支援に向けた Google の取り組み、今後の展開についてご紹介します。今回の Insider をホストできることを嬉しく思います。
ニュース トピック
初回の Chrome Dev Insider では、Compat 2021 と Interop 2022 の取り組みに関する最新情報をご紹介しました。これらの取り組みでは、すべてのブラウザでサポートされる機能をウェブに導入するために、ブラウザ ベンダーとエコシステムのプレーヤーが連携して取り組んできました。この取り組みでは CSS に特に重点を置いています。ブラウザの非互換性は、CSS デベロッパーにとって最大の課題の一つです。
これは多くのユーザーにとってはあまりニュースではないかもしれませんが、さまざまなブラウザでの進歩は顕著です。
先月初め、Safari 16.0 ベータ版でのバンパー リリースが発表されました。このリリースには、Container Queries、サブグリッド、Flexbox Inspector などの魅力的な機能が含まれています。Firefox と Chrome の最近のリリースには、たくさんの素晴らしい機能と修正が含まれています。ウェブ プラットフォームの最新情報の投稿では、毎月、安定版とベータ版のブラウザでの主な内容について説明しています。
情報通: CSS と UI デベロッパーのサポート
2022 年は CSS 機能にとってエキサイティングな年となるため、今回はその舞台裏をご紹介します。今回は、ウェブ UI および Devtools の DevRel リードである Una Kravets と、CSS と HTML API を担当するウェブ UI プロダクト マネージャーの Nicole Sullivan に、Chrome が UI デベロッパーをサポートするまでの道のりについて話を聞きました。
まずはお二人の問題から始めましょう。あなたについて、もう少し詳しく教えてください。
Nicole: Chrome のウェブ UI のプロダクト マネージャーです。特に、新しい CSS API や HTML API、UI を構築するデベロッパーやデザイナーに重点を置いています。これは、コンテナクエリ、スコープ、（うまくいけば）垂直リズムなど、非常に重要な API が登場するエキサイティングな分野です。
Una: 私はウェブ UI チームと DevTools DevRel チームのリーダーです。ウェブ プラットフォームの UI エンジニアのサポートに注力し、成功に必要なツールを確実に提供します。これには、CSS API や HTML コンポーネント、DevTools 機能が含まれ、アクティブな変更やフィードバックを確認できます。
Chrome での UI デベロッパー向けのサポートは、ここ数年で着実に進んでいます。ここまでにこんなに時間がかかったのはなぜだと思いますか？最大の課題は何でしたか？
Una: この取り組みの重要性と、優先すべき理由を示すための作業が必要でした。まず、2019 年の MDN DNA の調査から、UI がプラットフォームの主な課題の一つであることが判明しました。それ以来、MDN や社内のデベロッパー満足度アンケートを通じて、引き続きデータをガイドとして活用してきました。その結果として、経営陣の賛同を深めることができ、UI 分野で特にご要望の多かったいくつかのデベロッパー向け機能に関してエンジニアリング作業を優先することができました。これらは、Compat 2021 や Interop 2022 などのイニシアチブの焦点の大部分にもなりました。
Nicole: リーダーの賛同を得るだけでなく、これらの API をデベロッパーに配布する適切な方法を見つける必要もありました。Chrome に入社したばかりの頃は、Layered APIs（略して LAPI）というプロジェクトで無理に使用していました。LAPI は、デベロッパーにドロップイン コンポーネント エクスペリエンスを提供することを目的としています。良い結果だったと思いますが、たくさんのミスを犯しました。まず、トースト通知と仮想リストに焦点を当てました。トーストにアクセス可能にすることはほぼ不可能であり、バーチャル リストを作成するのが最も難しい要素の 1 つです。意図は良かったものの、デベロッパーの役に立たなかったため、プロジェクトを廃止しました。一から学ぶのは困難ですが、あらゆる間違いが、現在起こっている CSS や HTML の発展に拍車をかけています。
LAPI についてもう少しお話ししましょう。どうしてですか？
Nicole: LAPI については、ネイティブ UI の構築により近いドロップイン コンポーネントのデベロッパー エクスペリエンスがウェブに必要であることはわかっていました。一から再開発するために開発者の足を引っ張っているのは明らかでした。これまで作ったタブの数は数え切れないほどです。そうは言っても、ブラウザで JavaScript をリリースすることでこの問題を解決しようとしましたが、非常に困難でした。これまでブラウザに JavaScript を組み込んだことがなく、ブラウザのレンダリング エンジンを強化する C++ コードをどのように操作すればよいかは不明でした。私たちは他のブラウザ ベンダー（Mozilla）の意見に耳を傾け、そのアプローチをやめました。Open UI のおかげで、もっと優れたものを見つけることができました。HTML と CSS を活用することで、最終的には柔軟な宣言型ソリューションが得られます。宣言型であるため、JavaScript では難しいような方法でアクセシビリティを組み込むことができます。今後どうなるのか、とても楽しみです。現在、非常に重要な UI デザイン パターンである選択メニュー、ポップアップ、ツールチップ、ナビゲーション、アコーディオン、タブ、カルーセル、切り替えのサポートに取り組んでいます。
私たちは多くのことを学びました。この分野では、CSS Houdini など、他の取り組みもありました。どういうことでしょうか？
Una: はい、CSS Houdini も、コミュニティから学んだことがあります。有用な Houdini 機能はたくさんありますが、その多くはレベルが低すぎて幅広い導入とサポートができませんでした。ローレベル API を実装しても、必ずしもデベロッパーの負担が軽減されるとは限らないことに気づきました。代わりに、より高レベルのソリューションとニーズに焦点を当てることで、クロスブラウザ サポートを獲得し、エコシステムに大きな変化をもたらすために必要なアクセスを獲得できました。現在、https://ishoudinireadyyet.com/ で進捗状況を追跡しています。
クロスブラウザのサポートに関しては、Interop 2022 や Open UI などのイニシアチブは、コミュニティに大きなプラスの成果をもたらしているようです。デベロッパーからどのような声が寄せられていますか？
Una: デベロッパーの皆様からよく寄せられる課題の一つに、「どのブラウザでも同じようにデザインを統一する」ということがあります。そこで Google は、他のブラウザ ベンダーと協力して、特にご要望の多かったデベロッパー向け機能の一部を優先的に提供することで、この問題に対処しています。また、コミュニティからは、非常に好意的なフィードバックをいただいています。さらに、RenderingNG と呼ばれる大規模な再設計の取り組みにより、これらの機能の一部はパフォーマンスが大幅に向上しています。長い間求めていたこうした機能がついに開発され、クロスブラウザに対応できるようになったことに、デベロッパーは期待を寄せています。
Nicole: コミュニティが盛り上げていることは明白です。詳しくは Twitter でご覧ください。:)
エコシステムとの連携は、デベロッパーの皆様が日々の生活がもっと便利になります。これまで多くの業務に取り組んできたことは承知しております。詳細を伺ってもよろしいでしょうか？
Nicole: まず、開発者がウェブ上で構築するプロジェクトをいつも感銘を受けています。小さなライブラリから完全なフレームワークまで、デベロッパーは素晴らしいものを構築しています。素晴らしいメーカー コミュニティです。Chrome は、これらのプロジェクトとの連携を強化するため、さまざまな対策を講じています。
たとえば、数年前に React や Angular などの JavaScript フレームワークを扱うようになりました。メタフレームワーク（Next、Nuxt、Gatsby など）昨年から、Sass、Bootstrap、Material などの UI ツールやフレームワークについても同じことを開始しました。来年は GreenSock やその他のツールとのコラボレーションを行って、デベロッパーの生産性を高められることを願っています生活がもっと便利になります。GreenSock の Cassie Evans が Smashing Conference で講演するのを見たとき、アニメーション分野の仲間たちと仕事をすることにとても興奮しました。
では、ウェブ UI エコシステムにとって最大のチャンスはどこにあるのでしょうか。
Una: 大きなチャンスという意味では、カスタマイズ可能なウェブ エクスペリエンスの可能性のほんの一部にすぎません。コンテナクエリや CSS のユーザー設定メディア機能などの新しい API により、レスポンシブ デザインの考え方が刷新されました。また、デベロッパーやデザイナーがウェブサイトにアクセスするユーザーと協力して作業できるコラボレーション デザイン体験にも期待しています。
ニコールさん、御社のチームの今後のロードマップはどのようなものでしょうか？
Nicole: すべての探索が船舶可能なものになるわけではありませんが、私が今、とても楽しみにしていることはたくさんあります。
先に触れましたが、Google はレスポンシブなコンポーネント ベースのデザインを実現しています。デザイナーがダークモードなどのユーザー設定に対応できるように、カラーシステムをデザインするためのツールが含まれています。たとえば、OKLCH 色空間は、色相全体で明るさを一定に保ちます。デザイナーは、色の選択から、色間の関係のデザインまで、パレットが汚れることなく移行できます。
また、特にご要望の多い API（コンテナクエリ、カスケード レイヤ、親セレクタ（:has）、スコープ設定、ネストなど）にも対応しています。デベロッパーは、再利用可能なコンポーネントでいっぱいの柔軟なデザイン システムを構築するために、これらの機能を必要としています。
スクロール リンク アニメーションも楽しい領域です。Steve Gardner のデモが大好きです。滑らかなスクロールと、クールな飛行機のアニメーションがスクロール時に表示されます。これらは楽しいものですが、特にユーザー補助を念頭に置いて、正しく理解するのは簡単ではありません。そのため現在、この機能のユーザー補助機能のユーザーテストを行っています。
個人的に最も気に入っているのは、組み込みのウェブ UI コントロールです。開発者は同じタブセットを何度も作成し続けているため、ブラウザが役立つと思います。UI を開くでは、selectmenu、ポップアップ、ツールチップ、タブ、ナビゲーション、アコーディオン、切り替えなどのコンポーネントに取り組んでいます。Google は、これらのブラウザ プリミティブにユーザー補助機能を組み込むことで、時間をかけてウェブをデフォルトで利用できるようにする方法を検討しています。これにより、デベロッパーはより複雑で微妙な問題に集中でき、タブタブの方法などの基本はブラウザでサポートできます。これには独自の投稿が必要であるため、とりあえずここで終了します。
最後に、Google はブラウザ間の相互運用性にも引き続き投資していく予定です。WebKit や Gecko の仲間と協力して、デベロッパー エクスペリエンスに一貫性を持たせることができました。多くのデベロッパーからご要望が寄せられていました。
シームレス ウェブ担当チームの Shared Element Transitions API は、ウェブ デザインの変革につながるでしょう。デザイナーが物理的な空間でデザインの向きを調整できるようにする、微妙な移行作業はすべて、単に実現できるだけでなく、簡単に実現できます。Jake Archibald の優れたデモをご覧ください。
標準がうまく機能すれば、今年は縦向きのリズムを検討することになるでしょう。LayoutNG をベースにして、多くの機能を活用することができます。
お二人ともよろしくお願いします。改善や機能がウェブ UI の世界に加わっていくペースを目の当たりにしていることは、私たちコミュニティ全体にとって嬉しいことでしょう。学ぶべきことはまだたくさんあると思いますが、どこから始めるべきでしょうか？
Una: I/O の「What's new for the web platform」セッションでは、今年リリースされた多くの機能のハイライトを取り上げています。Adam Argyle も、新規および今後の CSS ランディングに関する優れた記事を執筆しています。当面は、当面は Stable 版のリリースに注力し、パイプラインで今後予定されている他の作業についても把握しておきます。ぜひ、ウェブ プラットフォームの最新情報シリーズをご覧ください。web.dev のニュースレターに登録すると、デベロッパーの皆様の組織にもこのコンテンツが表示されるようになります。クリックします。これらすべてに参加してサポートしたいと考えているデベロッパーにとって、Open UI に参加することは、この作業をサポートするのに最適な方法の 1 つです。
今後の主な更新内容
Google では、ウェブ エクスペリエンスを構築する際に留意すべき今後の変更についてお知らせするために、これまでの伝統を守り続けています。
Cookie の最長期間を 400 日に制限する
- 更新: 明示的な
Expires/Max-Age属性で Cookie を設定した場合、その値の制限は今後 400 日以内に制限されます。これまでは上限はなく、Cookie の有効期限は何千年もかかる可能性があります。この制限は、一般的な使用パターンとユーザーのプライバシーの尊重のバランスを取ることを目標としています。400 日に 1 回を超える頻度でアクセスされるサイトは、サービスの継続性を確保するために Cookie を更新できます。また、ユーザーは Cookie が何千年も使用されないままブラウザ内に残らないことを保証できます。 - 予定スケジュール: Chrome 104（2022 年 8 月 2 日公開予定）でリリース予定。
- デベロッパー向けの CTA: ユーザーがウェブサイトにアクセスしたときに、Cookie を以前よりも頻繁に更新する必要がある場合があります。そうしないと、Cookie が最初に設定されてから 400 日後にユーザーがログアウトされる可能性があります。
今回の Chrome Dev Insider がお役に立てば幸いです。まだご覧になっていない場合は、1 つ目をご覧になってください。次の四半期も、さらに多くの機能をご紹介できることを楽しみにしております。
それまでの間、本版の Chrome Dev Insider についてご意見をお聞かせください。また、今後の改善のために何ができるかお聞かせください。
今号の Chrome Dev Insider についてご意見をお聞かせください。フィードバックをお寄せください。