Chrome Dev Insider の第 2 版へようこそ。こちらでは、コミュニティや Chrome の最新情報をお伝えします。今回は、Google の業務に対する Google のアプローチに関する内部情報の新しいエピソードと、注意を払うべき特に重要な最新情報について簡単にご紹介します。
Chrome デベロッパー リレーションズ チームに所属する web.dev と developer.chrome.com のコンテンツ リーダー、Rachel Andrew と申します。私は 20 年以上、オープンウェブ標準と CSS に重点を置いてウェブに携わってきました。また、CSS Working Group のメンバーでもあります。
2 か月前に開催された Google I/O では、ユーザー情報の安全性とプライバシーを確保しつつ、ウェブの高速化と利便性の向上を目指し、デベロッパーの皆様に対する重要な最新情報をお伝えしました。
特に印象的だったのは、コミュニティが注目してくれたことをうれしく思います。その一つが、ウェブにおけるより多くの CSS と UI 機能をサポートするために、チームが多大な労力を費やしていることです。今回の Chrome Dev Insider では、この取り組みの舞台裏や、CSS や UI のデベロッパー サポートに向けた Google の取り組み、今後の展望について説明します。それゆえ、今回は「情報通」のセッションを開催できることを嬉しく思います。
ニュース トピック
最初の Chrome Dev Insider では、Compat 2021 と Interop 2022 の取り組みに関する最新情報を共有しました。これらの取り組みでは、ブラウザ ベンダーとエコシステムのプレーヤーが連携し、すべてのブラウザでサポートされているより多くの機能をウェブに実装してきました。ブラウザの非互換性は CSS デベロッパーにとって最大の課題の一つであるため、このイニシアチブでは CSS に重点が置かれています。
ほとんどのユーザーにとって、これは嬉しいお知らせではありませんが、さまざまなブラウザにおける進歩を見ることができるのは、非常に喜ばしいことです。
先月、Google では、コンテナ クエリ、サブグリッド、Flexbox インスペクタなどの魅力的な機能を備えた Safari 16.0 ベータ版のバンパー リリースを Safari で発表しました。Firefox と Chrome の最近のリリースでは、多くの優れた機能や修正が加えられており、安定版とベータ版のブラウザに関する重要な点を毎月紹介しています。今回は、ウェブ プラットフォームを初めて使用するシリーズの投稿をご覧ください。
情報通向け情報: CSS および UI デベロッパーのサポート
2022 年は CSS 機能にとってエキサイティングな一年となりました。そこで Google は、舞台裏を紹介する良い時期だと考えました。ウェブ UI および Devtools の DevRel リードである Una Kravets と、CSS と HTML API のウェブ UI のプロダクト マネージャーである Nicole Sullivan に、Chrome で UI 開発者をサポートするまでの道のりについてお話を伺いました。
まずは、お二人からどうぞ。ご自身についてもう少し詳しく教えてください。
Nicole: Chrome のウェブ UI のプロダクト マネージャーです。特に、新しい CSS や HTML API、UI を構築するデベロッパーやデザイナーに重点を置いています。この分野は、コンテナクエリ、スコープ、垂直リズムなど、いくつかの非常に重要な API が出てくる、エキサイティングな分野です。
Una: ウェブ UI チームと DevTools DevRel チームのリーダーです。ウェブ プラットフォームの UI エンジニアをサポートすることに注力し、エンジニアが成功するために必要なツールを確保します。これには CSS API や HTML コンポーネントのほか、最新の変更やフィードバックを確認するための DevTools の機能が含まれます。
Chrome による UI デベロッパー向けのサポートは、この数年で急速に本格化しています。なぜここまでにこんなに長い時間がかかったのですか？最大の課題は何でしたか。
Una: この取り組みがどれほど重要で、なぜ優先すべきかを示すための作業を行う必要がありました。Google は、2019 年の MDN DNA 調査から始めました。この調査では、UI がプラットフォームの最大の課題の一部であることがわかりました。それ以来、MDN や Google 社内のデベロッパー満足度調査の指針としてデータを使用し続けています。その結果、経営陣の賛同を深めることができ、特にご要望の多かった UI のデベロッパー向け機能のエンジニアリング作業を優先することができました。これらの機能は、Compat 2021 や Interop 2022 といった取り組みの大部分を占めています。
Nicole: 経営陣の賛同を得るだけでなく、これらの API をデベロッパーに提供するための適切な方法も見つける必要がありました。私が Chrome に初めて参加したとき、私はレイヤ化 API（略して LAPI）というプロジェクトでこれを行き来していました。LAPI は、デベロッパーにドロップイン コンポーネント エクスペリエンスを提供することを目的としています。すばらしい結果だったと思いますが、多くのミスを犯しました。まず、トースト通知と仮想リストに重点を置きました。トーストはアクセス可能にすることはほぼ不可能で、バーチャル リストは正しく行うのが最も難しいコンポーネントの一つです。私たちの意図は良いものでしたが、開発者の役に立たなかったため、プロジェクトを廃止しました。難しい方法について学ぶのは困難ですが、あらゆる間違いが今起こっている CSS と HTML の再開発に拍車をかけているのです。
それでは、LAPI についてもう少しお話ししましょう。どうしてですか？
Nicole: LAPI については、ウェブにはネイティブ UI の構築に近いドロップイン コンポーネント デベロッパー エクスペリエンスが必要であることはわかっていました。また、一から再開発することが開発者の足かせになっているのは明らかでした。これまでのキャリアで作ったタブの数は数えきれないほどです。そうは言っても、JavaScript をブラウザで配布することで解決しようとしましたが、これは非常に難しかったのです。これまでブラウザに JavaScript を実装したことは誰もいませんでした。また、ブラウザのレンダリング エンジンを支える C++ コードとやり取りする方法も明確ではありませんでした。Google は他のブラウザ ベンダーの意見を参考に、この方法を控えました。その結果、Open UI はより優れた手法を見つけることができました。HTML と CSS を活用することで、柔軟性の高い宣言型のソリューションを実現しています。これは宣言型であるため、JavaScript では実現できなかった方法でアクセシビリティを組み込むことができます。どうなるのか楽しみです。現在、非常に重要な UI デザイン パターンである、選択メニュー、ポップアップ、ツールチップ、ナビゲーション、アコーディオン、タブ、カルーセル、切り替えのサポートに取り組んでいます。
私たちは多くのことを学びました。また、この分野には CSS Houdini など、他の取り組みもあることも知っています。どうなっているのですか？
Una: CSS Houdini も、コミュニティで学んだことです。役に立つ Houdini の機能は数多くありますが、その多くは低レベルすぎたため、幅広く採用してサポートを得ることができませんでした。私たちは、低レベル API を実装しても必ずしもデベロッパーの負担が軽減されるわけではないことに気づきました。より高いレベルのソリューションとニーズに焦点を合わせることで、ブラウザ間での支持を集め、エコシステムに変化をもたらすうえで必要な基盤を構築できました。現在、https://ishoudinireadyyet.com/ で進捗を記録しています。
クロスブラウザ サポートといえば、Interop 2022 や Open UI などの取り組みは、コミュニティに大きなプラスの効果をもたらしているようです。デベロッパーからどのようなご意見を伺っていますか？
Una: デベロッパーの皆様から寄せられる悩みのひとつに、「ブラウザ間で同じようにデザインを持たせること」があります。この取り組みでは、他のブラウザ ベンダーと協力し、特にご要望の多かったいくつかの機能を優先して導入しました。また、コミュニティからはきわめて好意的なフィードバックが寄せられています。さらに、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 の今後のロードマップはどのようなものですか？
Nicole: すべてのデータ探索が出荷可能なわけではありませんが、ここで注目したい点はたくさんあります。
まず最初に、レスポンシブなコンポーネント ベースのデザインを実現しました。デザイナーがダークモードなどのユーザー設定に対応できるように、カラーシステムを設計するためのツールが含まれています。たとえば、OKLCH 色空間を使用すると、すべての色相にわたって一貫した明るさが維持されます。デザイナーは、色の選択から色間の関係のデザインまで、スムーズなパレットで色を付けることができます。
また、コンテナクエリ、カスケード レイヤ、親セレクタ（:has）、スコープのスタイル、ネストなど、特にご要望の多かったいくつかの API についても開発を進めています。デベロッパーは、再利用可能なコンポーネントでいっぱいの柔軟なデザイン システムを構築するために、これらを必要としています。
スクロールリンク アニメーションもおすすめです。Steve Gardner のデモが好きです。滑らかなスクロールと、スクロール時のクールな飛行機のアニメーションを実現しています。これらは楽しいものですが、特にユーザー補助を考慮すると、正しく行うのは難しいことがあります。そのため現在、この機能のユーザーテストを行っています。
個人的に最も気に入っている点は、組み込みのウェブ UI コントロールです。開発者は同じタブセットを繰り返し構築しているので、ブラウザが役に立つと思います。UI を開くでは、選択メニュー、ポップアップ、ツールチップ、タブ、ナビゲーション、アコーディオン、切り替えなどのコンポーネントに取り組んでいます。Google は、時間の経過に伴ってウェブがデフォルトでアクセスできるように、こうしたブラウザ プリミティブにユーザー補助を組み込む方法を検討しています。デベロッパーは、タブの使い方などの基本的な問題をブラウザでサポートしながら、より複雑で微妙な問題に集中できます。おそらく独自の投稿が必要であるため、ここで中断します。
最後に、Google はブラウザ間の相互運用性への投資を継続します。WebKit や Gecko と協力して、デベロッパー エクスペリエンスに一貫性を持たせているのは素晴らしいことです。これについては、デベロッパーの皆様からご要望が寄せられていました。
もしまだご覧になっていない場合は、Seamless Web チームの Shared Element Transitions API を使って、ウェブ用のデザイン方法が変わるかもしれません。デザイナーが物理的なスペースに合わせてデザインを調整できるようにするこうした微妙な移行作業はすべて、可能であるだけでなく容易です。Jake Archibald は素晴らしいデモをしています。
基準が良ければ今年は垂直リズムも検討できるかもしれません。LayoutNG を土台にすることで、多くの機能を利用できるようになります。
お二人、ありがとうございます。私たちのようなコミュニティ全体が、ウェブ UI の世界で今後さらに改善や機能が実装されることを楽しみにしています。まだまだ課題がたくさんありますが、この取り組みをどこから始めるべきだとすればよいでしょうか。
Una: I/O の「ウェブ プラットフォームの最新情報」セッションでは、今年リリースされた多くの機能のハイライトを取り上げています。また、Adam Argyle は、CSS の新規導入と今後の提供に関する参考になる記事も執筆しています。とりあえず、今のところは安定版リリースに集中して、今後予定されている他の作業に注目するようにしています。「New to the web platform」シリーズはぜひご参考にしてください。web.dev のニュースレターに登録すると、このコンテンツをデベロッパーの受信トレイにもお届けします。そして、これらすべてに関わり、サポートしたいと考えているデベロッパーにとって、オープン UI への参加は、この取り組みをサポートする最良の方法の 1 つです。
今後の主な更新内容
Google は、ウェブ エクスペリエンスを構築する際に留意すべき、今後の変更について皆様にお知らせします。
Cookie の最長期間を 400 日に制限する
- 更新: Cookie が明示的な
Expires/Max-Age属性を使用して設定されている場合、値の範囲が 400 日以内に制限されるようになりました。以前は、Cookie の有効期限はなく、今後数千年間に Cookie の有効期限が切れる可能性がありました。この制限は、一般的な使用パターンとユーザーのプライバシーの尊重のバランスを取ることを目的としています。アクセス頻度が 400 日よりも高いサイトでは、Cookie を更新してサービスを継続させることができます。ユーザーは Cookie が何千年も使用されずに残ることはないため、安心して使用できます。 - 推定スケジュール: Chrome 104 でリリース（2022 年 8 月 2 日変更予定）。
- デベロッパー向けの CTA: ユーザーがウェブサイトにアクセスしたとき、デベロッパーは事前に Cookie の更新頻度を高める必要があるかもしれません。Cookie が最初に設定されてから 400 日後にユーザーがログアウトされる可能性があります。
今回の Chrome Dev Insider はお楽しみいただけたでしょうか。見逃した方は、1 つ目をご覧ください。次の四半期も、さらなる情報をお届けしていきたいと考えています。
それまで、この Chrome Dev Insider についてのご意見やご感想、今後の機能改善のご提案をお寄せください。
今回の「Chrome Dev Insider」についてのご感想をお聞かせください。フィードバックをお寄せください。