酒と泪とRubyとRailsと

Ruby on Rails と Objective-C は酒の肴です!

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

fpu_tmp_1353859887.4897_48b374

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

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

Demo Source(GitHub)

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

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

コンソール
1
2
3
4
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を読み込むようにする。

app/assets/javascripts/application.js
1
2
//= require jquery
//= require jquery.zclip.min

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

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

viewファイル
1
2
%textarea#paste_item= @paste_item -#ここに任意のデータを載せる
%button#set_clipboard クリップボードに貼付ける

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

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

coffeescriptファイル
1
2
3
4
5
6
$ ->
  # ボタンを押したら、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

おすすめの書籍