Newly available 主要ブラウザで対応済みだが、古いバージョンでは未対応の場合がある。

Async clipboard

Clipboard はクリップボード API のインターフェイスで、システムクリップボードの内容に対する読み取りと書き込みのアクセス提供します。 これによって、ウェブアプリケーションに切り取り（カット）、コピー（複写）、貼り付け（ペースト）の機能を実装することができます。

EventTarget Clipboard システムクリップボードは、グローバルの Navigator.clipboard プロパティにより公開されています。

クリップボード API のすべてのメソッドは非同期で動作します。これらは Promise を返しますが、これはクリップボードへのアクセスが完了すると解決されます。 クリップボードへのアクセスが拒否された場合、このプロミスは拒否されます。

すべてのメソッドで、保護されたコンテキストが要求されます。 API を使用する際のその他の要件については、API の概要トピックにあるセキュリティの注意事項の節で説明されています。

ファイル・クリップボード・ストリーム

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
Clipboard
66
79
63
13.1
66
13.4
read

read() は Clipboard インターフェイスのメソッドで、クリップボードのコンテンツのコピーをリクエストし、返される Promise をそのデータで履行します。
76
79
127
13.1
76
13.4
readText

readText() は Clipboard インターフェイスのメソッドで、システムクリップボードのテキストの内容のコピーに解決されるプロミス (Promise) を返します。
66
79
125
13.1
66
13.4
type_image-png

`image/png` MIMEタイプに対応しています
76
79
127
13.1
76
13.4
type_text-html

`text/html` MIMEタイプに対応しています
86
86
127
13.1
86
13.4
type_text-plain

`text/plain` MIMEタイプに対応しています
76
79
127
13.1
76
13.4
write

write() は Clipboard インターフェイスのメソッドで、画像やテキストなどの任意の ClipboardItem データをクリップボードに書き込み、完了時に返された Promise を解決します。 これを使用して、切り取りやコピー機能を実装することができます。
76
79
127
13.1
76
13.4
writeText

writeText() は Clipboard インターフェイスのメソッドで、指定されたテキスト文字列をシステムのクリップボードに書き込み、システムのクリップボードが更新されたら解決する Promise を返します。
66
79
63
13.1
66
13.4
ClipboardItem

ClipboardItem はClipboard API のインターフェイスで、 Clipboard API を介して読み書きする単一の形式の項目を表します。読み書きはそれぞれ clipboard.read() と clipboard.write() で行います。
76
79
127
13.1
84
13.4
ClipboardItem

ClipboardItem() はClipboard API のコンストラクターで、新しい ClipboardItem オブジェクトを生成します。これは、Clipboard API で保存・取得するデータを表し、それぞれ clipboard.write() と clipboard.read() で操作します。
133
133
127
13.1
98
13.4
getType

getType() は ClipboardItem インターフェイスのメソッドで、要求された MIME type の Blob で解決するプロミス (Promise) を返します。 MIME タイプが見つからない場合はエラーになります。
76
79
127
13.1
84
13.4
presentationStyle

presentationStyle は ClipboardItem インターフェイスの読み取り専用プロパティで、アイテムをどう表示すべきかを示す文字列を返します。
127
13.1
13.4
types

types は ClipboardItem インターフェイスの読み取り専用プロパティで、この ClipboardItem の内容で利用できるMIME typeの配列 (Array) を返します。
76
79
127
13.1
84
13.4
clipboard

クリップボード API は Navigator インターフェイスに読み取り専用の clipboard プロパティを追加し、これはクリップボードの内容を読み書きするために使用する Clipboard オブジェクトを返します。
66
79
63
13.1
66
13.4
permission_clipboard-write
実験的

`clipboard-write` 権限
64
79
64
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
実装メモ
  • ユーザーは `clipboard-read` 権限を許可する必要があります。
注釈 1件
実装メモ
  • ユーザーは `clipboard-read` 権限を許可する必要があります。
注釈 3件
実装メモ
  • このメソッドは、ユーザーのジェスチャーイベントハンドラ内で呼び出す必要があります。
  • クリップボードが読み取られると、貼り付けの確認ダイアログが表示されます。クリップボードに同一オリジンのコンテンツが含まれている場合、この確認ダイアログは表示されません。
  • マニフェストに `clipboardRead` 権限が設定されているWeb拡張機能は、貼り付けの確認プロンプトが表示されずにデータを読み取ることができます。Firefox 147以前では、この権限を持たない拡張機能はクリップボードのデータを読み取ることができませんでした。
注釈 1件
実装メモ
  • ユーザーは `clipboard-read` 権限を許可する必要があります。
