このページは 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() ポリフィルがあります。このページには、コミュニティから送信された非常にクールなサンプルが多数含まれています。
classList.toggle() と同様に、属性の存在を切り替えるための新しい toggleAttribute() メソッドが要素に追加されました。
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 Developers YouTube チャンネルに登録してください。新しい動画が公開されるたびに、メール通知が届きます。

Chrome 70 がリリースされたらすぐにお知らせします