ZeroClipboardを使用したクロスブラウザでのクリップボードへのコピー問題の解決法

Zero Clipboardの仕組み

Zero Clipboardは、コピーボタンの上に透明なFlashを浮かせ、ボタンをクリックする代わりに、実際にFlashをクリックし、Flashに希望のコンテンツを渡し、Flashのコピー機能で入ってきたコンテンツをクリップボードにコピーします。
Zero Clipboardのインストール方法

まず、Zero Clipboardのパッケージをダウンロードし、解凍して、フォルダ内の2つのファイルを入れてください。ZeroClipboard.jsとZeroClipboard.swfの2つのファイルをあなたのプロジェクトに入れます。

次に、コピー機能を使いたいページにZero Clipboard jsファイルを導入してください。ZeroClipboard.js
のコードは以下のようになります。

注）上記のZeroClipboard.js、ZeroClipboard.swfは同じパスに存在する必要があります。同じパスにない場合は、ZeroClipboard.setMoviePath( "Flash path" );でZeroClipboard.swfのアドレスを設定することが可能です。

このように、基本的な機能は実装されており、ボタンをクリックすることで設定されたテキストをコピーすることができるわけです。コピーされるテキストは固定されていることにお気づきかもしれませんが、入力ボックスの内容をコピーするように、動的に変更したい場合はどうすればよいでしょうか。入力ボックスの内容をコピーするように、動的に変更したい場合はどうすればいいのでしょうか。心配しないでください。

Zero Clipboardの高度な機能

1. reposition() メソッド

ボタンにFlashボタンを浮かべているため、ページサイズが変わるとFlashボタンの位置がずれてしまい、クリックできなくなることがあります。気にしないでください。Zero Clipboardには、Flashボタンの位置を再計算するreposition()メソッドが用意されています。これをresizeイベントにバインドすればいいのです。例えば、次のコードは、resizeイベントを利用してボタンの位置を変更するjQueryの実装です。

2. hide() メソッドと show() メソッド
この2つのメソッドは、Flashボタンを隠したり、表示したりすることができます。show() メソッドは reposition() メソッドを呼び出します。

3. setCSSEffects()メソッド
css ":hover"、":active"などの擬似クラスは、Flashボタンのオクルージョンにより、マウスをボタン上に移動したりクリックすると失敗することがあります。 setCSSEffects() メソッドはこの問題を解決するためのものです。まず、擬似クラスをクラスに変更する必要があります、例えば

#copy-botton:hover{border-color:#FF6633;}// は、以下の ":hover" から ".hover" に変更することができます。
#copy-botton.hover{border-color:#FF6633;}.

この方法では、Zero Clipboardが自動的にこの処理を行います。

4. getHTML()メソッド
Zero Clipboardのattachmentメソッドを使わずに、自分でFlashをインスタンス化したい場合は、このメソッドが役に立ちます。このメソッドは、Flashの幅と高さの2つのパラメータを受け取ります。戻り値は、Flashに対応するHTMLコードです。例

var html = clip.getHTML( 150, 20 );
出力にはinnerHTMLを使うか、document.write();だけでOKです。
以下は、テスト出力から組み立てたHTMLコードです。
<embed id"ZeroClipboardMovie_1" src="zeroclipboard/ZeroClipboard. swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="150" height="20" name="ZeroClipboardMovie_1&.Quot; size=" size="20" size="20"20"20"21"22" quot; align="middle" allowScriptAccess="always" allowFullScreen="false" type="application/x- shockwave-flash" pluginspage="http.X.X.X.X.X.X.X.X.X.X.X.X.X.X.X.X.X.X.X.X.X.X.X: //www. macromedia.com/go/getflashplayer" flashvars="id=1&width=150&height=20" wmode="transparent" />。

IEのFlash JavaScript通信インターフェースにバグがあります。既存のDOM要素にobjectタグを挿入する必要があります。そして、その要素が appendChild メソッドで DOM に挿入されたことを確認してから innerHTML を記述してください。

クリップボードイベントのゼロ処理

Zero Clipboardには様々なイベントが用意されており、それらを処理する関数でカスタマイズできます。Zero ClipboardイベントハンドラはaddEventListener()で、例えばFlashが完全にロードされるとイベント "load"がトリガーされるようになります。
clip.addEventListener( "load", function(client) { )
    alert("フラッシュ読み込み完了！ ")。
});
Zero Clipboardは、パラメータとしてclipオブジェクトを渡します。上の例では、これが"client"にあたります。
また、"load" は "onLoad" と書くことができ、他のイベントもそのようにすることができる。

その他のイベントとしては

mouseOver マウスオーバーイベント
mouseOut マウスオーバイベント
mouseDownイベント
mouseUp マウス解放イベント
complete コピー成功イベント
mouseOverイベントとcompleteイベントがより一般的に使われています。

前述のように、コピーする内容を動的に変更する必要がある場合、mouseOver イベントは便利です。たとえば、id が test の入力ボックスの値を動的にコピーする必要がある場合、マウスオーバーしたときに値をリセットすることができます。