🦓
[Rails]クリップボードにコピーする

2023/09/14に公開
 はじめに技術系記事サイトによく見かけるクリック一つでクリップボードにコピーする機能を作っていきます。
ブラウザのClipboard APIを使います。

https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API

 環境Rails 7.0.7

ruby 3.2.1

 流れコードブロックを作成する
コピーボタンを作成する
JSコントローラーを作成する

 Clipboard APIClipboard API は、Webアプリケーションでクリップボード（コピー＆ペーストの操作）にアクセスし、テキストやデータを読み取ったり書き込んだりするためのJavaScriptのAPIです。
navigator.clipboard.writeText(text):

テキストをクリップボードに書き込むためのメソッドです。指定したテキストがクリップボードにコピーされます。
navigator.clipboard.readText():

クリップボードからテキストを読み取るためのメソッドです。クリップボードにあるテキストを取得できます。
イベント: clipboard.write および clipboard.read:

書き込み操作や読み取り操作が完了したときに発生するイベントです。これらのイベントを使用して、操作の状態をウォッチしたり、成功または失敗を処理したりできます。
Clipboard API　サンプルコード// テキストをクリップボードにコピーする
navigator.clipboard.writeText("Hello, Clipboard!")
  .then(() => {
    console.log("テキストがクリップボードにコピーされました");
  })
  .catch((error) => {
    console.error("クリップボードへのコピーに失敗しました", error);
  });

// クリップボードからテキストを読み取る
navigator.clipboard.readText()
  .then((text) => {
    console.log("クリップボードから読み取ったテキスト:", text);
  })
  .catch((error) => {
    console.error("クリップボードからの読み取りに失敗しました", error);
  });
クリップボード API を使用するには、ブラウザが対応している必要があります。なので、導入されてないブラウザでは動作しません。
また、セキュリティ上の制限もあるため、特に読み取り操作はユーザーの許可が必要です。ユーザーの許可なしにクリップボードの内容を読み取ることはできません。
Navigatorはブラウザのコンテキストで使用されるJavaScriptのグローバルオブジェクトの1つです。これはウェブページ上で実行されるJavaScriptコードがブラウザの環境とやり取りするためなオブジェクトです。
Navigatorにはいろんなメソッドがありますが、今回はclipboardメソッドを使います。


 コードブロックを作成する<code></code>タグで囲むことで、ブラウザにそれがプログラムのコードであることを明示することができます。

また、<pre></pre>タグと合わせて使用することでコード内で整形した改行などを反映させることができます。
<pre>
 <code>
  <div>
   <h3><%= @user.email %></h3>
  </div>
 </code>
</pre>

 コピーボタンを作成するTailwindCSSとHeroicon使ってスタイリングします。

JSコントローラーを指定し、クリックに対してcopyアクションを追加します。
<%= button_tag '', 
       data: { controller: "clipboard,", 
       action: "click->clipboard#copy", 
       clipboard_content_value: @user.email } do %>
   <%= heroicon "clipboard-document", variant: :outline, 
       options: { class: "..." } %>
<% end %>

 stimululusコントローラーを作成するbin/rails g stimulus clipboard  
      create  app/javascript/controllers/clipboard_controller.js
app/javascript/controllers/clipboard_controller.js
import { Controller } from "@hotwired/stimulus"

// Connects to data-controller="clipboard"
export default class extends Controller {
  static values = {
    content: String
  }

  connect(){
    this.originalContent = this.element.innerHTML
  }
  
  copy() {
    console.log(this.element)
    navigator.clipboard.writeText(this.contentValue).then(
      () => {
        this.element.textContent = "コピーしました！"
        setTimeout(()=>{
          this.element.innerHTML = this.originalContent
        }, 2000)
      },
      () => {
        alert("クリップボードにコピー出来ませんでした。")
      }
    )
  }
}
最初に、ボタンのアイコンをthis.originalContent に保存しています。

そして、navigator.clipboard.writeText(this.contentValue) を使用して、this.contentValue に指定されたテキストをクリップボードにコピーします。

成功した場合、ボタンの本文を 「コピーしました！」 に変更し、2秒後に元のアイコンに戻します。

失敗した場合、アラートを表示してエラーメッセージをユーザーに通知します。
クリップボードの機能を確認します。


 終わりにstimulus公式にチュートリアルを載せてるのでそちらも参考してみてください！

https://stimulus.hotwired.dev/handbook/building-something-real
はじめに

環境

流れ

Clipboard API

コードブロックを作成する

コピーボタンを作成する

stimululusコントローラーを作成する

終わりに

Discussion
