O hirunewani blog

Frontend Weekly 2024-06-14

Created at

Chrome 126、State of HTML 2023にみるアクセシビリティの現状などについて紹介する。

Chrome 126

2024年6月11日にChrome 126がリリースされました。

Chrome 126  |  Release notes  |  Chrome for Developers

Gemini nanoは不明

Google I/OでChrome 126から、Gemini NanoはChromeデスクトップクライアントに組み込まれるという発表がありましたが、残念ながら組み込まれていないようです。リリースノートに延期という記載もないため不明です。Chrome 127 Betaで利用可能です。

const canCreate = await window.ai.canCreateTextSession();

if (canCreate !== "no") {
  const session = await window.ai.createTextSession();

  const result = await session.prompt("日本の一番高い山は何ですか？");
  console.log(result);

  const stream = session.promptStreaming(
    "次のキーワードを使って短い物語を書いてください：海、鳥"
  );
  for await (const chunk of stream) {
    console.log(chunk);
  }
}

CSSのみでView TransitionsをMPAで行えるようになった

以前からSPAでは、View Transitions APIを利用することでスムーズな遷移を実現できましたが、MPAでもView Transitions APIを利用できるようになりました。

今までMPAでスムーズな遷移を実現するには、Astroなどのように遷移先のページを取得しておくなどJavaScriptによる処理が必要でした。

View Transition API によるスムーズな遷移  |  View Transitions  |  Chrome for Developers

次の指定を遷移元・遷移先に行うことで、SPAの場合と同じようにView Transitions APIを利用できます。ただし同一ドメインである制約はあります。

@view-transition {
  navigation: auto;
}

import assertion ‘assert’ 構文の使用中止と削除

他の環境と同様にimport assertionが削除され、SyntaxErrorを吐くようになりました。with syntaxに置き換える必要があります。

- import m from 'foo' assert { type: 'json' }
+ import m from 'foo' with { type: 'json' }

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/import

CPU のスロットルを 20 倍にする - DevTools

パフォーマンスタブのCPUで20x slowdownを選択できるようになりました。M3 MacBook Proでは、CLSの問題を確実に測定および診断することができない問題があったため、より強力なCPUスロットルが必要になったようです。

https://issues.chromium.org/issues/324978881

その他

Chrome以外の環境で利用できないものやニッチなものなど。

  • URL.parse()
    • リリースノートに書かれていないが出荷されている。
    • このようなコードを書くと二重でパースされてしまう。これを避けるために生えた。
    if (URL.canParse(str)) {
  return new URL(str);
}
  • CloseWatcher APIの再有効化
    • dialog要素やpopover要素を閉じるキー操作やAndroidの操作を簡単に扱うためのAPI。
    • Chrome 120で導入されたが、バグがあったため無効化された。
  • Gamepad APIのトリガーランブル拡張機能
  • GeolocationCoordinates、GeolocationPositionのtoJSONメソッド 
    navigator.geolocation.getCurrentPosition(position => {
  console.log(position.toJSON());
});

State of HTML 2023にみるアクセシビリティの現状

先月公開されたState of HTML 2023をアクセシビリティの側面から見ている。

State of HTML 2023にみるアクセシビリティの現状 | アクセシビリティBlog | ミツエーリンクス

記事で取り上げられており、ほとんどの環境で利用できるものに限り、軽く紹介します。

Others

URL.parse を Chromium で Ship するまで | blog.jxck.io

VercelのSpeed Insightsでどの要素が低いWebスコアの原因になっているのか表示されるようになった。

HTML element attribution in Speed Insights – Vercel

TypeScriptでは、組み合わせ爆発を防ぐために判別可能な型の組み合わせが25パターンまでに制限されている。他にも50回までしか再帰出来ない制限など。

TypeScriptは26以上のメンバーを絞り込めない！

熟練が必要なUIについて議論

UIの慣性、開発者がユーザー体験を良くするために行った変更によって、既存の”習熟した”ユーザーが使いにくくなるということはままある。

熟練が必要なUIについて、それがよくない理由と、UIの慣性について

内容に関係ないが、駅員の操作は間違っているわけではなく、動画全体と通して見ると恐らく指差し確認の類なのではないかなと思った。

マルスと「熟練が必要なUI」についての議論

CSSのみでスクロール速度を検出する試み。

CSS-only Custom Range Slider with Motion