HTML
JavaScript
Android
iOS
URLスキーム

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>


最後に

もし、きちんと動かなかったらごめんなさい。

その時はコメントとかください!