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

Chrome 100 の新機能

Pete LePage

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

Chrome 100 には 3 桁のバージョン番号がある
Chrome の最初のリリース以来、#100CoolWebMoments を記念して思い出のひとときをお祝いしましょう。
ユーザーエージェント文字列に重要な変更がいくつかあります。
Multi-Screen Window Placement API を使用すると、ユーザーのマシンに接続されているディスプレイを列挙し、特定の画面にウィンドウを配置できます。
他にもたくさんあります。

ピートルページです。ではデベロッパー向け Chrome 100 の新機能を詳しく見ていきましょう

Chrome 入門ガイド

ブラウザのバージョンが初めてバージョン 10 に達したとき、メジャーバージョン番号が 1 桁から 2 桁に変わったため、いくつかの問題が発生しました。2 桁から 3 桁への移行を容易にするいくつかのことを学べば幸いです。

Chrome 100 はすでにリリースされており、Firefox 100 は近日中にリリースされます。この 3 桁のバージョン番号は、ブラウザのバージョンの特定方法に依存しているサイトでは問題を引き起こす可能性があります。Firefox チームと Chrome チームはここ数か月にわたり、ブラウザのバージョン番号が 100 ではなかったにもかかわらず、表示されるというテストを実施しました。

これにより、いくつかの問題が報告されましたが、その多くは修正済みです。まだご協力が必要です。

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

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

100 のクールなウェブモーメント

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

ウェブが成長するのを見るのはとてもエキサイティングで、過去 100 回の Chrome リリースで開発された優れたアプリを見ることもできます。Google は、過去 14 年間に起きた #100CoolWebMoments を記念して、思い出の道を歩んでお祝いするのが楽しいと考えました。

あなたが一番楽しかった瞬間を教えてください。情報が不足している場合は、@Chromiumdev に #100CoolWebMoments を付けてツイートしてください。ぜひご利用ください。

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

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

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

[Chromium ブログ][crblog] の User Agent Reduction Origin Trials and Dates で、削除される内容と時期についてご確認ください。

マルチスクリーンウィンドウプレースメント 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;
  }
});

詳しくは、Tom による Multi-Screen Window Placement API を使用した複数のディスプレイの管理（web.dev）をご覧ください。

など多数

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

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 のクールなウェブ モーメント

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

マルチスクリーン ウィンドウ プレースメント API

など多数

関連情報

登録

100 のクールなウェブモーメント

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

マルチスクリーンウィンドウプレースメント API