312
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

updated at

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

概要

アプリを作った後に、アプリのストア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>

最後に

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
312
Help us understand the problem. What are the problem?