JavaScriptでwebページのURLをクリップボードにコピーするボタンを設置

WebサイトやブログでのWebページのシェアはSNS等のボタンを設置することが多いですが、それだけでなく現在観覧しているページのURLを簡単にコピーできるボタンがあるととても便利です。

SNSだけでなくWebメールやFacebookのメッセンジャー、その他いろいろなアプリケーションでのやり取りでURLを簡単に貼り付けたいこともあるでしょう。
もちろん、パソコンですとマウス操作やスマートフォンでもコピー操作はありますが、もっと簡単にボタン1つクリックするアクションだけでクリップボードにコピーして共有したいところです。

そちらのほうがWebを観覧するユーザーにとっても楽だし都合がいいですよね。
親切にボタンを設置してあげましょう。

ここではjQueryやプラグインを使わず、JavaScriptで観覧しているwebページのURLをクリップボードにコピーするボタンを設置する方法をご紹介します。

PCでもスマートフォンでもどちらでもしっかり動くコピー機能のボタンを作成していきます。

ページのURLをコピーするボタンの作成

まずはコピーボタンをHTMLタグで構築していきます。

HTML

<button type="button" id="copy-page"><span id="cAction">URLをコピー</span></button>

aタグなどでreturn false;でリンクを無効にしておいてボタンとして、onclickイベントハンドラでJavaScriptのイベントを発動させてもいいですが、スマートフォンでHTMLタグのonclick属性の挙動がおかしくしっかり作動しないことがあるので、今回はbuttonタグで作成していきます。

CSSでデザインするためにクラス名「copy-btn」を付けておきます。
クリックした後にコピーが完了したことを伝えるため、spanタグのid「cAction」の要素のテキストが変更できるように準備しておきます。

続いてCSSになります。
サンプルとしては以下のようにスタイルを効かせます。

ボタンのスタイルはご自身のWebサイトやブログに合わせてください。

CSS

#copy-page {
  display: inline-block;
  width: 160px;
  padding: 8px 0;
  font-size: 1rem;
  text-align: center;
  color: #666;
  border-radius: 6px;
  background: #c7c7c7;
  outline: none;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
 
#copy-page:hover {
  cursor: pointer;
  opacity: .7;
}

コピーボタンが構築できましたら、クリップボードへのコピー処理のプログラムをJavaScriptで実装していきます。

JavaScriptでイベント処理

クリップボードへのコピーはdocumentオブジェクトのexecCommandメソッドを利用します。
「document.execCommand(‘copy’)」と引数を「Copy」とすることでコピーできます。
またexecCommandメソッドのコピーは選択された内容をコピーするため、createRange();などを利用して選択するような処理もしていきます。

それでは見ていきましょう。

まずはdocument.getElementByIdで対象のボタンのidをセット。
そしてボタンがクリックしたときにイベントが発生するようonclickイベントでの関数を定義します。

JavaScript

<script>
document.getElementById("copy-page").onclick = function() {
  $(document.body).append("<textarea id=\"copyTarget\" style=\"position:absolute; left:-9999px; top:0px;\" readonly=\"readonly\">" +location.href+ "</textarea>");
  let obj = document.getElementById("copyTarget");
  let range = document.createRange();
  range.selectNode(obj);
  window.getSelection().addRange(range);
  document.execCommand('copy');
  document.getElementById("cAction").innerHTML = "コピーしました";
};
</script>

関数の処理の内容としては、
始めにbodyタグ直下にappendメソッドで要素を追加します。
追加する要素は、location.hrefで現在開いているWebページのURLを内容を入れたtextareaになります。今回のクリップボードへのコピーはinputやtextareaなどのテキストが入力できる要素からテキストをコピーするという仕様なので、appendメソッドを使って要素を追加する必要があります。

そのあとに変数「obj」に追加した要素を格納して、変数の中身のtextareaの内容を選択します。
selectメソッド「select()」を利用するやり方もありますが、スマートフォンではselectメソッドでうまく選択されないためクリップボードにコピーできません。そこでRange（範囲）をセットして選択できるように「document.createRange();」を利用していきます。

変数「range」にdocument.createRange();で範囲のコンテナを用意しておいて、テキストノードをselectNodeメソッドで「range.selectNode(obj);」のようにobjを入れます。これでコンテナにtextareaのテキストが範囲としてセットされます。
window.getSelection関数で選択範囲をSelectionオブジェクトとしてを取得、addRangeメソッドを利用して「.addRange(range)」のようにRangeオブジェクトをSelectionに選択範囲として追加します。
これでスマートフォンでもうまく選択することができます。

そして選択したtextareaの中のWebページのURLを「document.execCommand(‘copy’);」でコピーします。
ここまででクリップボードへのコピーが完了となります。

最後はコピーが完了したことがわかるようにボタンのテキストを「コピーしました」に変更します。

まとめ

このブログでもJavaScriptで実装したURLがコピーできるボタンを設置しています。あとはちょっとアイコンも付けちゃってコピーボタンとわかりやすいデザインにしています。

人気のSNSのシェアボタンだけでもいいですが、現在観覧しているページのURLのコピーを簡単にできるようにしたほうが臨機応変に対応できるので、一緒にボタンを設置しておいた方が良いのではないでしょうか。

今回ご紹介した方法はPCでもスマートフォンでもどちらでも動く仕様となっていますので是非、親切に自分のデザインでコピーボタンを設置してみてください。