よく、ブログパーツやアフィリエイトのサイトなどでタグを取得する際にクリップボードにコピーするというボタンがあってそれをクリックするとクリップボードにデータをコピーしてくれるという機能があったりします。
IEだとclipboardData.getDataやclipboardData.setDataを使ってクリップボードにデータを設定したりクリップボードからデータを取得したり簡単に出来るんですが、その他のブラウザではこの機能はつかえません。
そこで、JavaScriptとFlashを組み合わせて利用しクリップボードにデータを設定するというライブラリがいくつか存在するのですが、そのなかの一つzeroclipboardを使って実際にやってみました。最近はGoogle Chromeを使うことが多いので自作のウェブアプリなどでクリップボードにコピーする機能が使えなくて不便でした。
実際に下の『IPアドレス・ツールズ』に組み込んでみたところGoogle ChromeでもCOPYボタンが使えるようになって便利になった。
しかし、id毎にzeroclipboardを使うためのオブジェクトを作成せねばならず。関数化して汎用的に使えないのでソースが大きくなってしまうのが難点。
あと残念なのはペースト機能がないこと。クリップボードに関してはブラウザ共通の規格がほしいですね。
設置自体は難しくないので下のサイトの実際のコードを見れば分かると思います。
Instructions - zeroclipboard - Project Hosting on Google Code
軽く説明しておくと
上記のサイトからzeroclipboardをダウンロードして展開後、使いたいページのディレクトリにアップロードしておきます。
ZeroClipboard.jsの下の赤字の部分にZeroClipboard.swfへのパスを書いて上書きアップロードします。
// Simple Set Clipboard System
// Author: Joseph Huckaby
var ZeroClipboard = {
version: "1.0.7",
clients: {}, // registered upload clients on page, indexed by id
moviePath: 'http://blog.kumacchi.com/gagagagaga/country/zeroclipboard/ZeroClipboard.swf', // URL to movie
nextId: 1, // ID of next movie
あとは下のような感じで利用します。
<html>
<body>
<script type="text/javascript" src="./zeroclipboard/ZeroClipboard.js"></script>
<input type="text" name="text01" value="あいうえお" id="copy_text01">
<input type="button" name="button01" value="コピー" id="copy_button01">
<script language="JavaScript">
var clip = new ZeroClipboard.Client();
clip.setText( copy_text01.value );
clip.glue( 'copy_button01' );
</script>
</body>
</html>
コメントする