このページは Cloud Translation API によって翻訳されました。

Chrome 132 の新機能

Pete LePage

必知事項は次のとおりです。

ダイアログ要素 ToggleEvent を使用すると、<dialog> が開かれたときや閉じられたときに通知されます。
動画共有用に特定の要素をキャプチャします。
File System Access API が Android と WebView で利用可能に
他にも多数の機能があります。

Pete LePage と申します。Chrome 132 のデベロッパー向けの新機能について詳しく見てみましょう。

ダイアログ要素の切り替えイベント

<dialog> 要素は、HTML であらゆる種類のダイアログを表す場合に便利な要素です。ベースラインは幅広く利用可能で、すべてのブラウザで動作します。残念ながら、最初の実装には、ダイアログが開いたり閉じたりすることを直接検出する方法が含まれていませんでした。

Chrome 132 以降では、新しい ToggleEvent が導入されています。popover によってディスパッチされる ToggleEvent と同じものが組み込まれています。<dialog> 要素の場合、showModal または show が呼び出されると、<dialog> は newState=open とともに ToggleEvent をディスパッチします。<dialog> が閉じられると（フォーム、ボタン、または closewatcher を使用して）、newState=closed とともに ToggleEvent がディスパッチされます。

const dialog = document.getElementById("myDialog");

// Fired just before dialog is shown/hidden
dialog.addEventListener("beforetoggle", (event) => {
  if (event.newState === "open") {
    console.log("Dialog is about to be shown");
  } else {
    console.log("Dialog is about to be hidden");
  }
});

// Fired just after dialog is shown/hidden
dialog.addEventListener("toggle", (event) => {
  if (event.newState === "open") {
    console.log("Dialog is now visible");
  } else {
    console.log("Dialog is now hidden");
  }
});

要素のキャプチャ

要素キャプチャによる要素の重複。

ウェブプラットフォームでは、ウェブアプリが現在のタブまたはリージョンの動画トラックをキャプチャできます。Chrome 132 以降では、ウェブアプリは要素をキャプチャすることもできます。これは、要素が重なり合うように配置されている場合に特に便利です。

const myElem = document.getElementById('elementToShare');

// Request screen sharing
const stream = await navigator.mediaDevices
  .getDisplayMedia({preferCurrentTab: true});
const [videoTrack] = stream.getVideoTracks();

// Restrict the video stream to myElem and its subtree
const restrictionTarget = await RestrictionTarget.fromElement(myElem);
await videoTrack.restrictTo(restrictionTarget);

// Set the video source to my newly restricted stream
video.srcObject = stream;

デモをご確認ください。

Android と WebView の File System Access API

File System Access API は、Chrome パソコンでしばらく前から利用可能で、ウェブアプリがユーザーのローカルファイルシステム上のファイルとやり取りできるようにします。Chrome 132 以降、この API は Android と WebView で利用できるようになります。

ファイルを読み取るには、showOpenFilePicker() を呼び出します。これにより、ファイル選択ツールが表示され、ファイルの読み取りに使用できるファイルハンドルが返されます。ファイルをディスクに保存するには、先ほど取得したファイルハンドルを使用するか、showSaveFilePicker() を呼び出して新しいファイルハンドルを取得します。

async function saveFile(fileHandle) {
  if (!fileHandle) {
    fileHandle = await window.showSaveFilePicker();
  }
  const writable = await fileHandle.createWritable();
  await writable.write(contents);
  await writable.close();
}

その他

もちろん、他にもたくさんあります。

writing-mode CSS プロパティの sideways-rl キーワードと sideways-lr キーワードのサポート。
キーボードでフォーカス可能なスクロールコンテナのロールアウトが再開されました。
Request インターフェースと Response インターフェースに bytes() メソッドを追加しました。このメソッドは、Uint8Array で解決される Promise を返します。

Chrome 132 の新機能

ダイアログ要素の切り替えイベント

要素のキャプチャ

Android と WebView の File System Access API

その他

関連情報

登録