BT

最新技術を追い求めるデベロッパのための情報コミュニティ

寄稿

Topics

地域を選ぶ

InfoQ ホームページ ニュース Flashなしのクリップボード統合を実現する軽量JavaScriptライブラリ

Flashなしのクリップボード統合を実現する軽量JavaScriptライブラリ

原文(投稿日:2015/10/01)へのリンク

Zeno Rocha氏がClipboard.jsをリリースした。これはWebページにあるテキストをローカルコンピュータのクリップボードにコピーするのに特化したJavaScriptライブラリだ。

すべてのGitHubリポジトリページのサイドバーには、リポジトリのHTTPS clone URLを表示するウィジェットがある。その隣にはボタンがあり、クリックするとリポジトリのURLがユーザのクリップボードにコピーされる。GitHubはこれを実現するのに、ZeroClipboardというライブラリを使っている。問題は、これが目に見えないFlashムービーを使っており、Flashはブラウザベンダーから冷遇されていることだ。

Screen shot of the GitHub copy to clipboard button

今年の初め、FirefoxはデフォルトでFlashをブロックし、クリップボードにコピーするためにはFlashの利用を明示的に承認するようユーザに要求した。

Mozilla Hacksには、document.execCommand() APIの利用について紹介する記事が掲載されている。MDNによると、execCommandは「編集領域の内容を操作するためにコマンド実行を許可する」ものだ。Firefoxのバージョン41までの "cut" と "copy" コマンドは無効になった。

ユーザのクリップボードへ、任意のJavaScriptコードがテキストを好きにコピーできるようにするのではなく、ブラウザはユーザが開始したアクションだけにイベントを制限している。ユーザの明示的アクションなしに、コードがテキストをコピーしようとすると、その呼び出しは失敗する。

Rocha氏はexecCommandを使うというアイデアを一歩進めて、それをSelection APIに統合した。2つの技術を組み合わせることで、Clipboard.jsは開発者にとって便利なAPIを備えた、多目的な軽量JavaScriptライブラリを提供する。このライブラリにボタンを接続するには、どの要素がクリップボードを発動させるか宣言する。

var clipboard = new Clipboard('.btn');

ライブラリは主要なブラウザをサポートしているが、Safariはまだcut及びcopyコマンドをサポートしていない。

ZeroClipboardの開発者は、自分たちのライブラリをこの手法に切り替え、APIがサポートされていないブラウザではFlashにフォールバックさせることを議論している。ZeroClipboardのコントリビュータであるJames Green氏は、Clipboard.jsについてこう語る。「良い選択肢ですが、ZeroClipboardにHTML5をサポートさせて、世の中の多くの利用者のためにFlashにフォールバックするというニーズは、間違いなくあると思っています」。

HTML5 Clipboard APIはまだ作業中であり、多くのブラウザで部分的にサポートされている段階だ。

この記事に星をつける

おすすめ度
スタイル

BT