この記事は Chromium Blog の記事 "Chrome 89 Beta: Advanced Hardware Interactions, Web Sharing on Desktop, and More " を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。
特に記載のない限り、下記の変更は Android、Chrome OS、Linux、macOS、Windows 向けの最新の Chrome ベータ版チャンネル リリースに適用されます。ここに記載されている機能の詳細については、リンクまたは ChromeStatus.com の一覧でご確認ください。(2021 年 1 月 28 日に Chrome 89 がベータ版としてリリースされた時点の情報です)
WebHID API
ヒューマン インターフェース デバイス(HID)には、新しすぎる、古すぎる、あまりにも一般的でないなどの理由で、システムのデバイス ドライバからアクセスできないロングテールなものがあります。WebHID API は、デバイス固有のロジックを JavaScript で実装する方法を提供することで、この問題を解決します。
ヒューマン インターフェース デバイスは、人間からの入力を受け取ったり、人間に対して出力を提供したりします。デバイスには、キーボード、ポインティング デバイス(マウス、タッチスクリーンなど)、ゲームパッドなどがあります。
たとえば、ゲームパッドのサポートにおいては、一般的でない HID デバイスにアクセスできないのは特に苦痛です。ゲームパッドの入出力はうまく標準化されておらず、多くの場合、ウェブブラウザに特定のデバイス向けのカスタム ロジックが必要となります。これはサステナブルでなく、古いデバイスや一般的でないデバイスといったロングテールがサポートされないことになります。
WebHID のオリジン トライアルは終了し、PC 向けの Chrome 89 でデフォルトで有効になります。使用方法については、一般的でない HID デバイスに接続する で確認できます。ウェブのヒューマン インターフェース デバイス : いくつかの簡単な例 のデモもご覧ください。
Web NFC
NFC とは少量のデータを転送する近距離無線通信のことで、通常は専用の NFC デバイスとリーダー間の通信に使用します。建物に入るためにバッジをスキャンしたことがある方なら、NFC を使っているかもしれません。
Web NFC を利用すると、ウェブアプリから NFC タグの読み書きができます。これにより、博物館で展示情報を提供する、在庫を管理する、カンファレンスのバッジに情報を登録するなど、ウェブでさまざまな新しいユースケースを実現できるようになります。Web NFC は、Android 版の Chrome 89 でデフォルトで有効になります。
Chrome Dev Summit での Web NFC カードのデモ
NFC の読み書きは簡単なオペレーションで行うことができます。ペイロードの構築や解釈にいくつかの命令が必要になりますが、複雑ではありません。うれしいことに、ウェブで NFC デバイスと連携する という記事もありますので、ぜひご覧ください。実際に試してみることができるいくつかのサンプル もあります。次のようなイメージです。
NFC タグに文字列を書き込む :
if ("NDEFReader" in window) {
const ndef = new NDEFReader();
await ndef.write("Hello world!");
}
NFC タグのメッセージをスキャンする :
if ("NDEFReader" in window) {
const ndef = new NDEFReader();
await ndef.scan();
ndef.onreading = ({ message }) => {
console.log(`Records read from a NFC tag: ${message.records.length}`);
};
}
Web Serial API
シリアルポートは、データをバイト単位で送受信できる双方向通信インターフェースです。Web Serial API は、この機能をウェブサイトで実現し、マイクロコントローラや 3D プリンタなどのデバイスを制御できるようにします。
教育、趣味、工業の分野では、すでにウェブページから周辺機器を制御しています。その場合、デバイスの制御にはアダプターやドライバのインストールが必要です。Web Serial API は、ウェブサイトと周辺機器の直接通信を可能にすることで、ユーザー エクスペリエンスを改善します。
Web Serial API のオリジン トライアルが終了し、PC で有効になります。GitHub でデモが公開 されています。使用方法については、シリアルポートの読み書きを行う をご覧ください。
PC でのウェブ共有
デベロッパーは、ユーザーがソーシャル ネットワークで簡単にコンテンツを共有できるようにするため、各ソーシャル サービス用の共有ボタンを手動でサイトに組み込んでいます。このため、ユーザーが実際に使っているサービスで共有できないことが多く、ページサイズの肥大化やサードパーティ製コードによるセキュリティ リスクも発生しています。受信側では、共有ターゲットとして登録して他のアプリからの共有を受け取ることができるのは、プラットフォームのアプリのみです。
Android 版の Chrome では、Chrome 61 から 75 の間でこれらの機能の追加を始めました。Chrome 89 では、ウェブ共有が Windows と ChromeOS でも利用できるようになります。ただし、共有ターゲットとしての登録は ChromeOS のみでサポートされます。これらのプラットフォームでは、PC のサイトで navigator.share() を使うと、共有ダイアログ ボックスを開くことができます。また、ウェブアプリ マニフェストのエントリを追加すると、PWA を共有ターゲットにすることができます。
ウェブ共有についての情報は、Web Share API で OS の共有 UI を組み込む をご覧ください。PWA を共有ターゲットにすることについての詳しい情報は、Web Share Target API で共有データを受け取る をご覧ください。
オリジン トライアル
このバージョンの Chrome には、新しいオリジン トライアルはありません。現在のオリジン トライアルに登録するには、オリジン トライアル ダッシュボード をご覧ください。オリジン トライアル自体の詳細については、ウェブ デベロッパーのためのオリジン トライアル ガイド をご覧ください。
今回のリリースに追加されたその他の機能
AVIF 画像のデコード
Chrome が AVIF コンテンツのデコード をネイティブにサポートします。Android と WebView は既存の AV1 デコーダを利用します(PC 版でのサポートは、Chrome 85 で追加されました)。AVIF は次世代の画像フォーマットで、Alliance for Open Media が標準化しています。AVIF のサポートには、主に 3 つの目的があります。
ページ読み込みを高速化して全般的なデータ消費量を削減するため、使用する帯域幅を減らします。AVIF を使うと、JPEG や WebP に比べて画像のファイルサイズを大幅に削減できます。
HDR カラーをサポートします。AVIF は、ウェブでの HDR 画像のサポートに向けた一歩です。JPEG の色深度は、実質的に 8 ビットに限られています。輝度、色ビット深度、色域の面でディスプレイの機能が強化されていることから、JPEG では失われる画像データを保存したいと考えるウェブ関係者が増えています。
エコシステムの関心に対応します。ウェブにおいて大きな存在感を持つ企業が、ウェブに AVIF 画像を掲載することに興味を示しています。
Cross-Origin Opener Policy Reporting API
新しい Reporting API は、Cross-Origin Opener Policy (COOP) のデプロイに役立ちます。この API は、COOP が強制される際の違反の報告に加え、COOP の報告のみのモードも提供します。COOP の報告のみのモードは COOP を強制しませんが、COOP を強制していれば発生していた潜在的な違反を報告します。デベロッパーは、Chrome DevTools で Reporting API が有効になっているかを確認できます。
ウェブアプリ マニフェストでの display のオーバーライド
ウェブアプリ マニフェストに display_override フィールドが新しく追加されます。これにより、デベロッパーが display フィールドのフォールバック チェーンを明示的に指定できるようになります。次の例では、"minimal-ui" を "standalone" にフォールバックする指定をしています。
{
"display": "standalone",
"display_override": ["minimal-ui"],
}
この API は、高度なユースケースと表示モードを想定したもので、機能は限られています。詳しくは、Chrome Status のエントリ をご覧ください。
ReadableStreamDefaultController インターフェースの公開
Chrome は、他の ReadableStream 関連のクラスと同じように、グローバル オブジェクトで ReadableStreamDefaultController インターフェースを公開します 。これにより、インスタンスをストリームのコンストラクタの内部で作成しなければならないという、これまでの制限がなくなります。
performance.measureUserAgentSpecificMemory()
この機能により、ウェブページのメモリ使用量を見積もる performance.measureUserAgentSpecificMemory() 関数 が追加されます。このメソッドは COOP/COEP の制限を受けるので、これを使うにはウェブサイトがクロスオリジン分離 されている必要があります。
潜在的に信頼できる data: URL
現在のウェブ標準に準拠するため、Chrome はすべての data: URL を潜在的に信頼できるものとして扱います 。
これは、認証や機密性に関して最低限の基準しか満たされていない場合でも、ある機能を有効化するためには、URL が安全かどうかを評価しなければならないことがあるためです。ウェブ標準は、それを実現するために「潜在的に信頼できる URL」の定義を使いますが、最新版の Secure Contexts 仕様では、そこに "data" スキームの URL が含まれています。これまでの Blink は、いくつかの data: URL のみを潜在的に信頼できるものとして扱っていました。
Streams API: バイト ストリーム
ストリーム API では、データ ストリームの作成、構成、使用のためのユビキタスで相互運用可能なプリミティブが提供されます。Chrome は、バイトを表すストリームで拡張バージョンの読み取り可能ストリーム をサポートし、バイトを効率的に扱います。具体的には、コピーの回数を最低限にとどめます。
バイト ストリームは、Bring Your Own Buffer(BYOB)のリーダーを取得できます。デフォルトの実装では、ウェブソケットの場合は文字列や配列バッファなどのさまざまな種類の出力を指定できますが、バイト ストリームではバイト出力が保証されます。さらに、BYOB リーダーを扱えることで、安定性のメリットももたらされます。バッファがデタッチされれば、同じバッファに 2 回書き込まれないことが保証され、競合状態を回避できるためです。BYOB リーダーではバッファが再利用されるため、読み取りのたびにガベージ コレクションを行う必要もありません。
SVG 要素での完全な 'filter' プロパティ構文のサポート
Chrome の SVG 要素で 'filter' プロパティの完全な構文が利用できる ようになります。これまでは、1 つの url() 参照しかサポートされませんでした。これにより、blur()、sepia()、grayscale() などのフィルタ関数を SVG 要素と非 SVG 要素の両方に適用できるようになります。また、'filter' のプラットフォーム サポートの均一性が増し、一部の「定型」エフェクトを適用しやすくなります。この機能がないときは、grayscale() や blur() といった基本的なフィルタを使う場合でも、SVG の完全な <filter> 要素定義を使う必要がありました。
WebAuthentication API: ResidentKeyRequirement と credProps エクステンション
Chrome で Web Authentication API に関連する 2 つの新機能 がサポートされます。AuthenticatorSelectionCriteria.residentKey プロパティは、ウェブ認証のクレデンシャル登録において、クライアント側で検出可能なクレデンシャルを作成するかどうかを指定します。
Web Authentication の credProps エクステンションは、作成したクレデンシャルがクライアント側で検出可能(discoverable)かどうかをリライング パーティに示します。「クライアント側で検出可能なクレデンシャル」とは、WebAuthn API リクエストでリライング パーティがクレデンシャル ID を提供することなくチャレンジを行えるタイプの WebAuthn クレデンシャルです。ブラウザは、指定された認証器(外部セキュリティ キーか組み込みのもの)からのすべての検出可能なクレデンシャル(discoverable credentials)のリストを表示し、ユーザーがログインに使うものを選択できるようにします。
CSS
::target-text 疑似要素
scroll-to-text フラグメント にデフォルトのユーザー エージェントのハイライトとは違うスタイルを設定できるようにするため、ハイライト疑似要素 を追加します。
フロー関連の角丸プロパティ
フロー関連の角丸プロパティ で、物理プロパティではなく論理マッピングを使って角を制御できるようになります。これにより、ページの向きや表記の方向によって異なる角丸の半径を設定することも可能になります。また、Chrome が CSS Logical Properties and Values 仕様に準拠することになります。以下の論理プロパティが追加されました。
border-start-start-radius
border-start-end-radius
border-end-start-radius
border-end-end-radius
強制カラー プロパティ
forced-colors メディア機能 は、ページでユーザーが選択した限定カラーパレットをユーザー エージェントが強制しているかどうかを検出します。
強制カラー調整プロパティ
forced-color-adjust プロパティ を使うと、強制カラーモードから特定の要素を除外し、CSS で完全にカラーを制御する状態に戻すことができます。
JavaScript
このバージョンの Chrome には、V8 JavaScript エンジンのバージョン 8.9 が組み込まれます。具体的には、以下の変更点が含まれます。最新の機能リスト をすべて確認したい方は、V8 リリースノートをご覧ください。
トップレベルの await
Chrome では、JavaScript モジュールのトップレベルで await キーワードが許可 されるようになりました。これにより、モジュールの読み込み処理に非同期呼び出しをシームレスに統合できるようになります。現在のところ、この機能はモジュールを async 関数でラップすることで実現していますが、これにより複雑さを依存モジュール側にとどめつつ、実装の詳細を公開しています。
デベロッパー ノート
EXIF の画像の向き
クロスオリジン画像の向きの判定 に常に EXIF 情報が利用されるようになります。つまり、CSS で image-orientation: none を設定しても、安全でないオリジンの画像には反映されなくなります。この仕様変更に関する議論は、CSS ワーキング グループ ドラフト に記載されています。
サポートの終了と機能の削除
このバージョンの Chrome では、以下のサポートの終了および機能の削除が行われます。現在サポートが終了している機能 および以前に削除された機能 のリストは、ChromeStatus.com をご覧ください。
<link rel=prerender> のプレフィックス付きイベントの削除
<link rel=prerender> から発行されるレガシーなプレフィックス付きイベント(webkitprerenderstart、webkitprerenderstop、webkitprerenderload、webkitprerenderdomcontentloaded)が Chrome から削除されます 。
noopener で開いたウィンドウでの sessionStorage の複製停止
ウィンドウを noopener で開いた場合、Chrome はオープン元の sessionStorage を複製しなくなります。代わりに、空の sessionStorage 名前空間が開始されます。これにより、Chrome が HTML 仕様に準拠します。
Reviewed by Eiji Kitamura - Developer Relations Team