【無料】Android, iOS を自動判定するURLリンク(QRコード)を作る。OS別のサイトに飛ばす。

プログラミング

一つのリンクで、OS判定して、

  • iOS
    • AppStoreリンクへ。
  • Android
    • GooglePlayリンクへ。
  • 他OS(Windows,Mac OSなど)
    • 公式サイトリンクへ。

飛ぶようなリンク(もっと言えばQRコード)が欲しい!
とのことで、「無料」で制作してみました。

こんな感じです。
https://games.kaedeee.com

QRはこれ

qr.png

ちなみに、既にあるツールとして、4つご紹介しますが、個人開発者としては、どれも一長一短という感じ。
お先にその4つをご紹介いたします。

既存ツール

One Link

Onelink.to - One link or QR code to App Store and Google Play
Simplify app downloads with onelink.to all app stores. Short link generator and QR codes for app downloads on App Store ...

長所

  • 無料
  • 振り分けのOSがかなり豊富

短所

  • 一つのGoogleアカウントに一つのQRだけ..?
  • アクセスが急増すると、なぜか落ちた。

adjust.com

Accelerate your app’s growth with Adjust | Adjust
Adjust is your end-to-end solution for every stage of the app marketing journey. Measure, optimize, and scale app growth...
スクリーンショット 2021-11-16 12.57.52.png

長所

  • LINEやYahoo!が採用している。
  • アクセス数などのアナリティクスを確認できる。

短所

  • 有料

QRのススメ

振り分けQR/QRコード作成【無料】QRのススメ
QRコードを無料で作成できます。携帯・スマホ・タブレットの振り分け機能付きQRコードです。商用利用も無期限・無制限で、登録も不要。初心者からプロまで簡単に使えます。
スクリーンショット 2021-11-16 12.58.56.png

長所

  • 無料。
  • Made in Japan

短所

  • 自動振り分けではなく途中で広告が入る。
  • 有償版にしないと使いにくい。

スマートQR

振り分けQRコードについて/スマートQR
業務用のQRコードを無料で作成できるサイトです。所定の内容でメールを起動してもらうためのQRコードです。アクセス集計、動作内容のダイナミックな変更など、マーケティングや集客に最適です。
スクリーンショット 2021-11-16 12.59.15.png

長所

  • 先程のQRのススメ。の有償版。
  • Made in Japan

短所

  • 有償。

以上、既存ツールのご紹介でした。

自作する。

さあ、自作してみましょう。

流れとしては、
既にドメインやサーバーを借りている人は三番から〜

  1. 無料ドメインを獲得(.tkなど、freenom.com というフリードメインなど)
  2. 静的ホスティングサービスへの登録(Github pages, GCPなど、htmlをアップロードできたらなんでもいいです。これらは無料ドメインを発行してくれると思うので、1はこだわりなければ飛ばして)
  3. htmlをアップロード。
  4. 無料QRコードジェネレーターを活用。

これだけです。

index.html

該当サーバー等に、下記 index.html をアップロードする。
下記では、JavaScriptによって判定&飛ばしています。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
<script>
function getMobileOperatingSystem() {
  var userAgent = navigator.userAgent || navigator.vendor || window.opera;

      // Windows Phone must come first because its UA also contains "Android"
    if (/windows phone/i.test(userAgent)) {
        return "Windows Phone";
    }

    if (/android/i.test(userAgent)) {
        return "Android";
    }

    // iOS detection from: http://stackoverflow.com/a/9039885/177710
    if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
        return "iOS";
    }

    return "unknown";
}</script>

<script>
function DetectAndServe(){
    let os = getMobileOperatingSystem();
    if (os == "Android") {
        window.location.href = "http://www.Androidexample.com"; 
    } else if (os == "iOS") {
        window.location.href = "http://www.IOSexample.com";
    } else if (os == "Windows Phone") {
        window.location.href = "http://www.WindowsPhoneexample.com";
    } else {
        window.location.href = "http://www.NowherLandexample.com";
    }
}
</script>
</head>
<body onload="DetectAndServe()">
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
<script>
function getMobileOperatingSystem() {
  var userAgent = navigator.userAgent || navigator.vendor || window.opera;

      // Windows Phone must come first because its UA also contains "Android"
    if (/windows phone/i.test(userAgent)) {
        return "Windows Phone";
    }

    if (/android/i.test(userAgent)) {
        return "Android";
    }

    // iOS detection from: http://stackoverflow.com/a/9039885/177710
    if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
        return "iOS";
    }

    return "unknown";
}</script>

<script>
function DetectAndServe(){
    let os = getMobileOperatingSystem();
    if (os == "Android") {
        window.location.href = "http://www.Androidexample.com"; 
    } else if (os == "iOS") {
        window.location.href = "http://www.IOSexample.com";
    } else if (os == "Windows Phone") {
        window.location.href = "http://www.WindowsPhoneexample.com";
    } else {
        window.location.href = "http://www.NowherLandexample.com";
    }
}
</script>
</head>
<body onload="DetectAndServe()">
</body>
</html>

QRコードジェネレーター

おすすめのサイトは以下です。

スクリーンショット 2021-11-16 13.29.38.png
Unitag | QR codes solutions for Enterprises | The free QR code generator
Our free QR code generator! Try our powerful free Qr code generator and let your imagination guide your creation with ou...

もしくは↓
https://www.websiteplanet.com/ja/webtools/free-qr-code-generator/

終わりますねぇ!

参考サイト

https://stackoverflow.com/questions/35430336/redirect-users-to-itunes-app-store-or-google-play-store/39749991
https://qiita.com/masaru1125/items/6d1ff57a9e11aea67555qr.png

コメント

タイトルとURLをコピーしました