必知事項は次のとおりです。
- 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 回の 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 DevTools の新機能(100)
- Chrome 100 のサポート終了と削除
- ChromeStatus.com の更新(Chrome 100)
- Chromium ソース リポジトリの変更リスト
- Chrome リリース カレンダー
登録
最新情報を入手するには、Chrome Developers YouTube チャンネルに登録してください。新しい動画が公開されるたびに、メール通知が届きます。
Chrome 101 のリリースと同時に Chrome の最新情報をお伝えします