【JavaScript】 クリップボードへテキストをコピーする方法

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

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

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

document.execCommandは、ブラウザ上の文字列を選択状態にしてから、execCommandを実行していました。
しかし、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関数に引数として渡した一つ目の関数が呼び出されます。
転送が失敗すると、二つ目の関数が呼び出されます。

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

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

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")
);