読者です 読者をやめる 読者になる 読者になる

Noise of Web Programming

主にHTML/CSS/JavaScriptやWebサービスの情報を配信しています。可能な限り実装方法まで書いていくつもりです。

ブログを移転しました。

Tecuration.com

このサイト同様、HTML/CSS/JavaScriptなどのフロントサイドWeb開発に関する最新情報やライフハックを配信しています。

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

Javascript ライブラリ

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

zClip


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


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


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();
    }
  });
});


実行結果はこちら。デフォルトではコピー後にアラートするようだ。オプションが用意されており、コピー前後の挙動も実装することが出来る。詳しくはzClipのページを参照してほしい。


ちなみにzClipはcdnjsで提供されているので、わざわざダウンロードする必要はない。(cdnjsって何ぞという人は以下の記事をどうぞ。)

その数300以上!大量のJSライブラリを配信する「cdnjs」がすごい


1点注意!zClipを使うときはHTMLファイルをサーバーにアップして実行する必要があるということ。なぜかローカルPC上では動かない。こういう時はオンラインエディタが便利だよね。

Sublime Textから卒業?オンラインエディタのJS Binが便利すぎる


いやー本当に便利なライブラリがあるもんだ。開発者のみなさんに感謝感謝。ということでコーディングに戻ります。


※追記 2013/07/02
zClipを使って自分でカスタマイズした文字列をクリップボードにコピーできるWebサービスを作った。Chrome Extensionも公開中。ぜひお試しを。

CtrlPlusC

広告を非表示にする