

<https://rubygems.org/gems/i18n/versions/0.7.0>

こちらのサイトの右側にテキストをクリップボードにコピーするボタンがあります。

htmlを覗いてみるとdata属性に対象の文字がありますが、どうやってコピーさせてるのでしょうか?

JavaScriptで可能なのでしょうか?


CC BY-SA 3.0
2014-12-28T11:30:19.620
2744
2014-12-28T13:53:44.863
5855
question
javascript
クリップボードにコピーする方法


そのページに関しては、[ **zeroclipboard**](http://zeroclipboard.org/) を使用していますね。
指定はJavascriptで行われていますけど、内部ではFlashが利用されていますね。

<https://github.com/zeroclipboard/zeroclipboard>

こちらの利用方法サンプルのHTMLにも`data-clipboard-text`が指定されています。 ここに指定しているテキストがコピーされます。

`data-clipboard-target`属性で別のタグの内容をコピーさせることもできます。
（[最初のリンク先](http://zeroclipboard.org/) で Textareaの内容がコピーされるのはそのためです。）

[code]

    <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>
    
[/code]


CC BY-SA 3.0
2014-12-28T11:49:35.057
2745
2014-12-28T12:43:06.713
2014-12-28T12:43:06.713
5857
5335
2744
answer


Javascript
からのコピー＆ペーストの機能は用意されてはいますが、全てのブラウザで一貫して動くことがない手法になっています。クリップボードはユーザが使用するローカルのアプリケーション間で共有されますので、Webページがクリップボードを参照・変更できると、ユーザの作業内容がWebページのスクリプトを通じて漏えいする危険があります。そのため、Webページからのクリップボードの操作は厳しく制限されています。各ブラウザはクリップボードを参照・変更する
API を有していますが、 特別な権限を必要とする上、バージョンによっても、APIの使用制限が違うため、安定したクリップボードの扱いができないのが現状です。

[rubygems](https://rubygems.org/gems/i18n/versions/0.7.0)
のサイトのソース見ると、ライブラリとしては
[zeroclipboard](https://github.com/zeroclipboard/zeroclipboard)を使用していることが確認できます。これは、ページ上に表示されない
Flash コンテンツを起動し、 Flash の API 経由でコピー機能を実現しているものです。

Javascipt からクリップボードを扱う API は W3C から [Clipboard API and
events](http://www.w3.org/TR/clipboard-apis/)
としてワーキングドラフトが出されています。仕組みとしては、ユーザーがコピー＆ペースト操作をした際に、イベントハンドラで Clipboard
の中身を参照する形になります。ユーザーが、Webページに対してコピー＆ペースト操作した時だけ、セキュリティ制限解除としているわけです。しかしこの API
は、現在普及しているブラウザのなかでも [Firefox が十分にサポート](https://developer.mozilla.org/en-
US/docs/Web/API/ClipboardEvent)するのみです。全てのブラウザでサポートがされている訳ではありません。

セキュリティが厳しく、ブラウザによって機能が安定しないため、コピー＆ペーストを行うために、 Javascript ではなく Flash
のコピー＆ペースト機能を使うことが主流になりました。[zeroclipboard](https://github.com/zeroclipboard/zeroclipboard)
がはやりだしたのは、 [GitHub が使いだしてから](https://github.com/blog/1365-a-more-transparent-
clipboard-
button)だったと記憶しています。以前はたしか[これ](https://github.com/mojombo/clippy)を使っていました。Flash
でも、コピー＆ペーストの権限を得る瞬間が
[ユーザのコピー＆ペースト操作または、ボタンのクリックの瞬間である必要](http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/desktop/Clipboard.html)があります。よってあのようなコピーボタンでの実装になっているわけです。


CC BY-SA 3.0
2014-12-28T13:48:37.997
2749
2014-12-28T13:53:44.863
2014-12-28T13:53:44.863
4978
4978
2744
answer