クリップボードにコピーするjQueryプラグインを使ってみた

2013/06/16

どうも、こんちには!hosicameです。

PC案件で任意の文字列をクリップボードにコピーしたい要望がありました。
そこで、プラグインを探したところ2つあったので、その使用感と公式ドキュメントになかった部分で躓いた所をまとめました。

前提

クリップボードへのコピーをJSで実現できるのは、基本的にIEのみのはずです。
他のモダンブラウザは、そのような機能はありません。

なので、次の紹介する2つのプラグインはFlashを介してコピーさせています。
また、どちらもIE6から対応しています。

zClipについて

最小サンプルは下記から見れます。

Demo

公式ドキュメントに書いてない部分で、IEを対応させるにはjquery.snippet.min.jsが必要になります。
公式ページのソースを見るとちゃっかり読み込ませています。IEで動かねー!ってなっても僕のように冷や汗混じりに焦ってはいけません。

なので、合計容量が約75KBと重めです。ただ、XHTMLの文法に対応していて、Flashの被せ方もシンプルで使いやすいです。
この部分は実際使ってみないと実感しにくいと思います。

Zero Clipboardについて

最小サンプルは下記から見れます。

Demo

対して、こちらは公式ドキュメントそのままで使用できます。容量も約10KBなので軽いです。
難点は、HTML5の文法を用いた書き方なので、XHTMLやHTML4だと文法エラーになります。

また、Flashの被せ方が一見変わっているので扱いにくいかもしれません。コピーボタンにマウスオーバーすると被さる仕様です。
なので、CSSで位置調整がしずらく、複雑な設計をしていると難敵になるかもしれません。

まとめ

という訳で、用途に応じて使えばいいよね的な記事でした(笑)
少ししかJSかじった事ないって人にはzClipがオススメです。Zero Clipboardは言わば玄人志向ですかね。

P.S.
先日、CreateJSの勉強会に参加したのですが割りとさっぱりで付いていけませんでした。
あれは元Flasher向けでしたね。でも、Haxeの紹介があったり面白かったです。
今度、CreateJS×Haxe×FlashDevelopを使ってメインビジュアルのアニメーションを作ろうと思います!
About me
hosicame
昭和61年生まれ。フロントエンドエンジニア。Autohotkey大好きな私がお送りします。

Recent Posts