React で Clipboard API にアクセス
2022/07/07
Clipboard API
- クリップボードにテキストをコピーするボタンの実装 - Qiita
- JavaScript でクリップボードにテキストをコピーする (2021年版) | MSeeeeN | 大阪発 IT メディア by MSEN
普通に使えそう、と思ったが……
Uncaught TypeError: Cannot read property ‘writeText’ of undefined
Uncaught TypeError: Cannot read property ‘writeText’ of undefined
いざ使ってみるとこのエラーが表示されて動作せず。
- 【javascript】navigator.clipboard.writeTextで Uncaught TypeError: Cannot read property ‘writeText’ of undefined – オワタ太のブログ
- [JS] http環境ではnavigator.clipboard.writeTextがエラーになる - プロプログラマ -Flex,Air,C#,Oracle,HTML5+JS-
調べてみると https ではないと有効にならない模様 (http では上述のエラーになる)。
あー、 create-react-app で http://localhost:3000/ になっていたのでそれが原因ですね。
- XAMPP for WindowsでSSLを有効にする - Qiita
- Create React Appで作成したアプリをローカルのMacBook上でHTTPSで動作させる - kdnakt blog
ということで、 XAMPP 辺りから適当にオレオレ証明書をコピーして、 .env に次の3行を足して (証明書と秘密鍵のパスは適宜変更) 再度 npm start 。
HTTPS=true
SSL_CRT_FILE=./ssl/server.crt
SSL_KEY_FILE=./ssl/server.key
これで https://localhost:3000/ でアプリにアクセスできるので、無事 Clipboard API が動きました。