URLスキームからのアプリ起動・アプリが無ければショップサイトを開く(iOS/Android) | GROUP DEV BLOG

2014.10.14

プログラミング

URLスキームからのアプリ起動・アプリが無ければショップサイトを開く(iOS/Android)

こんにちは、JTです。

【動作概要】
・UAからiOS/Androidを判定してそれぞれの処理へ
・URLスキームを利用して、facebookアプリで該当のページ(ディープリンク)を開く。
・アプリがインストールされていなければAppStore/GooglePlayのアプリダウンロードサイトを開く。

【メモ】
・iOS側の処理は古くから利用されているもので、アプリが起動していなければ300ミリsec後にショップサイトへ遷移するというもの。
・Androidでは上記処理をiframe内で実行する必要があるが、Chrome・標準ブラウザ（バージョン25(2013年2月）以降）では以下の様な書式で呼び出すことを推奨している。こっちの方が簡単。

intent:
HOST/URI-path // Optional host
#Intent;
package=[string];
action=[string];
category=[string];
component=[string];
scheme=[string];
end;

例）

<a href="intent://profile/341219895930508#Intent;scheme=fb;package=com.facebook.katana;end">facebookでテクノモバイルのページを開く</a>

【サンプルコード】

<html>
<head>
<title>インストール判定テスト(iOS/Android共存)</title>
</head>
<body>

    <a href="#" onclick="launchApp()">[facebookでテクノモバイルのページを開く]</a>

<script>

    function launchApp() {
        if (
          navigator.userAgent.indexOf('iPhone') > 0
          || navigator.userAgent.indexOf('iPad') > 0
          || navigator.userAgent.indexOf('iPod') > 0
        )
        {
           document.location = "fb://profile/341219895930508";
           var time = (new Date()).getTime();
           setTimeout(function(){
               var now = (new Date()).getTime();

               if((now-time)<400) {
                       document.location = "https://itunes.apple.com/jp/app/facebook/id284882215?mt=8&uo=4";
               }
           }, 300);
        }
        else if(navigator.userAgent.indexOf('Android') > 0)
        {
                        document.location = "intent://profile/341219895930508#Intent;scheme=fb;package=com.facebook.katana;end";
        }

    };

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

【参考サイト】
# iOS部分
http://iphone-dev.g.hatena.ne.jp/laiso/20120625/1340615723

# Android部分
https://developer.chrome.com/multidevice/android/intents

# スマートフォン（iPhone/Android）のページ内振り分け
http://rfs.jp/sb/javascript/js_lab/smartphone_user-agent.html

【記事への感想募集中！】

記事への感想・ご意見がありましたら、ぜひフォームからご投稿ください！