コピーって結構使いますよね？
スマホだと、長押しして選択してコピーしてますよね。
パソコンだと、WindowsであればCtrl + C、Macであれば⌘command + Cでショートカットをよく利用していると思います。
ショートカットを使わずに右クリックからコピーする人もいると思います。
パソコンならショートカットもありますし簡単にコピーできますが、スマホだと少々面倒くさいですよね。
そんな面倒くさいコピーを簡単にしたかったので、
今回はクリックだけでコピーできるような機能をブログやサイト内に設置する方法について紹介したいと思います。
なお、今回紹介するのは外部のjQueryやBootstrapなどは利用しなくても動作するものなので必要であればすぐに利用できます。
HTMLとJavaScriptのみで実現
今回は外部ライブラリとかを使わず、純粋なHTMLとJavaScriptだけでクリップボードのコピーを実現します。
外部ライブラリだと「clipboard.js」とかが有名で簡単に使えますが、
特別な理由がなければ外部ライブラリを使う必要はありません。
なので今回は純粋なHTMLとJavaScriptだけを使います。
クリップボードにコピーする機能のサンプルとコード
以下がクリップボードにコピーする機能のサンプルになります。
ボタンをクリックすると以下のテキストフィールドにある文言がクリップボードにコピーされます。
貼り付けを実施してみて実際にクリップボードへのコピーが機能しているか確認してみてください。
これを実現しているコードは以下になります。
File: clipboard.html
--------------------
<body>
〜〜〜
<!-- コピー対象要素とコピーボタン -->
<input id="copyTarget" type="text" value="コピー対象の文言" readonly>
<button onclick="copyToClipboard()">Copy text</button>
〜〜〜
<!-- bodyタグ内の下部に以下を入力する -->
<script>
function copyToClipboard() {
// コピー対象をJavaScript上で変数として定義する
var copyTarget = document.getElementById("copyTarget");
// コピー対象のテキストを選択する
copyTarget.select();
// 選択しているテキストをクリップボードにコピーする
document.execCommand("Copy");
// コピーをお知らせする
alert("コピーできました！ : " + copyTarget.value);
}
</script>
</body>
inputタグのvalueでコピー対象の文言を指定しているので、このvalueの値を変更することでクリップボードにコピーされる文言を変えることができます。
なお、inputタグにreadonly属性を追加することで内容を変更できないようにしています。
buttonタグではクリックするとbody下部に記載しているscriptで定義したJavaScriptの関数を呼ぶように
onclick="copyToClipboard()"と設定しています。
scriptタグ内ではJavaScriptで、ボタンが押下されたときの動作を関数として定義しています。
なお、最後のalert(〜〜〜);でコピー完了のダイアログを出しています。必要に応じて文言の修正や、不要であればalert自体を削除してしまってください。
（おまけ）BootstrapとFontAwesomeを利用して装飾をしてみる
上記で紹介したサンプルではデザインは特に触っていないのでシンプルなものでしたが、
おまけとしてBootstrapとFontAwesomeを利用して簡単にデザインを装飾してみようと思います。
以下が装飾を施したものです。
ボタンではFontAwesomeのアイコンを利用してみました。ちなみに今回使っているアイコンはクリップボードを表すアイコンです。
BootstrapやFontAwesomeを利用すると簡単に上記のようにデザインすることができます。
BootstrapやFontAwesomeの設定方法は以下を参考にしてください。
https://www.marorika.com/entry/setting-bootstrap
https://www.marorika.com/entry/setting-font-awesome
なお、おまけで紹介したデザインのHTMLのコードは以下となります。
File: clipboard-bootstrap.html
------------------------------
<body>
〜〜〜
<!-- コピー対象要素とコピーボタン -->
<div class="container-fluid mx-0">
<div class="form-group row">
<input class="border border-info rounded text-secondary form-control-plaintext col-10" id="omakeCopyTarget" type="text" value="おまけ" readonly>
<button type="button" class="btn btn-info col" onclick="omakeCopyToClipboard()" data-toggle="tooltip" data-placement="top" title="コピーする">
<i class="fas fa-clipboard"></i>
</button>
</div>
</div>
〜〜〜
<!-- bodyタグ内の下部に以下を入力する -->
<script>
function omakeCopyToClipboard() {
// コピー対象をJavaScript上で変数として定義する
var copyTarget = document.getElementById("omakeCopyTarget");
// コピー対象のテキストを選択する
copyTarget.select();
// 選択しているテキストをクリップボードにコピーする
document.execCommand("Copy");
// コピーをお知らせする
alert("コピーできました！ : " + copyTarget.value);
}
</script>
</body>
おわりに
クリック一つでクリップボードにコピーする機能について紹介しました。
スマホなんかだとコピーするだけでも億劫なのでコピー機能が必要な際は是非利用してみてくださいね。