たった26行でiPhone用のQRコード/JANバーコードを読み取るHTML/JavaScriptWebアプリを書く

BarcodesScanner(QRコード用) またはPic2shop(JAN用)を予めインストールしておいてください。

JAN(EAN)のサンプル

解説

iPhone/iPadのiOS用のmobile Safariにおいて動くWebアプリからカメラでQRコードを読み取るには大きく分けて2つ方法があります。

一つはiOS6よりサポートされたinputのfile要素を利用してカメラまたはカメラロールよりサーバーに画像を送ってサーバでデコードする方法。これはSafariから抜けなくていい反面、フォーカスをきっちりあわせてシャッターを押さなければいけなかったり、転送量が多くなるなどデメリットもあります。

もう一つはスキーム(zxing://...)に対応したネイティブアプリに転送して結果をhttpスキームのコールバックで受け取る方法です。この方法はコールバック時にSafariのタブが一枚余計に開いてしまいますが、ローカルだけで完結できる上、ネイティブアプリが自動的にカメラフォーカスをあわせてくれる為、操作性も高くなります。

スキームに対応したネイティブアプリはzxingを使ったBarcodesScannerが代表的ですが、残念ながらJANコード等の一次元バーコードには対応していません。一次元バーコードを使うにはPic2shopを使う必要があります。こちらは反対にQRコードのスキーム転送には対応していない様です.

それぞれのスキームを呼び出すサンプルプログラムを掲載しました。予め双方のアプリをインストールの上、動作をお試しください。

作例

ソースコード

<html><body>

<input type='text' id='result' size='40' ></input>
<input type='button' value='QRCODE by BarcodeScanner' onclick='scanQR()' ></input>
<input type='button' value='JANCODE by Pic2shop' onclick='scanJAN()' ></input>

<script>
function scanQR(){
    var s='zxing://scan/?ret='
    s+=encodeURIComponent(location.origin+location.pathname+'?r={CODE}')
    document.location=s
}

function scanJAN(){
    var s='pic2shop://scan?callback='+encodeURIComponent(location.origin+location.pathname+'?r=EAN')
    document.location=s
}

window.addEventListener('DOMContentLoaded',function(){
    function getParameterByName(name) {
        name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
        var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
        return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
    }

    var r=getParameterByName('r')
    if(r) getElementById('result').value=r
},false)
</script>

</body></html>

この記事を見た人がよく読んでいる記事

カナシスコム > 節約テクノロジ > たった26行でiPhone用のQRコード/JANバーコードを読み取るHTML/JavaScriptWebアプリを書く