JavaScriptでクリップボードにテキストをコピー【.execCommand】｜DAD UNION

JavaScriptを使ってクリップボードにテキストをコピーする方法について、今回は解説します。特に、PCやスマホを利用している場合、テキストを選択して「コピー」操作を行うのはよくあることです。しかし、ウェブ開発者として、JavaScriptを使って簡単にクリップボードにテキストをコピーする仕組みを実装できると、ユーザーエクスペリエンスが向上し、操作の手間を減らすことができます。
例えば、フォームで入力した内容やボタンをクリックしたときに、その内容を簡単にクリップボードにコピーできるようにすることで、ユーザーにとって便利なインターフェイスを提供できます。このチュートリアルでは、document.execCommand()を使ってクリップボードにテキストをコピーするシンプルな方法を紹介します。また、jQueryを使用して、クリックイベントに連動してテキストをコピーする実装も解説します。

Contents

なぜクリップボードにテキストをコピーする必要があるのか？
クリップボードコピーのための基本的なCSS記述
HTMLの記述例
JavaScriptでクリップボードにコピーする方法
クリップボードにテキストをコピーするJavaScriptデモページ
よりモダンな方法: Clipboard API

なぜクリップボードにテキストをコピーする必要があるのか？

クリップボードにテキストをコピーする機能は、多くの場面で役立ちます。例えば、以下のようなシチュエーションで非常に便利です。

パスワードのコピー
ログインやパスワード入力フォームで、ユーザーが生成されたパスワードを簡単にコピーできる機能があると、手間が省けます。
URLの共有
ユーザーが特定のリンクやページのURLを簡単にコピーして共有する際、ボタンひとつでコピーできると、使い勝手が向上します。
クーポンコードやシリアルキーのコピー
クーポンやプロモーションコードを提供するウェブサイトでは、ユーザーがそのコードをワンクリックでコピーして、利用する場所に貼り付けられるようにすることで、よりスムーズな体験を提供できます。

こうした用途において、クリップボードコピーの機能は非常に実用的であり、ユーザーの利便性を高めます。

クリップボードコピーのための基本的なCSS記述

まず、クリップボードにコピーする対象のテキストエリア（`cliptx`）をどのように表示するかについて、基本的なCSSを設定します。
以下のCSSは見た目を整えるためのものであり、クリップボードコピーの機能に直接影響するものではありませんが、レイアウトの改善に役立ちます。もちろん、必要に応じて書き換えることが可能です。

<style>
body{
	font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",Arial,sans-serif;
	padding: 0;
	margin: 0;
	overflow-x: hidden;
}
ol, ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
img {
    vertical-align: bottom;
    -webkit-backface-visibility: hidden;
}
h1{
	font-size:18px;
	line-height:1.6em;
	text-align:center;
	font-weight:normal;
	padding:10px 0;
}
.cliptxt{
  width: 400px;
  height: 100px;
  background-color: #cccccc;
  border: solid 2px #777777;
  text-align: center;
  line-height: 100px;
  margin: 30px auto;
}
</style>

ここで注目すべきは、.cliptxtクラスに設定されているスタイルです。このスタイルを適用することで、クリップボードにコピーするテキストエリアのデザインを調整できます。たとえば、widthやheightの値を変更して、表示されるエリアのサイズを調整することが可能です。

HTMLの記述例

次に、コピー対象となるテキストエリアのHTML記述についてです。
以下のように、`class=”cliptxt”`を使って、特定のテキストを含むエリアを定義します。このエリアをクリックすることで、テキストがクリップボードにコピーされるように設定します。

<h1>クリップボードにテキストをコピーするJavaScriptデモページです。</h1>

<div align="center">以下のグレーエリアをクリックしてみてください。</div>

<div class="cliptxt">ココのエリアのテキストをクリップボードにコピーします</div>

<div align="center">グレーエリアをクリック後、メモ帳か何かを開いてペースト（キーボードの「Ctrl」＋「V」）を行ってみてください。</div>

このHTMLコードでは、cliptxtクラスを持つdivタグがクリップボードコピーの対象となるテキストエリアです。このテキストエリア内の内容が、クリックされたときにクリップボードにコピーされます。

JavaScriptでクリップボードにコピーする方法

次に、JavaScriptでクリップボードにテキストをコピーする方法を詳しく見ていきます。この機能は`document.execCommand(‘copy’)`を使って実現できますが、その前にテキストを`textarea`タグに追加し、選択（select）状態にしてコピーを行います。
jquery.min.jsファイルを読み込みます。以下は、jQueryを使った実装例です。

<script src="jquery.min.js"></script>
<script type="text/javascript">
$(function () {

  $(".cliptxt").on("click", function() {
      var text = $(this).text();
      $(this).append('<textarea class="clipbtextarea">' + text + '</textarea>');
      $('.clipbtextarea').select();
      document.execCommand('copy');
      $('.clipbtextarea').remove();
      alert('[' + text + ']テキストをコピーしました。');
  });

});
</script>

上記のコードでは、以下の手順でクリップボードにコピーを実現しています。