MENU

JavaScript関数・メソッド

【JavaScript】 クリップボードへのコピー

更新日:2020/11/02

 

今までブラウザからクリップボードにコピーするときdocument.execCommand使っていました。
しかし、実は既に廃止されています。(ソース:こちら
まだ使用できますが、今後はブラウザ上から削除されるかもしれません。

 

そこで、新しい方法でのクリップボードコピーについてお伝えします。

 

今後はClipboard APIを使用する

 

document.execCommandのかわりに、Clipboard APIが用意されています。
今後は、こちらを使用していくことになります。

 

document.execCommandは、ブラウザ上の文字列を選択状態にしてから、execCommandを実行していました。
しかし、Clipboard APIを使用すると、直接文字列をクリップボードに送ることができます。

 

非常に使いやすくなっています。

 

早速、Clipboard APIを使用して文字列をクリップボードにコピーする関数を作成してみました。

 

Clipboard APIによるコピー関数例

 


    const clipbordCopy = text =>{
        if( !navigator.clipboard ) {
            alert("クリップボードにコピーできませんでした");return false;
        }
        navigator.clipboard.writeText(text).then(
            ()=>alert("クリップボードにコピーしました"),
            ()=>alert("クリップボードにコピーできませんでした")
        );
        return true;
    };

 

 

 

クリップボードコピー関数の解説

 

navigator.clipboardプロパティが、Clipboard APIへのインターフェースオブジェクトです。
Clipboard APIに対応していないブラウザは、このプロパティを持っていないので、参照するとundefinedを返します。

 

つまり次のコードは、ブラウザがClipboard APIに対応していないとき、真です。

 

if( !navigator.clipboard ) {・・・}

 

navigatorプロパティは以前から存在していたので、チェックしていません。

 

次に、Clipboard APIのwriteText関数で、クリップボードに文字列をコピーします。

 

navigator.clipboard.writeText(text)

 

writeText関数は非同期関数ですので、関数の戻り値はPromiseオブジェクトです。
writeText関数の後に呼ばれるthen関数は、Promiseオブジェクトのthen関数です。

 

writeText(text).then()

 

クリップボードへの転送が成功すると、then関数に引数として渡した一つ目の関数が呼び出されます。
転送が失敗すると、二つ目の関数が呼び出されます。

 

navigator.clipboard.writeText(text).then(
    ()=>alert("クリップボードにコピーしました"), // 成功
    ()=>alert("クリップボードにコピーできませんでした") // 失敗
);

 

ただし、引数として渡した関数は、clipbordCopy関数が終了した後に呼び出されます。

 

つまりclipbordCopy関数内で、クリップボードコピーが成功したかどうか判断できません。
仕方がないので、trueを返しています。

 

 

 

Clipboard APIの注意点

 

Clipboard APIは少し致命的な注意点があります。

 

httpsのみで使用可能

 

Clipboard APIはSSLに対応したWebページのみで動作します。
つまりhttpのサイトでは動作しません。

 

httpのサイトは、document.execCommandを使用するしかないのですが、今後使用できなくなるのでお手上げです。

 

ユーザーが操作したときのみ使用可能

 

Firefoxの場合、直接writeTextを呼び出すと、クリップボード転送に失敗します。
例えば、次のコードは失敗します。

 

クリップボード転送に失敗

 


const clipbordCopy = text =>{
  ・・・省略
}
clipbordCopy("abcde");

 

タイマー呼び出し等でも失敗します。

 

クリップボード転送に失敗

 


setTimeout(()=>clipbordCopy("abcde"),5000);

 

クリックイベントからの呼び出しは、成功します。

 

クリップボード転送に成功

 


document.getElementById("aaa").addEventListener(
        "click",()=> clipbordCopy("abcde")
);

けーちゃんおススメJavaScript入門書

  • スラスラ読める JavaScript ふりがなプログラミング
  • プログラム未経験者がJavaScript始めるならコレ!
    コードを掲載して自分で理解しろという投げっぱなしな入門書とは異なり、コードに一つ一つどんなことをやっているかをふりがなという形式で解説しています。
    それでいてJavaScriptの基礎と応用を学べる良書です。
  • これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほん
  • JavaScriptの機能を実践で活かすにはHTMLやCSSの知識が不可欠です。
    しかしそれらの知識があることが前提として書かれている書籍が多い中、この本は総合的な知識を身に着けることができます。
    HTMLやCSSの知識も不安な方には、ぴったりの一冊です
  •  

    入門書の役割は、自分のやりたいことをネットで調べることができるようになるための、基礎的な知識の獲得です。
    まずはこれらの本でしっかりと基礎知識を身につけましょう。
    そしてもっと高度なことや専門的なことはネットで調べ、情報が足りないと感じたら書籍を購入してください。


    記事の内容について

     

    こんにちはけーちゃんです。
    説明するのって難しいですね。


    「なんか言ってることおかしくない?」
    たぶん、こんなご意見あると思います。

    裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。

    そんなときは、ご意見もらえたら嬉しいです。

    ご意見はこちら。
    https://note.affi-sapo-sv.com/info.php

    【お願い】

    お願い

    ■このページのURL


    ■このページのタイトル


    ■リンクタグ


    ※リンクして頂いた方でご希望者には貴サイトの紹介記事を作成してリンクを設置します。
    サイト上部の問い合わせよりご連絡ください。
    ただしサイトのジャンルによっては、お断りさせていただくことがあります。