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

📚 おすすめの書籍

🖥 サーバについて

このブログでは「Cloud Garage」さんのDev Assist Program(開発者向けインスタンス無償提供制度)でお借りしたサーバで技術検証しています。 Dev Assist Programは、開発者や開発コミュニティ、スタートアップ企業の方が1GBメモリのインスタンス3台を1年間無料で借りれる心強い制度です!(有償でも1,480円/月と格安)