Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
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 のより詳しい説明はこちら

grapswiz
topgate
Google技術を中心に取り扱う技術者集団
https://www.topgate.co.jp/
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