テキストなどをワンクリックでクリップボードへコピー可能にする「clipboard.js」の使い方です。

clipboard.js 公式サイト
clipboard.js GitHub

jQueryなどのフレームワークに依存しない、シンプルな機能のみを提供するたった3KBのパッケージです。

公式サイトにも書いてる基本的な使い方と、コピーされたことがわかるアクションの追加方法、HTMLに記述するテキスト以外をコピー対象とする実装方法です。

実現したいこと

• ワンクリックで対象をクリップボードにコピーする
• コピーされたことを知らせるテキストを表示
• コピー対象をJavaScriptで管理する

基本的な使い方

clipboard.jsファイルを読み込みます。npmパッケージをインストールまたはダウンロードして該当のファイルを読み込むか、CDNから読み込みます。ここではCDNから読み込む方法で作成します。

<script src="https://unpkg.com/clipboard@2/dist/clipboard.min.js"></script>

HTMLではコピー対象となるターゲットとトリガーとなるボタンを設置します。
トリガーの data-clipboard-target="xxx" に、コピー対象に付与したidを指定します。

<!-- Target -->
<input
  id="text"
  value="ボタンをクリックするとこのテキストがクリップボードにコピーされます。"
  readonly
/>

<!-- Trigger -->
<button class="btn" data-clipboard-target="#text">Click to Copy</button>

JavaScriptで、トリガーとなる要素を指定してインスタンス化します。

new ClipboardJS(".btn");

ボタンをクリックすると、input の value のテキストがクリップボードにコピーされます。

トリガーとなるボタンに直接コピー対象のテキストを指定することも可能です。

<button
  class="btn"
  data-clipboard-text="この部分がクリップボードにコピーされます。"
>
  Copy Text2
</button>

デモ

clipboard.jsの基本的な使い方デモ
Source

コピーされたことを通知する

デモページではボタンをクリックすると、画面下部あたりに「Copied!」というテキストが表示されます。

公式サイトによると、

Each application has different design needs, …

との理由からツールチップが標準では組み込まれていないため、コピーされたことを通知するには自分で追加する必要があります。

組み込みのツールチップがない代わりに、コピーが成功または失敗したあとに別の処理を実装できるカスタムイベントが用意されています。

var clipboard = new ClipboardJS(".btn");

clipboard.on("success", function (e) {
  // 成功したときに実行する処理を記述
});

clipboard.on("error", function (e) {
  // エラー時に実行する処理を記述
});

このカスタムイベントを利用して通知を実装します。先ほどのJavaScriptを変更します。

const clipboard = new ClipboardJS(".btn");

clipboard.on("success", function (e) {
  showNotification();
  e.clearSelection();
});

コピーが成功した場合に実行される関数 showNotification() を作成します。ここではHTMLにあらかじめ通知用のテキストを用意して非表示にしておき、コピーが成功したらclass名を付与して表示されるようにしています。

const notification = document.getElementById("notification");
function showNotification() {
  notification.classList.add("active");
  setTimeout(() => {
    notification.classList.remove("active");
  }, 1500);
}

さまざまな対象をコピーする

基本的な使い方ではどちらもHTML内にコピーの対象となるテキストを記述しています。単純なテキストだけでなくさまざまなデータをコピーできるようにします。公式サイトの「Advanced Usage」のAPIを利用して実装します。

JavaScriptにコピー対象となるデータを用意します。

const data = {
  text: "このテキストがコピーされます。",
};

トリガーとなるボタンがクリックされたら、HTML要素に独自に設定したカスタムデータ属性の値を読み込み、JavaScriptで定義したdataから一致するデータをコピー対象として返します。

new ClipboardJS(btn, {
  text: function (trigger) {
    const id = trigger.getAttribute("data-id");
    return data[id];
  },
});

トリガーとなるボタンのカスタムデータ属性を正しく設定します。ここでは data.text の値がコピーされるようにしたいので、 data-id="text" をボタン要素に設定します。

<button class="btn" data-id="text">Copy Text</button>

JavaScriptの data オブジェクトを以下のような配列やテンプレート文字列にしても問題なく動作します。（テンプレート文字列はIE未対応）

const sample = "変数";
const data = {
  text: "このテキストがコピーされます。",
  array: ["Apple", "Orange", "Grape", "Banana"],
  literal: `テンプレート文字列をコピーする。
改行も適用されます。
${sample}の埋め込みも可能です。`,
};

最後に、別ファイルの内容をテキストとして取得し、コピー対象とする方法です。webpackのローダーを使用するため、コンパイルが必要になります。サンプルとして、CSSファイルのスタイルをテキストとしてコピーできるようにします。

別ファイルの内容を文字列として取得できる [raw-loader] を使用します。CSSファイルを読み込むためcss-loaderもあわせて使用します。

npm install raw-loader css-loader --save-dev

/** webpack.config.js */

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["raw-loader", "css-loader"],
      },
    ],
  },
};

コピー対象となるCSSファイルを用意します。

/** button.css */

.button {
  display: inline-block;
  padding: 8px 16px;
  color: #fff;
  background: #444;
  border-radius: 4px;
}

.button:hover {
  opacity: 0.7;
}

raw-loaderで先ほど作成したCSSファイルを取得します。取得したデータをコピー対象のオブジェクトに指定します。

const buttonStyle = require("!!raw-loader!./button.css");

const data = {
  省略,
  css: buttonStyle,
};

HTMLに data-id="css" を設定したトリガーを設置すれば、button.css内の記述がテキストとしてコピーされるようになります。

デモ

clipboard.jsでさまざまな対象をコピーするデモ
Source