クリップボード APIとは何ですか？

Webページからシステムのクリップボードに安全にアクセスしてテキストや画像のコピー・貼り付けができるブラウザAPI。ユーザーの許可のもとでクリップボード操作をプログラムから実行できる。

クリップボード APIのポイントは？

navigator.clipboard.writeText()やreadText()でクリップボードへの読み書きが簡単にできる。テキストだけでなく画像やリッチテキストなど様々なデータ形式に対応している。セキュリティのためHTTPS環境とユーザーの許可が必要で、安全な設計になっている

【クリップボードエーピーアイ】

クリップボード API とは？

💡 コピペをプログラムで操る、Webアプリのクリップボード操作の新しいお作法

📌 このページのポイント

navigator.clipboard.writeText()やreadText()でクリップボードへの読み書きが簡単にできる
テキストだけでなく画像やリッチテキストなど様々なデータ形式に対応している
セキュリティのためHTTPS環境とユーザーの許可が必要で、安全な設計になっている

クリップボードAPIのイメージ

ひよこ

document.execCommand('copy')っていうのがあったよね？それとは違うの？

ペンギン先生

execCommand()は古いAPIで、同期的に動作するし動作が不安定だったんだ。Clipboard APIは非同期（Promise）で安定して動作するし、テキスト以外のデータも扱える。execCommandはもう非推奨になっているよ

ひよこ

どうやって使うの？

ペンギン先生

テキストをコピーするなら navigator.clipboard.writeText('コピーしたい文字列') だけでOK。読み取りは navigator.clipboard.readText() で、どちらもPromiseを返すよ。「コピーしました」ボタンの実装がとても簡単になったんだ

ひよこ

画像もコピーできるの？

ペンギン先生

できるよ。navigator.clipboard.write()を使って、ClipboardItemオブジェクトにBlobデータを渡すんだ。スクリーンショットツールやデザインツールのWeb版で、画像のコピー＆ペーストに使われているよ

ひよこ

セキュリティ面は大丈夫なの？勝手にクリップボードを読まれたら怖いけど…

ペンギン先生

その点はしっかり対策されているよ。HTTPS環境でしか使えないし、readText()など読み取り操作にはユーザーの明示的な許可が必要なんだ。writeText()も基本的にユーザー操作（クリックなど）がトリガーでないと動作しない。悪意のあるサイトが勝手にクリップボードを盗み見ることはできないようになっているよ

まとめ：ざっくりこれだけ覚えればOK！

「クリップボード API」って出てきたら「Webアプリからコピペを安全に操作するAPI」と思えればだいたいOK！

📖 おまけ：英語の意味

「Clipboard API」＝クリップボード API

💬 Clipboard は書類を挟むボード（クリップボード）のこと。パソコンの「コピペ」で一時的にデータを置く場所をプログラムから操作するAPIだよ

← 用語集にもどる