こんにちは、あじゅ~くです。
というわけで、
最近ホットなやつ
いってみたいと思います。
今回のお題は…
ブラウザで指定ページにアクセスした際に、
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 日現在の記事です。
将来的には変わるかもです。
いや、変わってるでしょうね(´・ω・`)
それでは。