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

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

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

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

https://kaedeee.com/android-ios-one-qr/

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

QRはこれ

![qr.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1900756/c799fd06-5b22-92dc-decf-7acf921630d0.png)



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

#One Link
https://onelink.to

![スクリーンショット 2021-11-16 12.55.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1900756/482b8b70-7798-bfcc-ffb4-348b7541b28c.png)

**長所**

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

**短所**

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



##adjust.com

https://adjust.com

![スクリーンショット 2021-11-16 12.57.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1900756/ab7bef91-d5b2-8ba3-ad24-146d152c1c3b.png)

**長所**

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

**短所**

* 有料


## QRのススメ

https://qr.quel.jp/form_smartlink.php

![スクリーンショット 2021-11-16 12.58.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1900756/6f37d7ed-ecd9-7068-de4e-273d485adb62.png)

**長所**

* 無料。
* Made in Japan

**短所**

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

##スマートQR

https://qr.infolio.co.jp/type-furiwake.php

![スクリーンショット 2021-11-16 12.59.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1900756/9097c6cd-6f1e-58ba-3afb-4e993d9f6a60.png)

**長所**

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

**短所**

* 有償。



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

#自作する。

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

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

1. 無料ドメインを獲得（.tkなど、freenom.com というフリードメインなど）
1. 静的ホスティングサービスへの登録（Github pages, GCPなど、htmlをアップロードできたらなんでもいいです。これらは無料ドメインを発行してくれると思うので、1はこだわりなければ飛ばして）
1. htmlをアップロード。
1. 無料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>

```

## QRコードジェネレーター

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

![スクリーンショット 2021-11-16 13.29.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1900756/66a90445-0912-7b4d-1220-b7af87fdcc43.png)


https://www.unitag.io/qrcode

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


#終わりますねぇ！

https://kaedeee.com/android-ios-one-qr/

参考サイト

https://stackoverflow.com/questions/35430336/redirect-users-to-itunes-app-store-or-google-play-store/39749991
https://qiita.com/masaru1125/items/6d1ff57a9e11aea67555![qr.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1900756/a5480146-3262-7e7e-257b-51b432792b93.png)