Javascriptでクリップボードに文字を格納する方法（多分Safari対応）

クリップボードにコピーする機能と言ったほうが早いかもしれませんが、作りたかったのはユーザーがボタンを押したら任意の文字列をクリップボードに保存してあげる方法です。

execCommandを使う方法

調べてみたら昔の記事などではexecCommand("copy")を使った方法がよく見かけられました。ただ、この方法は見えないテキストエリアに文字を入れてそこからコピーというやや裏技的なやり方。しかも非推奨になったので近い将来使えなくなる可能性が高いようです。

navigator.clipboard.writeTextを使う方法

で、その代わりに紹介されているのがnavigator.clipboard.writeTextを使う方法。
ただ、そのまま使うとSafariでは動作しないということで、以下であればSafariにも対応できるらしい。Safariでは試してないけどとりあえずFirefoxとChromeでは動作しました。
（蛇足：Webアプリ開発者としては駄目だと思いますがSafariとか入れたくないんですよ。大きいし普段絶対使わないし。iなんとかはあまり好きじゃないんです）

setTimeout(async () => await navigator.clipboard.writeText("文字列"));

注意点

少しハマったのが、writeTextを使う方法の場合、httpsでないと以下のようなエラーが出て動作しないこと。

Firefoxだとこんなエラー：
TypeError: navigator.clipboard is undefined

Chromeだとこんなエラー：
TypeError: Cannot read properties of undefined (reading 'writeText')

最近では本番環境でHttpsを使ってないなんていうことはまず無いと思うのでいいのですが、私は開発環境は面倒なのでhttpでやってるので時々この手の問題に直面します。そういう時は大体ngrokを使って解決してます。

ちなみに、ngrokはローカルの環境をトンネリングで外部からもアクセスができるようにするサービスですが、その過程でhttpsアクセスさせるようにすることも可能なのでこういうときも使えます。今まで何度ngrokに助けられたことか・・・本当に便利なので知らない方は「こんなサービスあるんだ」というのを知っておくだけでもいざというとき役に立つので是非使ってみてください。