73
51

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-03-05

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

73
51
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
73
51

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?