ClipboardItem

Baseline 2024

Newly available

Since June 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

ClipboardItem はクリップボード API のインターフェイスで、 クリップボード API を介して読み書きする単一の形式の項目を表します。読み書きはそれぞれ clipboard.read() と clipboard.write() で行います。

データを表現するために ClipboardItem インターフェイスを持つことの利点は、開発者がファイルタイプやデータの様々な範囲に簡単に対処できることです。

クリップボードの内容へのアクセスは権限 API の下で制限されています。クリップボードへの書き込み権限は、ページがアクティブなタブにあるときに自動的に付与されます。 clipboard-read 権限は要求する必要があり、これはクリップボードからデータを読もうとすることで行えます。

メモ: テキストを扱うには、 Clipboard インターフェイスの Clipboard.readText() および Clipboard.writeText() メソッドをご覧ください。

メモ: 一度に渡すことができるクリップボードの項目は 1 つだけです。

コンストラクター

ClipboardItem()

新しい ClipboardItem` オブジェクトを作成します。キーは MIME タイプで、値は Blob です。

プロパティ

このインターフェイスは以下のプロパティを提供しています。

types 読取専用

この ClipboardItem 内で利用できる MIME タイプの配列 (Array) を返します。

presentationStyle 読取専用

"unspecified", "inline", "attachment" のいずれかを返します。

メソッド

このインターフェイスは以下のメソッドを定義しています。

getType()

要求された MIME タイプ の Blob で解決するプロミス (Promise) を返します。 MIME タイプが見つからない場合はエラーになります。

例

クリップボードへの書き込み

ここでは、ClipboardItem() に新しい Fetch API を記述し、そのレスポンスの blob() メソッドを用いて、新しい ClipboardItem を生成しています。

js
async function writeClipImg() {
  try {
    const imgURL = "/myimage.png";
    const data = await fetch(imgURL);
    const blob = await data.blob();

    await navigator.clipboard.write([
      new ClipboardItem({
        [blob.type]: blob,
      }),
    ]);
    console.log("Fetched image copied.");
  } catch (err) {
    console.error(err.name, err.message);
  }
}

クリップボードからの読み取り

ここでは、 clipboard.read() メソッドでクリップボード上の全項目を返しています。次に、 ClipboardItem.types プロパティを利用して getType() の引数をセットし、対応する blob オブジェクトを返します。

js
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);
  }
}

仕様書

Specification
Clipboard API and events
# clipboarditem

ブラウザーの互換性

BCD tables only load in the browser

関連情報