Chrome 87 の新機能

現在、Chrome 87 の安定版のリリースが開始されます。

フォーマットの詳細については次をご覧ください。

私は Pete LePage です。自宅で仕事をしています。では、Chrome 87 でリリースされたデベロッパー向けの新機能を見てみましょう。

Chrome Dev Summit

Chrome Dev Summit のロゴ

Chrome Dev Summit が 12 月 9 日と 10 日に開催され、第 8 章を開催します。今回は皆さんが登場します。最新のアップデートと 多くの新しいコンテンツが導入されています

魅力的な講演、ワークショップ、オフィスアワーなどが満載です。YouTube チャットで皆様からのご質問にお答えします。視聴するだけでなく参加する方法についても、詳細でご確認ください。

カメラのパン、チルト、ズーム

Google のほとんどの会議室には、会議室内の人物にカメラを向けることができるように、パン、チルト、ズームの機能を備えたカメラが搭載されています。パン、チルト、ズームといった高性能な会議用カメラだけでなく、多くのウェブカメラでも PTZ がサポートされています。

Chrome 87 以降では、ユーザーが権限を付与すると、カメラの PTZ 機能を制御できるようになりました。

特徴検出は、使い慣れたものとは若干異なります。navigator.mediaDevices.getSupportedConstraints() を呼び出して、ブラウザが PTZ に対応しているかどうかを確認する必要があります。

const supports = navigator.mediaDevices.getSupportedConstraints();

if (supports.pan && supports.tilt && supports.zoom) {
  // Browser supports camera PTZ.
}

PTZ の権限のプロンプト

その後、他のすべての強力な API と同様に、ユーザーはカメラだけでなく PTZ 機能にも権限を付与する必要があります。

PTZ 機能の権限をリクエストするには、PTZ 制約を指定して navigator.mediaDevices.getUserMedia() を呼び出します。これにより、ユーザーは通常のカメラとカメラの両方に PTZ 権限を付与するように求められます。


try {
  const opts = {video: {pan: true, tilt: true, zoom: true}};
  const stream = await navigator.mediaDevices.getUserMedia(opts);
  document.querySelector("#video").srcObject = stream;
} catch (error) {
  // User denies prompt, or
  // matching media is not available.
}

最後に、MediaStreamTrack.getSettings() を呼び出して、カメラでサポートされている機能を確認します。

const [videoTrack] = stream.getVideoTracks();
const capabilities = videoTrack.getCapabilities();
const settings = videoTrack.getSettings();

if ('pan' in settings) {
  enablePan(capabilities, settings);
}
// Similar for tilt and zoom...

ユーザーが権限を付与したら、videoTrack.applyConstraints() を呼び出してパン、傾斜、ズームを調整できます。

function enablePan(capabilities, settings) {
  const input = document.getElementById('rangePan');
  input.min = capabilities.pan.min;
  input.max = capabilities.pan.max;
  input.step = capabilities.pan.step;
  input.value = settings.pan;

  input.addEventListener('input', async () => {
    const opts = { advanced: [{ pan: input.value }] };
    await videoTrack.applyConstraints(opts);
  });
}

個人的には、面倒なキッチンを隠すことができる PTZ がすごく楽しみだけど、 詳しくは動画を見てね!

Francois 氏は カメラのパン、チルト、ズームを制御するという優れた投稿を web.dev で公開しています。コードサンプル、権限をリクエストする最適な方法、デモを使用して、実際に試し、ウェブカメラが PTZ に対応しているかどうかを確認できます。

範囲リクエストと Service Worker

数年前から主要なブラウザで提供されている HTTP 範囲リクエストを使用すると、サーバーはリクエストされたデータをチャンク単位で送信できます。これは、スムーズな再生、スクラブの強化、一時停止と再開の機能の向上によりユーザー エクスペリエンスが向上するため、大きなメディア ファイルで特に役立ちます。

これまで、範囲リクエストとサービス ワーカーはうまく連携せず、デベロッパーは回避策を構築する必要がありました。Chrome 87 以降では、Service Worker 内から範囲のリクエストをネットワークに渡すだけで、

self.addEventListener('fetch', (event) => {
  // The Range: header will pass through
  // in browsers that behave correctly.
  event.respondWith(fetch(event.request));
});

範囲リクエストの問題と Chrome 87 での変更点については、web.dev にアクセスして Jeff の Service Worker での範囲リクエストを処理するをご覧ください。

オリジン トライアル: Font Access API

Photopea 画像エディタのスクリーンショット

Figma、Gravit Designer、Photopea などのデザインアプリをウェブに導入するのは素晴らしいことです。今後さらに多くのデザインアプリを導入する予定です。ウェブでは多数のフォントを利用できますが、ウェブですべてを利用できるわけではありません。

多くのデザイナーは、仕事に欠かせないフォントをコンピュータにインストールしています。たとえば、企業ロゴフォントや、CAD やその他のデザイン アプリケーションに特化したフォントなどです。

Chrome 87 でオリジン トライアルが開始されるフォント アクセス API を使用すると、サイトでインストール済みのフォントを列挙できるようになり、ユーザーはシステム上のすべてのフォントにアクセスできます。


// Query for all available fonts and log metadata.
const fonts = navigator.fonts.query();
try {
  for await (const metadata of fonts) {
    console.log(`${metadata.family} (${metadata.fullName})`);
  }
} catch (err) {
  console.error(err);
}

// Roboto (Roboto Black)
// Roboto (Roboto Black Italic)
// Roboto (Roboto Bold)

また、サイトは下位レベルでフックインしてフォントバイトにアクセスし、独自の OpenType レイアウト実装や、グリフ形状に対するベクター フィルタや変換を行うことができます。

const fonts = navigator.fonts.query();
try {
  for await (const metadata of fonts) {
    const sfnt = await metadata.blob();
    makeMagic(metadata.family, sfnt);
  }
} catch (err) {
  console.error(err);
}

web.dev の Tom の記事ローカル フォントで高度なタイポグラフィを使用するに詳細が記載されており、自分で試せるオリジン トライアルへのリンクがあります。

その他

  • 転送可能なストリーム - ReadableStreamWritableStreamTransformStream の各オブジェクトを引数として postMessage() に渡すことができます。
  • CSS の論理プロパティと値の仕様で、詳細な flow-relative 機能(省略形やオフセットなど)が実装されており、論理プロパティと論理値を少し簡単に記述できるようになっています。たとえば、1 つの margin-block プロパティで個別の margin-block-start ルールと margin-block-end ルールを置き換えることができます。
  • フォントの指標をオーバーライドするために、新しい @font-face 記述子を ascent-overridedescent-overrideline-gap-override に追加しました。
  • 新しい text-decoration プロパティと underline プロパティがいくつか導入されています。
  • また、クロスオリジン分離に関連する多くの変更があります。

参考資料

ここでは、主なハイライトの一部のみを取り上げています。Chrome 87 で追加された変更点については、以下のリンクをご覧ください。

チャンネル登録

最新の動画をご覧になりたい場合は、ぜひ Chrome Developers YouTube チャンネルご登録ください。新しい動画が公開されるたびにメール通知が届きます。

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