バーコードリーダーをブラウザから使えるようにしたい！JSのバーコードリーダーライブラリを調査しました

はじめに

はじめましてorこんにちは！
ecbeing2年目、R&D部門所属の蓑代です。

前回や前々回には、Dockerの記事やスクラムに関する所感記事を書きました。
blog.ecbeing.tech blog.ecbeing.tech

そして今回は…技術寄りな記事となります。
具体的には、「バーコードリーダーが実装可能なJavaScriptライブラリについて」まとめていこうかと思います！

…というのも、半年前程に自分が所属するプロジェクトから「ブラウザベースでバーコードリーダーを実装してほしい」というオーダーがありまして。
また、「アプリ形式ではなく ブラウザから 利用したい」という条件付き。
((アプリ形式なら実践してみた系の記事はわんさかあるんですけどね

なぜこの様な条件が付いたかというと…。
当時の(今もですが)プロダクトはブラウザベースで稼働するものでして。
バーコードリーダーのためだけに、わざわざiOSやAndroid用のアプリを作るのは高コストだという背景があります。

「ブラウザベースでバーコードリーダーを実装してみた」系の記事は意外と少なく…。
中々いいJSライブラリが見つかりませんでしたが、それでも何とか3つほどライブラリを見つけられたので、こうして記事にまとめてみた次第です。

前置きが長くなりましたが…それでは記事本編へ参りましょう！

Microsoft Teamsで何ができるの？？

初めまして！シングルファーザーで時短勤務をしているガミさんです
このご時世、娘っ子の臨時休校やら何やらでテレワークをしていてあまり上京してきていませんが元気です

さて、本題です。
本来RTJ(リテールテックジャパン)でマイクロソフトさんと協業で ブース出展するはずだったのですがコロナの影響で出展停止に なってしまったのでここで少し技術情報が共有できればいいかなと ネタが少し硬いのでLINEチャット風でお送りましす！

天の声

えらいひと

RTJに出店するからTeams連携よろー

ほえー
何すりゃええんやろなぁ
ユーザが持ってきた写真をTeamsで
画像検索して商品詳細画面に案内したろ
ついでに在庫確認できますってシナリオでええんかの・・・

あとは売り場にカメラでも付けて
顔認証から年代と性別集計して
PowerBIで分析できるようにしたろ！
(承知しました！)

既読
0:30

えらいひと

心の声と逆やで
まぁそれでええで
期限は来月末までなー
ほな

既読
0:30

※画像はイメージです。本当は期日指定以外ちゃんと指示されました！

続きを読む！

さてまずはTeamsに画像を投稿したら近い商品画像を検索してECサイトの商品詳細画面へ飛ばして商品説明と在庫がわかればいいかなということで調査開始
これは宣伝ですがecbeingではオムニ対応の一環でEC在庫の他に店舗在庫を表示する対応も可能です！

話を戻してTeamsに画像投稿しても検索するトリガーが必要になります
そこで登場するのがチャットボット
チャットボットというと身近なもので質問すると返信くれる例のアレです
文字を入力したらサーバ側で解析してこれかな？という回答を返すやつです
それを画像にしてしまおうというのが今回の趣旨になります
チャットボットに投稿された画像を今度は解析しなくてはなりません
マイクロソフトさんのブースで出すんだからAzure使わないとね！
ということでAzure Cognitive Serviceの登場です
PaaSで用意されているサービスですが検索を主とするものになります
その中にCustom Vision Serviceがあるのですが、マイクロソフトさんのサービスなのにマーケットプレイスという落とし穴が・・・
そのためお支払いは一本化できません！

動きのほうに戻ろう
Custom Visionでは何をするかというと・・・
まずは画像登録
今回は自動登録までは考えていないのでECで持っている商品画像をCustom Visionに登録していきます
そしてその商品へ商品コードのタグ付けをしていきます
時間があれば検索された商品画像をCustom Visionへ登録して、その後選択された商品の商品コードをタグ付するという自動化を考えていたのですが叶わずヾ(･ω･`;)ﾉ

チャットボットから通知された画像をCustom Visionで解析して一致率が80%(今回一致率の判断は適当です)以上の商品コードをURLルール化して戻すという設定をします
チャットボットへ商品名、商品URL、画像一致率を戻して処理完了

構成図ですが・・・

①Teamsのチャットボットから画像登録した場合にCustomVisionへ画像を飛ばす
②事前にラーニングされた画像の一致率の高い画像をピックアップ
　ピックアップされた画像のタグに設定してある商品コードをチャットボットに戻す
③リンク付きにしたので商品詳細ページに案内してやれ！


ちなみに動画にしてみるとこんな感じです

次はレポート表示や！

シナリオとして考えたのはスーパーでも家電屋さんでも色々なカテゴリーの売り場が存在しています
そこで各売り場にカメラを設置しておいて訪問者の年齢、年代をためる
時間ごとにグラフ表示して年代、性別ごとの売り場改善やセールの判断ができるようになればいいな
店長会議などでグラフ化しておけば資料を用意する手間も省けて他の仕事に専念させることができるかな？
こんな感じです！

さて用意するのは・・・
顔認証するにあたり、kioskアプリを使ってみよう
kioskアプリはAzure Cognitive Servicesのデモを簡単にできるマイクロソフトさんのデモアプリです
ここでFace APIを繋いで年齢、年代を判断してもらいます
社内を駆け回って顔収集していたのですが、若くみられる分には全然構わないのだけど老けてみられた人への申し訳なさと言ったら・・・言葉にできません
判断された時刻、年齢、性別、感情(無表情、嬉しい、悲しいなど)をSharePointに配置したエクセルファイルへ追記していきます

次にMicrosoft Flowを使ってエクセルファイルからレコードを読み込んでPowerBIに渡して集計と並び替えを実施します
担当者がTeamsにアクセスしてPowerBIタブを開いたときに集計されたグラフを表示させる

構成図ですが・・・

①カメラアプリでAzure Faceと繋いで年齢、年代を取得(判断はAzure任せ)
②結果をSharePointにエクセルで保存
③Microsoft Flowからエクセルデータ読み出してPowerBIで解析
④Teamsの担当者がPowerBIを開いたときにグラフ表示

天の声

こんなのできたでー

えらいひと

RTJはコロナの影響で中止や！
おつかれさん！
ほな

既読
1:30

ーーーーー

ということでマイクロソフトさんがRTJのリカバリプランとしてそのうち公開されるはずです！
※コロナ禍の影響で遅れているようです

～ecbeingでは、新しいことに楽しんでチャレンジできるエンジニアを大募集中です！～
careers.ecbeing.tech

.NET Core の設定情報の仕組みをしっかり理解したい方向け基本のキ【その２】

こんにちは、アーキテクトの小林です。

前回の記事では、さまざまなプロバイダから提供される情報がフラットな KeyValue データ構造に変換され、後勝ち方式でカスケーディングされていることをご紹介しました。

今回の記事では、フラットな設定情報から階層構造を持ったクラスのプロパティに値をバインドする方法と、設定ファイルが更新されたときに自動的に設定情報を再読み込みさせる方法を紹介します。

まだ前回の記事をお読みでない方は以下をお読みください。 blog.ecbeing.tech

ウォーターフォール型PMと新人が半年間スクラムと向き合って感じたこと(新人編)

はじめに

こんにちは！ecbeingの浦…もとい蓑代です。
※結婚して名前が変わりました

今回は、こちらの記事の「新人編」の位置づけとして…。
blog.ecbeing.tech

ウォーターフォール型開発を知らない新人目線から、スクラム開発について感じた事を書いていこうかなと。

ちなみに、私のスクラム経験や開発経験について少し触れると…。

• スクラム開発=未体験
• ウォーターフォール型開発=未体験
  • スクラム開発に携わる前は、保守開発を中心に行ってました

…というような感じです。
ウォーターフォール型は未経験といいましたが、職場の同期がウォーターフォール型開発であり…。
「設計書を作るの大変だー」とか「テスト項目書作るの大変だー」とかは良く聞きますが、まぁほぼほぼ知識0みたいなもんです。

そんな私がスクラム開発を通じてどう感じたのか…。 見ていきましょう！

ウォーターフォール型PMと新人が半年間スクラムと向き合って感じたこと(PM編)

はじめに

こんにちは。ecbeing金澤です。
浦さんと共に、レビュー最適化サービスReviCoの開発に携わっています。

ReviCoでは、よりアジャイルにプロダクトを成長させるために、昨年秋からスクラム開発を導入しました。
私も浦さんもスクラム未経験の状態からのスタートだったのですが、特に私の場合は、長くウォーターフォール型開発をやってきたこともあってか、スクラムの考え方や進め方に最初はかなり戸惑いました(今でも完全に克服したわけではないですが…)

今日はそのあたりを記事にまとめられればと思います。

.NET Core の設定情報の仕組みをしっかり理解したい方向け基本のキ

こんにちは、アーキテクトの小林です。

.NET Framework は長年に渡って多くの Windows ベースのアプリケーションの開発現場で採用されてきたものですから、.NET Core への移行は「まだまだこれから」という状態ではないかと思います。

.NET Framework のアプリケーションを .NET Core に移行しようと思ったとき、違いが大きすぎて最初に困惑するポイントが設定情報の管理方法の違いであろうかと思っています。

当社の主力製品である ecbeing も .NET Framework でつくられていますが、ecbeing は EC のパッケージ製品ですのでお客様のニーズに合わせて設定による機能のオンオフや、機能の挙動の変更が可能になっており、非常に多くの設定項目が存在します。

したがって設定情報の管理の柔軟さは ecbeing 社のエンジニアにとっては、とてもとても重要な興味・関心事となっています。ということで、今回は .NET Core の設定情報の仕組みについて自分の理解している内容の整理も兼ねて記事としてまとめてみることにしました。

未経験者でも言語解析を簡単に始められちゃう。そう、Cognitive Serviceならね。

お久しぶりです。堀内です。

前回の記事からずいぶん期間が空いてしまいましたが、気にせずいきましょう。

今回はMirosoft AzureのサービスであるCognitive Servicesに触れていきます。早速始めていきたいと思います。