エンジニアの将来って?

現在7年目のCOBOL→Java→C#エンジニアが、将来への考えや勉強のアウトプット、たまに腎臓について書くブログです

【jQuery】プラグイン[clipboard.js]を使って、テキストボックスの値をクリップボードにコピーする

こんにちは。たいら(@tairaengineer2)です。

この記事ではJavaScriptのフレームワークjQueryのプラグインclipboard.jsを使って、テキストボックスの値をクリップボードにコピーするやり方の解説記事です。

スポンサーリンク

 

プラグイン[clipboard.js]とは

テキストをクリップボードにコピーやカットができるプラグインです。

Copying text to the clipboard shouldn't be hard.
It shouldn't require dozens of steps to configure or hundreds of KBs to load.
But most of all, it shouldn't depend on Flash or any bloated framework.

That's why clipboard.js exists.

clipboard.js — Copy to clipboard without Flashから引用させて頂きました

Google翻訳をしてみると

クリップボードにテキストをコピーするのは難しいはずはありません。
構成に数十ステップを要したり、何百KBもロードする必要はありません。
しかし、何よりも、Flashや膨大なフレームワークに依存すべきではありません。

それがclipboard.jsが存在する理由です。

という理念のもと作成されたようです。

[clipboard.js]をダウンロードする

プラグイン[clipboard.js]のダウンロードするやり方は下記をご参照ください。

www.tairax.com

作ったプログラムの概要

作ったのは、HTML,jQueryを1つずつです。
HTMLはテキストボックスとボタンを作ります。
jQueryでボタンを押されたとき、テキストボックスの中身をクリップボードにコピーするプログラムです。

フォルダ構成

フォルダ構成は、↓の画面のようになっています。

f:id:Tairax:20181202193657p:plain

プログラムの中身を

  1. HTML
  2. jQuery(JavaScript)

の順で書いていきます。

HTML

<!DOCTYPE html>
<html>
	<head>
		<title>クリップボードにコピー</title>
		<meta content="charset=UTF-8">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
		<script src="../js/clipboard.min.js"></script>
		<script src="../js/ClipBoardSample.js"></script>
	</head>
	<body>
		<input id="textBox" type="text">
		<button class="btnClipboard" data-clipboard-target="#textBox">クリップボードにコピー</button>
	</body>
</html>

jQuery(JavaScript)

$(function() {
	var clipboard = new ClipboardJS('.btnClipboard');
	clipboard.on('success', function(e) {
		alert("コピーに成功しました。");
	});
	clipboard.on('error', function(e) {
		alert("コピーに失敗しました。");
	});
});

実行結果

では実行してみます。

f:id:Tairax:20181201103718p:plain

テキストボックスに「あいうえお」を入力してみます。

f:id:Tairax:20181201104948p:plain

[クリップボードにコピー]ボタンを押します。

f:id:Tairax:20181201105222p:plain

[コピーに成功しました。]というアラートがでました!
本当にクリップボードにコピーできているか確認します。

f:id:Tairax:20181201105541p:plain

クリップボードにコピーできていました!
では、解説します。

 

スポンサーリンク

 

解説

  • Google Developersから読込んでjQueryを使う
  • スクリプトを読み込む順番
  • HTMLのinputとbutton
  • クリップボードにコピーを実行

の順で解説します。

Google Developersから読込んでjQueryを使う

jQueryを使いたいけど、jQueryをダウンロードして管理するのはめんどくさいです。
なので、Google Developersから読んでいます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Google DevelopersからjQueryを読み込む方法は下記記事をご参考ください。

www.tairax.com

スクリプトを読み込む順番

スクリプトを読み込んでいる箇所はここです。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="../js/clipboard.min.js"></script>
<script src="../js/ClipBoardSample.js"></script>

読み込む順番は必ず

  1. jquery.min.js
  2. clipboard.min.js
  3. 自分が作ったJavaScript(今回はClipBoardSample.js)

にしてください。
理由は [clipboard.min.js]は、jQueryのプラグインだからです。
まず最初にjQueryを読み込む必要があります。
次にプラグインである[clipboard.min.js]、最後に自分が作ったJavaScript、という順番で読み込んでいきます。

HTMLのinputとbutton

テキストボックスの値をクリップボードにコピーする対象を指定している箇所はここです。

<input id="textBox" type="text">
<button class="btnClipboard" data-clipboard-target="#textBox">クリップボードにコピー</button>

[data-clipboard-target]は、設定されたidやclassの要素の内容をクリップボードにコピーするよう指定しています。
今回では、idがtextBoxであるテキストボックスの内容をコピーするように指定しています。

クリップボードにコピーを実行

クリップボードにコピーを実行しているところはここです。

var clipboard = new ClipboardJS('.btnClipboard');

これだけで、classがbtnClipboardで取得したものをコピーできます。
コピーしただけでは、本当にコピーできたか分かりません。
だから

clipboard.on('success', function(e) {
	alert("コピーに成功しました。");
});
clipboard.on('error', function(e) {
	alert("コピーに失敗しました。");
});

結果をここでアラートで表示しています。

まとめ:clipboard.jsを使ってみよう!

以上が、clipboard.jsを使ってテキストボックスの中身をクリップボードにコピーするやり方です。
あなたのご参考になれば幸いです。

 

他にもjQueryについて書いています。
こちらもご参考ください。

【jQuery UI】カレンダーアイコンからカレンダーを表示させる【Datepicker】

【jQuery】hoverを使って、背景色を変えたり、アラートを出す

【jQuery】プラグイン[clipboard.js]を使って、テキストボックスの値をカットする