Chrome Dev Insider の第 2 号へようこそ。この号では、コミュニティと Chrome の最新情報をお届けします。これは、Google の仕事への取り組み方に関するインサイダー ストーリーの新しいエピソードです。また、注意すべき最も重要な更新情報の一部を簡単に紹介します。
私は Chrome デベロッパー リレーションズ チームの一員として、web.dev と developer.chrome.com のコンテンツ リードを務めている Rachel Andrew です。20 年以上にわたり、オープン ウェブ標準と CSS を中心にウェブに携わってきました。CSS ワーキング グループのメンバーでもあります。
2 か月前に Google I/O が終了しました。このイベントでは、ユーザー情報を安全かつプライベートに保ちながら、ウェブをより高速かつ強力にするためにデベロッパーをサポートする方法に関する重要な最新情報を共有しました。
特に注目すべきは、ウェブでの CSS と UI の機能のサポートを強化するためにチームが取り組んでいる膨大な作業量です（コミュニティもこの点に注目してくれたことを嬉しく思っています）。今回の Chrome Dev Insider では、この取り組みの背後にいる人物、CSS と UI のデベロッパーをサポートするための取り組み、今後の展望についてご紹介します。だからこそ、今回の Insider を担当できることを大変嬉しく思っています。
ニュース トピック
最初の Chrome Dev Insider では、ブラウザ ベンダーとエコシステム プレーヤーが協力して、すべてのブラウザでサポートされる機能をウェブに導入する Compat 2021 と Interop 2022 の取り組みに関する最新情報をお伝えしました。この取り組みは CSS に重点を置いています。なぜなら、ブラウザの非互換性は CSS デベロッパーにとって最大の課題の 1 つだからです。
ほとんどの方にとっては新しい情報ではないかもしれませんが、ブラウザ全体でこれまでに達成された進歩を見るのは素晴らしいことです。
先月、Safari 16.0 ベータ版で コンテナ クエリ、サブグリッド、Flexbox インスペクタなどのエキサイティングな機能を含む Safari の大規模なリリースが発表されました。Firefox と Chrome の最近のリリースには、多くのエキサイティングな機能と修正が含まれています。ウェブ プラットフォームの新機能シリーズの投稿で、安定版とベータ版のブラウザの重要な点を毎月取り上げています。
内部情報: CSS と UI のデベロッパーをサポート
2022 年は CSS 機能にとってエキサイティングな年となったため、この機会に舞台裏をご紹介したいと思います。ウェブ 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: この作業の重要性と、優先すべき理由を示すために、いくつかの作業が必要でした。2019 年の MDN DNA アンケートでは、UI がプラットフォームの主な問題点として特定されました。それ以来、MDN と社内のデベロッパー満足度調査を通じて、データをガイドとして活用し続けています。その結果、リーダーシップの賛同をより深く得ることができ、UI 領域で最も要望の多かったデベロッパー向け機能の一部を中心にエンジニアリング作業の優先順位を付けることができました。これらの機能は、Compat 2021 や Interop 2022 などの取り組みの大部分を占めています。
Nicole: リーダーシップの賛同を得るだけでなく、これらの API をデベロッパーに提供する適切な方法を見つける必要もありました。私が Chrome に入ったばかりの頃、Layered APIs（略して LAPIs）というプロジェクトでこの点を間違えました。LAPIs は、デベロッパーにドロップイン コンポーネント エクスペリエンスを提供することを目的としていました。この結果は目指す価値のあるものだったと思いますが、多くの間違いを犯しました。まず、トースト通知と仮想リストに焦点を当てました。トーストはアクセシビリティを確保することがほぼ不可能であり、仮想リストは正しく実装することが最も難しいコンポーネントの 1 つです。意図はよかったのですが、デベロッパーの役に立たなかったため、プロジェクトを終了しました。苦労して学ぶのは難しいことですが、すべての間違いが、現在起こっている CSS と HTML のルネサンスを加速させています。
LAPI についてもう少し詳しく説明します。どうしてですか？
Nicole: LAPIs では、ウェブにネイティブ UI の構築に近いドロップイン コンポーネント デベロッパー エクスペリエンスが必要であることがわかっていました。車輪の再発明がデベロッパーの足かせになっていることは明らかでした。キャリアの中で作成したタブの数を数えることはできません。しかし、ブラウザに JavaScript を同梱して解決しようとしましたが、非常に困難でした。ブラウザで JavaScript を出荷した人はそれまでおらず、ブラウザのレンダリング エンジンを動かす C++ コードとどのように連携させるべきかも不明でした。他のブラウザ ベンダー（Mozilla に感謝します）の意見を聞き、そのアプローチを撤回した結果、Open UI でより優れたものを見つけることができました。HTML と CSS を活用することで、柔軟で宣言型のソリューションを実現できます。宣言型であるため、JavaScript では簡単には実現できない方法でアクセシビリティを組み込むことができます。この先が楽しみです。Google は、UI デザイン パターンとして非常に重要な selectmenu、popup、tooltip、nav、accordion、tabs、carousel、toggle のサポートに取り組んでいます。
これまでに多くのことを学びました。この分野では、CSS Houdini など、他の取り組みも行われています。どのような状況ですか？
Una: CSS Houdini も、コミュニティから学んだことの 1 つです。Houdini の便利な機能はたくさんありますが、その多くはローレベルすぎて、幅広い採用とサポートを得ることができませんでした。低レベルの API を実装しても、必ずしもデベロッパーの負担が軽減されるわけではないことがわかりました。代わりに、より高レベルのソリューションとニーズに焦点を当てることで、クロスブラウザ サポートと、エコシステムを前進させるために必要なランディングを獲得できました。現在の進捗状況は https://ishoudinireadyyet.com/ で確認できます。
クロスブラウザ サポートについてですが、Interop 2022 や Open UI などの取り組みは、コミュニティに大きなプラスの効果をもたらしているようです。デベロッパーからどのような意見が寄せられていますか？
Una: デベロッパーからよく寄せられる問題点の 1 つは、「ブラウザ間でデザインを同じように機能させる」ことです。Google は、他のブラウザ ベンダーと協力して、リクエストの多いデベロッパー向け機能の優先順位付けと実装に取り組んでいます。コミュニティから寄せられたフィードバックは、圧倒的に肯定的なものでした。また、RenderingNG と呼ばれる大規模な再設計により、これらの機能の一部をよりパフォーマンスの高い方法で実装できるようになりました。デベロッパーは、長年要望してきた待望の機能がようやく実現し、クロスブラウザで利用できるようになることを喜んでいます。
Nicole: コミュニティの熱気が伝わってきます。Twitter でご覧いただけます。:)
エコシステムとの連携は、開発者の作業を楽にするうえで、これまで Google が成功を収めてきた要因として極めて重要であることが証明されています。あなたのチームがそこで多くの作業を行っていることは承知しています。詳細を教えていただけますか？
Nicole: まず、デベロッパーがウェブ上で構築するプロジェクトには常に感銘を受けています。最小限のライブラリから完全なフレームワークまで、デベロッパーは素晴らしいものを構築しています。メーカーの素晴らしいコミュニティです。Chrome は、これらのプロジェクトとの連携を強化するためのさまざまな取り組みを行っています。
たとえば、数年前から React や Angular などの JavaScript フレームワークに取り組んでいます。メタフレームワーク（Next、Nuxt、Gatsby など）。昨年、Sass、Bootstrap、Material などの UI ツールやフレームワークでも同様の取り組みを開始しました。来年は、GreenSock や、デベロッパーの仕事を楽にする他のツールとコラボレーションできることを願っています。Smashing Conference で GreenSock の Cassie Evans の講演を聞いたばかりで、アニメーション業界の人たちと仕事をするのがとても楽しみになりました。
では、ウェブ UI エコシステムで最も大きなチャンスはどこにあるのでしょうか？
Una: 大きなチャンスという点では、カスタマイズ可能なウェブ エクスペリエンスの可能性はまだほんの一部しか見えていないように感じます。コンテナクエリや CSS のユーザー設定メディア機能などの新しい API により、デベロッパーがレスポンシブ デザインを捉える方法が再定義されています。また、デベロッパーとデザイナーがウェブサイトにアクセスするユーザーと連携して作業できるコラボレーション デザイン エクスペリエンスにも期待しています。
Nicole さん、チームの今後の予定を教えてください。
Nicole: すべての探索がリリース可能なものになるわけではありませんが、現在、私が本当に楽しみにしていることがたくさんあります。
Una が最初に触れたように、レスポンシブなコンポーネント ベースのデザインを有効にしています。カラーシステムを設計するためのツールが含まれており、デザイナーはダークモードなどのユーザー設定に対応できます。たとえば、OKLCH 色空間では、色相間で明るさが一定に保たれます。デザイナーは、濁ったパレットになることなく、色の選択から色間の関係の設計に移行できます。
また、コンテナ クエリ、カスケード レイヤ、親セレクタ（:has）、スコープ付きスタイル、ネストなど、リクエストの多い API の開発にも取り組んでいます。開発者は、再利用可能なコンポーネントで構成された柔軟なデザイン システムを構築するために、これらの機能が必要です。
スクロールにリンクされたアニメーションも面白い分野です。Steve Gardner のデモはとても気に入っています。スクロールが非常にスムーズで、スクロール時に飛行機のアニメーションがトリガーされるのがクールです。これらは楽しいものですが、特にユーザー補助を考慮すると、正しく実装するのは難しい場合があります。そのため、現在、この機能のユーザー補助機能に関するユーザーテストを実施しています。
個人的に最も期待しているのは、組み込みのウェブ UI コントロールです。デベロッパーが同じタブセットを何度も作成しているため、ブラウザでサポートできると思います。Open UI では、selectmenu、popup、tooltip、tabs、nav、accordion、toggle などのコンポーネントに取り組んでいます。アクセシビリティをこれらのブラウザ プリミティブに組み込むことで、ウェブがデフォルトでアクセス可能になる可能性を検討しています。デベロッパーは、より複雑で微妙な問題に集中できるようになり、タブの移動方法などの基本的なことはブラウザでサポートできます。これについては別の投稿が必要になる可能性があるので、今回はここまでとします。
最後に、ブラウザ間の 相互運用性への投資を継続します。WebKit と Gecko のメンバーと協力して、デベロッパー エクスペリエンスの一貫性を実現できたのは素晴らしいことでした。開発者の皆様から、この機能に対する強い要望が寄せられていました。
また、まだご覧になっていない方のためにご案内します。Seamless Web チームの Shared Element Transitions API は、ウェブの設計方法を変えるでしょう。デザイナーがデザインを物理空間に配置できるようにする、そうした微妙な小さなトランジションはすべて、可能になるだけでなく、簡単になります。Jake Archibald の優れたデモをご覧ください。
うまくいけば、今年は縦のリズムも検討するかもしれません。LayoutNG をベースに構築することで、多くの機能が利用できるようになりました。
お二人とも、ありがとうございました。Google と同様に、コミュニティ全体が Web UI の世界に新たな改善と機能が導入されるペースの加速を期待していることと思います。まだ理解すべきことがたくさんありますが、どこから始めるのがよいでしょうか？
Una: I/O の ウェブ プラットフォームの新機能セッションでは、今年リリースされる多くの機能のハイライトを紹介しています。Adam Argyle は、新しくリリースされる CSS のすべてについて素晴らしい記事も書いています。当面は安定版に注力し、パイプラインで進行中の他の作業を把握することに注力します。その点については、すばらしい ウェブ プラットフォームの初心者向けシリーズを参考にするとよいでしょう。web.dev のニュースレターに登録すると、このコンテンツがデベロッパーの受信トレイに届きます。また、この取り組みに参加して協力したいと考えているデベロッパーにとって、Open UI に参加することは、この取り組みをサポートする最良の方法の一つです。
今後の主な更新
ウェブ エクスペリエンスを構築するうえで留意していただく必要のある今後の変更について、事前にお知らせいたします。
Cookie の max-age を 400 日に制限
- 更新内容: 明示的な
Expires/Max-Age属性で Cookie が設定されている場合、値は 400 日以下に制限されます。以前は制限がなく、Cookie の有効期限を数千年先に設定することも可能でした。この制限の目的は、一般的な使用パターンとユーザーのプライバシーの尊重とのバランスを取ることです。400 日より頻繁にアクセスされるサイトでは、Cookie が更新され、サービスの継続性が確保されます。ユーザーは、Cookie が使用されずにブラウザに何千年も残ることはないと安心してご利用いただけます。 - 推定タイムライン: Chrome 104 でリリース（2022 年 8 月 2 日に Stable）。
- デベロッパー向けの行動を促すフレーズ: ユーザーがウェブサイトにアクセスしたときに、以前よりも頻繁に Cookie を更新する必要が生じる可能性があります。そうでない場合、ユーザーは Cookie が最初に設定されてから 400 日後にログアウトされる可能性があります。
今回の Chrome Dev Insider はお楽しみいただけましたでしょうか。見逃した方は、こちらをご覧ください。次の四半期には、さらに多くの情報をお届けできることを楽しみにしています。
それまでの間、今回の Chrome Dev Insider の感想や、今後の改善点についてお聞かせください。
今回の Chrome Dev Insider について、ご感想をお聞かせください。フィードバックをお寄せください。