Javascript でクリップボードにアクセスすることは不可能… ではどうするか

clipboard-97590_1280

Web アプリを制作していて気づいた。Javascript で「クリップボードにコピーする」等の操作を簡単に書けると思ったら、全然そんなことなかった。 でもそういうサイトみたことあるよーって思うかもしれない。私もそう思ってたから簡単にできるものだと思ってた。しかしそれらは javascript ではなかった。

本記事では、Web ブラウザでどうすれば「クリップボードへコピー」を実現できるか考えようと思う。

じゃあどうすれば良いか。

ZeroClipboard を使う

ZeroClipboard というライブラリがある。

この方法は、不可視な Adobe Flash を生成してそれを利用ことで、クリックによるユーザのクリップボードへのコピーを可能にする。 Flash を利用するということからわかるように、iOS (iPhone や iPad 等) や一部の Android を含むモバイル端末で利用不可である。

サンプルコードは以下の Qiita 記事が参考になる。

Clipboard API を使う

HTML5 に Clipboard API がある。

この API を用いると、ユーザがコピー操作したときにそれをトリガにして任意の文字列をユーザのクリップボードにコピーすることができる。 iOS でも使用可能である。 しかし、そのトリガとなるコピー操作をユーザが実行しない限り、クリップボードへのアクセスは不可である。

具体的なコードは以下の記事が参考になる。

iOS (iPhone や iPad 等) でどうすればよいか

Web ブラウザは Safari を仮定する。 いずれの方法にしても、ボタン1つで iOS のクリップボードにコピーすることは今のところできない。 iOS で(擬似)クリップボードにコピー機能を提供するには、 コピーをさせる直前の状態を作り出して、ユーザにコピーボタンをタップさせるという方法が最善だと思われる。

  1. テキストエリア等にコピーさせたい文字列が表示されているとして、全選択状態にする
  2. その上でテキストメニュー(正式名称わからない、「カット・コピー等が並んでるやつ」)を表示させる

1 はすぐに実現できる。 jQuery の select() を用いるとできそうだが、これは iOS 上の Safari では動かないので、 focus をテキストエリアに移した後、selectionStartselectionEnd を用いれば良い。

具体的なコードは以下の Stack Overflow の記事を参考に。

2 は実現方法がわからない。 そもそも実現可能かどうかもわからない。 現在調査中である。 わかる方がいたら教えていただきたい。

この記事をシェアする:Tweet about this on TwitterShare on FacebookShare on Google+Share on TumblrEmail this to someone

コメントを残す

名前を入力しなくてもコメント投稿可能です (匿名ユーザとして表示されます)。