JavaScriptを使用した「バーコードスキャナー」アプリについて
解決したいこと
Monacaというツールにて、「バーコードスキャナー」というアプリのサンプルがありますが、このサンプルを使用してバーコードの読み取りと”表示”を行いたいのですが、
「framework7」というフレームワークを使用しており、ピュアなJavaScriptしか触れたことがない私には分からないことが多くて困っています。
そこで、このアプリに読み取り結果の他に「バーコードの表示」を加えるにはどうすればよいか教えていただきたいです。
※１３桁のコードのみの使用を考えています。（QRコードは不要）
※「framework7」はアプリ開発に特化したライブラリに近いものらしく「Vue.js」をベースにしているようです
該当するソースコード
<template>
<div class="page">
<div class="navbar">
<div class="navbar-bg"></div>
<div class="navbar-inner sliding">
<div class="title">スキャン</div>
</div>
</div>
<div class="page-content">
<div class="block-title">スキャンしてください</div>
<button class="button" @click=${doScan}>スキャンする</button>
${ scan.value.text ?
$h`
<div class="block-title">スキャン結果</div>
<div class="block">
種別： ${scan.value.format} コード： ${scan.value.text}
</div>
<div id="barcode"></div>
`
:
''
}
</div>
</div>
</template>
<script>
export default (props, {
$store
}) => {
// ストアからデータを取得する
const {
scan
} = $store.getters;
const doScan = async () => {
try {
// スキャン結果を受け取る
console.log(monaca.BarcodeScanner)
const res = await execute();
// スキャン結果を適用する
$store.dispatch('addScan', res.data);
alert(JSON.stringify(res.data))
} catch (e) {
// キャンセルした場合
alert(JSON.stringify(e))
}
};
// コールバック方式からPromiseに変換する関数
const execute = () => {
return new Promise((res, rej) => {
const option = {
"oneShot": true,
"timeoutPrompt": {
"show": true,
"timeout": 5,
"prompt": "Not detected"
}
}
// バーコードスキャナー起動
monaca.BarcodeScanner.scan(res, rej, option);
});
}
return $render;
}
</script>
自分で試したこと
・「JsBarcode」という拡張機能（プラグイン）を使用
→ バーコード読み取りの機能に干渉し、読み取りができなくなる
0