質問: こちらのサイトの右側にテキストをクリップボードにコピーするボタンがあります。 htmlを覗いてみるとdata属性に対象の文字がありますが、どうやってコピーさせてるのでしょうか? JavaScriptで可能なのでしょうか?
回答: Javascript からのコピー&ペーストの機能は用意されてはいますが、全てのブラウザで一貫して動くことがない手法になっています。クリップボードはユーザが使用するローカルのアプリケーション間で共有されますので、Webページがクリップボードを参照・変更できると、ユーザの作業内容がWebページのスクリプトを通じて漏えいする危険があります。そのため、Webページからのクリップボードの操作は厳しく制限されています。各ブラウザはクリップボードを参照・変更する API を有していますが、 特別な権限を必要とする上、バージョンによっても、APIの使用制限が違うため、安定したクリップボードの扱いができないのが現状です。 rubygems のサイトのソース見ると、ライブラリとしては zeroclipboardを使用していることが確認できます。これは、ページ上に表示されない Flash コンテンツを起動し、 Flash の API 経由でコピー機能を実現しているものです。 Javascipt からクリップボードを扱う API は W3C から Clipboard API and events としてワーキングドラフトが出されています。仕組みとしては、ユーザーがコピー&ペースト操作をした際に、イベントハンドラで Clipboard の中身を参照する形になります。ユーザーが、Webページに対してコピー&ペースト操作した時だけ、セキュリティ制限解除としているわけです。しかしこの API は、現在普及しているブラウザのなかでも Firefox が十分にサポートするのみです。全てのブラウザでサポートがされている訳ではありません。 セキュリティが厳しく、ブラウザによって機能が安定しないため、コピー&ペーストを行うために、 Javascript ではなく Flash のコピー&ペースト機能を使うことが主流になりました。zeroclipboard がはやりだしたのは、 GitHub が使いだしてからだったと記憶しています。以前はたしかこれを使っていました。Flash でも、コピー&ペーストの権限を得る瞬間が ユーザのコピー&ペースト操作または、ボタンのクリックの瞬間である必要があります。よってあのようなコピーボタンでの実装になっているわけです。