QuaggaJSでは初期状態でセレクターが#interactive.viewportとなっている場所でカメラの映像が表示されますので、これを追加します。class="viewport"></div>そして、メインのJavaScriptコードです。});</script>今回はよりシンプルにしたかったので、バーコード検知中のデバッグ情報(緑の枠線やバーコードを検知した時に表示される赤い線)は省略しています。これらを追加したい場合は、<canvas>タグのcssを設定し、Quagga.onProcessed()内で、キャンバスの枠線を引くコードが必要になってきます。詳しくは、QuaggaJS付随のテストコードlive_w_locator.htmlを参考にするといいでしょう。Quagga.init()です。第1引数で各種設定をすることができます。ちなみに、ean_readerというのはJANコード形式のバーコードに対応するタイプです。Quagga.onDetected()です。その名の通りバーコードが検出されたときに呼ばれる関数で、この中でAjaxを通して配送完了処理をすることになります。Ajaxで配送完了処理をするでは、バーコードが検出されたらstatusを完了を意味するshippedへ変更するコードを書いていきましょう。先ほどに続いてJavaScriptのコードから。Ajax通信が簡単にできるaxiosをcdnから読み込みます。+'」の配送が完了しました。alert('この商品は登録されていません。}});まずcheckingですが、これはAjax通信で配送完了処理をしている間もバーコード読み取りは実行中なので、何度も何度も後から実行されてしまうことになります。これではユーザービリティがいいとは言えません。そのため、Ajax通信をしている間は新しい処理をスキップするようにしています。配送処理が完了したら商品名をアラート表示し、もし登録されていない場合はエラー表示します。続いてAjaxでデータ送信される先のLaravel側を見てみましょう。false];}まずproduct_codeを使ってこのバーコードの配送データが存在しているかどうかをチェックしています。データが見つかればstatusをshipped(配送完了)に変更して保存しています。テストしてみるでは、実際にスマホを使ってテストしてみましょう。配送データに登録されている商品をバーコード・スキャンしてみます。配送完了のアラートが表示されました。念の為、DBテーブルも見てみましょう。こちらもうまくshippedへ変更になっています。次に登録されていない商品をスキャンしてみましょう。こちらもうまく処理ができています。Chromeの場合は必ずセキュア(つまり、HTTPS)でアクセスしているページでないとカメラが使えないようになっています。そのため、ローカルでテストするには、自分で署名した証明書を使ってHTTPS接続するか、もしくはFirefoxはまだHTTPでもカメラ対応しているのでこちらを使うといいでしょう。教材ソースコードをダウンロードする今回実際に開発したソースコード一式をダウンロードすることができます。QuaggaJS本体はご自身で設置してください。開発スキルプログラム開発は15年以上。Laravel、Vue.jsをメインとしてPython(機械学習)やElectronの開発もお引き受けしております。過去2度カナダのバンクーバーに滞在していました。開発状況によりましては開発をお待ちいただく可能性がございますが、いつでもご相談は受けさせていただいております。お気軽にご連絡ください!お問い合わせフォーム開発してほしい機能を募集中!MITライセンスで公開します。詳しくはこちらの記事をご覧ください。ぷれりり・プレスリリース掲載無料のプレスリリース・スタンド!播磨孤道(はりまこどう)兵庫周辺のゆったり自転車一人旅の記事を書いていきます。