Chrome 62 の新機能

Pete LePage

他にもさまざまな機能があります。

Pete LePage と申します。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 リクエスト ヘッダーとしても使用でき、クライアント ヒントで有効にできます。詳しくは、サンプルと仕様をご覧ください。

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 による OpenType 可変フォントの紹介をご覧ください。

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

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

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

一部の HTTP ページに「安全ではありません」のラベルが表示される

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

その他

これらは、デベロッパー向け Chrome 62 の変更のほんの一部です。もちろん、他にも多くの変更があります。

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

担当の Pete LePage です。Chrome 63 がリリースされ次第、Chrome の新機能についてお知らせします。