[Rails]「clipboardにコピーする」ボタンを超簡単に設置

概要

Githubでおなじみのアレですね。

これ。

zeroclipboard-railsというgemを使えば一発です。

zeroclipboard-rails
https://github.com/zeroclipboard/zeroclipboard-rails

導入手順

Gemfileに追記して、

Gemfile

gem 'zeroclipboard-rails'

インストール。

$ bundle

application.jsに以下追記。

assets/javascripts/application.js

//= require zeroclipboard

$(document).ready(function() {
  var clip = new ZeroClipboard($("#d_clip_button"))
});

あとはコピー領域（textarea）と、コピーボタン（button）を用意するだけ。

erb

<div>
  <textarea id="fe_text" name="" rows="7" cols="100">コピー領域</textarea>
  <button class='my_clip_button' data-clipboard-target='fe_text' data-clipboard-text='Default clipboard text from attribute' id='d_clip_button'>
    <b>コピーする</b>
  </button>
</div>

超簡単！