textareaの内容をコピーする実装

Question

解決したいこと

Railsでtextareaの内容をコピーするボタンを設置したいです。

調べた内容

[Rails]「clipboardにコピーする」ボタンを超簡単に設置
https://qiita.com/kidach1/items/0cef215de8ff47221f24

検証作業と結果

上記のQiitaに沿って進めました。以下は現在のコードです。

Gemfile

source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby '2.6.5'

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 6.0.0'
# Use mysql as the database for Active Record
# gem 'mysql2', '>= 0.4.4'
gem 'mysql2', '0.5.3'
# Use Puma as the app server
gem 'puma', '~> 3.11'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5'
# Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker
gem 'webpacker', '~> 4.0'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.7'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 4.0'
# Use Active Model has_secure_password
# gem 'bcrypt', '~> 3.1.7'

# Use Active Storage variant
# gem 'image_processing', '~> 1.2'

# Reduces boot times through caching; required in config/boot.rb
gem 'bootsnap', '>= 1.4.2', require: false

group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
end

group :development do
  # Access an interactive console on exception pages or by calling 'console' anywhere in the code.
  gem 'web-console', '>= 3.3.0'
  gem 'listen', '>= 3.0.5', '< 3.2'
  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
  gem 'spring'
  gem 'spring-watcher-listen', '~> 2.0.0'
  gem 'rubocop', require: false
end

group :test do
  # Adds support for Capybara system testing and selenium driver
  gem 'capybara', '>= 2.15'
  gem 'selenium-webdriver'
  # Easy installation and use of web drivers to run system tests with browsers
  gem 'webdrivers'
end

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

gem 'active_hash'
gem 'zeroclipboard-rails'
gem 'jquery-rails'

config/routes.rb

Rails.application.routes.draw do
  root to: 'kifus#index'
  resources :kifus
end

app/controllers/kifus_controller.rb

class KifusController < ApplicationController
  before_action :set_kifu, only: [:edit, :show, :destroy, :update]

  def index
    @kifus = Kifu.all.order('date DESC')
  end

  def new
    @kifu = Kifu.new
  end

  def create
    @kifu = Kifu.create(kifu_params)
    if @kifu.valid?
      @kifu.save
      redirect_to root_path
    else
      render 'new'
    end
  end

  def edit
  end

  def update
    if @kifu.update(kifu_params)
      redirect_to kifu_path(@kifu.id)
    else
      render 'edit'
    end
  end

  def show
  end

  def destroy
    if @kifu.destroy
      redirect_to root_path
    else
      redirect_to kifu_path(@kifu.id)
    end
  end

  private

  def kifu_params
    params.require(:kifu).permit(:date, :opponent, :result_id, :type_id, :kifu)
  end

  def set_kifu
    @kifu = Kifu.find(params[:id])
  end

end

app/views/kifus/index.html.erb

<div class="index-wrapper">

  <div class="new-link">
    <%= link_to '棋譜投稿ページへ', new_kifu_path %>
  </div>

  <h2>＜棋譜一覧＞</h2>

  <div class="kifu-lists">
    <% @kifus.each do |kifu| %>
      <div class="one-kifu">

        <%# 日付 %>
        <span class="date">
          <%= kifu.date %>
        </span>

        <%# 相手 %>
        <span class="opponent">
          <%= kifu.opponent %>
        </span>

        <%# 結果 %>
        <span class="result">
          <%= kifu.result.name %>
        </span>

        <%# 戦型 %>
        <span class="type">
          <%= kifu.type.name %>
        </span>

        <%# 棋譜リンク %>
        <span class="kifu-page">
          <%= link_to '棋譜', kifu_path(kifu.id)  %>
        </span>

      </div>
    <% end %>
  </div>
</div>

app/assets/stylesheets/index.scss

.index-wrapper {
  margin: 20px;
}

.new-link {
  font-size: 20px;
}

h2 {
  margin-top: 10px;
}

.kifu-lists {
  margin-top: 5px;
}

.one-kifu {
  font-size: 18px;
}

app/views/kifus/new.html.erb

<div class="new-wrapper">
  <div class="input-forms">

  <h2>＜対局情報入力＞</h2>

    <%= form_with(model: @kifu, local: true) do |f| %>

      <%# 日付 %>
      <div class="input-field">
        <%= f.label :date, '日付：' %>
        <%= raw sprintf(
                    f.date_select(
                        :date,
                        use_month_numbers: true,
                        start_year:        2015,
                        end_year:          2025,
                        default:           Date.today,
                        date_separator:    '%s'),
                    '年 ', '月 ') + '日'
        %>
      </div>

      <div class="input-field">
        <%= f.label :opponent, '相手：' %>
        <%= f.text_field :opponent %>
      </div>

      <div class="input-field">
        <%= f.label :result_id, '結果：' %>
        <%= f.collection_select :result_id, Result.all, :id, :name, {} %>
      </div>

      <div class="input-field">
        <%= f.label :type_id, '戦型：' %>
        <%= f.collection_select :type_id, Type.all, :id, :name, {}  %>
      </div>

      <div class="input-field">
        <%= f.label :kifu, '棋譜' %><br>
        <%= f.text_area :kifu, placeholder: '棋譜を貼り付け', size: "35x5"  %>
      </div>

      <div class="submit">
        <%= f.submit "保存", class: 'submit-btn' %>
      </div>

      <div class="back">
        <%= link_to "棋譜一覧へ戻る", root_path, class: "back-btn" %>
      </div>
    <% end %>
  </div>
</div>

app/assets/stylesheets/new.scss

.new-wrapper {
  margin: 20px;
}

.input-field {
  margin-top: 20px;
}

