Rails5 テキストを一発でコピーできるボタンを実装する

Last updated at 2020-10-12Posted at 2020-02-20

目的

テキストを一発でコピーできるボタンの実装方法をまとめる

作業をする前に

今回の作業方法は公式のGithubのREADMEに沿って説明する。
clipboard-rails

実施方法

Gemzeroclipboard-railsをインストール
1. Gemfileに下記を追記する。
```
gem 'jquery-rails'
gem 'clipboard-rails'
```
2. 下記コマンドを実行してGemfileを元にGemをインストールする。
```
$ bundle update
```
設定ファイル記載
1. 下記に存在するファイルをエディタで開く。
  - アプリ名/app/assets/javascripts
    - /application.js
2. 下記の内容をapplication.jsに追記する。
```
//= require jquery
//= require jquery_ujs
//= require clipboard

$(document).ready(function(){  

var clipboard = new Clipboard('.clipboard-btn');
console.log(clipboard);

});
```
3. 下記に存在するファイルをエディタで開く。
  - アプリ名/app/views/layouts
    - application.html.erb
4. <head>の一番最初に下記を追記する。
```
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
```

ボタンを実装

任意のビューファイルに下記の記載を行う。

<div>
  <!-- Target -->
  <textarea id="bar" name="" rows="7" cols="100">
  <p>コピーターゲット</p>
  </textarea>
  <!-- Trigger -->
  <button class="clipboard-btn" data-clipboard-action="copy" data-clipboard-target="#bar">
      Copy to clipboard
  </button>
</div>

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up