jsでクリップボードへのコピーを検知して別のアプリを即起動


Javascript thumb

先日、スマホアプリでユーザがIDをクリップボードにコピーしたのを検知して特定のiPhoneアプリに遷移させてる実装があった。
これを見て「これと同じ事を実装せよ」というミッションが下った。 URLスキームってヤツですね。

ただ、最初はクリップボードへのコピーイベントを監視して発火させるより
「このボタンを押すとコピーされますよ(テヘペロ)
みたいなボタンを設置して onClickで良くないかな? ボタン押した方が別アプリに飛んでった際にビックリしないんじゃないか? とか思ってたんですが、アレってブラウザ互換が激しいし危ないから実装しないのが正解だぜー みたいな会話を発見。
how do i copy to the clipboard in javascript
ちなみにコレの一番voteされているアンサーがちょっと笑える。

と、いうわけでやっぱりコピーのイベントを検知する事にした。
調べたら document.oncopy なるメソッドが用意されていた。マジそんなのあるの知らなかった。

何が嬉しいのか?

スマホアプリで招待コードや、招待URLなどを共有する。
また、シェアボタンを押すと指定のテキストをセットしてターゲットのアプリケーションを開く。 などよく見かけますが、BANDというグループで使うアプリがありまして、友達に招待する時招待された側がブラウザのIDをコピーした瞬間アプリに遷移→ウェーイww 
っていうのやってたからアイデアいただき隊したかったたい。

連携させてみる

と、いうわけでIDをクリップボードにCOPYされた瞬間iOSアプリを起動させる。

、、 と、その前に アプリが未インストールの場合はAppStoreへ飛ばす という挙動をかました方がユーザに優しいですね。(てか実はこっちの挙動の方が手こずった)

なにはともあれ最終的には以下の様に・・

  document.oncopy = function(event){
    var checkedAt = new Date();
    setTimeout(function(){
      var t = new Date() - checkedAt;
      if ( t < 2000 ){
        window.location = 'http://itunes.com/hogehoge';
      }
    }, 1000);
    window.location = 'super-ise-ebi-app://';
  }

なんでDate呼び出して時間を計測したりしてるの? と思うかもしれないけど、ちゃんとやっておかないと2回めブラウザへ戻ってきた時に色々と大変だから。
参考にしたのは Qiitaのこの記事です。

なお、クリップボードにコピーされているテキストデータはアプリ側でも読み込めるのでGoogleMapみたいにオプションパラメータを付与する必要がないでやんす。

まとめ

PC、ハイエンド機かかわらずブラウザ内でのクリップボードコピーのイベントは 
document.oncopy
で拾える。

イベントで内で window.location = ‘{あなたのアプリのID}://’ を実行する事でブラウザから抜けて指定アプリを起動させる事ができる。 urlスキーム

世の中どんどん便利になっていくですね。
全然関係ない話なのですが、今朝の筋トレで背筋を徹底的に追い込んだのでPCの前で背筋を伸ばして座ってる姿勢が非常につらい。。

明日の筋肉痛が楽しみですね! ∠( ゚д゚)/

2015-02-11 | Posted in JavaScript - jQueryNo Comments » 


関連記事

Comment





Comment



*