コピーしました、本当？失敗時の案内まで作るコピーボタン

この記事の目次開く・閉じる

今回の仕上がり

実際にコピーボタンを押し、確認欄へCtrl+Vで貼り付けて、紹介文が一致することを確認しました。「失敗例を試す」を選ぶと、成功表示にならず元の文章が選択されました。このチェックは作例内の意図的な分岐で、ブラウザの権限拒否を再現した証拠ではありません。

コピー操作の後、確認欄へCtrl+Vで同じ紹介文を貼り付けた画面。タップして拡大できます。

こちらは実際に触れる作例です。 スクリーンショットで操作や音を代用したものではありません。音の作例も自動では鳴りません。

作例を別画面で開く → · サンプル一式を保存（ZIP）

作例の失敗分岐で、成功表示を出さず元の文章を選択した実画面 — チェックで試した失敗分岐。実際のブラウザ権限の拒否を撮影したものではありません。タップして拡大できます。

必要なものと操作順

HTTPSかlocalhostで作例を開きます。ブラウザの設定でクリップボードへの書き込みが制限される場合があります。秘密を含まない、作例の紹介文で試してください。操作するとクリップボードの内容を置き換えます。

「コピーする紹介文」を読み、「失敗例を試す」が外れていることを確認する。
「紹介文をコピー」を押し、結果欄の案内を見る。
「コピーしました」と出たら確認欄を選び、Ctrl+Vなどで手動貼り付けする。元の文章と比べる。
「失敗例を試す」を選んで再び押し、「コピーできませんでした」の案内と選択された元の文章を見る。
必要なら選択された元の文をCtrl+Cなどで手動コピーする。通常の操作へ戻すときはチェックを外す。

仕組みと使いどころ

ボタンを押したことと、保存されたことは違う

navigator.clipboard.writeTextはPromiseを返します。その処理が完了する前に成功と表示すると、後で失敗しても読者には伝わりません。作例ではawaitの後に成功表示を置いています。

操作確認では、表示だけでなく貼り付けた文章も比べました。アプリやブラウザごとに制限が異なるため、一つの環境で成功しても全部の端末で成功するとは扱いません。

失敗したときに文章を失わない

コピーに失敗しても、元の文章が画面に残れば手動で選べます。作例ではその欄へフォーカスを移し、文章を選択してから、手動コピーを案内します。成功していないのにボタンの色だけ変えて終わる動きにはしません。

失敗例のチェックは、案内の見え方を試すための分岐です。技術的な拒否を迂回する機能ではありません。実際の権限拒否が出たときも、同じ案内へ進む設計にしています。

読み取りと書き込みを分ける

この作例が使うのは、指定した文章を書き込む操作です。コピー後の確認欄へ貼り付けるのは読者自身で、クリップボードの内容を自動で読み取る機能はありません。

MDNはwriteTextを安全なコンテキストで使う機能として説明しています。ブラウザの追加条件もあるため、開き方、操作のタイミング、設定を確認してください。成功しても、クリップボードは別の操作で変わることがあります。

コードの要点

try {
  await navigator.clipboard.writeText(text);
  status.textContent = "コピーしました。";
} catch {
  source.focus();
  source.select();
  status.textContent = "コピーできませんでした。手動でコピーしてください。";
}

成功と失敗の表示を分ける抜粋です。本体はAPIがない場合も失敗案内へ進みます。自動読み取り、古いコピー命令への切り替え、ブラウザの制限を迂回する処理は追加していません。

自作のHTML・CSS・JavaScript・SVGはCC0です。ZIP内のREADMEと、共通のサンプル利用条件をご確認ください。

できたかの確認とよくあるつまずき

通常の操作で成功したら、手動貼り付けの文章が元と一致する。
失敗例では成功表示にならず、元の文が選択される。
390px幅でも元の文章、結果、確認欄が画面内に収まる。

ここに注意。失敗表示を出しても、元の文章を消すと手動コピーできません。入力欄や選択できる文章を残します。

ここに注意。埋め込みではブラウザやページの設定によって制限が出ることがあります。記事の「作例を別画面で開く」も試し、拒否された操作を無理に繰り返しません。

出典と確認した範囲

作例の確認日：2026年10月3日。個別の条件と未確認範囲は以下の通りです。共通の検証方法も公開しています。

ローカルのHTTP環境で書き込み、Ctrl+Vの貼り付け一致、作例内の失敗分岐、390px幅を確認。実機スマホ、全ブラウザ、OSの権限拒否、自動クリップボード読み取りは未確認または未実装です。

MDN：Clipboard writeText。書き込み、Promise、安全なコンテキストと拒否時の例外。

記事一覧へ戻る →