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

Chrome 86 の新機能

Pete LePage

Chrome 86 の安定版へのロールアウトが開始されました。

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

File System Access API が安定版になりました。
Web HID と Multi-screen Window Placement API の新しいオリジントライアルがあります。
CSS にも新機能が追加されています。他にも多数の機能が追加されています。

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);
});

ウェブベースのビデオチャットアプリでは、専用のスピーカーのテレフォニーボタンを使用して、通話の開始や終了、音声のミュートなどを行えます。

もちろん、このような強力な 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 の 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 の新機能

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

オリジン トライアル: WebHID

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

その他

関連情報

登録

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

オリジントライアル: WebHID

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