zClip(zeroClipBoard)をRails/Coffeescriptに組み込む

「Webサイト内のデータをローカルPCのクリップボード貼り付ける」という機能は jQuery PluginのjQuery ZeroClipboard とflash(swf)を使うのがメジャーなやり方のようです。

今回は、ZeroClipboardをRails/CoffeeScript/hamlに組み込むサンプルを載せておきます。

Demo
Source(GitHub)


😎 (1) jQuery ZeroClipboardからファイルをダウンロード

jQuery ZeroClipboardからjQuery pluginとswfファイルをダウンロード。

cd app/assets/javascripts/
wget http://www.steamdev.com/zclip/js/jquery.zclip.min.js
cd app/app/assets/images/
wget http://zeroclipboard.googlecode.com/svn-history/r10/trunk/ZeroClipboard.swf

🐰 (2) jQuery ZeroClipboardのjsファイルの読込設定

application.jsに以下を追記して、jquery.zclip.min.jsを読み込むようにする。

//= require jquery
//= require jquery.zclip.min

🐮 (3) viewファイルにペーストするデータとボタンを表示

viewファイルに貼り付けるコードを表示するフォーム(任意)と、貼り付けボタンを追加。

%textarea#paste_item= @paste_item -#ここに任意のデータを載せる
%button#set_clipboardクリップボードに貼り付ける

😀 (4) viewファイルにペーストするデータとボタンを表示

ボタンを押すとtextareaからクリップボードにコピーされるように、
coffeescriptに以下を追記。

$ ->
# ボタンを押したら、textareaからクリップボードにデータをコピーする
$("button#set_clipboard").zclip
path: "/assets/ZeroClipboard.swf"
copy: ->
$("textarea#paste_item").html()

🐹 参考サイト

Webページ上からクリップボードにコピーできる『zClip』

🍄 テスト環境

# Rails : 3.2.9
# haml : 3.1.7
# coffee-script : 3.2.1

📚 おすすめの書籍