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

はじめに

このエントリでは、IE以外のブラウザでもクリップボードに値をコピーすることができるJavaScriptライブラリzeroclipboardについて書いています。

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

zeroclipboard - Provides "Copy to Clipboard" functionality for your web site using JavaScript and Flash - Google Project Hosting

僕の環境で確認したところ、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");

ボタンを押したときにクリップボードにコピーするサンプル

Zero Clipboard デモページ

<!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>