このページは 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"}, ...},
//   ...
// }

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

詳しくは、Jeff の記事「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 Summit に参加されましたか？

多くの方が PWA について語り、その経験を共有するのを見て、感激しました。見逃した方は、動画がすべて公開されていますので、PWASummit.org または PWA Summit の YouTube チャンネルをご覧ください。

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

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

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

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

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

など多数

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

Storage Foundation API を使用している場合、新しいアクセスハンドルのオリジントライアルを利用できます。
WebAssembly が例外処理のサポートを提供するようになりました。これにより、例外がスローされたときにコードで制御フローを中断できます。
Chrome 100 は来年リリースされます。そこで、2 桁を超える数字を処理できるコードを用意する必要があります。

Chrome 95 の新機能

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

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

PWA サミット

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

など多数

関連情報

登録

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

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