クリップボード書き込みボタン

投稿: 2020年10月30日

当ブログ記事のコード表示に「クリップボード書き込みボタン」を付けてみました。

以下、サンプル。

<!DOCTYPE html>
<title>Sample</title>
<p>sample code

ソースコード
デモページ(saekitominaga.github.io)

今どきはクリップボードへの書き込み自体は navigator.clipboard.writeText()でできるので、 JavaScript のコードは非常に簡素です。むしろコピー完了時のフィードバック（「コピー完了」のメッセージ）をどうするか考えていた時間の方がよほど長かったです。

この手のやつでおそらくもっとも著名なライブラリであろう clipboard.js(clipboardjs.com) の動作を見てみると、コピーボタンが押されたら「Copied!」のツールチップが表示されますが、ボタンからマウスカーソルを離すと消えてしまいます。キーボード操作だとコピーはされるもののツールチップ表示はなし。うーん、アクセシビリティ的にどうなんでしょう。

まあその辺ちゃんとしたところで、「ボタン押下」→「成功メッセージ表示」→「もう一度ボタン押下」の時に、既に出ているメッセージをどうするか考え出すと妙案が思い浮かびません。成功メッセージを無限に積み上げていくのも微妙だし、「閉じる」ボタンを付けるほどのものではないでしょうし。

いろいろ試した末、結局「なにもしない」ことに。よくよく考えてみれば、テキストエディターやワープロソフト等に古くからあるコピー機能だってフィードバックといえるようなものは何もなく、本当にクリップボードへ書き込まれたのかは貼り付けてみるまで分からないのが普通ですから。

とはいえ本当に何もないのは寂しいので、視覚環境のみですが、ちょっとした工夫までにボタンが :active になった時に CSS で Ripple Effect をかけるようにはしてみました（google.com のパクリ）。