Javascriptからクリップボードへコピーする方法

こんにちは！ぐちです。

今日から11月ですね！早いもので今年も残すところ2ヶ月です。早いですねー！

さて今回はWebサイトで見かけるクリップボードにコピーするボタンを実装する方法をご紹介したいと思います。

Javascript

Javascriptってご存知ですか？当ブログでもAngularJSについて書いた記事がありますがクライアントサイドで動作するプログラム言語のことです。

最近ではサーバサイドで動作するものも出てきておりますが基本的にはクライアントサイド(ブラウザ上)で動作するものとお考え頂いて問題ないと思います。

クライアントサイドで動作するので通信を伴わないで要素を書き換えたりすることができます。他にも様々なことができるのですが今回はローカル環境(ブラウザを操作しているPC環境)のクリップボードに指定したデータをコピーさせるプログラムを作ってみたいと思います。

execCommand()

Javascriptのdocument.execCommandコマンドを実行することでブラウザへの様々な操作を実行することができます。今回はクリップボードへのコピーをしたいのでdocument.execCommand("copy”)を実行すればよいことになります。

何はともあれ下記のソースをご覧ください。

<html>
    <head>
        <script type="text/javascript">
        var clipboadCopy = function(){
            var urltext = document.getElementById("url");
            urltext.select();
            document.execCommand("copy");
        }
        </script>
    </head>
    <body>
        テキスト
        <input type="text" id="url" size="30" maxlength="20" value="https://www.google.co.jp/">
        <br>
        <input type="button" value="コピーする" onclick="clipboadCopy()">
    </body>
</html>

非常にシンプルな構成ですが画面上のテキスト入力エリアに表示されているURLをボタン押下でクリップボードにコピーするといったものになります。

あまり説明も不要かもしれませんが<input>タグのidを指定してエレメントを取得します。セキュリティ上の仕様なのかコピーできるのはHTML上に存在するデータでなおかつ選択状態になっていないダメらしいです。ですので取得したエレメントをselect()関数を使って選択状態にします。その後copy操作を実行しています。

スマホファースト

昨今のWebサイトへのアクセスはスマホからがほとんどと言いますがスマホでは文字の選択やコピーなどPCと比較して操作しにくいのもありますよね。そういう場合に上記のようにコピーをしやすくしておくというのも訪問者への気遣いとして喜ばれるかもしれません。