Chrome 75 では、以下をサポートするようになりました。
canvas
要素のレイテンシを短縮する新しい方法が追加されました。- ウェブアプリは、システム レベルの共有シートを使用して、インストールされている他のアプリとファイルを共有できるようになりました。
- 数値リテラルでアンダースコアを区切り文字として使用できるようになりました。これにより、読みやすさが向上します。
- Google I/O 2019 は終了しました。すべての講演は YouTube チャンネルでご覧いただけます。
Pete LePage と申します。Chrome 75 のデベロッパー向け新機能について、詳しく説明します。
変更履歴
以下に示すのは主な変更点の一部です。Chrome 75 のその他の変更については、以下のリンクをご覧ください。
- Chrome DevTools の新機能(75)
- Chrome 75 のサポート終了と削除
- ChromeStatus.com のアップデート(Chrome 75)
- Chrome 75 の JavaScript の新機能
- Chromium ソース リポジトリの変更リスト
低レイテンシの canvas
コンテキストのヒント
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 が終了しました
Google I/O に参加されなかった方や、すべての講演をご覧いただけなかった方のために、Chrome Developers YouTube チャンネルの Web at Google I/O 2019 プレイリストにすべての講演をご用意しています。
- Tom と私は、今年ブラウザに導入される驚くべき新機能の一部を紹介する「ウェブの新しい可能性を解き放つ」というプレゼンテーションを行いました。
- Addy と Katie は、「大規模なスピード」でパフォーマンスに関する便利なヒントとコツを紹介しています。
- Elizabeth と Paul は、「速度ツールの謎を解く」で、便利なデベロッパー ツールについて詳しく説明しています。
- 「フィーチャー フォンからデスクトップまで、高速でスムーズなウェブアプリを構築する」では、マリコがチームとともに、フィーチャー フォンからスマートフォン、デスクトップまで、あらゆるデバイスで動作する Proxx を構築した方法を紹介しました。Proxx をまだ使ったことがないなら、これはとても楽しいマインスイーパー クローンです。
登録
最新の動画情報を受け取るには、Chrome デベロッパーの YouTube チャンネルにチャンネル登録してください。新しい動画が公開されるとメール通知が届きます。
Pete LePage と申します。Chrome 76 がリリースされ次第、Chrome の新機能についてお知らせします。
写真クレジット
- スケッチ写真: Balázs Kétyi(Unsplash)