Chrome 86 の新機能

現在、Chrome 86 の安定版のリリースが開始されます。

フォーマットの詳細については次をご覧ください。

私は Pete LePage です。自宅で撮影を担当しています。では、Chrome 86 でリリースされたデベロッパー向けの新機能を見てみましょう。

ファイル システム アクセス

現在では、<input type="file"> 要素を使用してディスクからファイルを読み取ることができます。変更を保存するには、アンカータグに download を追加します。これにより、ファイル選択ツールが表示され、ファイルを保存できます。開いているファイルに書き込むことはできません。このワークフローは煩わしいものです。

オリジン トライアルから移行し、安定版で利用可能になった File System Access API(旧 Native File System API)では、showOpenFilePicker() を呼び出してファイル選択ツールを表示し、ファイルの読み取りに使用できるファイル ハンドルを返すことができます。

async function getFileHandle() {
  const opts = {
    types: [
      {
        description: 'Text Files',
        accept: {
          'text/plain': ['.txt', '.text'],
          'text/html': ['.html', '.htm']
        }
      }
    ]
  };
  return await window.showOpenFilePicker(opts);
}

ファイルをディスクに保存するには、前に取得したファイル ハンドルを使用するか、showSaveFilePicker() を呼び出して新しいファイル ハンドルを取得します。

async function saveFile(fileHandle) {
  if (!fileHandle) {
    fileHandle = await window.showSaveFilePicker();
  }
  const writable = await fileHandle.createWritable();
  await writable.write(contents);
  await writable.close();
}
権限プロンプトのスクリーンショット
ファイルへの書き込み権限をリクエストしているユーザーにプロンプトを表示します。

Chrome は書き込み前にユーザーが書き込み権限を付与しているかどうかを確認します。書き込み権限が付与されていない場合は、ユーザーに最初に確認メッセージが表示されます。

showDirectoryPicker() を呼び出すとディレクトリが開き、ファイルのリストを取得したり、そのディレクトリに新しいファイルを作成したりできます。多数のファイルを操作する IDE やメディア プレーヤーに最適です。もちろん、何かを書き込むには、ユーザーが書き込み権限を付与する必要があります。

この API には他にも多くの機能があるため、web.dev のファイル システム アクセスに関する記事をご覧ください。

オリジン トライアル: WebHID

ゲーム用コントローラ
ゲーム コントローラ。

ヒューマン インターフェース デバイス(一般に HID)は、人間から入力を受け取ったり、人間に出力したりします。ヒューマン インターフェース デバイスのロングテールには、新しすぎる、古すぎる、または一般的すぎてシステムのデバイス ドライバではアクセスできないデバイスがあります。

オリジン トライアルとして利用できるようになった WebHID API は、JavaScript でこうしたデバイスにアクセスする方法を提供することで、この問題を解決しています。WebHID を使用すると、ボタン、ジョイスティック、センサー、トリガー、LED、ランブルパックなどのゲームパッドを最大限に活用できます。

butOpenHID.addEventListener('click', async (e) => {
  const deviceFilter = { vendorId: 0x0fd9 };
  const opts = { filters: [deviceFilter] };
  const devices = await navigator.hid.requestDevice(opts);
  myDevice = devices[0];
  await myDevice.open();
  myDevice.addEventListener('inputreport', handleInpRpt);
});

ウェブベースのビデオチャット アプリでは、専用スピーカーの電話ボタンを使用して、通話の開始と終了、音声のミュートなどを行うことができます。

HID デバイス選択ツール
HID デバイス選択ツール。

もちろん、このような強力な API は、ユーザーが明示的に許可を選択した場合にのみ、デバイスとやり取りできます。

詳細、例、利用方法、わかりやすいデモについては、一般的でない HID デバイスへの接続をご覧ください。


オリジン トライアル: Multi-Screen Window Placement API

現在、window.screen() を呼び出すことで、ブラウザ ウィンドウが配置されている画面のプロパティを取得できます。しかし、マルチモニター設定の場合はどうすればよいでしょうか。申し訳ありませんが、ブラウザは、現在開いている画面についてのみ通知します。

const screen = window.screen;
console.log(screen);
// {
//   availHeight: 1612,
//   availLeft: 0,
//   availTop: 23,
//   availWidth: 3008,
//   colorDepth: 24,
//   orientation: {...},
//   pixelDepth: 24,
//   width: 3008
// }

Multi-Screen Window Placement API を使用すると、Chrome 86 でオリジン トライアルが開始されます。これにより、マシンに接続されている画面を列挙し、特定の画面にウィンドウを配置できます。プレゼンテーション アプリや金融サービス アプリなど、特定の画面にウィンドウを配置できる機能は不可欠です。

API を使用するには、権限をリクエストする必要があります。そうしないと、ブラウザを初めて使用する際にユーザーにプロンプトが表示されます。

async function getPermission() {
  const opt = { name: 'window-placement' };
  try {
    const perm = await navigator.permissions.query(opt);
    return perm.state === 'granted';
  } catch {
    return false;
  }
}

ユーザーが権限を付与した後、window.getScreens() を呼び出すと、Screen オブジェクトの配列で解決される Promise が返されます。

const screens = await window.getScreens();
console.log(screens);
// [
//   {id: 0, internal: false, primary: true, left: 0, ...},
//   {id: 1, internal: true, primary: false, left: 3008, ...},
// ]

その情報は、requestFullScreen() を呼び出したり、新しいウィンドウを配置したりするときに使用できます。詳細については、web.dev の Manage multi-Screen Window Placement API の記事でご確認ください。

その他

新しい CSS セレクタ :focus-visible を使用すると、デフォルトのフォーカス インジケーターを表示するかどうかを決定する際にブラウザが使用するのと同じヒューリスティックを有効にできます。

/* Focusing the button with a keyboard will
   show a dashed black line. */
button:focus-visible {
  outline: 4px dashed black;
}

/* Focusing the button with a mouse, touch,
   or stylus will show a subtle drop shadow. */
button:focus:not(:focus-visible) {
  outline: none;
  box-shadow: 1px 1px 5px rgba(1, 1, 0, .7);
}

CSS の ::marker 疑似要素を使用して、リストの色、サイズ、番号や箇条書きの色をカスタマイズできます。

li::marker {
  content: '😍';
}
li:last-child::marker {
  content: '🤯';
}

また、Chrome Dev Summit もお近くで開催いたします。詳しくは、YouTube チャンネルで最新情報をご確認ください。

参考資料

ここでは、主なハイライトの一部のみを取り上げています。Chrome 86 で追加された変更点については、以下のリンクをご覧ください。

チャンネル登録

最新の動画をご覧になりたい場合は、ぜひ Chrome Developers YouTube チャンネルご登録ください。新しい動画が公開されるたびにメール通知が届きます。また、フィード リーダーに RSS フィードが追加されます。

Chrome 87 のリリースと同時に Chrome の新機能をお知らせします