この記事は Naina Raisinghani による Chromium Blog の記事 "Chrome 66 Beta: CSS Typed Object Model, Async Clipboard API, AudioWorklet" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。

 特に記載のない限り、下記の変更は Android、Chrome OS、Linux、macOS、Windows 向けの最新の Chrome ベータ版に適用されます。Chrome 66 の完全な機能リストについては、ChromeStatus を参照してください。

<canvas> の ImageBitmap レンダリング コンテキスト

これまでキャンバスにイメージをレンダリングするには、最初に <img> タグを作成してからコンテンツをキャンバスにレンダリングしていました。そのため、イメージのコピーがメモリに複数保存されていました。新しいレンダリング コンテキストでは、メモリでの重複を避けて効率のよいレンダリングを行うことによって、ImageBitmap オブジェクトの表示を効率化しています。
次の例は、ImageBitmapRenderingContext を使ってこれを行う方法を示しています。ここでは基本的に、イメージのピクセルの所有権を移転しています。この例では、blob から <canvas> への移動によってそれを実現していますが、ピクセルは <canvas> 要素間でも移動させることができます。なお、blob は圧縮されているため、メモリに完全なコピーは保持されません。

const image = await createImageBitmap(imageBlob);
const canvas = document.createElement('canvas');
const context = canvas.getContext('bitmaprenderer');
context.transferFromImageBitmap(image);

canvas.toBlob((outputJPEGBlob) => {
  // Do something with outputJPEGBlob.
}, 'image/jpeg');

createImageBitmap() を使わずにこれを行うと、imageBlob が遅延デコードされてジャンクが発生することがあります。一方、createImageBitmap() は非同期なので、使用する前に完全にデコードでき、ジャンクが発生することはありません。たとえば、WebGL ゲームでこれを使うと、ゲームプレイの進行に合わせてその場で新しいテクスチャを読み込むことができます。

CSS Typed Object Model

これまで、CSS プロパティを操作したいデベロッパーは、後でブラウザが変換を行って型付きの表現に戻されるにもかかわらず、文字列を操作しなければなりませんでした。さらに悪いのは、デベロッパーが Javascript で CSS プロパティ値を読み出す場合です。そのとき、型付きの値は再度変換されて文字列に戻されます。
Chrome バージョン 66 では、Houdini の一環として、一部の CSS プロパティで CSS Typed Object Model（OM）Level 1 が実装されています。Typed OM では、CSS の値が文字列ではなく、型付きの JavaScript オブジェクトとして公開されるので、デベロッパーとブラウザの負荷を減らすことができます。CSS プロパティに割り当てられた値を効率的に操作できることに加え、保守性が高くわかりやすいコードを記述することもできます。
次に、簡単な例を示します。以前は、次のように要素の不透明度を指定していました。

el.style.opacity = 0.3;
el.style.opacity === "0.3"

CSSOM を利用すると、次のようになります。

el.attributeStyleMap.set("opacity", CSS.number("0.3"));
el.attributeStyleMap.get("opacity").value === 0.3

上の戻り値は、CSSUnitValue 型なので、文字列よりも扱いやすくなっています。

非同期クリップボード API

新しい非同期クリップボード API を使うと、Promise ベースの方法でクリップボードの読み込みと書き込みができます。これは Chrome 43 でリリースされた古い execCommand('copy') API よりもシンプルで、Permissions API とも統合されています。今後の Chrome のリリースでは、イメージなどの高度なデータのコピーや貼り付けもサポートされる予定です。
この API の感触を味わっていただくために、テキストの書き込みと読み込みの操作を行ってみましょう。

try {
  await navigator.clipboard.writeText("Hello, clipboard.");
} catch { 
  console.error("Unable to write to clipboard.");
}

テキストの読み出しも同じように行うことができます。

const data = await navigator.clipboard.readText();
console.log("From the clipboard:", data);

API のセキュリティやパーミッションの利用方法など、詳しくは非ブロッキング クリップボード アクセスをお読みください。また、サンプルもご覧ください。

AudioWorklet

