JavaScript
Web

JavaScript からクリップボードを扱える Async Clipboard API がそろそろ見えてきました

More than 1 year has passed since last update.

OS のクリップボードを JavaScript から扱える Async Clipboard API が Chrome M66 からデフォルトで使えるようになります。


これまでの クリップボード


Flash 等の技術を用いてクリップボードにアクセスしていました。

https://github.com/zeroclipboard/zeroclipboard


現状

IE に追従する形で他のブラウザにも document.execCommand が実装されました。

https://developers.google.com/web/updates/2015/04/cut-and-copy-commands

この API は Selection API と組み合わせることでテキストのコピーやペーストが可能になるというものでした。

ブラウザ間の差異や扱いにくさがあり、それを吸収するためのライブラリが生まれていました。

https://github.com/lgarron/clipboard-polyfill

https://github.com/zenorocha/clipboard.js


Async Clipboard API

Async Clipboard API は Promise ベースでクリップボードのコピーやペーストが行える API です。

Chrome の M62 からフラグで使えており、 M66 からはデフォルトで使えるようになります。

現時点ではテキストのみの対応であり、画像等他のフォーマットは扱えません。

パーミッションについてはこちらの記事が参考になります。


動作するサンプル

https://js-5pu4rc.stackblitz.io/

Chrome の Version 67.0.3361.0 (Official Build) canary (64-bit) でのみ動作確認しています。


実装

https://stackblitz.com/edit/js-5pu4rc

本来ボタンのクリックは不要ですが動作がわかりやすいので使用しています。


注意点

現状の Chrome の実装ではユーザジェスチャ(ボタンのクリック等)は不要ですが、タブがアクティブでないと動作に失敗してしまいます。

Chrome Developer Tools でサクッと試そうとしたところ、タブがアクティブになっておらず Promise が reject してしまい動作確認に手間取りました。その場合はこの issue で示されている通り、タブに切り替える時間を設けクリック等で切替える一手間が必要になります。

Async Clipboard API のより詳しい説明はこちら