URLスキームを利用して、アプリが入ってたらアプリ起動、入ってなかったらストアへ！を実現。 #JavaScript

概要

アプリを作った後に、アプリのストアURLをシェアしたりしますよね？
もしそのリンクを開いた時に

PCユーザーならアプリの公式HPへ飛ばす
Androidユーザーかつアプリが入っていたらアプリを起動
Androidユーザーかつアプリが入っていなかったらアプリのストアを表示
iOSユーザーかつアプリが入っていたらアプリを起動
iOSユーザーかつアプリが入っていなかったらアプリのストアを表示

というのを実現出来たら便利じゃないですか？

事前準備

まず、Android、iOSのアプリはURLスキームを使えるようにしておいてください。
このあたりの説明は割愛します。

あとは、アプリの公式HPとかを作ってください。
ココらへんも頑張ればできるよ！頑張れ！

プログラム

以下のプログラムを書いてサーバーにアップします。
あとは、シェアするときに下記のファイルを開くURLをシェアすればおk。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>アプリ起動サンプル</title>
</head>
<body>

    <div style="width: 0; height: 0; overflow: hidden;">
        <iframe id="launch_frame" name="launch_frame"> </iframe>
    </div>

    <a href="公式サイトのURLとかここに入れるべし！">サイトを開く</a>

    <script>
        // アプリを開く。アプリがインストールされていなければサイトを開く。
        function launchApp() {
            var IOS_SCHEME = 'iOSのURLスキームをここに入れるべし！';
            var IOS_STORE = 'iOSのストアURLをここに入れるべし！';
            var ANDROID_SCHEME = 'AndroidのURLスキームをここに入れるべし！';
            var ANDROID_PACKAGE = 'Androidのパッケージ名をここに入れるべし！';
            var PC_SITE = '公式サイトのURLとかここに入れるべし！'

            var userAgent = navigator.userAgent.toLowerCase();
            // iPhone端末ならアプリを開くかApp Storeを開く。
            if (userAgent.search(/iphone|ipad|ipod/) > -1) {
                launch_frame.location.href = IOS_SCHEME + '://';
                setTimeout(function() {
                    location.href = IOS_STORE;
                }, 500);
            }
            // Android端末ならアプリを開くかGoogle Playを開く。
            else if (userAgent.search(/android/) > -1) {
                document.location = 'intent://#Intent;scheme=' + ANDROID_SCHEME
                        + ';package=' + ANDROID_PACKAGE + ';end';
            }
            // その他・不明・PCなどの場合はサイトを開く。
            else {
                document.location = PC_SITE;
            }
        }

        // ページ読み込み時に実行
        window.onload = function() {
            launchApp();
        }
    </script>
</body>
</html>

最後に

もし、きちんと動かなかったらごめんなさい。
その時はコメントとかください！