.back {
  font-size: 20px;
  margin-top: 20px;
}

.submit-btn {
  width: 50px;
  height: 30px;
}

app/views/kifus/show.html.erb

<div class="show-wrapper">

  <div class="kifu-text">
    <textarea id="fe_text" name="" rows="10" cols="40"><%= @kifu.kifu %></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>

  <strong>※解析は棋譜をコピーしてから押してね</strong>

  <div class="btns">
    <div class="edit">
      <%= link_to "編集", edit_kifu_path(@kifu.id), method: :get, class: "edit-btn" %>
    </div>

    <div class="destroy">
      <%= link_to "削除", kifu_path(@kifu.id), method: :delete, class: "destroy-btn" %>
    </div>

    <div class="analysis">
      <%= link_to '解析', 'https://www.shogi-extend.com/adapter', class: "analysis-btn" %>
    </div>
  </div>

  <div class="back">
    <%= link_to '棋譜一覧へ戻る', root_path, class: "back-btn" %>
  </div>

</div class="div">

app/assets/stylesheets/show.scss

.show-wrapper {
  margin: 20px;
}


.btns {
  display: flex;
  align-items: center;
  margin-top: 20px;
}

.edit, .destroy, .analysis, .copy {
  margin-right: 20px;
}

.edit-btn, .destroy-btn, .analysis-btn {
  font-size: 20px;
  font-weight: bold;
  text-decoration: none;
  background-color: yellow;
  padding: 5px;
  border: 2px solid black;
  border-radius: 5px;
}

.edit-btn {
  color: black;
}

.destroy-btn {
  color: red;
}

.analysis-btn {
  color: blue;
}

app/javascript/packs/application.js

// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

require("@rails/ujs").start()
// require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)
//= require zeroclipboard
//= require jquery
//= require rails-ujs
//= require turbolinks
//= require_tree .

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

package.json

{
  "name": "kifu_app",
  "private": true,
  "dependencies": {
    "@rails/actioncable": "^6.0.0-alpha",
    "@rails/activestorage": "^6.0.0-alpha",
    "@rails/ujs": "^6.0.0-alpha",
    "@rails/webpacker": "4.3.0",
    "jquery": "^3.5.1",
    "turbolinks": "^5.2.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3.11.0"
  }
}

ブラウザでの表示

コピーできない

コピーボタンを押しても、コピーされていません。原因と対処法を教えていただきたいです。

Answer 1

jQuery本体を読み込んでいないように見受けられます。

Comments

[Zengo_Master]

以下を参考に、jQueryを導入しました。

Ruby on RailsでjQueryが動作しない
https://teratail.com/questions/181022

しかし、何も変わりません。application.jsのファイルの位置が間違っているのでしょうか？

[maisumakun]

ブラウザのコンソールにエラーなどは出ていませんか？

[no1knows]

Rails6にassetsに導入する場合、参考にするべき記事は下記かと思います。
https://qiita.com/kazutosato/items/d47b7705ee545de4cb1a#assets%E3%81%AB%E5%85%A5%E3%82%8C%E3%82%8B%E5%A0%B4%E5%90%88

本来、Rails6であればこの記事の上の方の「Webpackerで入れる場合」で実装します。
その場合、gem 'jquery-rails'などは利用しません。

[Zengo_Master]

ブラウザのコンソールには以下で出ていました。

application.js:23 Uncaught ReferenceError: $ is not defined
at Object../app/javascript/packs/application.js (application.js:23)
at __webpack_require__ (bootstrap:19)
at bootstrap:83
at bootstrap:83
./app/javascript/packs/application.js @ application.js:23
__webpack_require__ @ bootstrap:19
(anonymous) @ bootstrap:83
(anonymous) @ bootstrap:83

[Zengo_Master]

> Rails6にassetsに導入する場合、参考にするべき記事は下記かと思います。

「Webpackerで入れる場合」を試しましたが、もとのCSSの効果が消えてしまいました。

textareaの内容をコピーする方法で、他の方法はありませんか？

[maisumakun]

packs/以下に置いてあるWebpacker処理するJavaScriptでは、//= requireによるSprocket形式のJavaScript読み込みは使えません。

package.jsonにyarnから追加して、それをrequire()のように呼び出す、という流れが必要となります。

[maisumakun]

> もとのCSSの効果が消えてしまいました。

CSSはどのように書いていますか？

[Zengo_Master]

Webpackerを入れる前のコードを全掲載しました。
SCSSファイルを３部含めています。

[Zengo_Master]

> packs/以下に置いてあるWebpacker処理するJavaScriptでは、//= require > によるSprocket形式のJavaScript読み込みは使えません。

> package.jsonにyarnから追加して、それをrequire()のように呼び出す、とい> う流れが必要となります。

package.jsonファイルは分かりますが、「yarnから追加する」とはどんな手順ですか？

[maisumakun]

> package.jsonファイルは分かりますが、「yarnから追加する」とはどんな手順ですか？

package.jsonに必要なライブラリを書いて、yarn installする、ということです（npmを使っているならそちらでも構いません）。

[Zengo_Master]

package.jsonの中身は質問の中に掲載していますが、'zeroclipboard-rails'を書いてyarn installすればよいのでしょうか？

[maisumakun]

jQuery本体も必要です。あと、「zeroclipboard-rails」はおそらくgemとしての名前なので、Nodeで入れる場合には別名になっていると思います。

[Zengo_Master]

jQueryは以下で入れました。

$ npm install jquery --save

package.jsonの中身に反映されており、質問を編集して反映させました。

zeroclipboard-railsの別名が分かりません。gemとnpmの対応表の参考などはありませんか？