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

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

• Chrome 43からcutおよびcopyコマンドが使えます - Qiita

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

各ブラウザの実装状況

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

• 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 は コピーとかペーストとかのクリップボードに関するアクションをユーザーが実際に行ったときにだけ利用できる