このページは 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 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