このページは Cloud Translation API によって翻訳されました。

Chrome 95 の新機能

Pete LePage

必知事項は次のとおりです。

ブラウザに組み込まれた URLPattern により、ルーティングが容易になります。
Eye Dropper 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 ライブラリを使用できます。

詳しくは、ジェフの記事「URLPattern でウェブプラットフォームにルーティングを導入する」をご覧ください。

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

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

Microsoft の社員が実装したアイドロッパーの API は、その機能をウェブにもたらします。使用するには、新しい EyeDropper() インスタンスを作成し、そのインスタンスで open() を呼び出します。

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

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

簡単なデモを試したり、Glitch でコードを確認したりできます。

PWA サミット

今月初めに開催された PWA サミットに参加されましたか？

多くのユーザーが PWA について語り、経験を共有してくれたことを嬉しく思います。見逃した方は、動画はすべて公開されていますので、PWASummit.org または PWA Summit YouTube チャンネルでご確認ください。

ユーザーエージェントの情報量削減に関するオリジントライアル

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

Chrome 95 以降では、新しいオリジントライアルが実施され、削減された UA 文字列の受信をオプトインできるようになります。これにより、UA の削減が Chrome のデフォルト動作になる前に、問題を検出して修正できます。

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

詳細とタイムラインについては、developer.chrome.com のユーザーエージェントの情報量削減に関するオリジントライアルの投稿をご覧ください。

その他

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

Storage Foundation API の開発に注目されている方は、アクセスハンドルのオリジントライアルが新たに開始されたことをご存じでしょう。
WebAssembly で例外処理のサポートが提供されるようになりました。これにより、例外がスローされたときにコードが制御フローを中断できるようになります。
Chrome 100 は来年リリースされます。つまり、コードが2 桁以上の数字を処理できるようにする必要があります。

Chrome 95 の新機能

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

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

PWA サミット

ユーザー エージェントの情報量削減に関するオリジン トライアル

その他

関連情報

登録

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

ユーザーエージェントの情報量削減に関するオリジントライアル