リンクをコピーする機能の実装はclipboard.jsが簡単

こんにちは。Gaji-Labo 横田です。前回、a 要素のみで URL リンクを SNS シェアする実装を紹介しました。

このように URLリンクを SNS シェアする時によく付属で付いている、リンクをコピーする機能を clipboard.js を使って実装してみたので紹介します。

インストールと設定

パッケージ管理したいので npm 経由でインストールします。

npm install clipboard --save

npm 内から読み込ませたい時は import 文で指定します。

import ClipboardJS from 'clipboard';

直接 HTML に読み込ませる時はファイルをダウンロードして読み込ませます。CDNも用意されていますのでお好きな方を。

<script src="dist/clipboard.min.js"></script>

使用方法

前提として、コピーしたい URL は動的に取得できるものとします。
HTML では data-clipboard-text 属性にコピーしたいURLの値を入れ、id を指定しておきます。

<div id="copy-link" data-clipboard-text="{シェアするURL}">
    リンクをコピー
</div>

JavaScript では HTMLで指定した id を new ClipboardJS で呼び出します。
ただし、このままではコピーできたかどうかユーザーに分かりにくいので、 success というイベントを追加してアラートを出してみます。

let copyLink = new ClipboardJS('#copy-link');
copyLink.on('success', function () {
    alert('URLをコピーしました。');
});

これで URL コピーが実装できました！簡単ですね。

終わりに

軽量で各ブラウザサポートもされているので導入しやすいです。
お読みいただきありがとうございました。