📋 コピー成功トースト通知

コピーが成功したときに画面下にトースト通知が表示されるテンプレートです。

📋 コピー機能のデモ

✅ コピーしました！

コピートースト完全動作コード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>コピー機能とトースト通知</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 2rem;
      text-align: center;
    }

    #toast {
      visibility: hidden;
      min-width: 200px;
      margin: 0 auto;
      background-color: #333;
      color: #fff;
      text-align: center;
      border-radius: 5px;
      padding: 10px;
      position: fixed;
      bottom: 30px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 1;
      opacity: 0;
      transition: opacity 0.5s, visibility 0.5s;
    }

    #toast.show {
      visibility: visible;
      opacity: 1;
    }

    button {
      padding: 10px 20px;
      font-size: 1rem;
      cursor: pointer;
    }
  </style>
</head>
<body>

  <h2>📋 コピー機能のデモ</h2>
  <button onclick="copyText()">📋 コピーしてみる</button>
  <div id="toast">✅ コピーしました！</div>

  <script>
    function copyText() {
      const text = "これはコピーするテキストです";
      navigator.clipboard.writeText(text).then(() => {
        const toast = document.getElementById("toast");
        toast.classList.add("show");
        setTimeout(() => {
          toast.classList.remove("show");
        }, 2000);
      }).catch(err => {
        alert("コピーに失敗しました: " + err);
      });
    }
  </script>

</body>
</html>

✅ このテンプレートの用途・メリット

  • ユーザーにコピーが成功したことを視覚的に伝えられる
  • UXが向上し,直感的な操作が可能になる
  • コピー成功時のアクションがわかりやすい
  • 通知の表示／非表示は自動で制御される
  • さまざまな場面でコピーボタン付きUIに応用可能

🧩 トースト通知の活用とカスタマイズ術

本テンプレートでは、コピー操作が成功したことをユーザーに即座に伝えるための視覚的フィードバックとして、右下にふわっと表示されるトースト通知を実装しています。シンプルながらもユーザー体験（UX）を大きく向上させる工夫です。

JavaScript の navigator.clipboard.writeText(...) を使用することで、クリップボードへのテキストコピーが可能となり、その成功時に classList.add("show") によりトーストを表示します。通知は setTimeout(...) によって自動で消えるため、ユーザーが操作に迷うことはありません。

このようなトースト通知はコピー操作に限らず、フォーム送信、エラー発生、保存完了など、さまざまなシーンに応用可能です。通知内容を innerText で動的に変更することで、より柔軟な対応が可能になります。

🔧 カスタマイズのポイント

表示位置は right: 30px; bottom: 30px; で固定されていますが、CSSを調整すれば左下や中央上にも変更可能です。また、表示時間は setTimeout(..., 2000) の数値を変更することで調整できます。ユーザーの操作感に合わせた最適なタイミングを検討すると良いでしょう。

視覚的なアニメーションは @keyframes fadein と fadeout によって実現されており、CSSだけで完結しているため、軽量で動作もスムーズです。JavaScriptとCSSの連携によって、最小限のコードで最大限の効果を発揮しています。