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 つの太さや 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 ページにデータを入力すると、アドレスバーに「保護されていない」というラベルが付いてページがマークされます。このラベルは、シークレット モードのすべての HTTP ページにも表示されます。

その他

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

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

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