クリップボードにコピーの実装は難しい？「zClip」が一発解決

ブラウザからクリップボードに文字列をコピーする機能を実装したく調べた結果、便利なJSライブラリがあったので書いておく。

最初はブラウザからクリップボードにコピーする機能はJSで簡単に実装できるもんだと思っていたが、実はそうではなかった。そのような機能を提供しているのはIEだけであり、他のブラウザではJSのみではコピーすることが出来ないようだ（Chromeでクリップボードにコピーする実装方法という記事をいくつか読んだが、提供しているデモがそもそも動いていなかった...僕の環境のせいかもしれないが）。
そんな意外に難しいクリップボードコピーを簡単に実現してくれるのが「zClip」である。

Flashを使うことでコピー機能を実現しているようだ。このライブラリのみでIE、Firefox、Chromeなどクロスブラウザ対応している。すばらしい。

zClip.jsの使い方

使い方は色々あるのだが、zClipのトップページにあるデモを参考に実装方法を記載しておく。

まずheadタグ内などで以下の2つを読み込む。jQueryとzClip。

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

bodyタグ内で以下のようにマークアップ。Copyを押すとtextareaに入力した文字をクリップボードにコピーする。

<textarea>hogehoge</textarea>
<a id="copy-button" href="#">Copy</a>

scriptタグ。「.swf」というものがFlashの何かのようだ。ここもしっかりファイルへのパスを指定する必要がある（後述するcdnjsで提供されている）。

$(document).ready(function(){
  $("#copy-button").zclip({
    path: "js/ZeroClipboard.swf",
    copy: function(){
      return $(this).prev().val();
    }
  });
});