公開日: 2025 年 4 月 30 日
祝福: このウェブ機能は、3 つの主要なブラウザ エンジンすべてで利用可能になりました。2025 年 3 月 30 日より、ベースラインの新規機能となります。
Async Clipboard API により、クリップボードの操作が以前よりもはるかに簡単になりました。クリップボードを管理する以前の方法に代わって、プレーン テキスト コンテンツの場合は navigator.clipboard.writeText() を、画像、テキスト コンテンツ、HTML など「ほぼ」すべてのコンテンツの場合は navigator.clipboard.write() を呼び出せるようになりました。
しかし、これまで「ほぼ」を定量化できていませんでした。たとえば、API が SVG をサポートしているかどうかは、試してみないとわかりません。サポートされていない場合は、スローされた例外をキャッチします。これはサポートを判断する方法としてあまり人間工学に優れていなかったため、静的 ClipboardItem.supports() 関数が指定されました。
この機能はベースラインの「新規に利用可能」ステータスに達しました。これにより、クリップボードの操作がさらに改善されます。ブラウザが特定の形式をサポートしているかどうかを確認するには、関数に目的の形式の MIME タイプを渡します。
const format = 'image/svg+xml';
const supportsFormat = ClipboardItem.supports(format);
console.log(`This browser does${supportsFormat ? '' : ' not'} support ${format}.`);
// "This browser does support image/svg+xml."
以前は、他の「ほとんど」すべてを自分で書いていましたが、ここからが本当に面白いところです。ウェブ カスタム フォーマットを使用すると、ブラウザでネイティブにサポートされていないフォーマットを扱うことができます。たとえば、デフォルトではブラウザは AVIF 画像をサポートしていません。
const format = 'image/avif';
const supportsFormat = ClipboardItem.supports(format);
console.log(`This browser does${supportsFormat ? '' : ' not'} support ${format}.`);
// "This browser does not support image/avif."
一方、ウェブ カスタム形式を使用すると、AVIF 画像を自由に操作し、コピーして貼り付けることができます。ただし、受け取る側もウェブ カスタム形式を扱える必要があります。
const format = 'web image/avif';
const supportsFormat = ClipboardItem.supports(format);
console.log(`This browser does${supportsFormat ? '' : ' not'} support ${format}.`);
// "This browser does support web image/avif."
ClipboardItem.supports() 関数により、ウェブ カスタム形式でもクリップボードのサポート状況を正しく検出し、機能することを確認できるようになりました。
if (ClipboardItem.supports('web image/avif')) {
// Fetch remote AVIF image and obtain its blob representation.
const blob = await fetch('image.avif').then((response) => response.blob());
try {
// Write the image data to the clipboard, prepending the blob's actual
// type (`"image/avif"` with the string `"web "`, so it becomes
// `"web image/avif"`.
const clipboardItem = new ClipboardItem({
'web image/avif': blob,
});
await navigator.clipboard.write([clipboardItem]);
} catch (err) {
console.error(err.name, err.message);
}
}
ClipboardItem.supports() 関数がベースラインとして新たに利用可能になったことで、ウェブ デベロッパーは、ウェブのカスタム形式など、さまざまな MIME タイプのクリップボードのサポートを信頼性を持って検出できるようになりました。この機能強化により、クリップボードの操作がより堅牢で予測可能になり、すべてのブラウザでユーザー エクスペリエンスが向上します。