以前の ScriptProcessorNode は非同期で、スレッドのホップが必要でした。そのため、オーディオ出力が不安定になることもありました。AudioWorklet オブジェクトは、新しい同期型の JavaScript 実行コンテキストを提供します。これにより、デベロッパーがプログラムからオーディオを制御できるようになり、レイテンシを増加させることなく非常に安定したオーディオ出力を得ることができます。
実際のサンプルコードなどの例は、Google Chrome Labs でご確認ください。
AudioWorklet と合わせて、他のワークレット API の開発も行われています。Chrome 65 / Opera 52 では、PaintWorklet がリリースされました。AnimationWorklet も計画されています。AudioWorklet の導入後には、ScriptProcessorNode が非推奨となる予定です。

今回のリリースに追加されたその他の機能

Blink > Animation

add および accumulate 合成操作は、モジュール化されたアニメーションを作成するためのものです。Chrome では、近いうちに add キーワードおよび accumulate キーワードがサポートされる予定です。それまで、上記のキーワードはエラーをスローしなくなります。これは、Firefox などの実装と互換性を維持するための措置です。

Blink > CSS

CSS に 2 つの新機能が追加されました。
  • メディアクエリで算術式 calc()、min()、max() がサポートされます。これは、CSS Values and Units Module Level 4 仕様で要求されています。この変更により、数値が許可される場所であれば、どこでもこれらの関数を使用できるようになり、他のルールとも一致することになります。
  • rgb() 関数と rgba() 関数で浮動小数点値が許可されるようになりました。

Blink > Feature Policy

デフォルトで、deviceorientation、deviceorientationabsolute、devicemotion の各イベントは、トップレベルのドキュメントと同じオリジンのサブフレームに制限されます。これは、それぞれのフィーチャー ポリシーが 'self' に設定された場合と同様です。この動作を変更するには、明示的に特定のフィーチャーを有効化または無効化します。

Blink > File API

File API で無効な、または存在しない blob URL から読み取ろうとした場合、404 ではなくネットワーク エラーが発生するようになりました。

Blink > Forms

HTML フォームに 2 つの新機能が追加されました。
  • 仕様で要求されているとおり、<textarea> 要素と <select> 要素で autocomplete 属性がサポートされました。
  • 変更可能なチェックボックスが HTML 仕様で要求されている 3 つのイベントを発行するようになります。これは、click イベント、input イベント、change の順に発行されます。以前は、click イベントと change イベントのみが発行されました。

Blink > Fullscreen

全画面モードのページでポップアップが開いて window.focus() が呼び出された場合、ページの全画面が終了します。これは、別の方法でポップアップにフォーカスが移った場合には発生しません。

Blink > GetUserMedia

新しいメソッド getCapabilities() が MediaStreamTrack インターフェースに追加されます。
これは、各制約可能プロパティの値または値の範囲を指定する MediaTrackCapabilities オブジェクトを返します。これによって返される能力は、端末によって異なります。

Blink > JavaScript

JavaScript には、何点かの変更が行われています。
  • Function.prototype.toString() 関数は、ソースコードの内容を厳密に返すようになりました。これには空白など、使用されている可能性がある他のテキストも含まれます。たとえば、function キーワードと関数名の間にコメントがあった場合、キーワードと名前に加えてコメントも返されるようになります。
  • JSON は ECMAScript の構文的なサブセットになります。これにより、文字列リテラルに行セパレータ（U+2028）とパラグラフ セパレータ（U+2029）のシンボルを利用できるようになります。
  • try 文の catch 句がパラメータなしで利用できるようになりました。
  • 文字列から空白を取り除く標準ベースの方法として、すでに実装されている String.prototype.trim() に加えて、String.prototype.trimStart() と String.prototype.trimLeft() が利用できるようになりました。下位互換性のため、標準に含まれていない trimLeft() と trimRight() も、新しいメソッドの別名として残されます。
  • Array.prototype.values() メソッドは、配列の各インデックスに対応する値を含む新しい配列イテレータ オブジェクトを返します。
