今回は、Web開発者にとって非常に便利なライブラリ「clipboard.js」を使って、テキストをクリップボードにコピーする方法をご紹介します。
これは、ボタンをクリックするだけで簡単にテキストをクリップボードにコピーできるツールで、ユーザーの利便性を向上させるために非常に役立ちます。
この記事では、CSS、HTML、およびJavaScriptのコードサンプルを使って、具体的な実装方法を解説していきます。
CSSの設定
まず、ボタンやテキストエリアを見やすくするために、基本的なCSSスタイルを設定しましょう。
クリックするボタン（button）とコピーするテキストエリア（#dvtxt、input）のCSS記述です。
以下のコードを参考にしてください。スタイルは必要に応じてカスタマイズできます。
<style>
body{
padding: 0;
margin: 0;
text-align: center;
font-size: 16px;
}
h1{
font-size:20px;
line-height:1.6em;
text-align:center;
padding: 15px 0 25px 0;
}
#dvtxt{
font-size: 18px;
}
input{
padding: 8px;
margin: 0 0 10px 0;
width: 250px;
margin: 0 auto;
}
button{
margin: 15px;
padding: 4px;
}
</style>
HTMLの構成
次に、HTMLでボタンとテキストエリアを設定します。ここでは、divタグとinputタグを使用し、それぞれのテキストをクリップボードにコピーするボタンを作成します。
クリックするボタン（button）とコピーするテキストエリア「id=”dvtxt”」「input」を用意します。テキストエリアにはクリップボードにコピーするテキストを記述してます。ボタン（button）には「data-clipboard-action=”テキストコピーやカット”」「 data-clipboard-target=”コピーするテキストエリア”」属性を記述します。
以下のコードを参照してください。
<h1>clipboard.jsを使ってクリップボードにテキストをコピーします。<br>以下の2つボタンをクリックするとボタンのターゲット先のテキストをクリックボードにコピーします。</h1>
<div id="dvtxt">divタグ内の文字</div>
<button
class="btndiv"
data-clipboard-action="copy"
data-clipboard-target="#dvtxt"
>
divタグの文字をコピー
</button>
<br>
<br>
<br>
<input id="inpttxt" type="text" value="テキストボックスの文字" /><br>
<button
class="btninput"
data-clipboard-action="copy"
data-clipboard-target="#inpttxt"
>
テキストボックスの文字をコピー
</button>
JavaScriptの設定
最後に、JavaScriptでclipboard.jsを読み込み、ボタンのクリックイベントに応じてテキストをコピーする処理を設定します。以下のコードを使用して、clipboard.jsを初期化し、コピーが成功または失敗したときの処理を記述します。
new ClipboardJS(‘クリックボタン’)を宣言し、clipboard_div.on(‘成or否’,function (e) { 処理 })を記述します。
<script src="clipboard.min.js"></script>
<script type="text/javascript">
var clipboard_div = new ClipboardJS('.btndiv');
clipboard_div.on('success', function (e) {
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
});
clipboard_div.on('error', function (e) {
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
});
var clipboard_input = new ClipboardJS('.btninput');
clipboard_input.on('success', function (e) {
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
});
clipboard_input.on('error', function (e) {
console.log(e);
});
</script>
clipboard.jsを使ってクリップボードにテキストをコピーするデモページ
実際に動作するデモページを用意しました。以下のリンクからアクセスしてみてください。
clipboard.jsを使ってクリップボードにテキストをコピーするデモページ
ソース元：clipboard.js
さらに詳しい情報や他の機能について知りたい場合は、公式サイトを参照してください。
まとめ
以上が、clipboard.jsを使ってクリップボードにテキストをコピーする方法です。シンプルな実装でありながら、ユーザーエクスペリエンスを大幅に向上させることができます。ぜひ、あなたのプロジェクトでも活用してみてください。
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。
