IE以外のブラウザでもクリップボードを操作できるJavaScriptライブラリzeroclipboard - 小さい頃はエラ呼吸

小さい頃はエラ呼吸

いつのまにやら肺で呼吸をしています。


IE以外のブラウザでもクリップボードを操作できるJavaScriptライブラリzeroclipboard

JavaScript
はじめに


このエントリでは、IE以外のブラウザでもクリップボードに値をコピーすることができるJavaScriptライブラリzeroclipboardについて書いています。
zeroclipboardでは、JavaScriptと見えないFlashコンテンツを駆使して、普通はクリップボードを操作できないIE以外のブラウザでもクリップボードに値をコピーすることが出来るようになっています。

僕の環境で確認したところ、Mac版のSafari5、Google Chrome10、Firefox4.0では正しく動作します。

zeroclipboardのデモページ
zeroclipboardの使い方

1. zeroclipboardプロジェクトのサイトからモジュールをダウンロードします。

2. モジュールを展開します。
3. 展開したファイルを一式サーバにアップロードします。
4. 他のJavaScriptライブラリ同様、scriptタグで読み込みます。

<script type="text/javascript" src="ZeroClipboard.js"></script>

ページのオンロード時にnew ZeroClipboard.Client()でオブジェクトを生成します。clip.glue('hoge');で指定した要素がクリップボードの操作対象の要素になります。

  window.onload = function() {
    clip = new ZeroClipboard.Client();
    clip.setHandCursor( true );
    clip.addEventListener('mouseOver', function (client) {
      // update the text on mouse over
      clip.setText($('fe_text').value);
    });
    clip.glue('hoge');
  }
注意点

仕様なのかは分からないのですが、対象のwebページとJavaScriptとflashファイルをすべて同じディレクトリに置かないとうまく動作しません。
swfファイルのパスを指定する場合は、以下のようにします。

ZeroClipboard.setMoviePath("./ZeroClipboard/ZeroClipboard.swf");
ボタンを押したときにクリップボードにコピーするサンプル
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Zero Clipboard デモページ</title>
<script type="text/javascript" src="ZeroClipboard.js"></script>
<script language="JavaScript">
	function $(id) { return document.getElementById(id); }
		
	var clip = null;
	window.onload = function() {
		clip = new ZeroClipboard.Client();
		clip.setHandCursor( true );
		clip.addEventListener('mouseOver', function (client) {
			// update the text on mouse over
			clip.setText($('fe_text').value);
		});
		clip.glue('hoge');
	}
</script>
</head>
<body>
<h1>Zero Clipboard デモページ</h1>
<h2>あなたのブラウザ</h2>
<p><script>document.write("Your browser: " + navigator.userAgent);</script></p>
<h2>テキスト</h2>
<textarea id="fe_text" cols=50 rows=5 >Copy me!</textarea>
<input type="button" id="hoge" value="クリップボードにコピーする">
</body>
</html>

関連エントリ