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 を使用する便利なテクニックについて説明しました。

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

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

ジェイクはケーキを落とした。Chrome DevSummit 2018 の再生リストには、他にも素晴らしい動画がたくさんありますので、ぜひご覧ください。

登録

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

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