Chrome 71 の新機能

Pete LePage

Chrome 71 では、以下をサポートしました。

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

Pete LePage と申します。Chrome 71 のデベロッパー向けの新機能について詳しく見てみましょう。

変更履歴

以下に示すのは主な変更点の一部です。Chrome 71 のその他の変更については、以下のリンクをご覧ください。

Intl.RelativeTimeFormat() で相対時間を表示する

Twitter に表示される最新投稿の相対時間

多くのウェブアプリでは、日時をすべて表示するのではなく、「昨日」、「2 日後」、「1 時間前」などのフレーズを使用して、何かが起こった日時や、起こる予定の日時を示します。

相対時間を表示することは非常に一般的であるため、一般的な日付/時刻ライブラリのほとんどは、これを処理するためのローカライズされた関数を提供しています。実際、私が作成するほとんどのウェブアプリでは、この目的のために Moment JS を最初に追加するライブラリの一つにしています。

Chrome 71 では Intl.RelativeTimeFormat() が導入されます。これにより、処理が JavaScript エンジンに移行され、相対時間のローカライズされた形式が有効になります。これによりパフォーマンスがわずかに向上します。つまり、ブラウザが新しい API をまだサポートしていない場合にのみ、これらのライブラリをポリフィルとして必要とします。

const rtf = new Intl.RelativeTimeFormat('en');

rtf.format(3.14, 'second');
// → 'in 3.14 seconds'

rtf.format(-15, 'minute');
// → '15 minutes ago'

使い方は簡単です。新しいインスタンスを作成して言語 / 地域を指定し、相対時間を指定して format を呼び出すだけです。詳細については、Mathias の Intl.RelativeTimeFormat API に関する投稿をご覧ください。

縦書きテキストの下線の位置を指定する

下線が不一致の縦向きテキスト

中国語または日本語のテキストが縦書きで表示されている場合、ブラウザによって下線の配置が異なります。左側または右側に配置される場合があります。

Chrome 71 では、text-underline-position プロパティで、CSS3 テキスト装飾仕様の一部として left または right が使用できるようになりました。CSS3 テキスト装飾仕様では、使用する線の種類、スタイル、色、位置などを指定できる新しいプロパティがいくつか追加されています。


.left {
  text-underline-position: left;
}

.right {
  text-underline-position: right;
}

音声合成にはユーザーの有効化が必要

サイトにアクセスしたときに、突然話しかけられて驚いたことがあるのではないでしょうか。自動再生ポリシーを使用すると、サイトが音声付きの音声ファイルや動画ファイルを自動的に再生するのを防ぐことができます。一部のサイトでは、代わりに 音声合成 API を使用してこの問題を回避しようとしています。

Chrome 71 以降、音声合成 API を使用するには、ページ上でユーザーによるなんらかの操作が必要になります。これにより、他の自動再生ポリシーと整合性がとれるようになります。ユーザーがページを操作する前に使用しようとすると、エラーが発生します。

const utterance = new window.SpeechSynthesisUtterance('Hello');
utterance.lang = lang || 'en-US';
try {
  window.speechSynthesis.speak(utterance);
} catch (ex) {
  console.log('speechSynthesis not available', ex);
}

サイトにアクセスして、自分や周囲の同僚を驚かせてしまうほど最悪なことはありません。

その他

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

Chrome DevSummit の動画

Chrome Dev Summit に参加できなかった方、または参加したけれどすべての講演を視聴できなかった方は、YouTube チャンネルの Chrome Dev Summit 2018 の再生リストをご覧ください。

Eva と Phil は、Service Worker を使用して高速で復元力の高いアプリを作成するで、Service Worker を使用する便利なテクニックについて説明しました。

Mariko と Jake は、複雑な JS を多用するウェブアプリで遅延を回避するで、Squoosh の構築方法について説明しています。

Katie と Houssein は、Speed Essentials: Key Techniques for Fast Websites で、サイトのパフォーマンスを最大限に引き出すための優れたテクニックについて説明しています。

ジェイクはケーキを落とした。Chrome DevSummit 2018 のプレイリストには、他にも多くの優れた動画がありますので、ぜひご覧ください。

登録

最新の動画情報を受け取るには、Chrome デベロッパーの YouTube チャンネルにチャンネル登録してください。新しい動画が公開されるとメール通知が届きます。

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