注釈 1件
実装メモ
  • ユーザーは `clipboard-read` 権限を許可する必要があります。
注釈 1件
実装メモ
  • ユーザーは `clipboard-read` 権限を許可する必要があります。
注釈 3件
実装メモ
  • このメソッドは、ユーザーのジェスチャーイベントハンドラ内で呼び出す必要があります。
  • クリップボードが読み取られると、貼り付けの確認ダイアログが表示されます。クリップボードに同一オリジンのコンテンツが含まれている場合、この確認ダイアログは表示されません。
  • マニフェストに `clipboardRead` 権限が設定されているWeb拡張機能は、貼り付けの確認プロンプトが表示されずにデータを読み取ることができます。Firefox 147以前では、この権限を持たない拡張機能はクリップボードのデータを読み取ることができませんでした。
注釈 1件
実装メモ
  • ユーザーは `clipboard-read` 権限を許可する必要があります。
注釈 2件
実装メモ
  • バージョン 107 以降、このメソッドはユーザーのジェスチャーイベントハンドラ内で呼び出すか、ユーザーが `clipboard-write` 権限を許可する必要があります。
  • バージョン107以前は、ユーザーが`clipboard-write`権限を付与する必要があります。
注釈 2件
実装メモ
  • このメソッドは、ユーザーのジェスチャーイベントハンドラ内で呼び出す必要があります。
  • マニフェストに `clipboardWrite` 権限が設定されているWeb拡張機能は、ユーザーの操作なしにデータを書き込むことができます。
注釈 2件
実装メモ
  • バージョン 107 以降、このメソッドはユーザーのジェスチャーイベントハンドラ内で呼び出すか、ユーザーが `clipboard-write` 権限を許可する必要があります。
  • バージョン107以前は、ユーザーが`clipboard-write`権限を付与する必要があります。
注釈 2件
実装メモ
  • バージョン 107 以降、このメソッドはユーザーのジェスチャーイベントハンドラ内で呼び出すか、ユーザーが `clipboard-write` 権限を許可する必要があります。
  • バージョン107以前は、ユーザーが`clipboard-write`権限を付与する必要があります。
注釈 2件
実装メモ
  • バージョン 107 以降、このメソッドはユーザーのジェスチャーイベントハンドラ内で呼び出すか、ユーザーが `clipboard-write` 権限を許可する必要があります。
  • バージョン107以前は、ユーザーが`clipboard-write`権限を付与する必要があります。
注釈 2件
実装メモ
  • このメソッドは、ユーザーのジェスチャーイベントハンドラ内で呼び出す必要があります。
  • マニフェストに `clipboardWrite` 権限が設定されているWeb拡張機能は、ユーザーの操作なしにデータを書き込むことができます。
注釈 1件
実装メモ
  • このメソッドは、ユーザーのジェスチャーイベントハンドラ内で呼び出す必要があります。
注釈 2件
実装メモ
  • バージョン 107 以降、このメソッドはユーザーのジェスチャーイベントハンドラ内で呼び出すか、ユーザーが `clipboard-write` 権限を許可する必要があります。
  • バージョン107以前は、ユーザーが`clipboard-write`権限を付与する必要があります。
注釈 1件
実装メモ
  • このメソッドは、ユーザーのジェスチャーイベントハンドラ内で呼び出す必要があります。
注釈 5件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (133)
  • このバージョンで機能が削除されました (98)
実装メモ
  • アイテムデータとして、`Blob` または `Blob` を返す Promise のみを受け付けます。
  • アイテムデータとして `Blob` のみを受け付けます。バグ 40103226 を参照してください。
注釈 5件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (133)
  • このバージョンで機能が削除されました (98)
実装メモ
  • アイテムデータとして、`Blob` または `Blob` を返す Promise のみを受け付けます。
  • アイテムデータとして `Blob` のみを受け付けます。バグ 40103226 を参照してください。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (98)
実装メモ
  • `ClipboardItem` コンストラクタは、アイテムデータとして Blob のみを受け付け、文字列や、文字列または Blob に解決される Promise は受け付けません。バグ 40103226 を参照してください。

実務での使いどころ

  • Async clipboard の活用

    Clipboard はクリップボード API のインターフェイスで、システムクリップボードの内容に対する読み取りと書き込みのアクセス提供します。

注意点

  • 古いブラウザでは対応していない場合がある。

実装メモ

  • 一部の API はセキュアコンテキスト (HTTPS) やユーザー操作起点を必要とする。利用前に要件を確認すること。

参考リンク