クリップボードに現在のURLをコピー

記事概要

クリップボードに現在のURLをコピーする。

言語やフレームワーク

	使用技術
フロントエンド	HTML CSS
バックエンド	Ruby 3.2.0 Ruby on Rails 7.0.8.6
データベース	MySQL
インフラ	-
API	-
その他	-

機能概要

• リンクアイコンをクリックすると、クリップボードに現ページのURLリンクをコピーする
• コピーに成功した場合、成功した旨のメッセージが2秒間表示される
• コピーに失敗した場合、失敗した旨のポップアップが表示される
• 失敗した旨のポップアップは「OK」をクリックすると非表示になる

サンプルアプリ(GitHub)

処理画面

コピー成功

コピー失敗

コードの書き換え(エラー発生原因を作成)

コピー実施

コードの修正

アプリ作成ポイント

コントローラー

現ページのURL情報を取得する
※今回は全画面共通の処理なので、application_controller.rbに記述

application_controller.rb

class ApplicationController < ActionController::Base
  before_action :copy_link

  private
  def copy_link
    @url = request.url
  end
end

ビュー

現ページのURL情報を取得する
※今回は全画面共通の処理なので、application.html.erbに記述

<!-- 省略 -->
<footer>
  <!-- app/assets/stylesheets/copy_link.css -->
  </br></br>
  <div>
    <%= image_tag 'icon_copy-link.svg', id: "copy-icon"%>
  </div>
  <div id="copy-link" class="hidden" ><%= @url %></div>
  <div id="copy-message" class="hidden" >URLリンクをコピーしました！</div>
</footer>
<!-- 省略 -->

CSS

下記要素を非表示にする
・コントローラーで取得したURL情報(@url)
・コピー成功時のメッセージ

copy_link.css

.hidden{
  display: none;
}

JavaScript

アイコンをクリックした際の処理を作成

copy_link.js

function copy_link (){
  // アイコンを取得
  const copyIcon = document.getElementById('copy-icon');

  // コピーするリンクを取得
  const copyLink = document.getElementById('copy-link').innerText;
  
  if(copyIcon){
    copyIcon.addEventListener('click', () => {
      try{
        // クリップボードにコピー
        navigator.clipboard.writeText(copyLink)

        // メッセージを取得
        const copyMessage = document.getElementById('copy-message');

        // メッセージを表示
        if (copyMessage) {
          copyMessage.style.display = 'block';
          setTimeout(() => {
            copyMessage.style.display = 'none';
          }, 2000); // メッセージを2秒後に非表示
        }
      }catch{
        alert('URLリンクのコピーに失敗しました');
      }
    })
  }
};

window.addEventListener('turbo:load', copy_link);
window.addEventListener("turbo:render", copy_link);