ZeroClipboardでクリップボードを使う

(1/1)
ホームページにボタンを設け、テキストボックスの内容をクリップボードにコピーする――この処理が意外と面倒くさい。クリップボード処理がブラウザに依存するためだ。
そこで今回は、ZeroClipboardというJavaScriptライブラリを使い、ブラウザに依存しないクリップボード処理を実装する。IE9以上、Chrome、Firefox、Safariでの動作を確認した。
なお、ZeroClipboardはjQuery とFlashを利用する。

サンプル・プログラム

サンプル・プログラムは、「PHPでDOMDocumentを使ってスクレイピング」で作ったPHPスクリプトがベースになっている。スクレイピングした情報を、ボタンをクリックするとクリップボードへ取り込めるようになっている。
クリップボードにコピーできたら、ペースト(ctrl-V)をクリックすることで任意の場所へ貼り付けられる。

プログラムの解説:jQuery

0042: <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.js"></script>

jQueryGoogle Developers に登録されているものを利用する。

プログラムの解説:ZeroClipboardの準備

0043: <script src="https://www.pahoo.org/common/js/ZeroClipboard/ZeroClipboard.min.js"></script>

ZeroClipboard から圧縮ファイルをダウンロードしたら、解凍して得られる以下のファイルを任意のフォルダに配置する。その位置を上記のように指定する。swfファイルはJavaScriptファイルと同じフォルダにあれば、特に指定する必要はない。

プログラムの解説:ZeroClipboardの使い方

0044: <script type="text/javascript">
0045: $(document).ready(function() {
0046:     var clip_url         = new ZeroClipboard($("#copy_url"));
0047:     var clip_title       = new ZeroClipboard($("#copy_title"));
0048:     var clip_description = new ZeroClipboard($("#copy_description"));
0049: });
0050: </script>

0189: <body>
0190: <h2>{$title_2} {$version}</h2>
0191: <form name="myform" method="post" action="{$myself}" enctype="multipart/form-data">
0192: URL:
0193: <input type="text" name="url" id="url" size="50" value="{$url}" /> 
0194: <input type="submit" id="exec" name="exec" value="取得" /> 
0195: <input type="button" id="copy_url" name="copy_url" value="コピー" data-clipboard-target="url" />
0196: <hr style="text-align:left; margin-left:0; width:500px;"/>
0197: TITLE:
0198: <input type="text" name="title" id="title" size="50" value="{$title}" />
0199: <input type="button" id="copy_title" name="copy_title" value="コピー" data-clipboard-target="title" /><br /><br />
0200: DESCRIPTION:<br />
0201: <textarea id="description" name="description" rows="4" cols="65">{$description}</textarea><br />
0202: <input type="button" id="copy_description" name="copy_description" value="コピー" data-clipboard-target="description" />
0203: </form>

コピー・ボタンは3つ配置している。
それぞれZeroClipboard オブジェクトとして、冒頭に発生させている。引数はボタンの要素(ここではID)を指定する。

ここでは、コピー・ボタンをHTMLタグの '<input type="button />"' で作成する。他のHTMLタグにも対応している。
属性 data-clipboard-target により、コピー元の要素IDを指定する。

補足

ChromeやFirefoxでは、HTML5の Clipboard API が利用できる。
これを使う場合は、JavaScriptを以下のように変更する。

0042: <script type="text/javascript">
0043: document.addEventListener('DOMContentLoaded', function() {
0044:     document.getElementById('copy_url').addEventListener('click', function() {
0045:         var target = document.getElementById('url');
0046:         var range = document.createRange();
0047:         range.selectNode(target);
0048:         window.getSelection().addRange(range);
0049:         document.execCommand('copy');
0050:         window.getSelection().removeAllRanges(); 
0051:         range.detach();
0052:     });
0053:     document.getElementById('copy_title').addEventListener('click', function() {
0054:         var target = document.getElementById('title');
0055:         var range = document.createRange();
0056:         range.selectNode(target);
0057:         window.getSelection().addRange(range);
0058:         document.execCommand('copy');
0059:         window.getSelection().removeAllRanges(); 
0060:         range.detach();
0061:     });
0062:     document.getElementById('copy_description').addEventListener('click', function() {
0063:         var target = document.getElementById('description');
0064:         var range = document.createRange();
0065:         range.selectNode(target);
0066:         window.getSelection().addRange(range);
0067:         document.execCommand('copy');
0068:         window.getSelection().removeAllRanges(); 
0069:         range.detach();
0070:     });
0071: });
0072: </script>

参考サイト

(この項おわり)
header