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プラグインの準備

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

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

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

0067: <form name="myform">
0068: <p>
0069: <input type="textid="str1size="30" />
0070: <input type="buttonid="btn1value="コピーdata-clipboard-target="#str1" />
0071: </p>
0072: <p>
0073: <input type="textid="str2size="30" />
0074: <input type="buttonid="btn2value="コピーdata-clipboard-target="#str2" />
0075: </p>
0076: ペースト領域<br />
0077: <textarea id="pasterows="4cols="40"></textarea>
0078: </p>
0079: </form>

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

0029:     //初期値
0030:     DEF_STR1 = 'hello! pahoo';         //コピー文字列(その1)
0031:     DEF_STR2 = 'ようこそ!ぱふぅ家へ';  //コピー文字列(その2)
0032:     DEF_BTN1 = '#btn1';             //コピーボタン(その1)
0033:     DEF_BTN2 = '#btn2';             //コピーボタン(その2)
0034: 
0035:     //コピー文字列の設定
0036:     $('#str1').val(DEF_STR1);
0037:     $('#str2').val(DEF_STR2);
0038: 
0039:     //コピーボタンの設定
0040:     new Clipboard(DEF_BTN1);
0041:     new Clipboard(DEF_BTN2);

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

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

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

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

解説:初期設定

0082: <!-- 入力フォーム -->
0083: <form name="myform">
0084: <p>
0085: <input type="textid="str1size="30" />
0086: <input type="buttonid="btn1value="コピーdata-clipboard-target="str1" />
0087: </p>
0088: <p>
0089: <input type="textid="str2size="30" />
0090: <input type="buttonid="btn2value="コピーdata-clipboard-target="str2" />
0091: </p>
0092: ペースト領域<br />
0093: <textarea id="pasterows="4cols="40"></textarea>
0094: </p>
0095: </form>

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

0029:     //初期値
0030:     DEF_STR1 = 'hello! pahoo';         //コピー文字列(その1)
0031:     DEF_STR2 = 'ようこそ!ぱふぅ家へ';  //コピー文字列(その2)
0032:     DEF_BTN1 = 'btn1';                  //コピーボタン(その1)
0033:     DEF_BTN2 = 'btn2';                  //コピーボタン(その2)
0034: 
0035:     //コピー文字列の設定
0036:     $('#str1').val(DEF_STR1);

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

pahooClipboard クラス

0060: /**
0061:  * クリップボード・クラス
0062:  * @param String btn コピー・ボタン名(ID名)
0063:  * @return なし
0064: */
0065: pahooClipboard = function(btn) {
0066:     var elem = document.getElementById(btn);
0067: 
0068:     //ボタン押下:クリップボードへコピー
0069:     elem.addEventListener('click', function() {
0070:         var target = elem.getAttribute('data-clipboard-target');  //コピー対象
0071:         var text = document.getElementById(target);
0072:         text.select();                                //コピー対象を選択
0073:         document.execCommand('Copy');                //クリップボードへコピー
0074:     }, false);
0075: }

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

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

参考サイト

(この項おわり)
header