一つのリンクで、OS判定して、
- iOS
- AppStoreリンクへ。
- Android
- GooglePlayリンクへ。
- 他OS（Windows,Mac OSなど)
- 公式サイトリンクへ。
飛ぶようなリンク（もっと言えばQRコード）が欲しい！
とのことで、「無料」で制作してみました。
こんな感じです。
https://games.kaedeee.com
QRはこれ
ちなみに、既にあるツールとして、4つご紹介しますが、個人開発者としては、どれも一長一短という感じ。
お先にその4つをご紹介いたします。
既存ツール
One Link
One link or QR code to apps on App Store, Google Play, and more
Simplifyappdownloadswithonelink.toallappstores.Shortlinkgeneratorforappdownloads.
onelink.to
長所
- 無料
- 振り分けのOSがかなり豊富
短所
- 一つのGoogleアカウントに一つのQRだけ..?
- アクセスが急増すると、なぜか落ちた。
adjust.com
Accelerate your app’s growth with Adjust | Adjust
Adjustisyourend-to-endsolutionforeverystageoftheappmarketingjourney.Measure,optimize,andscaleappgrowthacrossplatformswithouraward-winningtechnology.
adjust.com
長所
- LINEやYahoo!が採用している。
- アクセス数などのアナリティクスを確認できる。
短所
- 有料
QRのススメ
振り分けQR／QRコード作成【無料】QRのススメ
QRコードを無料で作成できます。携帯・スマホ・タブレットの振り分け機能付きQRコードです。商用利用も無期限・無制限で、登録も不要。初心者からプロまで簡単に使えます。
qr.quel.jp
長所
- 無料。
- Made in Japan
短所
- 自動振り分けではなく途中で広告が入る。
- 有償版にしないと使いにくい。
スマートQR
振り分けQRコードについて／スマートQR
業務用のQRコードを無料で作成できるサイトです。所定の内容でメールを起動してもらうためのQRコードです。アクセス集計、動作内容のダイナミックな変更など、マーケティングや集客に最適です。
qr.infolio.co.jp
長所
- 先程のQRのススメ。の有償版。
- Made in Japan
短所
- 有償。
以上、既存ツールのご紹介でした。
自作する。
さあ、自作してみましょう。
流れとしては、
既にドメインやサーバーを借りている人は三番から〜
- 無料ドメインを獲得（.tkなど、freenom.com というフリードメインなど）
- 静的ホスティングサービスへの登録（Github pages, GCPなど、htmlをアップロードできたらなんでもいいです。これらは無料ドメインを発行してくれると思うので、1はこだわりなければ飛ばして）
- htmlをアップロード。
- 無料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コードジェネレーター
おすすめのサイトは以下です。
Unitag | Home of QR | The free QR code generator
OurfreeQRcodegenerator!TryourpowerfulfreeQrcodegeneratorandletyourimaginationguideyourcreationwithourpowerfultool.Logo,backgroundimage,pre-madetemplate,youtube,...
www.unitag.io
もしくは↓
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/6d1ff57a9e11aea67555
コメント