JavaScriptとFlashを利用してクリップボードへのコピー機能を提供するzeroclipboard

Posted by kumacchi on 2010年11月13日 , No comment

よく、ブログパーツやアフィリエイトのサイトなどでタグを取得する際にクリップボードにコピーするというボタンがあってそれをクリックするとクリップボードにデータをコピーしてくれるという機能があったりします。

IEだとclipboardData.getDataやclipboardData.setDataを使ってクリップボードにデータを設定したりクリップボードからデータを取得したり簡単に出来るんですが、その他のブラウザではこの機能はつかえません。

そこで、JavaScriptとFlashを組み合わせて利用しクリップボードにデータを設定するというライブラリがいくつか存在するのですが、そのなかの一つzeroclipboardを使って実際にやってみました。最近はGoogle Chromeを使うことが多いので自作のウェブアプリなどでクリップボードにコピーする機能が使えなくて不便でした。

実際に下の『IPアドレス・ツールズ』に組み込んでみたところGoogle ChromeでもCOPYボタンが使えるようになって便利になった。
しかし、id毎にzeroclipboardを使うためのオブジェクトを作成せねばならず。関数化して汎用的に使えないのでソースが大きくなってしまうのが難点。

あと残念なのはペースト機能がないこと。クリップボードに関してはブラウザ共通の規格がほしいですね。

20100477

IPアドレスツールズ – KUMA TYPE

設置自体は難しくないので下のサイトの実際のコードを見れば分かると思います。

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: ‘https://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>