Chrome 75 では、次の機能がサポートされるようになりました。
canvas
要素のレイテンシを短縮する新しい方法があります。- ウェブアプリは、システムレベルの共有シートを使用して、他のインストール済みアプリとファイルを共有できるようになりました。
- 数値リテラルでアンダースコアを区切り文字として使用できるようになり、読みやすくなりました。
- Google I/O 2019 は終了しました。すべての講演は Google の YouTube チャンネルで公開されています。
Pete LePage です。では、Chrome 75 のデベロッパー向けの新機能を詳しく見ていきましょう。
変更ログ
ここでは主なハイライトのいくつかのみを取り上げています。Chrome 75 での変更点については、以下のリンクをご覧ください。
- Chrome DevTools の新機能(75)
- Chrome 75 のサポート終了と削除
- ChromeStatus.com の更新(Chrome 75)
- JavaScript の新機能(Chrome 75)
- Chromium ソース リポジトリの変更リスト
低レイテンシの canvas
コンテキストのヒント
キャンバス要素を画面に描画するには、ページでグラフィックの更新を DOM と同期する必要があります。この同期により、レイテンシが発生することがあります。 たとえば、描画アプリではレイテンシが 50 ミリ秒を超えると目の調整が妨げられ、操作性が損なわれる可能性があります。
desynchronized
ヒントは、canvas
コンテキストを作成する際、通常の DOM 更新メカニズムをバイパスする別のコードパスを使用します。このヒントは、可能な限り合成をスキップするようシステムに指示します。canvas
の基になるバッファが画面のディスプレイ コントローラに直接送信されることがあります。これにより、レンダラ コンポジタ キューの使用で発生するレイテンシがなくなります。
非同期ヒントの使い方は簡単です。キャンバスの作成時に、オプション オブジェクトに desynchronized: true
を追加するだけです。
const opts = { desynchronized: true };
const ctx = canvas.getContext('2d', opts);
特徴検出の方法など、詳細については、Joe の記事非同期ヒントを使用した低レイテンシ レンダリングをご覧ください。
Web Share API を使用してファイルを共有する
Web Share API を使用すると、OS が提供する共有サービスに接続できるため、ユーザーのデバイスにインストールされた他のアプリとウェブページやアプリを簡単に共有できます。
Chrome 75 では、Web Share API でファイル共有がサポートされるようになりました。特に、アプリで写真や動画などを簡単に共有できるようになるという点は、特に素晴らしいと思います。Squoosh は、圧縮の完了後にファイルを共有するためのサポートを追加しています。Web Share API は現在、音声ファイル、画像、動画、テキスト ドキュメントの共有をサポートしています。
機能検出を使用して、Web Share API がサポートされているかどうかを確認し、サポートされていない場合は、従来のメカニズムにフォールバックすることをおすすめします。また、navigator.canShare
を使用すると、ファイル共有がサポートされているかどうかを確認できます。
const webShareAvailable = {
links: 'share' in navigator,
files: 'canShare' in navigator,
};
navigator.canShare
が true
を返した場合、これらのファイルの共有がサポートされているため、navigator.share
を呼び出し、共有するファイルの配列を含むオブジェクトを渡すことができます。Chrome でシステム共有シートが開き、ファイルを共有できるインストール済みアプリのリストが表示されます。
if (webShareAvailable.files) {
const shareData = { files: filesArray };
if (navigator.canShare(shareData)) {
shareData.title = 'Squooshed files.';
navigator.share(shareData)
.then(...)
.catch(...);
} else {
// File sharing not supported
}
}
デモをお試しください。詳細については、ウェブ共有でファイルを共有するをご覧ください。
数字区切り文字
数値リテラルでアンダースコア(_、U+005F)を区切り文字として使用して読みやすくしました。たとえば、1_000_000_000
は、算術演算では 1000000000
と同等のものとして解釈されます。
アンダースコアは数字の間にのみ使用できます。連続したアンダースコアは使用できません。そのため、3._14
、_2.71
、1.6__2
などのリテラルは不正です。
Google I/O 2019 は終了しました
I/O に参加できなかった方や、まだ参加していない方は、Chrome Developers YouTube チャンネルの Web at Google I/O 2019 プレイリストで講演をすべてご覧いただけます。
- Tom と私は、今年ブラウザに組み込まれた素晴らしい新機能の一部を取り上げた「Unlocking new features for the web」を発表しました。
- Addy と Katie が「Speed at Scale」でパフォーマンスに関するヒントとコツを説明しました。
- Elizabeth と Paul は、「Demystifying Speed Tooling」で、いくつかの優れた開発ツールについて触れました。
- また、「フィーチャー フォンからパソコンへの高速かつスムーズなウェブアプリの作成」では、マリコがフィーチャー フォンからスマートフォン、パソコンまで、あらゆるデバイスで動作する Proxx をどのように構築したかを説明しました。Proxx をまだ使ったことがないなら、これはとても面白いマインのスイーパー クローンです。
チャンネル登録
最新の動画をご覧になりたい場合は、ぜひ Chrome Developers YouTube チャンネルにご登録ください。新しい動画が公開されるたびにメール通知が届きます。
Chrome 76 のリリース時に Chrome の新機能をお知らせします
写真のクレジット
- Unsplash の Balázs Kétyi によるスケッチ写真