クリップボード API とは？

Webページからシステムのクリップボードを読み書きするためのブラウザーAPI。非同期のnavigator.clipboardでは、テキストのコピー・読み取りなどができる。安全なコンテキストや許可・操作の条件は、ブラウザーと処理によって異なる。

ひよこ

コピーボタンは、どう動くの？

ペンギン先生

navigator.clipboard.writeText()に文字列を渡すと、システムのクリップボードへ書き込めるよ。その後、利用者が別のアプリに貼り付けられる。Webページから書き込む処理と、貼り付け先を選ぶ操作は別なんだ。

ひよこ

呼んだら、すぐコピー完了になる？

ペンギン先生

Promiseを返す非同期処理なので、awaitなどで成功を待つよ。呼び出しただけで「コピーしました」と表示すると、失敗時にも成功したように見えてしまう。例外を捕まえて、コピーできなかった場合の案内や、手動で選択する方法も用意しよう。

ひよこ

読み取りもできるの？

ペンギン先生

readText()でテキストを読めるけれど、許可、ページのフォーカス、直前のユーザー操作などの条件が関わるよ。読み取りと書き込みは同じ条件ではなく、ブラウザーごとの違いもある。すべての環境で、毎回同じ許可ダイアログが出るわけではないんだ。

ひよこ

使うときの注意は？

ペンギン先生

非同期のAPIは安全なコンテキストで使うので、公開するページではHTTPSを基本にしよう。条件を満たさなければ処理は拒否されることがある。クリップボードに秘密の情報が入っている可能性もあるので、読む目的を利用者に伝え、必要な操作に絞ることが大切だよ。

ひよこ

画像や、古いcopyの命令は？

ペンギン先生

write()とClipboardItemで画像などを扱える環境もあるが、対応形式やブラウザーを確認しよう。document.execCommand()は非推奨で、MDNはクリップボードへのアクセスにこのAPIを優先するよう案内している。ただし新しいAPIなら必ず成功する、という意味ではないよ。

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

「クリップボード API」って出てきたら「Webページから、コピペの一時置き場を読み書きするAPI」と思えばだいたいOK！

誤り・わかりにくい説明を報告する