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

Chrome 100 の新機能

Pete LePage

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

Chrome 100 のバージョン番号が 3 桁になった
Chrome の初リリースから #100CoolWebMoments を祝い、思い出の道を歩みましょう。
ユーザーエージェント文字列に重要な変更が加えられています。
Multi-Screen Window Placement API を使用すると、ユーザーのマシンに接続されているディスプレイを列挙し、特定の画面にウィンドウを配置できます。
他にも多数の機能があります。

Pete LePage と申します。Chrome 100 のデベロッパー向けの新機能について詳しく見てみましょう。

Chrome 100

ブラウザが初めてバージョン 10 に達したとき、メジャーバージョン番号が 1 桁から 2 桁に変更されたため、いくつかの問題が発生しました。2 桁から 3 桁への移行をスムーズに行うためのヒントがいくつかあったでしょうか。

Chrome 100 はすでにリリースされており、Firefox 100 もまもなくリリースされます。3 桁のバージョン番号は、なんらかの方法でブラウザのバージョンを特定するサイトで問題を引き起こす可能性があります。過去数か月間、Firefox チームと Chrome チームは、ブラウザがバージョン番号 100 を報告するテストを実施しました（実際はバージョン 100 ではありません）。

これにより、いくつかの問題が報告されましたが、その多くはすでに修正されています。ただし、引き続きお客様のご協力が必要です。

ウェブサイトのメンテナンス担当者は、Chrome と Firefox 100 でウェブサイトをテストしてください。
ユーザーエージェントの解析ライブラリを開発する場合は、100 以上のバージョンを解析するテストを追加します。

詳しくは、web.dev の Chrome と Firefox のメジャーバージョン 100 への移行をご覧ください。

100 Cool Web Moments

100 Cool Web Moments のプロモーション画像

過去 100 回の Chrome リリースで、ウェブが成長し、デベロッパーの皆様が素晴らしいものを次々と構築していく様子を見るのは、本当にエキサイティングでした。過去を振り返り、過去 14 年間に起きた #100CoolWebMoments を祝ってみるのは楽しいと思い、この企画を始めました。

特に気に入った瞬間を教えてください。何か見逃しているものがある場合は（見逃しているはずです）、@Chromiumdev に #100CoolWebMoments を付けてツイートしてください。お楽しみください！

ユーザーエージェント文字列の削減

ユーザーエージェントについて言えば、Chrome 100 が、デフォルトで削減されていない User-Agent 文字列をサポートする最後のバージョンになります。これは、User-Agent 文字列の使用を新しい User-Agent Client Hints API に置き換える戦略の一環です。

Chrome 101 以降、ユーザーエージェントは段階的に削減されます。

削除される内容と削除日については、[Chromium ブログ][crblog] のユーザーエージェントの情報量削減のオリジントライアルと日程をご覧ください。

マルチスクリーンウィンドウの配置 API

アプリによっては、新しいウィンドウを開いて特定の場所や特定のディスプレイに配置することが重要な機能です。たとえば、スライドを使用してプレゼンテーションを行う場合、メインのディスプレイにはスライドを全画面表示し、他のディスプレイにはスピーカーのメモを表示します。

Multi-Screen Window Placement API を使用すると、ユーザーのマシンに接続されているディスプレイを列挙し、特定の画面にウィンドウを配置できます。

window.screen.isExtended を使用して、デバイスに複数の画面が接続されているかどうかをすばやく確認できます。

const isExtended = window.screen.isExtended;
// returns true/false

ただし、主な機能は window.getScreenDetails() にあり、接続されているディスプレイの詳細を提供します。

const x = await window.getScreenDetails();
// returns
// {
//    currentScreen: {...}
//    oncurrentscreenchange: null
//    onscreenschange: null
//    screens: [{...}, {...}]
// }

たとえば、プライマリスクリーンを特定し、requestFullscreen() を使用してそのディスプレイで要素を全画面表示にできます。

try {
  const screens = await window.getScreenDetails();
  const primary = screens
         .filter((screen) => screen.primary)[0]
  await elem.requestFullscreen({ screen: primary });
} catch (err) {
  console.error(err);
}

また、新しいディスプレイの接続や取り外し、解像度の変更など、変更をリッスンする方法も提供します。

const screens = await window.getScreenDetails();
let numScreens = screens.screens.length;
screens.addEventListener('screenschange', (event) => {
  if (screens.screens.length !== numScreens) {
    console.log('Screen count changed');
    numScreens = screens.screens.length;
  }
});

詳しくは、web.dev の Tom による最新記事「Multi-Screen Window Placement API による複数のディスプレイの管理」をご覧ください。

その他

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

HID デバイス用の新しい forget() メソッドが追加されました。これにより、ユーザーによって付与された HID デバイスへの権限を取り消すことができます。

// Request an HID device.
const [device] = await navigator.hid.requestDevice(opts);


// Then later, revoke permission to the device.
await device.forget();

WebNFC の場合、makeReadOnly() メソッドを使用すると、NFC タグを恒久的に読み取り専用にできます。

const ndef = new NDEFReader();
await ndef.makeReadOnly();

Chrome 100 の新機能

Chrome 100

100 Cool Web Moments

ユーザー エージェント文字列の削減

マルチスクリーン ウィンドウの配置 API

その他

関連情報

登録

ユーザーエージェント文字列の削減

マルチスクリーンウィンドウの配置 API