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

Chrome 91 の新機能

Pete LePage

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

ファイルを操作するウェブアプリで、File System Access API の使用時にファイル名とディレクトリを提案できるようになりました。
クリップボードからファイルを読み取ることができます。
サイトに複数のドメインがあり、それらが同じアカウント管理バックエンドを共有している場合は、Chrome でそれらが同じであることを通知して、パスワードマネージャーが適切な認証情報を提案できます。
I/O の動画はすべて、Chrome Developers YouTube チャンネルでご覧いただけます。
他にもたくさんあります。

私は Pete LePage で、自宅で撮影をしています。では Chrome 91 のデベロッパー向け新機能を見ていきましょう。

File System Access API の名前の候補

今年 Fugu プロジェクトからリリースされる私のお気に入りの API は、File System Access API です。ユーザーが権限を付与すると、アプリは、インストール済みの他のアプリと同じように、ユーザーのローカルデバイス上のファイルを操作できるため、より自然なユーザーエクスペリエンスを実現できます。

Chrome 91 以降では、操作するファイルまたはディレクトリの名前と場所を提案できるようになりました。そのためには、showSaveFilePicker オプションの一部として suggestedName プロパティを渡します。

const fileHandle = await self.showSaveFilePicker({
  suggestedName: 'Untitled Text.txt',
  types: [{
    description: 'Text documents',
    accept: {
      'text/plain': ['.txt'],
    },
  }],
});

デフォルトの開始ディレクトリについても同様です。たとえば、テキストエディタの場合、documents フォルダでファイルを保存または開くダイアログを開始することが考えられます。一方、画像エディタは pictures フォルダから始めるのが一般的です。startIn プロパティを渡すことで、デフォルトの開始ディレクトリを提案できます。

const fileHandle = await self.showOpenFilePicker({
  startIn: 'documents'
});

詳細については、Tom のファイルシステムへのアクセスに関する投稿をご覧ください。

クリップボードからファイルを読み取る

ファイルを操作するための便利な API がもう一つ、Chrome 91 に導入されました。パソコンのウェブアプリで、クリップボードからファイルを読み取れるようになりました。（Safari では 2018 年からクリップボードからファイルを読み取れるようになりました）。

もちろん、クリップボードには無制限にアクセスできるわけではないため、paste イベントリスナーをセットアップする必要があります。その後、イベントハンドラで、クリップボード上の各ファイルのコンテンツにアクセスできます。

window.addEventListener('paste', onPaste);

async function onPaste(e) {
  const file = e.clipboardData.files[0];
  const contents = await file.text();
  ...
}

関連サイトで認証情報を共有する

サイトに複数のドメインがあり、それらが同じアカウント管理バックエンドを共有している場合は、サイトを相互に関連付けられるようになりました。これにより、ユーザーは認証情報を 1 回保存し、Chrome パスワードマネージャーから関連サイトに提案されるようになります。

これは、異なるトップレベルドメイン（google.com と google.ca など）からサイトが配信されている場合に最適です。複数のドメイン名を持っていることもあります

ウェブサイトを関連付けるには、ドメイン間の関係を定義する assetlinks.json ファイルを作成する必要があります。以下の例では、.com ドメインと .co.uk ドメインの両方が関連しており、認証情報を共有できることをブラウザに通知しています。

[{
  "relation": ["delegate_permission/common.get_login_creds"],
  "target": {
    "namespace": "web",
    "site": "https://www.example.com"
  }
 },
{
  "relation": ["delegate_permission/common.get_login_creds"],
  "target": {
    "namespace": "web",
    "site": "https://www.example.co.uk"
  }
 }]

次に、各ドメインの .well-known フォルダに assetlinks.json ファイルをホストします。

この機能は Chrome 91 で段階的に展開され、初日から利用できなくなる可能性があります。最新情報については、Chrome で関連サイト間でログイン認証情報を共有できるようにするをご覧ください。

など多数

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

I/O 2021 の動画がすべて公開されました。ぜひチェックしてください。

ウェブトランスポート（旧称 Quic Transport）にはいくつかの変更が行われ、新しいオリジントライアルが開始されます。

Web Assembly SIMD のオリジントライアルが終了し、すべてのユーザーが利用できます。

更新されたフォーム要素が Android に導入され、ユーザーエクスペリエンスが向上しました。

また、link rel="icon" には <link> 要素の media 属性が適用されます。つまり、メディアクエリに基づいて異なるアイコンを定義できます。たとえば、ダークモードとライトモードで異なるアイコンを用意します。

<link
  rel="icon"
  media="(prefers-color-scheme: dark)"
  href="/icons/dark.png">
<link
  rel="icon"
  media="(prefers-color-scheme: light)"
  href="/icons/light.png">

Chrome 91 の新機能

File System Access API の名前の候補

クリップボードからファイルを読み取る

関連サイトで認証情報を共有する

など多数

関連情報

登録