Chrome 69 の新機能

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

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

  • CSS Scroll Snap を使用すると、スムーズで滑らかなスクロール エクスペリエンスを作成できます。
  • ディスプレイ カットアウトを使用すると、ディスプレイ カットアウトの背後のスペース(ノッチとも呼ばれます)を含む画面全体を使用できます。
  • Web Locks API を使用すると、非同期でロックを取得し、処理の実行中は保持して解除できます。

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

ピート ルページです。では、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 入門書があり、より詳細な説明と多くの例が含まれています。specで詳細を確認してください。

など多数

もちろん、これらはデベロッパーにとっての 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 のリリース時に Chrome の新機能をお知らせします