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

Chrome 79 の新機能

Pete LePage

Twitter GitHub Glitch Mastodon ホームページ

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 Developers YouTube チャンネルにご登録ください。新しい動画が公開されるたびにメール通知が届きます。

Chrome 80 のリリース時に Chrome の新機能をお知らせします