スキームを用いてユーザーのデバイスに応じたページ遷移

前提・実現したいこと

javascriptを使って、ユーザーのデバイスによってアプリのページに遷移するプログラムを課題としてやっています。
アプリがデバイスにインストールされていたら、アプリを開き、インストールされていなかったらアプリダウンロードページを開かせたいのですがうまくいきません。

発生している問題・エラーメッセージ

iosでページを開いたときに、ページが遷移しません。

該当のソースコード

Java
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>アプリ起動サンプル</title>
6</head>
7<body>
8
9    <div style="width: 0; height: 0; overflow: hidden;">
10        <iframe id="launch_frame" name="launch_frame"> </iframe>
11    </div>
12
13    <a href="https://line.me/ja/">サイトを開く</a>
14
15    <script>
16        // アプリを開く。アプリがインストールされていなければサイトを開く。
17        function launchApp() {
18            var IOS_SCHEME = 'https://line.me/R/';
19            var IOS_STORE = 'https://apps.apple.com/jp/app/line/id443904275';
20            var ANDROID_SCHEME = 'https://line.me/R/';
21            var ANDROID_PACKAGE = 'jp.naver.line.android';
22            var PC_SITE = 'https://line.me/ja/';
23            //var frame = document.getElementById('launch_frame');
24
25            var userAgent = navigator.userAgent.toLowerCase();
26
27-------------自身ではここまでしかわかりませんでした。---------------------------------------------------------------------
28
29            // iPhone端末ならアプリを開くかApp Storeを開く。
30            if (userAgent.search(/iphone|ipad|ipod/) > -1) {
31                launch_frame.location.href = IOS_SCHEME + '://';
32                setTimeout(function() {
33                    location.href = IOS_STORE;
34                }, 500);
35            }
36            // Android端末ならアプリを開くかGoogle Playを開く。
37            else if (userAgent.search(/android/) > -1) {
38                document.location = 'intent://#Intent;scheme=' + ANDROID_SCHEME
39                        + ';package=' + ANDROID_PACKAGE + ';end';
40            }
41            // その他・不明・PCなどの場合はサイトを開く。
42            else {
43                document.location = PC_SITE;
44            }
45        }
46
47        // ページ読み込み時に実行
48        window.onload = function() {
49            launchApp();
50        }
51    </script>
52</body>
53</html>

試したこと

iframeの要素をgetElementByIdで取得して、location.hrefでページを遷移させようとしたのですがだめでした。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

miyabi_pudding

2019/11/05 03:29 編集

アプリがインストールされているかどうかの判別は、どうされているのでしょうか？含め、自身でここまで書いてみたが、ここからがわからない、という、javascriptコードも記載下さい。質問本文にです。

maturyo

2019/11/05 03:57

アプリがインストールされているかの判別はありません。 urlスキームを利用すればアプリがデバイスにインストールされているか、判別してくれると考えていたのですが間違った理解をしているのでしょうか。

miyabi_pudding

2019/11/05 04:22 編集

そのような判別は、単一のURLスキームにアクセスするだけではできません。ひと工夫し、別の発想が必要になります。といった判断も含め、現状のソースコードを掲示していただかないと、回答しようがありません。また、アプリ側ではURLスキーム処理を行なっている、ということでよろしいですか？

miyabi_pudding

2019/11/05 04:25

また、場合によっては、iOS、Swift、Androidの質問タグもつけていただいたほうがいいかも。（アプリ側で処理不十分の場合）

maturyo

2019/11/05 04:48

調査が浅くてすみませんスキームに関して勘違いをしていました。アプリ側のurlスキームは、サンプルページなのもありLINE公式のものを利用しているので、間違っているということはないかと思います。現状のソースコードは、上記のソースコードで全てになります。

miyabi_pudding

2019/11/06 02:36 編集

返事が遅れた上、さらに質問失礼します。 https://qiita.com/kenguy/items/9d9a8b7b6ca8b6984eb9 このページを参考にされてますよね？おそらく。動かない、とか、ダメだった、だけだと状況が全くみえないので、具体的に、アクセスしたが、ページに遷移しない、とか、ブラウザのデベロッパーツールなどを使用して、ログを見て、エラーが出てないか見てください。エラーが出ていた場合は、それを記載下さい。また、スマホ実機で確認されてると思うので、ないかと思いますが、ローカルHTMLをダブルクリックで開いた状態ではないですよね？このコードはおそらく、サーバーないしローカルサーバー上でないと、クロスドメインで動作しないコードとお見受けします。

maturyo

2019/11/06 03:52

いえ、ご丁寧に対応していただき大変感謝しています。上記のサイトを参考にしました、ソースを貼らずに探す手間を掛けてしまい申し訳ございません。デベロッパーツールで確認はしましたが、エラーメッセージはありませんでした。はい、サーバーにアップロードする環境がなくてメールでファイルを携帯に送りローカルで確認しました。なるほどそのようなこともあるんですね、サーバーにアップロードする環境ができたら試してみようと思います。本当にありがとうございます。

miyabi_pudding

2019/11/06 04:42

ああ、それは動きませんね・・・。基本的に、スクリプトからのコントロールは、javascript含め、 iframeの読み込み元のコントロール、 Ajaxアクセスは、クロスドメインでは動作しません。これはセキュリティのためです。よって、ローカルファイル（モバイルデバイスで直接開くのもローカルファイル）はそもそもドメインが存在しないため、クロスドメインになるので、今回のスクリプトは動作しなかったのでしょう。解決されましたら、自己解決を出して、質問を閉じましょう。

maturyo

2019/11/06 04:52

なるほどなるほど。大変勉強になりましたありがとうございます。今サーバーにアップロードしたところ、アプリがインストールされているのにストアページに飛ばされてしましましたが、ページ遷移自体がされない謎はとけました。本当に感謝します。最後まで懇切丁寧に教えていただきありがとうございました。