たった26行でiPhone用のQRコード/JANバーコードを読み取るHTML/JavaScriptWebアプリを書く
BarcodesScanner(QRコード用) またはPic2shop(JAN用)を予めインストールしておいてください。
解説
iPhone/iPadのiOS用のmobile Safariにおいて動くWebアプリからカメラでQRコードを読み取るには大きく分けて2つ方法があります。
一つはiOS6よりサポートされたinputのfile要素を利用してカメラまたはカメラロールよりサーバーに画像を送ってサーバでデコードする方法。これはSafariから抜けなくていい反面、フォーカスをきっちりあわせてシャッターを押さなければいけなかったり、転送量が多くなるなどデメリットもあります。
もう一つはスキーム(zxing://...)に対応したネイティブアプリに転送して結果をhttpスキームのコールバックで受け取る方法です。この方法はコールバック時にSafariのタブが一枚余計に開いてしまいますが、ローカルだけで完結できる上、ネイティブアプリが自動的にカメラフォーカスをあわせてくれる為、操作性も高くなります。
スキームに対応したネイティブアプリはzxingを使ったBarcodesScannerが代表的ですが、残念ながらJANコード等の一次元バーコードには対応していません。一次元バーコードを使うにはPic2shopを使う必要があります。こちらは反対にQRコードのスキーム転送には対応していない様です．
それぞれのスキームを呼び出すサンプルプログラムを掲載しました。予め双方のアプリをインストールの上、動作をお試しください。
また拙作 バーコード価格比較もURLスキームに対応しております。こちらはEAN専用でIOS/Android共通対応となります。使い方はAppStoreならびにPlaystoreの紹介文を参照しえtください。
作例
ソースコード
<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>
