@ledsun blog

無味の味は佳境に入らざればすなわち知れず

ZeroClipboard

ZeroClipboardを紹介します。

ZeroClipboardとは

ブラウザからクリップボードに書き込むためのJavaScirptライブラリ。

githubで使われています。

f:id:ledsun:20140617142453p:plain

なぜZeroClipboard?

クリップボード操作はブラウザ依存(InternetExplorer専用)です。 ZeroClipboardはFlashを使ってクロスブラウザを実現しています。

どうやって使う?

  1. 公式サイトからzipファイルをダウンロード
  2. 解凍
  3. helloworld的なhtmlが公式サイトにあるので作成します。
<html>
  <body>
    <div id="d_clip_button" class="clip_button" data-clipboard-text="Copy Me!" title="Click to copy." style="border:1px solid black; padding:20px;">Copy To Clipboard</div>

    <script type="text/javascript" src="ZeroClipboard.js"></script>
    <script type="text/javascript">
      var client = new ZeroClipboard( document.getElementById('d_clip_button') );
    </script>
  </body>
</html>
  1. http-serverで動かす

ブラウザでローカルファイルとして開いても動きません。 http-serverの使い方はこちら*1

原理

指定したDOMの上に透明なFlashを配置してクリック操作をフックします。 そのため元のボタンのhoverやclickを指定するには調整が必要です。 イベントとCSSクラスが用意されています。 公式ドキュメントを参照してください。

またJavaScriptで元のボタンをclickしても動きません。

*1:公式サイトにはデモを試すにはgh-pagesブランチをcloneしろって書いてあるけど・・・・無い。