クリップボードにコピー、、、の覚え書き

 

 
この記事は2016年5月23日に更新されています。

2015年4月にGoogle Chrome43+などでcommandExec("copy")が使えるようになり、jQueryおよびフラッシュでコピーするためのjQueryプラグインが不要になりました。

 

クリップボードにコピーという要件

デスクトップやタブレットスマホを問わず、よく入力する住所やメールアドレスなんかをWEBページにまとめておいて、クリック(もしくはタップ)でクリップボードにコピーします。

結論としては、HTML5JavaScriptだけでは実現できず、zClipというjQueryプラグインでフラッシュを使うことにしました。

が、もちろん自分も普段メインで使っているiPadiPhoneではフラッシュは使えませんので、iOSのモバイル端末ではpromptコマンドでコピーしたいテキストを出力し、全選択 > コピーの操作でコピーする、という方法で代用します。

フラッシュが使えるブラウザかどうかは、JavaScriptで判定します。

 

f:id:bleu-bleut:20131024044454p:plain
f:id:bleu-bleut:20131024044500p:plain
 

 

iOSでフラッシュが使えるブラウザ

iPad2iPhone5のiOS7でPuffinがフラッシュが使え、タップでコピーできました。promptから全選択 > コピーの操作が面倒なときはiOSでもフラッシュでコピーができます。SafariChrome、Mercuryは駄目でしたが、Puffin以外にもフラッシュが使えるブラウザはあるのかな?

 

Puffin Web Browser Free

Puffin Web Browser Free

  • CloudMosa, Inc.
  • ユーティリティ
  • 無料

 

Puffin Web Browser

Puffin Web Browser

  • CloudMosa, Inc.
  • ユーティリティ
  • ¥300

 

Flashが使えるかどうかの判定js

ブラウザがフラッシュに対応しているかどうかは、Gistで公開されていたmgngさんのFlashが使えるかどうかの判定jsを使わせていただきました。

返り値が0であればフラッシュが使えない、7以上であれば使えると判定します。

 

execCommand("copy")は使えなかった!

javascript clipboard」で検索すると、フェイクで作ったtextareaにコピーしたい値を入れてexecCommandでクリップボードにコピーをするサンプルをいくつか見たのだけど、chromeなどのモダンブラウザではコピーをすることはできませんでした。IE9 on Win7では警告は出てコピーができましたが、主要なブラウザで使えないのでは意味がないので不採用にしました。

 

追記 2015.04.28

Chrome 43+、IE10+、Opera29+で、execCommand("copy")が使えるようになったようです。が、自分はまだ検証していません。

Cut and Copy Commands(英文)

 

おわり

フラッシュを使わないでHTML5JavaScriptだけで実現する方法が結局見つけられなかったのですが、可能だったりするのでしょうか?

デスクトップやモバイル端末でWEBページのテキストをクリックでクリップボードにコピーする、という要件で、最終的に一番いいと思ったのがこの方法でした。

もっといい方法なんかがあったら是非教えてください。

 

参照サイト

 

関連記事

 

検証環境