314
311

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2015-07-07

概要

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

最後に

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

314
311
6

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
314
311

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?