Chrome 95 新機能・更新内容まとめ

投稿: 2021年10月20日
タグ: 
  Web  ニュースネタ

Google Chrome 95 がリリースされました。今回も気になる変更がアナウンスされているので確認したいと思います。

前提として、対象は Google Chrome のデスクトップ版と Android 版です。

New in Chrome 95
https://developer.chrome.com/blog/new-in-chrome-95/open_in_new
  • URLPattern: URLパターン一致判定 API のネイティブサポート
  • EyeDropper API: Webページ上のクリックした場所の色を検出するツールを表示できる
  • User-Agent情報削減 Origin Trial(テスト) 開始
  • その他: 来年には Chrome のバージョン番号が 100(3桁) に
  • URLPattern: URLパターン一致判定 API のネイティブサポート

    URLPattern という名の通り、URL文字列が期待するパターンにマッチするかを定義・判定できる機能になっています。 既に様々なWebアプリフレームワークで実装されている必須機能ですが、開発の動機として以下のように書かれています。

    Past web platform features have individually created their own URL matching mechanism. Javascript has relied on libraries such as path-to-regexp.

    [訳] 過去のWebプラットフォームの機能はそれぞれ個別に独自のURLマッチング機能を作成していた。JavaScript は path-to-regexp のようなライブラリに依存している。

    Webフレームワーク(のルーティング機能) を使わずに Webサービスを開発することは基本ないでしょうし、URLのパターンマッチを個別のWebサービスで実装する機会もそれほどないと思います。 なので、この機能を個別のWebサービス開発者が使う機会は殆ど訪れないと思いますが、実際試してみると以下のようになりました。

    JavaScript
    const pattern = new URLPattern({ hostname: "{*.}?example.com" }); console.log("[1]", pattern.test("https://example.com/other/path?q=1")); console.log("[2]", pattern.test("ftp://example.com/other/path?q=1")); console.log("[3]", pattern.test("test://example.com/other/path?q=1")); console.log("[4]", pattern.test("https://blog.example.com/foo/bar")) console.log("[5]", pattern.test("https://blog-example.com/foo/bar")) console.log("[6]", pattern.exec("https://example.com/foo/bar"));
    Console 出力
    [1] true [2] true [3] false [4] true [5] false [6] {hash: {…}, hostname: {…}, inputs: Array(1), password: {…}, pathname: {…}, …} hash: {groups: {…}, input: ''} hostname: {groups: {…}, input: 'example.com'} inputs: ['https://example.com/foo/bar'] password: {groups: {…}, input: ''} pathname: {groups: {…}, input: '/foo/bar'} port: {groups: {…}, input: ''} protocol: {groups: {…}, input: 'https'} search: {groups: {…}, input: ''} username: {groups: {…}, input: ''} [[Prototype]]: Object}

    正規表現を使ってパスが適合しているかを確認しつつ、それをネイティブの API でできる、というところが改善点ということのようです。 JavaScript の Webフレームワークを「作る側」の人にはうれしい機能かもしれません。

    EyeDropper API: Webページ上のクリックした場所の色を検出するツールを表示できる

    2行書くだけで拡大鏡のようなツールがブラウザ上に表示され、選択した場所の色コードを取得できる API になってます。 以下でデモサイトが用意されているので実際触ってみるのが早いと思います。

    Eye Dropper Sample
    https://eyedropper-sample.glitch.me/open_in_new

    実際やってみて、以下のコードを入れ込むだけで表示できました。 以下例の場合、result にクリックされた場所の色コード(例: #e5e5e5) を含んだオブジェクトが格納されます。

    Javascript
    const eyeDropper = new EyeDropper(); const result = await eyeDropper.open();

    ちなみに、Google の説明によると Eye Dropper は Microsoft のエンジニアが開発したそうです。

    User-Agent情報削減 Origin Trial(テスト) 開始

    Chrome では User-Agent 文字列に含まれる情報の削減が長期的に進められており、 将来的に User-Agent 内のバージョン番号表記が 95.0.4683.54 のような表記から 95.0.0.0 になります。 メジャーバージョンのみで、マイナー・ビルド・パッチ番号が全部 0 表記になります。

    Chrome/95.0.0.0

    詳細なバージョン番号(の違い) が個人のトラッキングなどに利用されている現状を変えること等が目的にされています。

    Chrome 95 の段階では申請が必要ですが Chrome 101(2022年4月リリース想定) で正式リリースされる変更がテストできる状態になっています。 現状の計画は以下で確認できます。Chrome 95 でフェーズ2になりました。

    User-Agent Reduction Origin Trial and Dates
    https://blog.chromium.org/2021/09/user-agent-reduction-origin-trial-and-dates.htmlopen_in_new

    その他: 来年には Chrome のバージョン番号が 100(3桁) に

    Chrome 95 の変更ではありませんが、Chrome 100 が来年(おそらく3月) にリリースされるため、 バージョン番号がついに 3桁になるよ、と動画の中で注意喚起されていました。

    その他、『Chrome 90 から Origin Trial が継続している Storage Foundation API の新しい API(createAccessHandle)』、 『WebAssembly の Exception Handling』が頭出しだけ紹介されていました。

    Chrome はブラウザシェア寡占状態で Webサービス利用にはもれなく影響するのですが、 毎月ガンガン 他ブラウザにも載ってない機能が追加され、キャッチアップもなかなか大変です。

    Origin Trial(テスト)の期間が半年は用意されているので、その間にテストされる、という想定だと思いますが、 Webサービス開発者の多くが追加された機能や変更を把握してないんじゃないかな、と思ってしまいます。