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

Chrome 87 の新機能

Pete LePage

Chrome 87 は Stable 版としてリリースされます。

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

Chrome Dev Summit が 12 月 9 日と 10 日に開催されます。
対応するウェブカメラで、パン、傾斜、ズームを制御できるようになりました。
範囲リクエストと Service Worker では、それほど多くの回避策は必要ありません。
font access API の試験運用が開始されます。
他にもさまざまな機能があります。

Pete LePage です。自宅で撮影しています。Chrome 87 のデベロッパー向け新機能について詳しく見ていきましょう。

Chrome Dev Summit

Chrome Dev Summit が 12 月 9 日と 10 日に第 8 章で開催されます。今回は、Google が皆様のもとに伺います。最新のアップデート、多数の新しいコンテンツ、Chrome 関連のコンテンツをお届けします。

素晴らしい講演、ワークショップ、オフィスアワーなど、盛りだくさんの内容です。YouTube のチャットで質問にお答えします。詳細と、視聴だけでなく参加する方法もご確認ください。

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

Google のほとんどの会議室にはパン、チルト、ズームの機能を備えたカメラが設置されており、会議室にいる人にカメラを向けることができます。ただし、PTZ（パン、チルト、ズーム）をサポートするのは、高級な会議用カメラだけではありません。多くのウェブカメラもサポートしています。

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

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

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 範囲リクエストは、主要なブラウザで数年前から利用可能で、サーバーがリクエストされたデータをチャンクでクライアントに送信できるようにします。これは、大規模なメディアファイルに特に便利です。スムーズな再生、強化されたスクラブ、優れた一時停止と再開機能により、ユーザーエクスペリエンスが向上します。

これまで、範囲リクエストと Service Worker はうまく連携しなかったため、デベロッパーは回避策を構築する必要がありました。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 での変更点の説明については、Jeff の記事 Service Worker での範囲リクエストの処理（web.dev）をご覧ください。

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

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

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

多くのデザイナーは、仕事に不可欠なフォントがパソコンにインストールされています。たとえば、企業のロゴフォントや、CAD などの設計アプリケーション用の特殊フォントなどです。

Chrome 87 でオリジントライアルを開始する Font Access 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 の記事「ローカルフォントで高度なタイポグラフィを使用する」をご覧ください。また、オリジントライアルへのリンクも記載されているので、ご自身で試すことができます。

その他

転送可能なストリーム - ReadableStream、WritableStream、TransformStream オブジェクトを postMessage() に引数として渡せるようになりました。
CSS 論理プロパティと値の仕様で最も詳細な flow-relative 機能を実装しました。これらの論理プロパティと値を簡単に記述できるように、ショートカットとオフセットも実装しています。たとえば、1 つの margin-block プロパティで、個別の margin-block-start ルールと margin-block-end ルールを置き換えることができます。
フォントの指標をオーバーライドする新しい @font-face 記述子を ascent-override、descent-override、line-gap-override に追加しました。
新しい text-decoration プロパティと underline プロパティがいくつかあります。
また、クロスオリジン分離に関連する多くの変更があります。

Chrome 87 の新機能

Chrome Dev Summit

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

範囲リクエストと Service Worker

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

その他

関連情報

登録

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