Chrome 66 の新機能

Pete LePage

他にもさまざまな機能があります。

ピート ルページと申します。Chrome 66 のデベロッパー向けの新機能について詳しく見てみましょう。

変更点の詳細なリストについては、Chromium ソース リポジトリの変更リストを確認する。

CSS 型オブジェクト モデル

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 型オブジェクト モデルでは、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 関数を使用する例も示しています。

新しい Canvas コンテキスト 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 オブジェクトの表示を効率化した新しい非同期レンダリング コンテキストが導入されています。非同期で動作し、メモリの重複を回避することで、より効率的にレンダリングされ、ジャンクが軽減されます。

使用方法は次のとおりです。

  1. createImageBitmap を呼び出して画像 BLOB を渡し、画像を作成します。
  2. canvas から bitmaprenderer コンテキストを取得します。
  3. 次に、画像を転送します。
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 の新機能についてお知らせします。