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

Chrome 62 の新機能

Pete LePage

Twitter GitHub Glitch Mastodon ホームページ

Chrome 62 では、理論上の結果ではなく実際のパフォーマンス指標を提供することで、ネットワーク情報 API がより有用なものになっています。
OpenType 可変フォントのサポートを開始しました。
HTML メディア要素からメディアストリームをキャプチャできます。
Chrome 62 に導入される重要な変更について、特別なリマインダーがあります。

他にもいろいろあります。

ピートルページです。では、Chrome 62 のデベロッパー向けの新機能を詳しく見ていきましょう。

変更内容の完全なリストを確認するには、Chromium ソースリポジトリの変更リストを確認します。

ネットワーク品質インジケーター

Network Information API は以前から Chrome で使用できましたが、ユーザーの接続状況に応じた理論上のネットワーク速度しか提供されません。Wi-Fi に接続しているが、2G の速度しか使用できないモバイルアクセスポイントに接続しているとします。この場合、API は Wi-Fi を報告します。

console.log(navigator.connection.type);
> wifi

Chrome 62 では API が拡張され、クライアントから実際のネットワークパフォーマンス指標を取得できるようになりました。これらのネットワーク品質シグナルを使用して、ネットワークに合わせてコンテンツを調整できます。たとえば、接続が非常に遅い場合、ページ数を減らすことで、ページ読み込みのパフォーマンスを向上させることができます。

アプリケーションロジックを簡素化するために、API は、モバイル接続と比較した測定されたネットワークパフォーマンスを返します。たとえば、超高速ファイバー接続に接続されている場合、API は 4G を報告します。

console.log(navigator.connection.effectiveType);
> 4G

これらのシグナルは、HTTP リクエストヘッダーとしても使用でき、Client Hints を介して有効にします。詳細については、サンプルをご確認のうえ、specをご覧ください。

OpenType 可変フォント

従来は、1 つのフォントにフォントファミリーのインスタンスが 1 つ（1 つの太さや 1 つのストレッチなど）しか含まれていませんでした。標準、太字、斜体にする場合は、3 つの異なるフォントを使用して、ページの太さを大きくする必要があります。

OpenType 可変フォントは、複数の個別のフォントを 1 つのフォントファイルにコンパクトにパッケージ化したものです。font-variation-settings CSS プロパティを調整することで、ストレッチ、スタイル、太さなどを簡単に調整でき、スタイルに無数のバリエーションを提供できます。これらの 3 つのフォントを 1 つのコンパクトなファイルにまとめることができます。

.heading {
  font-family: "Avenir Next Variable";
  font-size: 48px;
  font-variation-settings: 'wght' 700, 'wdth' 75;
}
.content {
  font-family: "Avenir Next Variable";
  font-size: 24px;
  font-variation-settings: 'wght' 400;
}

OpenType 可変フォントは、レスポンシブなタイポグラフィを作成し、ページのデータ量を削減するための新しい優れたツールです。詳しくは、John Hudson による Introducing OpenType Variable Fonts をご覧ください。

DOM 要素からのメディアキャプチャ

Media Capture from DOM Elements API を使用して、音声や動画などの HTMLMediaElements から直接 MediaStream にライブキャプチャできるようになりました。

HTML メディア要素で captureStream() を呼び出すと、ストリーミングされたコンテンツをリモートで操作、処理、送信、または録画できます。ウェブオーディオを使用して、独自のイコライザーやボコーダを作成するとしましょう。または、WebRTC を使用してリモートサイトにコンテンツをストリーミングします。可能性はほぼ無限にあります。

一部の HTTP ページの「保護されていない」ラベル

以前にお知らせしたとおり、Chrome 62 以降、ユーザーが HTTP ページでデータを入力すると、アドレスバーに「保護されていません」というラベルが表示され、そのページに「保護されていません」というマークが表示されます。このラベルは、すべての HTTP ページにおいてシークレットモードでも表示されます。

など多数

もちろん、これらはデベロッパーにとっての Chrome 62 での変更点のほんの一部です。

Chrome for iOS で Payment Request API を使用できるようになりました。
WebVR オリジントライアルを使用して、試験運用版の充実した VR エクスペリエンスの構築を開始できます。

YouTube チャンネルにチャンネル登録すると、新しい動画が公開されるたびにメール通知が届きます。

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