- 新しい CSS 型モデル オブジェクトにより、CSS の操作が容易になります。
- クリップボードへのアクセスが非同期になりました。
- キャンバス要素の新しいレンダリング コンテキストが追加されました。
他にもさまざまな機能があります。
Pete LePage と申します。Chrome 66 のデベロッパー向けの新機能について詳しく見てみましょう。
変更点の詳細なリストについては、Chromium ソース リポジトリの変更リストを確認する。
CSS Typed Object Model
JavaScript で CSS プロパティを更新したことがある場合は、CSS オブジェクト モデルを使用しています。ただし、すべて文字列として返されます。
el.style.opacity = 0.3;
console.log(typeof el.style.opacity);
> 'string' // A string!?
opacity プロパティをアニメーション化するには、文字列を数値にキャストしてから、値をインクリメントして変更を適用する必要があります。理想的とは言えません。
function step(timestamp) {
const currentOpacity = parseFloat(el.style.opacity);
const newOpacity = currentOpacity + 0.01;
element.style.opacity = newOpacity;
if (newOpacity <= 1) {
window.requestAnimationFrame(step);
}
}
新しい CSS Typed Object Model では、CSS 値が型付きの JavaScript オブジェクトとして公開されるため、多くの型操作が不要になり、CSS をより合理的に操作できるようになります。
element.style を使用する代わりに、.attributeStyleMap プロパティまたは .styleMap を介してスタイルにアクセスします。読み取りや更新が容易なマップのようなオブジェクトを返します。
el.attributeStyleMap.set('opacity', 0.3);
const oType = typeof el.attributeStyleMap.get('opacity').value;
console.log(oType);
> 'number' // Yay!
初期のベンチマークでは、古い CSS オブジェクト モデルと比較して、1 秒あたりのオペレーションが約 30% 向上しています。これは JavaScript アニメーションにとって特に重要です。
el.attributeStyleMap.set('opacity', 0.3);
el.attributeStyleMap.has('opacity'); // true
el.attributeStyleMap.delete('opacity');
el.attributeStyleMap.clear(); // remove all styles
また、値を文字列から数値にキャストし忘れたことによるバグを排除し、値の丸めとクランプを自動的に処理します。さらに、単位変換、演算、等価性に対応する新しいメソッドもいくつかあります。
el.style.opacity = 3;
const opacity = el.computedStyleMap().get('opacity').value;
console.log(opacity);
> 1
Eric の説明には、いくつかのデモと例が記載されています。
Async Clipboard API
const successful = document.execCommand('copy');
document.execCommand を使用した同期コピーと貼り付けは、短いテキストの場合は問題ありませんが、それ以外の場合は、同期の性質上ページがブロックされ、ユーザー エクスペリエンスが低下する可能性があります。また、ブラウザ間で権限モデルが異なります。
新しい Async Clipboard API は、非同期で動作し、権限 API と統合してユーザー エクスペリエンスを向上させる代替 API です。
writeText() を呼び出すと、テキストをクリップボードにコピーできます。
navigator.clipboard.writeText('Copy me!')
.then(() => {
console.log('Text is on the clipboard.');
});
この API は非同期であるため、writeText() 関数は、渡されたテキストが正常にコピーされたかどうかに応じて解決または拒否される Promise を返します。
同様に、getText() を呼び出して、返された Promise がテキストで解決するのを待つと、クリップボードからテキストを読み取ることができます。
navigator.clipboard.getText()
.then((text) => {
console.log('Clipboard: ', text);
});
ジェイソンの投稿と説明動画のデモをご覧ください。また、async 関数を使用する例も示しています。
新しいキャンバス コンテキスト BitmapRenderer
canvas 要素を使用すると、グラフィックをピクセル単位で操作できます。グラフの描画、写真の操作、リアルタイム動画処理も可能です。ただし、空の canvas から始める場合を除き、canvas に画像をレンダリングする方法が必要です。
これまでは、image タグを作成してから、そのコンテンツを canvas にレンダリングしていました。そのため、ブラウザは画像のコピーを複数メモリに保存する必要があります。
const context = el.getContext('2d');
const img = new Image();
img.onload = function () {
context.drawImage(img, 0, 0);
}
img.src = 'llama.png';
Chrome 66 以降では、ImageBitmap オブジェクトの表示を効率化した新しい非同期レンダリング コンテキストが導入されています。非同期で動作し、メモリの重複を回避することで、より効率的にレンダリングされ、ジャンクが軽減されます。
使用方法は次のとおりです。
createImageBitmapを呼び出して画像 BLOB を渡し、画像を作成します。canvasからbitmaprendererコンテキストを取得します。- 次に、画像を転送します。
const image = await createImageBitmap(imageBlob);
const context = el.getContext('bitmaprenderer');
context.transferFromImageBitmap(image);
画像のレンダリングが完了しました。
AudioWorklet
ワークレットが登場しました。PaintWorklet は Chrome 65 でリリースされましたが、Chrome 66 では AudioWorklet がデフォルトで有効になります。この新しいタイプの Worklet は、メインスレッドで実行されていた従来の ScriptProcessorNode に代わって、専用のオーディオ スレッドでオーディオを処理するために使用できます。各 AudioWorklet は独自のグローバル スコープで実行されるため、レイテンシが短縮され、スループットの安定性が向上します。
Google Chrome Labs には、AudioWorklet の興味深い例がいくつかあります。
その他
これらは、Chrome 66 のデベロッパー向けの変更のほんの一部です。もちろん、他にも多くの変更があります。
TextAreaとSelectがautocomplete属性をサポートするようになりました。form要素にautocapitalizeを設定すると、子フォーム フィールドに適用され、Safari のautocapitalizeの実装との互換性が向上します。- 文字列から空白を取り除く標準ベースの方法として、
trimStart()とtrimEnd()が利用できるようになりました。
Chrome 66 の DevTools の新機能については、Chrome DevTools の新機能をご覧ください。プログレッシブ ウェブアプリにご興味をお持ちの場合は、新しい PWA ロードショー動画シリーズをご覧ください。YouTube チャンネルの [チャンネル登録] ボタンをクリックすると、新しい動画が公開されるたびにメール通知が届きます。
Pete LePage と申します。Chrome 67 がリリースされ次第、Chrome の新機能についてお知らせします。