【サンプルコードあり】クリップボードへのコピー機能をjQueryで実装！

こんにちは、nomuyoguです！

Webサービスを利用しているとよく見かけるのが、クリップボードへコピーの機能。

URLなどを簡単にクリップボードにコピーできて便利ですよね。

今回はこちらの機能をHTML, CSS, jQueryを用いて簡単に実装してみます！

Contents

完成形のコード
解説
まとめ
- ポイント

完成形のコード

まずは完成形のコードを載せておきます。

CodePenの埋め込みの関係で、以下の「リンクをコピー」ボタンでは正常にクリップボードにコピーされないようですが、コードをコピペして各自の開発環境で使用していただければ正常に動作します。

See the Pen
Untitled by nomuyogu (@hwcab)
on CodePen.

解説

まず、HTMLでボタンを作成します。

<button id="copy-url" data-url="https://ungifted.tech/blog/">リンクをコピー</button>

data-url属性には、クリップボードにコピーしたいテキストを設定しておきます。
皆さんでご自由に設定してください。

このボタンのid属性には”copy-url”が設定されているので、
クリックすると以下のjQueryコードが発火します。

$(function () {
    $('#copy-url').click(function () {
        // data-urlの値を取得
        const url = $(this).data('url');

        // クリップボードにコピー
        navigator.clipboard.writeText(url);

        // フラッシュメッセージ表示
        $('.success-msg').fadeIn("slow", function () {
            $(this).delay(2000).fadeOut("slow");
        });
    });
});

順に処理を見ていきましょう。

まず、先ほど設定したdata-url属性の値を、変数urlに代入します。

次に、変数urlをクリップボードにコピーします。
この時、クリップボードAPIというAPIが使用されます。

最後に、クリップボードへのコピーが成功したことを示すフラッシュメッセージを表示します。
フェードインして2秒表示されたのち、フェードアウトするような実装です。
CSSファイルに関しては、こちらのフラッシュメッセージに関するスタイルのみが書かれています。