このページは Cloud Translation API によって翻訳されました。

Chrome 69 の新機能

Pete LePage

Chrome が初めてリリースされてから 10 年が経ちました。それから多くのことが変わりましたが、最新のウェブアプリケーションの堅固な基盤を構築するという Google の目標は変わりません。

Chrome 69 では、以下がサポートされるようになりました。

CSS スクロールスナップを使用すると、スムーズで洗練されたスクロールエクスペリエンスを作成できます。
ディスプレイカットアウトを使用すると、ディスプレイカットアウト（ノッチ）の背後のスペースも含め、画面の全領域を使用できます。
Web Locks API を使用すると、ロックを非同期で取得し、処理中に保持してから解放できます。

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

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

変更点の詳細なリストについては、Chromium ソースリポジトリの変更リストを確認する。

CSS スクロールスナップ

デモを見る | ソース

CSS スクロールスナップを使用すると、各スクロール操作の後に停止する位置をブラウザに指示するスクロールスナップ位置を宣言することで、スムーズで洗練されたスクロールエクスペリエンスを作成できます。これは、画像カルーセルや、ユーザーに特定の位置までスクロールして欲しいページネーションセクションに非常に便利です。

画像カルーセルの場合は、スクロールコンテナに scroll-snap-type: x mandatory; を追加し、各画像に scroll-snap-align: center; を追加します。ユーザーがカルーセルをスクロールすると、各画像がスムーズにスクロールされ、最適な位置に表示されます。

#gallery {
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  display: flex;
}

#gallery img {
   scroll-snap-align: center;
}

CSS スクロールスナップは、スナップターゲットのサイズが異なっていても、スクロールよりも大きい場合でも、適切に機能します。詳細と試すことができるサンプルについては、CSS スクロールスナップによる適切なスクロールをご覧ください。

ディスプレイカットアウト（ノッチ）

ディスプレイカットアウト付きのスマートフォン — ブラウザは、ディスプレイの切り欠きがあるモバイルデバイスに余分な余白を追加して、コンテンツが切り欠きによって覆われないようにします。

ディスプレイカットアウト（ノッチ）を備えたモバイルデバイスのリリース数は増加しています。そのため、ブラウザはページに余分な余白を追加して、ノッチによってコンテンツが隠れないようにします。

そのスペースを使用したい場合はどうすればよいですか？

CSS 環境変数と viewport-fit メタタグを使用すると、この問題を解決できます。たとえば、ディスプレイの切り欠き領域に拡大するようブラウザに指示するには、viewport メタタグの viewport-fit プロパティを cover に設定します。

<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>

その後、safe-area-inset-* CSS 環境変数を使用してコンテンツをレイアウトできます。

.content {
  padding: 16px;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

WebKit ブログには、iPhone X 向けのウェブサイトの設計に関する優れた投稿があります。詳しくは、説明をご覧ください。

Web Locks API

Web Locks API を使用すると、ロックを非同期で取得し、処理中に保持してから解放できます。ロックが保持されている間、オリジン内の他のスクリプトは同じロックを取得できないため、共有リソースの使用を調整できます。

たとえば、複数のタブで実行されているウェブアプリで、1 つのタブのみがネットワークと同期されるようにする場合、同期コードは network_sync_lock という名前のロックを確保しようとします。

navigator.locks.request('network_sync_lock', async lock => {
  // The lock has been acquired.
  await do_something();
  await do_something_else();
  // Now the lock will be released.
});

ロックを取得した最初のタブが、データをネットワークに同期します。別のタブが同じロックを取得しようとすると、キューに追加されます。ロックが解除されると、キュー内の次のリクエストにロックが付与され、実行されます。

MDN には、ウェブロックに関する入門書があり、より詳細な説明と多くの例が記載されています。詳しくは、仕様をご覧ください。

その他

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

円錐形グラデーション

CSS4 仕様では、円錐状のグラデーションを使用して、円の円周に沿って色の変化を作成できるようになりました。Lea Verou には、使用できる CSS conic-gradient() ポリフィルがあります。このページには、コミュニティから送信された非常にクールなサンプルが多数含まれています。
要素に新しい toggleAttribute() メソッドが追加されました。このメソッドは、classList.toggle() と同様に、属性の存在を切り替えます。
JavaScript 配列に、flat() と flatMap() の 2 つの新しいメソッドが追加されました。すべてのサブ配列要素が結合された新しい配列を返します。
OffscreenCanvas は、メインスレッドからワーカーに処理を移動し、パフォーマンスのボトルネックを解消します。

イースターエッグ

動画内のイースターエッグはすべて見つけましたか？

Chrome の新機能の 28 回のエピソードを制作するにあたり、ご協力いただいたすべての方々に感謝いたします。これらの人々は皆素晴らしいです。

Heather Duthie<br>
Tim Malieckal<br>
Rick Murphy<br>
Derek Bass<br>
Kiran Puri<br>
Nilesh Bell-Gorsia<br>
Lee Carruthers

Philip Maniaci<br>
Chris Turiello<br>
Andrew Barker<br>
Alex Crowe<br>
Izzy Cosentino<br>
Norm Magnuson<br>
Loren Borja

Michelle Ortega<br>
Varun Bajaj<br>
Ted Maroney<br>
Andrew Bender<br>
Andrew Naugle<br>
Michelle Michelson<br>
Todd Rawiszer

Anthony Mcgowen<br>
Victoria Canty<br>
Alexander Koht<br>
Jarrod Kloiber<br>
Andre Szyszkowski<br>
Kelsey Allen<br>
Liam Spradlin

最初のエピソードから Chrome の新機能がどのように進化してきたかを確認したいですか？最初の動画から現在までの歴史をまとめた、楽しい 30 秒間の進捗状況動画をご覧ください。

コメントやフィードバックをお寄せいただき、ありがとうございます。いただいたご意見はすべて拝見し、今後の参考にさせていただきます。皆様のおかげで、これらの動画はさらに良くなりました。

ご視聴ありがとうございました。

Chrome の「NG シーン」の新機能

楽しい NG シーンをまとめた動画を作成しましたので、ぜひご覧ください。視聴した後、いくつかのことを学びました。

言葉に詰まると、変な音が出る。
変顔をして舌を出す。
よく動きます。

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

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