Safariのウェブサイト上からJavaScriptで「アプリがインストールされてなかったらApp Storeへ誘導する」を実現する

これできないしょーとずっと思ってたんだけどstackoverflow.com で無理矢理実現している頭のやわかい人がいたので紹介する。

ようは「特定のアプリをインストールしているかどうか」をSafariからチェックするのではなく「特定のアプリを起動するURLが開けていないことを画面遷移状態で監視し、インストールされていないと推測する」というアプローチみたい。

こんな感じ。

<html lang="ja">
<meta charset="UTF-8">
<body>

    <a href="#" onclick="launchApp(&#39;myapp:?c=mypage&#39;)">アプリを起動する</a>

<script>

    function launchApp(url) {
        document.location = url;
        var time = (new Date()).getTime();
        setTimeout(function(){
            var now = (new Date()).getTime();

            if((now-time)<400) {
                if(confirm("アプリがインストールされていません。今ダウンロードしますか?")){
                    document.location = &#39;http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=293049283&mt=8&uo=6&#39;;
                }
            }
        }, 300);
    };

</script>
</body>
</html>

`myapp:`〜 のところを`mailto:`〜 `sms:`〜とかにすると動作の違いが確認できるはず。

setTimeoutに渡す関数内で400msチェックしているのは、カスタムURLが開けて→元の画面に戻ってきた時にポップアップを抑制する為の処理になっている。

Mon Jun 25 19:03:10 JST 2012

よく考えたらアプリを起動する段階にならないと上のやつは使えないので、ランディングページにアクセスした時点でユーザーのインストール状態によって内容を変える(既存ユーザーには期間イベント情報出すとか)、とかの要件だと無理か。

なので「Safariからアプリを起動できない時にダウンロード用のポップアップを出す」が正確な見出しだった。しまった。

一旦アプリを起動してSafariに戻ってくるようキックバックするっていうのも考えられるけど、ユーザー目線だとなぞの挙動でしかないなあ。

iOS6 Safariでは同等の機能があるらしい

http://www.youtube.com/watch?list=UUE_M8A5yxnLfW0KghEeajjw&feature=player_detailpage&v=9Gn4sXgZbBM#t=5343s

(まだ未確認っす)

iframe版

アプリがインストールされてなかったらApp Storeへ誘導する - jsdo.it - Share JavaScript, HTML5 and CSS
http://jsdo.it/kyo_ago/4DMg