[js]QRから飛んだ先でOS別の条件分岐を仕込めばいいんじゃないかという思いつき

DMとかでどうか。

どういう話か

スマホアプリを作るじゃないですか。

日本の世の中はiOSとandroidじゃないですか。

両対応させようとすれば、それぞれのアプリのダウンロードはそれぞれのストアからになる。

ということは遷移先(URL)は2つあるということになる。

それぞれのURLはベタ打ちするとめんどくさいから、WEBページをだったらリンクを仕込むし紙媒体とかならQRコードから読ませたりする。

QRは複数設定すると専有面積が増えるし、あんまり好きじゃないし、人はDMなんかしっかり読み込まないので極力シンプルにしたい。

だったら、QRから飛んだ先でOS別に転送をかけちゃえばよくないか。

そういう話。

サンプル

UAを拾って割り振るなんてスマホが出始めたとき以来ですね。
なつかしい。

php

<?php
ob_start();
$ua = $_SERVER['HTTP_USER_AGENT'];
if ((strpos($ua, 'Android') !== false) && (strpos($ua, 'Mobile') !== false)) {
    // Android端末
    header('Location: GooglePlayURL');
    exit();
} elseif (strpos($ua, 'iPhone') !== false || strpos($ua, 'iPad') !== false || strpos($ua, 'iPod') !== false) {
    // iOS端末(iPhone/iPad)
    header('Location: AppStoreURL');
    exit();
}
ob_end_flush();

header()を使うからページの一番先頭に仕込むとか、出力バッファリングで調整するとか気をつける。

js(jQuery)

jQueryは発火の前にライブラリの読み込みとかあるから、バニラjsで作ったほうが処理が早くていいと思う。

const ua = navigator.userAgent.toLowerCase();
const isAndroid = /android/i.test(ua);
const isiOS = /iphone|ipad|ipod/i.test(ua);

if (isiOS) {
    window.location.href = 'AppStoreURL';
} else if (isAndroid) {
    window.location.href = 'GooglePlayURL';
}

jQueryはこんな感じ。

$(function() {
    var ua = navigator.userAgent.toLowerCase();
    var isiOS = (ua.indexOf('iphone') > 0 || ua.indexOf('ipad') > 0 || ua.indexOf('ipod') > 0);
    var isAndroid = (ua.indexOf('android') > 0);

    if (isiOS) {
        window.location.href = 'AppStoreURL';
    } else if (isAndroid) {
        window.location.href = 'GooglePlayURL';
    }
});

注意点というか問題点というか

phpもjsも、ifとelseifだけ使っているという点に注目する必要がある。

iOS・android以外からのアクセスについて考慮していない。

スマホのシェアの大半はiOSとandroidだけど、世の中には他のOSも存在する。
軽く調べたら世界・日本共に1%未満みたいだけど、ガチるならカバーしたほうがいい。

というのは、可能性としてPCからのアクセスもあるし、イレギュラーは無視できないよねという話で。

だからどのようにQRを使用する(例えばビラ配布だからスマホ想定だけで良しとするとか)かを考えておかないとね、みたいなね。

ガチガチにするなら個別のQRを記載するべき。

コメント

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