【無料】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

One link or QR code to apps on App Store, Google Play, and more
Simplifyappdownloadswithonelink.toallappstores.Shortlinkgeneratorforappdownloads.

長所

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

短所

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

adjust.com

Accelerate your app’s growth with Adjust | Adjust
Adjustisyourend-to-endsolutionforeverystageoftheappmarketingjourney.Measure,optimize,andscaleappgrowthacrossplatformswithouraward-winningtechnology.
スクリーンショット 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 | Home of QR | The free QR code generator
OurfreeQRcodegenerator!TryourpowerfulfreeQrcodegeneratorandletyourimaginationguideyourcreationwithourpowerfultool.Logo,backgroundimage,pre-madetemplate,youtube,...

もしくは↓
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をコピーしました