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

More than 1 year has passed since last update.

概要

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

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

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

事前準備

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

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

プログラム

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

<html lang="ja">
<meta charset="UTF-8">
<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>

最後に

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