コピー＋トースト
コピー＋トーストは、ボタンを押すと指定の文字列をコピーし、画面下から小さな通知（トースト）が一瞬現れて完了を知らせる操作パーツです。コピーする値はボタンの data-v 属性に持たせ、 navigator.clipboard.writeText() で書き込みます。
解説
コピー＋トーストは、ボタンを押すと指定の文字列をコピーし、画面下から小さな通知（トースト）が一瞬現れて完了を知らせる操作パーツです。コピーする値はボタンの data-v 属性に持たせ、navigator.clipboard.writeText() で書き込みます。通知は position: fixed で下部中央に置き、初期は opacity 0 で画面外へずらしておき、表示時にクラスを付けて浮き上がらせ、数秒後に自動で消えるよう setTimeout で制御しています。
活躍する場面
- 連絡先メールアドレスや電話番号を素早く控えてもらいたいとき
- クーポンコードや紹介コードのコピー
- 共有 URL を渡したいボタン
コピーする内容はボタンの属性値を変えるだけで差し替えられ、通知の表示時間はタイマーの値で調整できます。前段のコピー専用パーツとの違いは、成功を独立したトーストで大きく見せる点で、操作の手応えがより明確です。注意点として、クリップボード操作は安全な接続でないと動かない場合があり、通知は色だけでなく文言でも成功を伝えると、より多くの人に届きます。
よくある質問
コピーされる内容はどこで指定しますか
ボタンに付けた data-v という属性の値がそのままコピーされます。メールアドレスやコードなど、控えてほしい文字列をこの属性に入れておけば差し替えできます。
通知が表示される時間を延ばせますか
通知を消すまでの待ち時間はタイマーの数値で決まっています。その値を大きくすれば長く表示され、小さくすればすぐ消えます。用途に合わせて調整してください。