このページは 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 のファイルシステムアクセスに関する投稿をご覧ください。

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

Chrome 91 には、ファイルを操作するための新しい API がもう 1 つ追加されています。パソコンで、ウェブアプリがクリップボードからファイルを読み取れるようになります。（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 トランスポートと呼ばれていましたが、多くの変更が加えられて、新しいオリジントライアルが開始されています。

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 の推奨名

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

アフィリエイト サイトで認証情報を共有する

その他

関連情報

登録

アフィリエイトサイトで認証情報を共有する