BT

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

| 作者: David Iffland フォローする 4 人のフォロワー , 翻訳者 笹井 崇司 フォローする 0 人のフォロワー 投稿日 2015年10月12日. 推定読書時間: 2 分 |

原文(投稿日: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はまだ作業中であり、多くのブラウザで部分的にサポートされている段階だ。

この記事に星をつける

おすすめ度
スタイル

こんにちは

コメントするには InfoQアカウントの登録 または が必要です。InfoQ に登録するとさまざまなことができます。

アカウント登録をしてInfoQをお楽しみください。

あなたの意見をお聞かせください。

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする
コミュニティコメント

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする

ディスカッション

InfoQにログインし新機能を利用する


パスワードを忘れた方はこちらへ

Follow

お気に入りのトピックや著者をフォローする

業界やサイト内で一番重要な見出しを閲覧する

Like

より多いシグナル、より少ないノイズ

お気に入りのトピックと著者を選択して自分のフィードを作る

Notifications

最新情報をすぐ手に入れるようにしよう

通知設定をして、お気に入りコンテンツを見逃さないようにしよう!

BT