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?

話題の document.execCommand('copy') を使ってコピーボタンを置く

More than 3 years have passed since last update.

脱 Flash を掲げている我々にとっての最大の難関はクリップボードアクセスのために ZeroClipboard などを利用して Flash を利用しないといけなかった訳ですが遂に朗報が舞い込みました。

先日から徐々に話題になっていたので、実際に使おうとすると使えるのかどうかをざっと試してみたのでその内容を書いておきます。

各ブラウザの実装状況

前述の記事にもありますが、ざっとこんな感じ。

  • Chrome: 43 で対応
  • IE: 10 で対応
  • Firefox: 設定の変更が必要 ( 設定の変更が行われていない場合はエラーを投げる Firefox 41以降はデフォルトで有効になっています
  • Safari: v10から対応

モダンブラウザだったら大体問題なくdocument.execCommand('copy')が使えるので、以下のような回避策はほぼ不要です

やりたいこと

  • copyボタンを設置する
  • DOM構築時に document.execCommand('copy') が利用可能な環境の場合は document.execCommand('copy') でクリップボードへのコピーを行い、サポートしていない場合は事前に ZeroClipboard を仕掛けておく

試したこと

  • document.queryCommandSupported('copy')を叩けば上手くいくと踏んでいたら、 Chrome は https://code.google.com/p/chromium/issues/detail?id=476508 の通りでユーザーのクリックなどがない場合は false が返ってくるので、事前に判定できない。
    • 結局バージョンで判定するしかないという雰囲気
    • 修正のためのpatchが提出された https://codereview.chromium.org/1097693003/ これが取り込まれれば Chrome は判定可能になる
    • 修正がmerge済みになったので48.0.2541.0での修正が確認されています
  • Firefox は 設定に関わらず document.queryCommandSupported('copy')trueを返す。
    • 適当に document.execCommand('copy') を叩いてエラーが飛んでくるかどうかで一応判定は出来る。
    • デフォルトで有効になったので設定を気にすることはほぼ必要なさそう
      • なので以下のようなHackも不要
# XXX: Hack for Firefox. Firefox throw error when setting disable.
if document.queryCommandSupported('copy')
  try
    document.execCommand('copy')
  catch
    useZeroClipBoard = true

所感

http://updates.html5rocks.com/2015/04/cut-and-copy-commands

Ahead of calling document.execCommand(), you should ensure that this API is supported using the document.queryCommandSupported() method.

と書かれてはいるものの各ブラウザのdocument.queryCommandSupported('copy')がかなり鬼門という雰囲気。( Chrome の実装を契機にもうちょっと良しなになって欲しい気持ち)

なんか良いアイデアとかあれば教えて下さい。何か変化があれば追記します。

メモ

  • Clipboard API は コピーとかペーストとかのクリップボードに関するアクションをユーザーが実際に行ったときにだけ利用できる
hatena-corp
「知る」「つながる」「表現する」で新しい体験を提供し、人の生活を豊かにする
https://hatenacorp.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