カテゴリー別アーカイブ: ZeroClipboard.js

コピーボタンの実装

ユーザビリティを向上させたいためにコピーボタンを実装したいことがあると思います.

一見するとJavaScriptで結構簡単にできそう…なのでですが, セキュリティの理由からそう簡単にはできません.

もっとも, Internet Explorerであれば非常に簡単に実装可能です.

if (window.clipboardData) {
     clipboardData.setData('Text', 'コピーする文字列');
}

ところが, Internet Explorer以外のブラウザではclipboardDataオブジェクトはグローバルに定義されていないのでこの方法は使えません.

解決策の1つとして, ライブラリを使うことです.

コピーボタンを実装するためのライブラリはいくつかあるようなのですが, 今回はZeroClipboard.jsを紹介したいと思います.

このライブラリはGItHubのリポジトリをcloneするURLをコピーするボタンでも使われています.

このライブラリは, コピーのコア部分はActionScript 3.0で実装されています. それをJavaScriptで呼び出すといった形になっています.

といっても, ライブラリの利用者はActionScript 3.0を書く必要はなくZeroClipboard.swfをZeroClipboard.jsと同じディレクトリに置くだけです.

このライブラリを利用する場合の注意点が1つだけあります.

それは, ローカル環境では動作しないということです. おそらく, 裏でActionScript 3.0を利用していることが要因でしょう.

では, 実際の利用方法を解説します.

  1. まずは, ZeroClipboard.jsを読み込んでおきます.
  2. newZeroClipboard.Client()でインスタンス生成します.
  3. これは必須ではありませんが, カーソルをユーザビリティを考慮して変更します. ここは注意が必要なのですが, コピーボタンのカーソルをCSSで変更しても反映されません. なぜかというと, そのうえのレイヤーにswfを読み込むobjectタグが配置されるからです.
  4. ZeroClipboard.ClientインスタンスのaddEventListenerメソッドで必要なイベント処理を実装します. ここもまた注意してほしいのですが, このaddEventListenerはDOMのaddEventListenerメソッドではないということです. あくまで, ZeroClipboard.ClientインスタンスのaddEventListenerメソッドなので, 引数やコールバック関数に渡される引数には注意してください.
  5. loadはswfのファイルの読み込みが完了したとき, completeはコピーが完了したときに発生するイベントのようです. 例えば, 決まったURLをコピーさせたい場合などはloadイベントでコピーするようにすればいいでしょう.
  6. クリップボードにコピーするには, ZeroClipboard.ClientインスタンスのsetTextメソッドを利用します. 引数には, コピーしたい内容の文字列を指定します.
  7. ZeroClipboard.Clientインスタンスのglueメソッドでコピーボタンのidを指定してコピーボタンの完成です.
  8. たいていの場合は, 第1引数にコピーボタンのidを指定するだけでコピーボタンの上にswfを読み込むobjectタグが配置されるのですが, ずれてしまう場合もあり, そうなってしまうとコピー機能がはたらきません.  その場合は, glueメソッドの第2引数にコピーボタンをラップする要素のidを指定します. さらにその要素にposition:relative; を指定することで解決します. 細かいずれなどはコピーボタンのサイズを変更するなどして調整します.

以上でコピーボタンの完成です. 以外と注意点が多いのでまとめておきます.

  • ローカル環境では機能しない
  • ボタンカーソルの変更はsetHandCursorメソッドを利用する
  • addEventListenerメソッドはDOMのaddEventListenerメソッドとは異なる
  • コピーボタンが機能していない場合は, objectタグの位置を調整する