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 のその他の変更については、以下のリンクをご覧ください。

• Chrome DevTools の新機能（86）
• Chrome 86 の非推奨と削除
• ChromeStatus.com の更新（Chrome 86）
• Chrome 86 の JavaScript の新機能
• Chromium ソース リポジトリの変更リスト

登録

最新の動画情報を入手するには、Chrome デベロッパーの YouTube チャンネルにチャンネル登録してください。新しい動画が公開されるたびにメール通知が届きます。また、RSS フィードをフィード リーダーに追加することもできます。

Pete LePage と申します。Chrome 87 がリリースされ次第、Chrome の新機能についてお知らせします。