51
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

updated at

Organization

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

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 のより詳しい説明はこちら

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
51
Help us understand the problem. What are the problem?