URLSchemeでアプリの有無によって挙動を変える(iOS9対応版)
やりたいこと
アプリDL数を獲得するために、他社へ広告やRSS等を提供する事はよくあると思うが、
既にアプリをDLしているユーザーにとってみればデッドコンテンツとなってしまう問題がある。
(ただのダウンロード訴求バナー等なら問題ないが、RSSを用いた記事コンテンツの場合は直接アプリに案内したい場合は多い)
そんな時に、”アプリがインストール済みの場合はアプリ起動”、”アプリ未インストールの場合はストアへ遷移させる”実装例を以下にメモ。
ただし、2015/10/13日現在、iOS9では仕様変更によりこの方法は使えない。
最後にまとめと、少し不具合くさい抜け道も記述する。
実装方法
基本的にはjavascriptを使用して実装するのだが、クライアントサイドスクリプトでは、
アプリがインストールされているかどうかの情報を取得する事はできない。(セキュリティ的に)
なので、URLschemeを叩き、アプリがあればアプリ起動、なければ何も反応がないのでタイマーを用いてストアに自動で遷移させる手法が一般的である。
HTML
1 2 3 |
<div style="width: 0; height: 0; overflow: hidden;"> <iframe id="urlScheme_iframe" name="urlScheme_iframe"></iframe> </div> |
js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
var URL_SCHEME = 'urlScheme'; var STORE_LINK = 'store_link'; var PC_SITE = 'http://astone.jeez.jp/' // UA取得 var userAgent = navigator.userAgent.toLowerCase(); // iPhone if (userAgent.search(/iphone|ipad|ipod/) > -1) { launch_frame.location.href = URL_SCHEME; setTimeout(function() { location.href = STORE_LINK; // URL_SCHEMが無効ならsetTimeoutで遷移 }, 500); } // Android else if (userAgent.search(/android/) > -1) { document.location = 'intent://'+ ANDROID_APP_PATH +'#Intent;scheme='+ URL_SCHEME +';package=jp.miruyo;end'; } // その他・不明・PCなどの場合はサイトを開く。 else { document.location = PC_SITE; } |
Androidはintentというそれようの機能が提供されているのでそれを仕様する。
https://developer.chrome.com/multidevice/android/intents
intentでURLschemeを使用するさいにドメイン以降の記述を書く位置が違うので注意する事。
1 2 3 4 5 6 7 8 9 |
intent: HOST/URI-path // Optional host #Intent; package=[string]; action=[string]; category=[string]; component=[string]; scheme=[string]; end; |
また、intentを仕様する際に、store直接ではなく、別のWEBページに飛ばしたい場合(計測URL等を踏ませたい)は
S.browser_fallback_urlというパラメータを使用するようにあるが、Android端末の標準ブラウザ(特に4.4.2以前の古いもの)への実装が
各社まちまちなので、ある程度の割り切りは必要となる。
iOS9の問題点
iOS9では、プライバシーポリシーの変更によって、URLschemeを用いたアプリ起動に修正が入っている。
http://qiita.com/mono0926/items/2bf651246714f20df626
AppleはiOS9よりUniversal Links(ユニバーサルリンク)と呼ばれる公式のAPIを提供しており、
従来のURLschemeや独自ディープリンクでアプリを起動する際に、確認のメッセージダイアログが表示されるようになった。
また、iFrameを使用した自動遷移においては完全に無効化されており、
上記の自動遷移 + しなければストアへ、、みたいな実装が完全に動作しなくなっている。
iOS9に関してはUniversal Linksの実装をすすめるか、もしくは
iFrameを使用しないURLschemeを用い、ダイアログを通してアプリを起動してもらうかの2通りとなる。
ただし、後者を用いたばあい、アプリがない場合は「ページを開けません」というエラーダイアログが出る形となり、
エラーダイアログ画面が止まる事で、setTimeoutを使用したストア遷移が想定通りに動かないので注意。
バグっぽい抜け道
色々実装をかえながら試したところ、
aタグを使い、hrefにURLschemeを入れつつ、onclickでさらにJSを使いiFrameの遷移を重ねて走らせる
事で無理やり遷移させる事は出来た。
ただしダイアログは一瞬表示され、そのあと別タブを開いてから遷移というよくわからない挙動をするので
少しバグっぽい。いつ修正されるかわからない上に、見た目はものすごく不格好な動きとなるので、オススメはしない。
このあたりはもう少し色々実験してみようと思う。
関連記事
http://astone.jeez.jp/urlscheme%e3%81%a7%e3%82%a2%e3%83%97%e3%83%aa%e3%81%ae%e6%9c%89%e7%84%a1%e3%81%ab%e3%82%88%e3%81%a3%e3%81%a6%e6%8c%99%e5%8b%95%e3%82%92%e5%a4%89%e3%81%88%e3%82%8b/http://astone.jeez.jp/wp-content/uploads/2015/10/198H.jpghttp://astone.jeez.jp/wp-content/uploads/2015/10/198H-150x150.jpgProgrammingAndroid,HTML,HTML5,iOS,JavaScript,URLscheme,ディープリンク
Fatal error: Allowed memory size of 268435456 bytes exhausted (tried to allocate 17609 bytes) in /home/milksoap/www/_itblog/wp-content/plugins/crayon-syntax-highlighter/crayon_wp.class.php on line 854