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 つだけ含まれていました（太さやストレッチなど）。通常、太字、斜体を使用する場合は、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 による Introduction OpenType Variable Fonts をご覧ください。

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

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

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

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

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

その他

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

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

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