https://rubygems.org/gems/i18n/versions/0.7.0
こちらのサイトの右側にテキストをクリップボードにコピーするボタンがあります。
htmlを覗いてみるとdata属性に対象の文字がありますが、どうやってコピーさせてるのでしょうか?
JavaScriptで可能なのでしょうか?
https://rubygems.org/gems/i18n/versions/0.7.0
こちらのサイトの右側にテキストをクリップボードにコピーするボタンがあります。
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 でも、コピー&ペーストの権限を得る瞬間が ユーザのコピー&ペースト操作または、ボタンのクリックの瞬間である必要があります。よってあのようなコピーボタンでの実装になっているわけです。
そのページに関しては、zeroclipboard を使用していますね。 指定はJavascriptで行われていますけど、内部ではFlashが利用されていますね。
https://github.com/zeroclipboard/zeroclipboard
こちらの利用方法サンプルのHTMLにもdata-clipboard-text
が指定されています。
ここに指定しているテキストがコピーされます。
data-clipboard-target
属性で別のタグの内容をコピーさせることもできます。
(最初のリンク先 で Textareaの内容がコピーされるのはそのためです。)
<html>
<body>
<button id="copy-button" data-clipboard-text="Copy Me!" title="Click to copy me.">Copy to Clipboard</button>
<script src="ZeroClipboard.js"></script>
<script src="main.js"></script>
</body>
</html>