必知事項は次のとおりです。
- ファイルを操作するウェブアプリで、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 で追加される変更については、以下のリンクをご覧ください。
- Chrome DevTools の新機能(91)
- Chrome 91 のサポート終了と削除
- ChromeStatus.com の更新(Chrome 91)
- JavaScript の新機能(Chrome 91)
- Chromium ソース リポジトリの変更リスト
登録
最新情報を入手するには、Chrome Developers YouTube チャンネルに登録してください。新しい動画が公開されるたびに、メール通知が届きます。
Chrome 92 のリリースと同時に Chrome の最新情報をお伝えします