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

🖥 VULTRおすすめ

VULTR」はVPSサーバのサービスです。日本にリージョンがあり、最安は512MBで2.5ドル/月($0.004/時間)で借りることができます。4GBメモリでも月20ドルです。 最近はVULTRのヘビーユーザーになので、「ここ」から会員登録してもらえるとサービス開発が捗ります!

📚 おすすめの書籍