プログラミング

JavaScriptで画面上の文字列をクリップボードにコピーする方法

投稿日:2016年11月2日 更新日:

1. はじめに

ウェブページ上の文字列をクリップボードにコピーする JavaScriptの書き方を 2つ紹介します。

  1. Clipboard API and events を使う方法
  2. Selection API を使う方法

スポンサードリンク

2. Clipboard API and events を使う方法

Clipboard API and events を使います。こちらの方が簡単です。

(1) まず、画面上の文字列を取得します。ここでは id="pID" という属性を持った <p> タグの内容を取得して、変数 txt にセットしたとします。

const txt = document.querySelector('#pID').innerText;

(2) この文字列をクリップボードにコピーするには以下を記述するだけです。

navigator.clipboard.writeText(txt)

参考

ブラウザの対応状況

3. Selection API を使う方法

Selection API を使う方法です。結構面倒です。

メモ

クリップボードに文字列をコピーするには、clipboard.js というライブラリを使うこともできます。このライブラリの中では、GitHub – zenorocha/select という「HTML要素の文字列を選択する」ための JavaScriptコードが利用されています。

これらのライブラリは npmパッケージとしても提供されており、それぞれのリンクは以下となります。

今回はライブラリを使いませんが、clipboard.jsselect のソースコードは参考にしました。

(1) 基礎知識

主に selection というオブジェクトと range というオブジェクトを利用します。画面上の要素の範囲を指定したり、その部分を選択状態にしたり、といった処理を行うことができます。

参考

ブラウザ実装状況

(2) プログラムの書き方

<p>要素内の文字列をクリップボードにコピーする例で説明します。

やりたいのは、「コピーしたい要素を選択状態にする」→「クリップボードにコピーする」という処理です。

最低限必要になるソースコードは以下です。説明はコメントに書いておきました。

HTML

<p id="targetID">この文字列をクリップボードにコピーします!</p>

JavaScript

// 目的の文字列が入っている p要素を取得します。
const element = document.querySelector('#targetID');
// seletionオブジェクトを取得します。
const selection = window.getSelection();
// rangeオブジェクトを生成します。
const range = document.createRange();
// rangeオブジェクトに p要素を与えます。
range.selectNodeContents(element);
// 一旦、selectionオブジェクトの持つ rangeオブジェクトを削除します。
selection.removeAllRanges();
// 改めて先程生成した rangeオブジェクトを selectionオブジェクトに追加します。
selection.addRange(range);
console.log('選択された文字列: ', selection.toString());
// クリップボードにコピーします。
const succeeded = document.execCommand('copy');
if (succeeded) {
    // コピーに成功した場合の処理です。
    console.log('コピーが成功しました!');
} else {
    // コピーに失敗した場合の処理です。
    console.log('コピーが失敗しました!');
}
// selectionオブジェクトの持つrangeオブジェクトを全て削除しておきます。
selection.removeAllRanges();

(3) サンプルページ

このコードを使ったページを、JSFiddleに作っておきました。

右下のエリア内にある「クリップボードにコピーします」ボタンを押すと、クリップボードに文字列がコピーされます。その後、メモ帳などに貼り付けて確かめて下さい。

JSFiddleのスクリーンショット

4. おわりに

何年か前までは、Clipboard API がそれほど普及していませんでしたので、Selection API を使って「クリップボードにコピー」を行っていました。

ウェブはいつの間にか新しい機能が増えているので、それに気付かず古いやり方をずっと使ってしまうことがあります。

📂-プログラミング
-

執筆者:labo


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

プログラミング

Rubyのように書け、Cのように速いプログラム言語 Crystal の基本的な使い方

Crystal というプログラミング言語の基本的な使い方について紹介します。 実際に「使ってみたい」「試してみたい」といった方に向けて、コードを書き始めるまでの導入方法について書きました。文法の説明な …

JavaScript

JavaScript で URL を扱う場合の処理

JavaScript で URL文字列に関する処理を行う場合、セキュリティの観点から、URL()コンストラクタを使うことが推奨されます。URL()コンストラクタによって URLオブジェクトを生成し、そ …

Web Programming

ソフトウェアにおける日付・時刻フォーマット

目次ソフトウェアにおける日付・時刻フォーマット参考情報ISO 8601RFC 5322RFC 7231Common Log Format ソフトウェアにおける日付・時刻フォーマット ソフトウェア(特に …

定期的にDOM要素をアニメーションするサンプルを用意しました

定期的にDOM要素をアニメーションするサンプルを用意しました。 DOM要素が対象ですので、div要素や img要素などが動かせます。 目次1. デモ2. ソースコード3. まとめ4. 参考 1. デモ …

e-Stat API の利用に関するメモ

政府統計の総合窓口(e-Stat)−API機能 の利用に関するメモです。 政府統計の総合窓口(e-Stat)では、統計データ等が提供されており、プログラムで取得する事ができます。 気付いたこと 政府統 …