Chrome 79 がリリースされました。
- Android にインストールされているプログレッシブ ウェブアプリで、マスク可能なアイコンがサポートされるようになりました。
- WebXR Device API を使用して、没入感のあるエクスペリエンスを作成できるようになりました。
- Wake Lock API はオリジン トライアルとして利用できます。
rendersubtree
属性はオリジン トライアルとして使用できます。- Chrome DevSummit の動画を公開しました。
- その他にもたくさんの機能があります。
私は Pete LePage です。では、Chrome 79 のデベロッパー向けの新機能を詳しく見てみましょう。
マスク可能なアイコン
Android O 以降を搭載していて、プログレッシブ ウェブアプリをインストール済みの場合、アイコンの周りに不快な白い円が表示されることにお気づきでしょう。
幸いなことに、Chrome 79 では、インストール済みのプログレッシブ ウェブアプリでマスク可能なアイコンがサポートされるようになりました。アイコンはセーフゾーン内、つまり基本的にはキャンバスの 80% の直径の円に収まるように設計する必要があります。
次に、ウェブアプリ マニフェストで新しい purpose
プロパティをアイコンに追加し、値を maskable
に設定します。
{
...
"icons": [
...
{
"src": "path/to/maskable_icon.png",
"sizes": "196x196",
"type": "image/png",
"purpose": "maskable"
]
...
}
Tiger Oakes は、CSS のトリックに関する素晴らしい投稿である Maskable Icons: Android Adaptive Icons for Your PWA に詳細が掲載されています。また、アイコンが適合するかどうかをテストするための優れたツールも用意されています。
ウェブ XR
WebXR Device API を使用して、スマートフォンやヘッドマウント ディスプレイで没入感のあるエクスペリエンスを作成できるようになりました。
WebXR はあらゆる種類の没入体験を可能にします。たとえば、拡張現実を使用して、自宅に新しいソファが置かれている様子を実際に確認したり、バーチャル リアリティ ゲームや 360 度映画を見たりすることができます。
新しい API の使用を開始するには、Virtual Reality Comes to the Web をご覧ください。
新しいオリジン トライアル
オリジン トライアルは、試験運用中の機能と API を検証し、より広範なデプロイでのユーザビリティと有効性について Google がフィードバックできるようにする機会です。
試験運用版の機能は通常、フラグの下でしか利用できませんが、機能のオリジン トライアルが提供されている場合は、そのオリジン トライアルに登録して、オリジンのすべてのユーザーに対して機能を有効にできます。
オリジン トライアルにオプトインすると、ベータ版テストのユーザーが、Chrome で特別なフラグを反転することなく、トライアル期間中に試すことができるデモとプロトタイプを作成できます。
オリジン トライアルについて詳しくは、ウェブ デベロッパー向けオリジン トライアル ガイドをご覧ください。Chrome オリジン トライアルのページで、有効なオリジン トライアルの一覧を確認し、登録できます。
wake lock
Google スライドについて非常に気に入った点は、1 枚のスライドで資料を長時間開いたままにするとスクリーンセーバーがオンになる点です。続行するには、パソコンのロックを解除する必要があります。全然
しかし、新しい Wake Lock API では、ページからロックをリクエストして、画面が暗くなったり、スクリーンセーバーが有効になったりしないようにできます。これはスライドに最適ですが、レシピサイトなどで画面を表示したままにして手順を進めたい場合にも役立ちます。
wake lock をリクエストするには、navigator.wakeLock.request()
を呼び出し、返された WakeLockSentinel
オブジェクトを保存する必要があります。
// The wake lock sentinel.
let wakeLock = null;
// Function that attempts to request a wake lock.
const requestWakeLock = async () => {
try {
wakeLock = await navigator.wakeLock.request('screen');
wakeLock.addEventListener('release', () => {
console.log('Wake Lock was released');
});
console.log('Wake Lock is active');
} catch (err) {
console.error(`${err.name}, ${err.message}`);
}
};
ロックは、ユーザーがページから離れるか、以前に保存した WakeLockSentinel
オブジェクトで release
を呼び出すまで維持されます。
// Function that attempts to release the wake lock.
const releaseWakeLock = async () => {
if (!wakeLock) {
return;
}
try {
await wakeLock.release();
wakeLock = null;
} catch (err) {
console.error(`${err.name}, ${err.message}`);
}
};
詳しくは、web.dev/wakelock をご覧ください。
rendersubtree
属性
DOM の一部をすぐにレンダリングしたくない場合もあります。たとえば、コンテンツが大量にあるスクローラーや、常にコンテンツの一部しか表示されないタブ形式の UI などです。
新しい rendersubtree
属性は、サブツリーのレンダリングをスキップできることをブラウザに伝えます。これにより、ブラウザがページの残りの部分の処理に費やす時間が増え、パフォーマンスが向上します。
rendersubtree
を invisible
に設定すると、要素のコンテンツは描画されず、ヒットテストも行われないため、レンダリングを最適化できます。
rendersubtree
を activatable
に変更すると、invisible
属性が削除され、コンテンツがレンダリングされます。
Chrome Dev Summit 2019
Chrome Dev Summit を見逃した方は、すべての講演を YouTube チャンネルでご覧いただけます。
また、Jake の Twitter スレッドには、当チームの最新のメンバーである Surjiko をはじめ、講演の合間に行われた楽しい内容がすべて記載されています。
参考資料
ここでは、主なハイライトの一部のみを取り上げています。Chrome 78 で追加された変更点については、以下のリンクをご覧ください。
- Chrome DevTools の新機能(79)
- Chrome 79 のサポート終了と削除
- ChromeStatus.com の更新(Chrome 79)
- JavaScript の新機能(Chrome 79)
- Chromium ソース リポジトリの変更リスト
チャンネル登録
最新の動画をご覧になりたい場合は、ぜひ Chrome Developers YouTube チャンネルにご登録ください。新しい動画が公開されるたびにメール通知が届きます。
Chrome 80 のリリース時に Chrome の新機能をお知らせします