JavaScript vol.1

こんにちは、あじゅ~くです。

というわけで、
最近ホットなやつ
いってみたいと思います。

今回のお題は…

ブラウザで指定ページにアクセスした際に、
Android or iOS のOS判定を行って
Google Play or Apple Storeの
インストール or 起動に飛ばす!
※アプリ側が直接起動に対応している場合は、
そのままアプリが起動される…はず

DESU!

Android iOS 判定

<script>
    var ua = navigator.userAgent.toLowerCase();
    if (ua.search(/iphone|ipad|ipod/) > -1) {
        // iOS !
    }
    else if (ua.search(/android/) > -1) {
        // Android !
    }
    else {
        // 他(´・ω・`)
    }
</script>

はい、超かんたんですね。

Google Play へ飛ばす

<script>
    // アプリのパッケージ名を指定
    var ANDROID_APP_PACKAGE_NAME = 'xx.xx.xxxxxxx.xxxx';
    var ANDROID_APP_SCHEME = 'https://play.google.com/store/apps/details?id=' + ANDROID_APP_PACKAGE_NAME;
    document.location = 'intent://#Intent;scheme=' + ANDROID_APP_SCHEME +
                        ';package=' + ANDROID_APP_PACKAGE_NAME + ';end';
</script>

Apple Store へ飛ばす

<script>
    // アプリ名を指定
    var IOS_APP_NAME = 'xxxxxxxxxxx';
    // アプリIDを指定
    var IOS_APP_ID = 'xxxxxxxxxxx';
    setTimeout(function() {
        location.href =
            'itmss://itunes.apple.com/us/app/' + IOS_APP_NAME + '/id' + IOS_APP_ID +
            '?mt=8&ign-mpt=uo%3D4';
    }, 200);
</script>

まとめてクラス化する

こんな感じでどうでしょ?
※MITライセンス – ご自由に

/**
 * Copyright © World of Azjuke All Rights Reserved.
 * https://azjuke.com
 * filename : store_dispatcher.js
 *
 * Released under the MIT license
 */
/**
 * コンストラクタ
 * @param {Function} funcError エラー時関数
 */
StoreDispatcher = function(funcError) {
    // UserAgentをゲットしとく
    this._user_agent = navigator.userAgent.toLowerCase();
    this._and_package_name = null;
    this._ios_app_id = null;
    this._ios_app_name = null;
    this._funcError = funcError;
}

/**
 * Goolge Playへ飛ばすための
 * Androidのパッケージ名を設定する
 * @param {String} packageName パッケージ名
 */
StoreDispatcher.prototype.setAndroidInfo = function(packageName) {
    this._and_package_name = packageName;
    return this;
}

/**
 * Apple Storeの情報を設定する
 * @param {String} appID アプリケーションID
 * @param {String} appName アプリ名
 */
StoreDispatcher.prototype.setIOSInfo = function(appID, appName) {
    this._ios_app_id = appID;
    this._ios_app_name = appName;
    return this;
}

/**
 * User Agent 設定
 * @param {String} ua ユーザエージェント文字列
 */
StoreDispatcher.prototype.setUserAgent = function(ua) {
    this._user_agent = ua;
    return this;
}

/**
 * ユーザエージェントがAndroidであることを確認する.
 */
StoreDispatcher.prototype.isAndroid = function() {
    return (this._user_agent.indexOf('android') != -1);
}

/**
 * ユーザエージェントがIOSであることを確認する
 */
StoreDispatcher.prototype.isIOS = function() {
    return (this._user_agent.search(/iphone|ipad|ipod/) > -1);
}

/**
 * ストアへ飛ばす処理を実行する
 * @param {String} unKnownDeviceURL Android iOS 以外のブラウザでアクセスした場合のURL
 */
StoreDispatcher.prototype.launchApp = function(unKnownDeviceURL) {
    var self = this;
    if (this.isIOS()) {
        if( self._ios_app_name == null || self._ios_app_id == null ) {
            if( self._funcError != null ) {
                self._funcError('params error : iOS');
            }
            return;
        }
        setTimeout(function() {
            location.href =
                'itmss://itunes.apple.com/us/app/' + self._ios_app_name + '/id' + self._ios_app_id +
                '?mt=8&ign-mpt=uo%3D4';
        }, 200);
    } else if (this.isAndroid()) {
        if( self._and_package_name == null ) {
            if( self._funcError != null ) {
                self._funcError('params error : Android');
            }
            return;
        }
        document.location =
            'intent://#Intent;scheme=https://play.google.com/store/apps/details?id=' + self._and_package_name +
            ';package=' + self._and_package_name + ';end';
    }
    // その他・不明・PCなどの場合は指定したURLへ
    else {
        if( unKnownDeviceURL != null )
            document.location = unKnownDeviceURL;
    }
};

実践!(使ってみよう)

例「Youtubeアプリ」の
ダウンロードを表示する

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Store Dispacher Test</title>
    <!-- store_dispatcher.js -->
    <script src="js/store_dispatcher.js"></script>
    <script>
        // エラー時
        var funcError = function(errMsg) {
            alert(errMsg);
        };
        // クラス生成
        var _sd = new StoreDispatcher(funcError);
        // Google Play
        _sd.setAndroidInfo('com.google.android.youtube');
        // Apple Store
        _sd.setIOSInfo('544007664', 'youtube');
    </script>
</head>
<body onload="_sd.launchApp('https://azjuke.com');">
</body>
</html>


2016/10/19 日現在の記事です。

将来的には変わるかもです。

いや、変わってるでしょうね(´・ω・`)

それでは。