「Google Developer Expertsが語るWeb技術の最前線」に参加してきました

• 2024/3/19
• https://gdg-tokyo.connpass.com/event/311662/

プライバシーサンドボックスとサードパーティCookieの廃止

• 田中 洋一郎さん

3rd party cookie

• 異なるサイトからトップレベルサイトに送信される任意のcookie
• 広告以外にも使われる
  • ドメインを跨いだログイン
  • 分析用途
  • CDNのキャッシュ
• トラッキングによるプライバシーの侵害が問題
• 3rd party cookieを廃止する代わりに主要なユースケースをサポートする技術が用意された
• 2024/1から1%展開された
  • 2024の終わりには100%展開される予定

準備

• 3rd party cookieの利用チェック
  • SameSite=None を使った箇所があるかチェック
  • devtoolsでも確認できる
  • Privacy Sandbox Analysis Tool
    • https://chromewebstore.google.com/detail/privacy-sandbox-analysis/ehbnpceebmgpanbbfckhoefhdibijkef
• 壊れてないかテスト
  • Chromeのflagを立てれば確認できる
• 軽減策
  • origin trial申請すると延命できる

対策

• CHIPS
  • トップレベルドメイン+3rd partyドメインでcookieが発行されるようになる
  • なのでトラッキングできなくなるがcookieは使えるのでたいていはこれで機能を維持できる
  • https://blog.jxck.io/entries/2023-12-14/partitioning.html#chips
• Related Website Sets
  • 同一組織で運営する複数のドメインの集合の中でcookieを使うことができるようになる
  • まだ世界で8個しかとうろくされてない
  • https://blog.jxck.io/entries/2023-12-28/related-website-sets.html

ブラウザと仕様のアップデート

• 矢倉 眞隆さん

HTML/UI

• JSに頼らないUIが増えてる
  • a11yを標準で担保
• OpenUI
  • UI標準を提案するグループ

CSS

• CSSの根幹に手をいれる機能拡張が増えた
  • CSS Nesting
  • :has
  • @scope
  • @property
  • sub-grid
  • align-content

仕様の課題

• 小さい機能が多い
• 最小限の機能の実装は早い
• 仕様の課題の解決に時間がかかってる印象

実装の状況を道知る

• ブラウザのリリースノート
• ベースライン
  • 各ブラウザの実装が揃っているかなどの状況が見える

互換性と相互運用性

• Interop
  • 仕様と実装の互換性を上げるプロジェクト
  • 各ブラウザの実装状況のスコアも見れる
    • web platform testsでスコアを出している
  • 毎年どこに注力するか発表される

ブラウザ動向

• Chromeの3pcd
  • 2024/1から適用が始まった
• iOSのブラウザ変更
  • EUでwebkit以外のエンジンが使えるようになりそう

Getting started with designing for web accessibility

• Julia Undeutschさん

Color Contrast

• テキストを読めるか
• リンクとして認識できるか
• 色を認識できるか
• Color Contrast Checkerで確認するといい

Color Independency

• 色だけで情報を伝えてはだめ
• エラーが起きた時に文字色を返るだけで伝えるとよくない
  • アイコン入れたり色に頼らない情報で伝えるといい

Link text

• Read more や Clck here だけでは何のリンクか分からない
  • リンク先が分かるようなテキストを入れるのがいい
  • スクリーンリーダーでリンク一覧を見ると Read more が連続されるようなのは避ける