Help us understand the problem. What is going on with this article?

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

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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした