QRコードを読み込んだら、UAを判定し、その後アプリの有無でアプリを起動かアプリストアに移動してほしい。jsで。

今日は結局出来なかったし、出来なかったことを某社のヤツに煽られためっちゃ悔しい一件があったんですが、途中までは書いたので記しておきます。
ネットの誰かの助けになればいいし、いつか続き書ければいいし。某社への憤りを忘れないために。
※最後まで読んでも解決はしていません。

・やりたかったこと
QRコードを読み込んだら、UAを判定し、その後アプリの有無でアプリを起動かアプリストアに移動してほしい。jsで。

まずUA判定!これは結構楽だったね。みんな散々やってきたねUA判定。

// リダイレクトするURLを指定
const iphoneURL = "https://ほげほげ.com/iphone";
const androidURL = "https://ほげほげ.com/android";
const otherURL = "https://ほげほげ.com/other";

// ユーザーエージェントを取得
const userAgent = navigator.userAgent.toLowerCase();

// デバイスを判別してリダイレクト
if (/iphone|ipad|ipod/.test(userAgent)) {
    // iPhoneまたはiOSデバイス
    window.location.href = iphoneURL;
} else if (/android/.test(userAgent)) {
    // Androidデバイス
    window.location.href = androidURL;
} else {
    // その他のデバイス
    window.location.href = otherURL;
}

はいこちら一発です。
iPhoneなのか、Androidなのか、その他なのかで分岐させます。これはもー大丈夫だね。

で、移動後

// アプリのURLスキーム(カスタムスキームまたはユニバーサルリンク)
const appUrl = "アプリ起動用のスキーム";
const appStoreUrl = "アプリのストアURL";

// アプリの存在を確認し起動を試みる
function openAppOrRedirect() {
    const timeout = 1500; // 判定用のタイムアウト(ミリ秒)
    const start = Date.now();

    // アプリを開く試み
    const iframe = document.createElement("iframe");
    iframe.style.display = "none";
    iframe.src = appUrl;
    document.body.appendChild(iframe);

    // タイムアウト後、アプリが開かれていないとApp Storeに誘導
    setTimeout(() => {
        const elapsed = Date.now() - start;

        // アプリが開けていないと判断
        if (elapsed < timeout + 100) {
            window.location.href = appStoreUrl;
        }

        document.body.removeChild(iframe);
    }, timeout);
}

// ページ読み込み時に実行(必要に応じて変更)
document.addEventListener("DOMContentLoaded", openAppOrRedirect);

アプリストアは無事開くんだけど、アプリが起動しね~~~~
どうしたらいいんだよ~~~~~
※もちろんユニバーサルリンクにしたらいいことはわかっているぜ。予算と時間がないんだぜ。

その後書いたやつ

(function () {
    // カスタムスキームのURL
    const appScheme = "カスタムスキームのURL";
    // アプリストアのURL
    const appStoreURL = "アプリのストアURL";

    // タイムアウトを利用してアプリがインストールされていない場合を検出
    const timeout = setTimeout(function () {
        // アプリが開かれなかった場合、アプリストアへリダイレクト
        window.location.href = appStoreURL;
    }, 2000); // 2秒後にリダイレクト

    // カスタムスキームでアプリを起動
    window.location.href = appScheme;

    // ページ遷移が成功した場合、タイムアウトをキャンセル
    window.addEventListener("blur", function () {
        clearTimeout(timeout);
    });
})();

今度はアプリは起動した!!!が!!!その喜びもつかの間、ストアに移動してしまった…
最後のタイムアウトキャンセルがきいてね~んかな~

(function () {
    // カスタムスキームのURL
    const appScheme = "アプリ起動用のスキーム";
    // アプリストアのURL
    const appStoreURL = "アプリのストアURL";

    // アプリがインストールされているかどうかを判定するフラグ
    let isAppOpened = false;

    // アプリ起動を試みる
    const iframe = document.createElement("iframe");
    iframe.style.display = "none";
    iframe.src = appScheme;

    // タイマーを設定し、アプリがインストールされていない場合の処理を行う
    const timeout = setTimeout(function () {
        if (!isAppOpened) {
            // アプリストアへリダイレクト
            window.location.href = appStoreURL;
        }
    }, 2000); // 2秒後にアプリストアにリダイレクト

    // `blur` イベントでアプリ起動を検知
    window.addEventListener("blur", function () {
        isAppOpened = true; // アプリが起動していることを確認
        clearTimeout(timeout); // タイムアウトを解除
    });

    // カスタムスキームを起動
    document.body.appendChild(iframe);

    // 安全のため iframe を少し遅れて削除
    setTimeout(() => {
        document.body.removeChild(iframe);
    }, 3000);
})();

アプリが起動する前にストアに移動した!だめだよ~。
アプリ起動してくれ~~~~

(function () {
    // カスタムスキームのURL
    const appScheme = "アプリ起動用のスキーム";
    // アプリストアのURL
    const appStoreURL = "アプリのストアURL";

    // タイムアウトを利用してアプリがインストールされていない場合を検出
    const timeout = setTimeout(function () {
        // アプリが開かれなかった場合、アプリストアへリダイレクト
        window.location.href = appStoreURL;
    }, 2000); // 2秒後にリダイレクト

    // カスタムスキームでアプリを起動
    window.location.href = appScheme;

    // ページ遷移が成功した場合、タイムアウトをキャンセル
    window.addEventListener("pagehide", function () {
        clearTimeout(timeout); // ユーザーがアプリに移動したときリダイレクトを防ぐ
    });
})();

これはちょっと正解に近づいた気がした!
アプリは起動する!
アプリがインストールされていない場合「ページを開けません。アドレスが無効です。」というダイアログが出る。これのOKを押すとストアに移動するという流れだ。メッセージが嫌すぎるので、これを出さないかメッセージを変更したい。

(function () {
    const appScheme = "アプリ起動用のスキーム";
    const appStoreURL = "アプリのストアURL";

    const timeout = setTimeout(function () {
        window.location.href = appStoreURL; // アプリストアへリダイレクト
    }, 1500); // 1.5秒後にストアにリダイレクト

    // 隠しリンクを作成
    const link = document.createElement("a");
    link.href = appScheme;
    link.style.display = "none";
    document.body.appendChild(link);

    // 自動でリンクをクリック
    link.click();

    // ページ遷移が成功した場合、タイムアウトをキャンセル
    window.addEventListener("pagehide", function () {
        clearTimeout(timeout);
    });

    // 不要になったリンクを削除
    setTimeout(() => {
        document.body.removeChild(link);
    }, 3000);
})();

ダイアログにはOKを押した体で即移動しろという感じ。力技~
しかしそんな想像通りにはことは運ばず失敗。なんでだよ~~悪くないと思ったのにな~。

一旦巻き戻す

(function () {
    // カスタムスキームのURL
    const appScheme = "アプリ起動用のスキーム";
    // アプリストアのURL
    const appStoreURL = "アプリのストアURL";

    // タイムアウトを利用してアプリがインストールされていない場合を検出
    const timeout = setTimeout(function () {
        // アプリが開かれなかった場合、アプリストアへリダイレクト
        window.location.href = appStoreURL;
    }, 20000); // 2秒後にリダイレクト

    // カスタムスキームでアプリを起動
    window.location.href = appScheme;

    // ページ遷移が成功した場合、タイムアウトをキャンセル
    window.addEventListener("pagehide", function () {
        clearTimeout(timeout); // ユーザーがアプリに移動したときリダイレクトを防ぐ
    });
})();

ここまでは悪くないんだよね。
と、ここらへんでタイムアップ。
もだもだ書いたけど、結論jsでアプリのインストール有無判定は出来ないんじゃないかって話です。出来る人いたら教えてください…やりたい…

この投稿へのコメント

コメントはありません。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL