Chrome 95 の新機能

Pete LePage

次の説明をお読みください。

  • ブラウザに組み込まれた URLPattern により、ルーティングが容易になります。
  • スポイト API は、色を選択するための組み込みツールを提供します。
  • 削減された UA 文字列を今すぐ受け取ることを選択できる新しいオリジン トライアルが開始されました。
  • PWA Summit の動画はすべてオンラインで公開されています。
  • 他にも多くの機能があります。

Pete LePage です。自宅で仕事をして、自宅で撮影しています。Chrome 95 でデベロッパー向けの新機能を見ていきましょう。

URLPattern を使用したルーティング

ほぼすべてのウェブアプリは、何らかの形でルーティングに依存しています。たとえば、ディスク上のファイルにパスをマッピングするサーバーで実行されるコードや、URL が変更されたときに DOM を更新するシングルページ アプリのロジックなどです。URLPattern は、ルーティング パターンの構文を標準化する新しいウェブ プラットフォーム API です。

既存のフレームワークの基盤上に構築されているため、一般的なルーティング タスクを簡単に実行できます。たとえば、完全な URL または URL パス名と照合し、トークンとグループの一致に関する情報を返します。

Express、Ruby on Rails、path-to-regexp で使用されるルーティング構文に精通している場合は、この構文に見覚えがあるかもしれません。

これを使用するには、新しい URLPattern() を作成し、パターン マッチングの対象となる詳細を指定します。パターンには、ワイルドカード、名前付きトークン グループ、正規表現グループ、グループ修飾子を含めることができます。

const p = new URLPattern({
  protocol: 'https',
  hostname: 'example.com',
  pathname: '/:folder/*/:fileName.jpg',
  search: '*',
  hash: '*',
});

たとえば、Google ドキュメントで使用される可能性のある URLPattern を見てみましょう。ファイルの kind、ファイルの ID、開く mode を指定します。パターンを使用するには、test() または exec() を呼び出します。

const url = 'https://docs.google.com/document/d/1s...5c/edit#heading=h.8...c';

const pattern = new URLPattern({
  pathname: '/:kind/d/:fileID/:mode',
  hash: '*',
});

const r = pattern.exec(url);
// {
//   "pathname": {"groups": {
//     "fileID": "1s...5c",
//     "kind": "document",
//     "mode": "edit"
//   }, ...},
//   "hash": {"groups": {"0":"heading=h.8...c"}, ...},
//   ...
// }

URLPattern は、Chrome と Edge のバージョン 95 以降でデフォルトで有効になっています。まだ対応していないブラウザや Node などの環境では、urlpattern-polyfill ライブラリを使用できます。

詳しくは、Jeff の記事 URLPattern brings routing to the web platform をご覧ください。

Eye Dropper API を使用した色の選択

私がこれまで使用したほとんどすべてのデザインアプリには、スポイトツールが搭載されており、簡単に色を調べることができます。一部のブラウザには <input type=color> にスポイト機能が組み込まれていますが、理想的ではありません。

Microsoft の一部のメンバーによって実装されたスポイト API は、その機能をウェブにもたらします。これを使用するには、新しい EyeDropper() インスタンスを作成し、そのインスタンスで open() を呼び出します。

const eyeDropper = new EyeDropper();
const result = await eyeDropper.open();
// result = {sRGBHex: '#160731'}

他の多くの最新のウェブ API と同様に、非同期で動作するため、メインスレッドをブロックしません。ユーザーが希望の色をクリックすると、クリックした色で解決されます。

PWA Summit

今月開催された PWA Summit をご覧になりましたか？

多くの方が PWA について語り、経験を共有しているのを見るのは素晴らしいことです。見逃した場合は、すべての動画がアップロードされているので、PWASummit.org または PWA Summit の YouTube チャンネルでご確認ください。

ユーザー エージェント文字列削減のオリジン トライアル

User-Agent の情報量削減とは、User-Agent 文字列の情報をブラウザのブランドとメジャー バージョン、パソコンかモバイルかの区別、実行されているプラットフォームのみに削減することで、パッシブ フィンガープリントのサーフェスを削減する取り組みです。

Chrome 95 以降では、削減された UA 文字列を今すぐ受け取ることを選択できる新しいオリジン トライアルが開始されます。これにより、削減された UA が Chrome のデフォルトの動作になる前に、問題を検出して修正できます。

変更は複数のリリースにわたって段階的に適用されますが、準備とテストに必要なものはすべて今すぐ利用できます。

詳細とタイムラインについては、developer.chrome.com の User-Agent Reduction オリジン トライアルに関する投稿をご覧ください。

その他

もちろん、他にもたくさんあります。

関連情報

ここでは、主なハイライトの一部のみを取り上げます。Chrome 95 のその他の変更については、以下のリンクをご覧ください。

登録

最新情報を入手するには、Chrome Developers の YouTube チャンネルに登録してください。新しい動画が公開されるたびにメール通知が届きます。

Chrome 96 がリリースされたら、すぐに Chrome の新機能をご紹介します。