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

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

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

• javascript – クリップボードにコピーする方法 – スタック・オーバーフロー
  http://ja.stackoverflow.com/questions/2744/クリップボードにコピーする方法

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

---

---

ZeroClipboard を使う

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

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

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

• [JavaScript] zeroclipboard を使って js だけでクリップボードにコピーする方法 – Qiita
  http://qiita.com/phi/items/f20a27602b3526b0d789

Clipboard API を使う

HTML5 に Clipboard API がある。

• Clipboard API and events
  https://w3c.github.io/clipboard-apis/

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

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

• 【javascript】クリップボードにコピーさせる方法 – ysklog
  http://ysklog.net/javascript/2157.html

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

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

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

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

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

• javascript – Selecting text in mobile Safari on iPhone – Stack Overflow
  http://stackoverflow.com/questions/1899421/selecting-text-in-mobile-safari-on-iphone

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

---