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.

* Some parts of this feature may have varying levels of support.

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

関連情報