Chrome 71 の新機能

Chrome 71 では、次の機能がサポートされるようになりました。

他にもいろいろあります。

ピート ルページです。では 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'

使い方は簡単です。新しいインスタンスを作成してロケールを指定し、相対時間で形式を呼び出すだけです。詳細については、Mathias の The 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 でリリースされるデベロッパー向けの 変更のほんの一部です

  • Element.requestFullscreen() メソッドが Android でカスタマイズできるようになり、ナビゲーション バーを表示するか、ユーザー操作が行われるまでユーザー エージェント コントロールを表示しない完全な没入モードにするかを選択できます。
  • モジュール スクリプト リクエストのデフォルトの認証情報モードが、omit から same-origin に変更されました。
  • また、Chrome を Shadow DOM v1 の仕様に沿うようにすることで、Chrome 71 では、:host() 疑似クラスと :host-context() 疑似クラス、および ::slotted() の引数の特異性が計算されるようになりました。

Chrome DevSummit の動画

Chrome Dev Summit に参加できなかった方や、参加したが一部の講演をご覧になれなかった方は、YouTube チャンネルの Chrome Dev Summit 2018 の再生リストをご覧ください。

Eva と Phil は、Service Worker でより速く、より復元力のあるアプリを構築するで、Service Worker を使用するための優れた手法を理解しました。

Mariko と Jake が、複雑な JS を多用するウェブアプリ、Avoiding the SlowSquoosh を構築する方法について説明しました。

Katie と Houssein は、Speed Essentials: ウェブサイトを高速化するための主要な手法で、サイトのパフォーマンスを最大化するための優れた手法をいくつか紹介しました。

ジェイクはケーキを落とした。また、Chrome DevSummit 2018 の再生リストにもたくさんのすばらしい動画が公開されています。ぜひご覧ください。

チャンネル登録

最新の動画をご覧になりたい場合は、ぜひ Chrome Developers YouTube チャンネルご登録ください。新しい動画が公開されるたびにメール通知が届きます。

Chrome 72 のリリース時に Chrome の新機能をお知らせします