Blink > Layout
レイアウトに 2 つの新機能が追加されました。
  • 以下の CSS の余白関連のプロパティから、プレフィックス「grid」が削除されました。
    • grid-gap は gap に変更
    • grid-row-gap は row-gap に変更
    • grid-column-gap は column-gap に変更
この 3 つのプロパティのデフォルト値は、すべて normal です。プレフィックス付きのプロパティは、この新しいプロパティの別名となります。column-gap プロパティはすでに存在し、css-multicol で利用されている点に注意してください。
  • transform プロパティを持つ display プロパティの要素である table-row、table-row-group、 table-header-group、table-footer-group、table-cell、table-caption が、固定位置要素のブロックを包含するようになりました。現在 Blink では、<tr>、<tbody>、<tfoot>、<thead> については固定位置要素のブロックは包含されません。

Blink > Media

メディアに 2 つの新機能が追加されました。
  • 以前にお知らせしたように、autoplay が許可されるのは、ユーザーがクリックまたはタップしたサイトのメディアが音声を再生しない場合か、以前に（PC で）ユーザーがサイトのメディアに興味を示した場合のみになります。これにより、初めてウェブページを開いた際に、予期せず音声付きの動画が再生されることが少なくなります。
  • Media Capabilities の Decoding Info API を使うと、ウェブサイトがクライアントのデコード機能についてより多くの情報を得られるようになります。その結果、より多くの情報に基づいてユーザー用のメディア ストリームを選択できるようになるため、利用できる帯域幅と画面サイズのみによって解像度が選ばれ、クライアントでスムーズかつ電源効率のよいデコード処理ができなくなる事態を防ぐことができます。

Blink > Network

Fetch API に 2 つの新機能が追加されました。
  • Request オブジェクトが keepalive プロパティをサポートするようになりました。これにより、タブが閉じられた後もフェッチを継続できるようになります。この機能は、コンストラクタの初期化オブジェクトにブール値を渡すことによって起動できます。プロパティの値は、オブジェクト自身から読み出すことができます。このプロパティは、sendBeacon() と合わせて使用することもできます。
  • 新しい AbortSignal および AbortController インターフェースを使ってフェッチをキャンセルできるようになりました。これを行うには、AbortController オブジェクトを作成し、その signal プロパティを fetch のオプションとして渡します。abortController.abort() を呼び出すと、フェッチをキャンセルできます。詳しくは、中断可能なフェッチについての記事をご覧ください。簡単なサンプルコードを以下に示します。


const controller = new AbortController();
const signal = controller.signal;
const requestPromise = fetch(url, { signal });

// Abort the fetch:
controller.abort();

Blink > ServiceWorker

Service Worker には、2 つの変更が行われました。
  • Service Worker は、リクエストのモードが same-origin でレスポンスのタイプが CORS である場合、応答しなくなります。これは、Fetch 仕様に最近追加されたセキュリティ対策です。
  • FetchEvent.clientId に何も設定されていない場合、null ではなく空の文字列を返すようになりました。これは、ナビゲーション リクエストの最中などに発生することがあります。

Blink > WebRTC

Chrome が RTCRtpSender.dtmf をサポートするようになりました。
これは仕様に従った属性で、まだ非推奨となっていない CreateDTMFSender() 関数に代わるものです。

サポートの終了と相互運用性の改善

Blink > CSS

object-position および perspective-origin プロパティで、top right 20% のように 3 つ部分からなる値が許可されなくなりました。この変更は、基本的な図形やグラデーションにも適用されます。有効な位置の値は、1 つ、2 つ、または 4 つの部分からなる値である必要があります。

Blink > HTML

仕様の変更に従い、ImageCapture.prototype.setOptions() は削除されました。

Blink > Input

仕様の変更に従い、document.createTouch() および document.createTouchList() は削除されました。

Blink > Web Audio

仕様の変更に従い、AudioParam.prototype.value の変更の自動 dezippering が Chrome から削除されました。AudioParam の値の変化をスムージングする必要がある場合は、 AudioParam.prorotype.setTargetAtTime() を利用してください。

Reviewed by Eiji Kitamura - Developer Relations Team