経緯
今回のいただいた要望は以下でした。
- 会員申込登録業務をデジタル化したい。
- バーコード読み取りをしたい。
- 100～200箇所で使用したい。
- 費用はなるべく抑えたい。
PowerAppsキャンパスアプリには、バーコードスキャナーの機能があり、キャンパスアプリで実装すればことは足りるのですが、ボトルネックとなるのは使用したい数で、仮に100箇所100人で使用するとなるとそれだけで、PowerAppsのライセンス費用が100必要になり、とても費用を抑えるという要望を満たせない。ということで、ポータルに、バーコード読み取り機能を実装できないのかと検討をしました。
最初に確認したこと
バーコード読み取り機能をポータルでに実装するには、Javascriptで実装するしかないと思い、Javascript,バーコードで調べてみたところ、バーコード読み取りでは以下の3つが有名そうでした。
- WebCodeCamJS
- JOB
- QuaggaJS
WebCodeCamJS、JOB について
どちらも、JSファイルとして外部ファイルの参照が必要でした。
@tricogimmickさんが、Power Apps Portal 開発メモに書かれているように、JSファイルは、ポータル管理から外部ファイルとして登録しても、認識してくれません。JSファイルをポータルで使用するためには、外部ファイルとして参照する必要があります。
私は、すぐに使える外部サーバがなかったので、AzureWEBAppsを一つ作りそれ上に、JSファイルを置いて、参照して使ったり、GIT上のファイルを参照させていただいたりして、検証してみました。
その時に参考にさせていただいたサイト
https://blog.ecbeing.tech/entry/2020/06/30/114023
https://qiita.com/mm_sys/items/6e5e927ef75ab82fa8d3
https://qiita.com/k-murayama/items/048fc557c112537a6b83
結果、上記ライブラリは複数ファイルから成り立っていて、workerの参照の個所でエラーとなってしまいました。私のスキルでは、上手くライブラリを配置したりして、使いこなすことが出来ず断念。
QuaggaJSについて
こちらは、外部ファイルとして、一つだけのファイルで使用できたため、私でも使用することが可能でした。
ちなみに、外部参照のソースはこちら
<script type="text/javascript" src="https://serratus.github.io/quaggaJS/examples/js/quagga.min.js"></script>
参考にさせていただいたサイト
https://kuroeveryday.blogspot.com/2017/12/barcode-scaner-with-quaggajs.html
https://ameblo.jp/white-rabbit-0925/entry-12579659224.html
https://watchcontents.com/quaggajs-barcode-reader/
https://mam-mam.net/javascript/js_quagga.html
QuaagaJSのリファレンスに関しては、こちらのサイトが非常にわかりやすく助かりました。
https://tech-memo.yonayona.biz/posts/quagga
これらのサイトを参考に、お試しでポータルのホームに、バーコード読み取り機能を実装。
苦労した箇所
小さなバーコードが読み取りできない。
自分のiphoneを使用してテスト。最初320×240の大きさで読み取りテストを実施。
PCの画面上に表示する大きな画像では、正常に読み取りができました。
その後、手元にあるチョコレート等の裏についている小さなバーコードで読み取りをすると、なぜか正常認識をしません。
→ そこで、locatorの項目を変更することで対応できないか検証。
locator:{
//カメラを離す x-small small medium large x-large近づける
patchSize: "medium",
halfSample: false //trueだと縦横半分にリサイズした画像で解析
}
結果）phoneのカメラを小さなバーコードに近づけても結局オートフォーカスができずぼけてしまい、離すと小さくて認識できず、locatorを変更してみても読み取り精度は上がりませんでした。
試行錯誤ののち、読み込む画像の解像度が変わっていないからではないかと思い、
constraints にて、大きさを変更。320×480に変更。
constraints:{
width:320,height:480
}
結果）小さなバーコードを読み込むんで認識することが出来ました。
終わりに
- 単純なことですが、中々気づくことが出来ませんでした。
- キャンパスアプリみたいに、ポータルにもインテリジェンス機能を部品として組み込んで簡単に実装できるようにしてくれると嬉しいなと思いました。バーコード読み取り機能もそうですが、ポータルでかゆいところに手が届くようになると、ありがたいです。
最後まで、お読みくださってありがとうございます。
誤植や、不適切な記述等ありましたら、ご指摘いただけますとありがたいです。