ZeroClipboard How to


こんにちは、アベです。
最近、ブラウザ上で任意の文字列をクリップボードに転送する、という要件があって、ZeroClipboardを使ってみたのですが、ちょっとハマったのでご紹介します。

ZeroClipboardとは

ブラウザのみの機能でjavascriptでクリップボードに転送することができるのは、今のところIEのみです。
Firefoxでは、リッチテキスト編集機能として提供されてはいるものの、標準状態ではセキュリティの関係上許可されていません
chromeでも同様の理由なのか、機能しませんでした。

そこで何を使うかというと、ZeroClipboardです。
ほかにも同様のことを実現するライブラリはいくつかありますが、githubで採用実績があるという点でなんとなく選んでしまいました。

使い方

最小のサンプルはこんな感じです。
いきなりハマりどころです。ローカルファイルとして表示しても機能しませんので、webサーバ上から表示する必要があります。

<span id="copy-button">copy button</span>
<script src="ZeroClipboard.js"></script>
<script>
clipboard = new ZeroClipboard.Client();
clipboard.addEventListener('mouseDown', function(client){
clipboard.setText('copytext');
});
clipboard.glue('copy-button');
</script>

仕組みとしては、flashプラグイン経由でosのクリップボードにアクセスする、という方法をとっているようです。
スクリプトの内容としては、ボタン(などのトリガー)1つにつき、1つのインスタンスを生成してボタンに貼りつけ、mouseDownなどのイベントを割り当てるようになっています。

配置について

ボタンに貼りつけるのが、clipboard.glue('copy-button'); の部分なんですが、ここで何をやっているかというと、
・object、またはembedタグを作ってflashプラグインを埋め込み
・flashオブジェクトをdivでラップし、位置とサイズを調整
・bodyの子要素の末尾に追加

と、ここまでなら通常のwebページでは問題ないのですが、今どきはjqueryなどで動きのあるページを作ることが多くなってきてます。
そういった場合、ZeroClipboardのflashオブジェクトの配置がうまくいかないことがあります。
たとえばこんな感じ。


jquery uiでダイアログを作成し初期状態は非表示で、右上のボタンを押すとダイアログを表示するサンプルです。
クリップボードに転送するボタンはダイアログの上に置いてあります。

flashオブジェクトはどこにあるかというと「copy button」ボタンの位置にはなく、画面左上にサイズ0で配置されてしまいます。実質機能していません。

clipboard.glue('copy-button'); の結果は実行時の画面の状態に依存します。
ダイアログが表示されてない状態では「copy button」ボタンも表示されてないので位置もサイズも0と判断され、flashオブジェクトも同じサイズになってしまい、見えなくなります。

どうするか

ダイアログを表示するタイミングで clipboard.glue('copy-button'); を実行します。
dialog_open() が右上ボタンで実行される関数です。また、clipboard.glue('copy-button'); に第2引数を追加し、bodyではなく「copy button」ボタンの子要素としてflashオブジェクトを追加するようにします。

<script>
var clipboard;
function dialog_open(){
$('#dialog').dialog('open');
if(!$('#copy-button > div').length){
clipboard.glue('copy-button', 'copy-button');
}
}
$('#dialog').dialog({autoOpen: false, resizable: false});
clipboard = new ZeroClipboard.Client();
clipboard.addEventListener('mouseDown', function(client){
clipboard.setText('copytext');
});
</script>

これだけだと、flashオブジェクトがダイアログの内容表示領域の左上に寄ってしまいます。
「copy button」ボタンのスタイルシートに position:relative; を追加します。

<span id="copy-button" style="position:relative;border:3px double;padding:2px;">copy button</span>

これで解決です。「copy button」ボタンに納まりました。
ダイアログを移動してもflashオブジェクトはズレることなく、「copy button」ボタンの位置に追随します。

まとめ

以上を踏まえて、ZeroClipboardを使うにあたって注意する点です。

  • webサーバ上で確認
  • clipboard.glue('copy-button'); は実行時の画面状態に依存
  • flashオブジェクトを追加する要素を指定し、position:relative; をスタイルに追加

ライブラリを個々に使う上ではサンプル通りで問題ないことが多いですが、ライブラリを組み合わせて使うとなると今回のようなことが起こりえます。
今回もZeroClipboardの挙動をつかうために、ZeroClipboardのjsソースファイルを読みました。
検証は大切ですね。


カテゴリー: 技術 タグ: , ,

Link

「ざっくり」見積ります! お問い合わせからリリースまでの流れはこちら アプリ開発実績はこちら facebookページ 株式会社からくりもの twitter @karakurimono