クリップボードにコピー、、、の覚え書き
2015年4月にGoogle Chrome43+などでcommandExec("copy")が使えるようになり、jQueryおよびフラッシュでコピーするためのjQueryプラグインが不要になりました。
クリップボードにコピーという要件
デスクトップやタブレット、スマホを問わず、よく入力する住所やメールアドレスなんかをWEBページにまとめておいて、クリック(もしくはタップ)でクリップボードにコピーします。
結論としては、HTML5やJavaScriptだけでは実現できず、zClipというjQueryプラグインでフラッシュを使うことにしました。
が、もちろん自分も普段メインで使っているiPadやiPhoneではフラッシュは使えませんので、iOSのモバイル端末ではpromptコマンドでコピーしたいテキストを出力し、全選択 > コピーの操作でコピーする、という方法で代用します。
フラッシュが使えるブラウザかどうかは、JavaScriptで判定します。
iOSでフラッシュが使えるブラウザ
iPad2とiPhone5のiOS7でPuffinがフラッシュが使え、タップでコピーできました。promptから全選択 > コピーの操作が面倒なときはiOSでもフラッシュでコピーができます。Safari、Chrome、Mercuryは駄目でしたが、Puffin以外にもフラッシュが使えるブラウザはあるのかな?
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(英文)
おわり
フラッシュを使わないでHTML5やJavaScriptだけで実現する方法が結局見つけられなかったのですが、可能だったりするのでしょうか?
デスクトップやモバイル端末でWEBページのテキストをクリックでクリップボードにコピーする、という要件で、最終的に一番いいと思ったのがこの方法でした。
もっといい方法なんかがあったら是非教えてください。
参照サイト
- クリップボードにコピーする機能の実装 | ジェネストリーム開発ブログ
- zClip :: jQuery ZeroClipboard
- テキストをクリップボードにコピーする | tande lab.
- クリップボードにコピー - 素人がプログラミングを勉強していたブログ
- Flashが使えるかどうかの判定js
関連記事