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

Chrome 69 の新機能

Pete LePage

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

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 には、Web Locks の入門があり、より詳細な説明と多くの例が含まれています。または、仕様で詳細を確認してください。

その他

もちろん、Chrome 69 の開発者向け変更点はこれだけではありません。

円錐グラデーション

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

イースターエッグ

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

New in 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 がリリースされたら、すぐにこの場で Chrome の新機能をお知らせします。

Chrome 69 の新機能 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

CSS スクロール スナップ

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