JavaScriptでクリップボードを使う

(1/1)
ブラウザ上でテキストボックスの内容をクリップボードにコピーする方法として「ZeroClipboardでクリップボードを使う」を紹介したが、Flashを利用するプログラムであるため、2018年(平成30年)現在、デフォルト状態で使えなくなっているブラウザが出てきている。
そこで今回は、Flashを使わず、jQuery+clipboardプラグインを使うものと、JavaScriptでネイティブに書く方法の2種類を紹介する。

サンプル・プログラムのダウンロード

圧縮ファイルの内容
clipboard2.htmlサンプル・プログラム本体(jQuery版)
clipboard3.htmlサンプル・プログラム本体(JS版)

jQuery+clipboardプラグイン

クリップボードを使う(jQuery版)
まず、jQuery+clipboardプラグインを使う方法を紹介する。
左図のようにコピーボタンが2つあり、各々をクリックすると、その左にあるテキストボックスの内容がクリップボードにコピーされる。ペースト用のテキストエリアを用意してあるので、ペーストしてみてほしい。コピーボタンに応じて異なるテキストがコピー&ペーストされることが分かる。

解説:clipboardプラグインの準備

  21: <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
  22: <script src="https://cdn.jsdelivr.net/clipboard.js/1.5.3/clipboard.min.js"></script>

clipboard.jsjQuery のプラグインである。まず、これらのプログラムを読み込む。

解説:コピー文字列とコピーボタンの準備

  67: <form name="myform">
  68: <p>
  69: <input type="text" id="str1" size="30" />
  70: <input type="button" id="btn1" value="コピー" data-clipboard-target="#str1" />
  71: </p>
  72: <p>
  73: <input type="text" id="str2" size="30" />
  74: <input type="button" id="btn2" value="コピー" data-clipboard-target="#str2" />
  75: </p>
  76: ペースト領域<br />
  77: <textarea id="paste" rows="4" cols="40"></textarea>
  78: </p>
  79: </form>

HTML側では、コピー文字列を入れるテキストボックスと、コピーボタンを、ぞれぞれ2個ずつ用意する。
ボタンには、属性 data-clipboard-target として、コピー対象となるオブジェクトを設定する。ここではID名で指定している。

  29:     //初期値
  30:     DEF_STR1 = 'hello! pahoo';          //コピー文字列(その1)
  31:     DEF_STR2 = 'ようこそ!ぱふぅ家へ';  //コピー文字列(その2)
  32:     DEF_BTN1 = '#btn1';             //コピーボタン(その1)
  33:     DEF_BTN2 = '#btn2';             //コピーボタン(その2)
  34: 
  35:     //コピー文字列の設定
  36:     $('#str1').val(DEF_STR1);
  37:     $('#str2').val(DEF_STR2);
  38: 
  39:     //コピーボタンの設定
  40:     new Clipboard(DEF_BTN1);
  41:     new Clipboard(DEF_BTN2);

JavaScript側では、テキストボックスに入れる文字列と、ボタンに Clipboardクラスを割り当てる。

これだけで、ブラウザ上でコピー&ペースト機能が実現できる。

JavaScriptでクリップボードを使う

クリップボードを使う(JS版)
次に、JavaScriptだけでクリップボードを使う方法を方法を紹介する。
動作画面は左図の通りで、見た目も動きも、前述の「jQuery+clipboardプラグイン」と同じである。

解説:初期設定

  82: <!-- 入力フォーム -->
  83: <form name="myform">
  84: <p>
  85: <input type="text" id="str1" size="30" />
  86: <input type="button" id="btn1" value="コピー" data-clipboard-target="str1" />
  87: </p>
  88: <p>
  89: <input type="text" id="str2" size="30" />
  90: <input type="button" id="btn2" value="コピー" data-clipboard-target="str2" />
  91: </p>
  92: ペースト領域<br />
  93: <textarea id="paste" rows="4" cols="40"></textarea>
  94: </p>
  95: </form>

HTML側では、コピー文字列を入れるテキストボックスと、コピーボタンを、ぞれぞれ2個ずつ用意する。
ボタンには、属性 data-clipboard-target として、コピー対象となるオブジェクトを設定する。「jQuery+clipboardプラグイン」と異なり、ID名でのみ指定できる。

  29:     //初期値
  30:     DEF_STR1 = 'hello! pahoo';          //コピー文字列(その1)
  31:     DEF_STR2 = 'ようこそ!ぱふぅ家へ';  //コピー文字列(その2)
  32:     DEF_BTN1 = 'btn1';                  //コピーボタン(その1)
  33:     DEF_BTN2 = 'btn2';                  //コピーボタン(その2)
  34: 
  35:     //コピー文字列の設定
  36:     $('#str1').val(DEF_STR1);

JavaScript側では、テキストボックスに入れる文字列と、ボタンに pahooClipboard クラスを割り当てる。

pahooClipboard クラス

  60: /**
  61:  * クリップボード・クラス
  62:  * @param   String btn コピー・ボタン名(ID名)
  63:  * @return  なし
  64: */
  65: pahooClipboard = function(btn) {
  66:     var elem = document.getElementById(btn);
  67: 
  68:     //ボタン押下:クリップボードへコピー
  69:     elem.addEventListener('click', function() {
  70:         var target = elem.getAttribute('data-clipboard-target');    //コピー対象
  71:         var text = document.getElementById(target);
  72:         text.select();                              //コピー対象を選択
  73:         document.execCommand('Copy');               //クリップボードへコピー
  74:     }, false);
  75: }

コピーボタンを割り当てる pahooClipboard クラスは、コピー対象を select() メソッドで選び、これを document.execCommand('Copy') メソッドを使ってクリップボードに代入するというものである。
対応しているブラウザは、IE9以降、Edge、Chrome、Firefox、Safari10以降(iOS10以降)となる。

これで、ブラウザ上でコピー&ペースト機能が実現できる。
なお、jQueryは初期設定のために使っているだけで、pahooClipboard クラスそのものは、JavaScriptだけで動作する。

参考サイト

(この項おわり)
header