ClipboardItem
Baseline
2024
*
最近利用可能
June 2024以降、この機能は最新のバージョンの端末およびブラウザーで動作します。古い端末やブラウザーでは動作しないことがあります。
* この機能の一部は、対応レベルが異なる場合があります。
安全なコンテキスト用: この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。
ClipboardItem はクリップボード API のインターフェイスで、アイテムの単一の形式を表し、Clipboard.read() や Clipboard.write() を使用して、クリップボードのデータを読み取ったり書き込んだりする際に使用します。
データを表現するために ClipboardItem インターフェイスを持つことの利点は、開発者がファイル形式やデータの様々な範囲に簡単に対処できることです。
メモ:
read() および write() メソッドは、テキスト文字列や Blob インスタンスで表される任意のデータアイテムの作業に使用できます。ただし、テキストのみを作業する場合は、Clipboard.readText() および Clipboard.writeText() メソッドを使用したほうが便利です。
コンストラクター
ClipboardItem()-
新しい
ClipboardItemオブジェクトを作成します。キーは MIME タイプで、値はデータです。
インスタンスプロパティ
types読取専用-
この
ClipboardItem内で利用できる MIME タイプの配列 (Array) を返します。 presentationStyle読取専用-
"unspecified","inline","attachment"のいずれかを返します。
静的メソッド
ClipboardItem.supports()-
指定された MIME タイプがクリップボードで対応しているかどうかを調べます。これにより、ウェブサイトはデータを書き込む前に、その MIME タイプが対応しているかどうかを検知することができるようになります。
メソッド
例
クリップボードへのテキストの書き込み
この例では、まず、テキストを含む <p> 要素と <button> 要素を参照する 2 つの定数を定義します。
次に、copyToClipboard() という関数を定義します。まず、"text/plain" という MIME タイプを定数に格納し、次に clipboardItemData というオブジェクトを生成します。このオブジェクトには、キーが MIME タイプ、値がクリップボードにコピーしたいテキスト（この場合は <p> 要素の内容）であるプロパティが 1 つ含まれます。テキストを扱うため、Blob を作成する必要はなく、直接渡すことができます。
ClipboardItem() コンストラクターを使用して新しい ClipboardItem オブジェクトを作成し、それを Clipboard.write() メソッドに渡して、テキストをクリップボードにコピーします。
最後に、<button> にイベントリスナーを追加し、クリックされたときにその関数が実行されるようにします。
const textSource = document.querySelector("p");
const copyBtn = document.querySelector("button");
async function copyToClipboard() {
const type = "text/plain";
const clipboardItemData = {
[type]: textSource.textContent,
};
const clipboardItem = new ClipboardItem(clipboardItemData);
await navigator.clipboard.write([clipboardItem]);
}
copyBtn.addEventListener("click", copyToClipboard);
クリップボードへの画像の書き込み
ここでは、supports() を使用して、image/svg+xml の MIME タイプが対応しているかどうかを調べます。
対応している場合、フェッチ API を使用して SVG 画像を取得し、それを Blob に読み込みます。これを使用して ClipboardItem を作成し、クリップボードに書き込みます。
async function writeClipImg() {
try {
if (ClipboardItem.supports("image/svg+xml")) {
const imgURL = "/my-image.svg";
const data = await fetch(imgURL);
const blob = await data.blob();
await navigator.clipboard.write([
new ClipboardItem({
[blob.type]: blob,
}),
]);
console.log("読み込んだ画像をコピーしました。");
} else {
console.log("SVG 画像はクリップボードで対応していません。");
}
} catch (err) {
console.error(err.name, err.message);
}
}
クリップボードからの読み取り
ここでは、 clipboard.read() メソッドでクリップボード上の全項目を返しています。次に、 ClipboardItem.types プロパティを利用して getType() の引数をセットし、対応する blob オブジェクトを返します。
async function getClipboardContents() {
try {
const clipboardItems = await navigator.clipboard.read();
for (const clipboardItem of clipboardItems) {
for (const type of clipboardItem.types) {
const blob = await clipboardItem.getType(type);
// we can now use blob here
}
}
} catch (err) {
console.error(err.name, err.message);
}
}
仕様書
| 仕様書 |
|---|
| Clipboard API and events # clipboarditem |