システム刷新のきっかけはFlashのサポート終了？

2020年末、Adobeの「Flash Player」のサポートが終了しました。
Flash ※1 はウェブページで動画などを扱う規格で、アニメーションやブログパーツから動画やゲームと幅広く使われていました。特に2000年代前半は、一部で「Flash黄金時代」と呼ばれ、インターネットの一時代を築きました。

当時小学生だった私も、様々な動画やゲームで楽しんでいたことを覚えています。近年では、セキュリティの問題やスマートフォンの登場による市場の変化により使用頻度は落ちていきました。特にiPhoneではFlashを拒否する仕様を早いうちから取り入れていました。Apple社のスティーブ・ジョブズ氏の発表によると、問題やプラットフォーム強化に対する対応が遅いことなどが挙げられていました。※2

このような経緯によりFlashは利用率が下がり、ついに2020年末、サポートが終了となりました。 私が小さいころに楽しんだコンテンツが終焉を迎えてしまうということで、年末頃はFlashゲームを遊び小学校のコンピュータ室での思い出を振り返っていました。

検品動画サービスのGAZOQSの刷新

弊社サービスの一つであるGAZOQSは、監視カメラで撮影した作業動画を別途取得した作業実績データと連携し、動画の検索と動画の視聴を行うことができるサービスです。 主に商品の検品時に商品の状態や梱包状況などの確認用としてご利用いただいております。

このサービスも、以前はFlashを使用し動画を再生していました。GAZOQSはリリースから5年以上経過しており、私たちの身の回りのアプリケーションや情報機器も激しい変遷が起こったように思います。Flashサポート終了の機に合わせ、サービス実行基盤の刷新を行いました。

システム刷新に至った主な理由
　・Internet Explorerのシェア低下とその他ブラウザの台頭
　・スマートデバイスやIoT、人工知能技術の拡大

新基盤の特徴

刷新システムの画面イメージ

検品動画　検索結果画面

動画再生については、「Video.js」※5 をReactに組み込み表示・再生しています。

新しい基盤では、PCから使用する管理画面に「React」※3 という、Facebookとそのコミュニティにより開発されたライブラリを採用しています。Facebookはもちろん、InstagramやSkypeなどでも採用されており、Webエンジニアの間で最も盛んに使用されているライブラリです。State of JS 2020のアンケートによると、2020年フロントエンドフレームワーク利用度80％で圧倒的1位となっています。※4

Reactを使用したことで以下のようなことが可能になりました。

• 画面読み込みが少なくスムーズに操作できる
• マルチブラウザ対応(※推奨はGoogle Chrome、Microsoft Edge)
• 画面サイズに合わせ、表示やボタンのサイズが調整される

開発者としても以下のようなメリットがありました。今後の改修や拡張の際には、これまでよりスムーズに開発が行えそうです。

• 画面の要素を分けて管理しているため、可読性が高く機能追加も行いやすい。
• 前GAZOQSでは苦労して実装していた部分を、Reactは既に部品として持っていた為苦労せずに実装できた。

次回は、新基盤で便利になった部分についてお話ししたいと思います。

この記事に関連する文献
※1 …Adobe Flash Playerサポート終了情報ページ
※2 …マイナビニュース-iPhone OSがFlashをサポートしない6つの理由 – ジョブズ氏が説明
※3 …React公式
※4 …State of JS 2020-フロントエンドフレームワーク
※5 …Video.js公式

カメラ内部で動く画像認識ソフト

現在、世界中で数多くの監視カメラが稼働し、私たちの生活を見守っています。一昔前はプライバシーの侵害等の懸念が叫ばれていましたが、今では私たちの日常に溶け込んでいます。監視カメラは、ハードウェア性能の向上により今ではカメラ内で稼働する多くの画像認識ソフトウェアが製品化されています。

例えばコロナ渦で導入が急速に進んだ体温測定機能を持つサーマルカメラは顔認証機能をあわせて活用することにより1台のカメラで従業員の入退勤機能と体温チェックを提供できるようになりました。 物体検知機能は侵入禁止エリアへの立ち入り検知、夜間業務時間外の不法侵入などに利用されています。画像認識機能はDeep Learning（ディープラーニング）機能を利用し、近年その性能の進化が著しく進んでいます。

Deep Learning(ディープランニング)の基礎知識

Deep Learningとは人間が手を加えなくてもコンピュータが自動的に大量のデータからそのデータの特徴を発見する技術、ディープニューラルネットワーク（DNN）を用いた学習のことです。DNNとは、ニューラルネットワーク（NN）というパターン認識のために設計された、人間や動物の脳神経回路をモデルとしたアルゴリズムを多層構造化したものです。

たとえば10円硬貨と100円硬貨は大きさや色が違い、中には錆びている硬貨、古い硬貨もあります。これら様々なパターン（古いもの、新しいもの、きれいなもの、錆びているもの等）の画像を学習させることにより10円硬貨、100円硬貨の識別と数量のカウントを行うことができます。

物流の現場での利用例

倉庫や工場では、商品の数量・破損品・品質チェック、製品の分類、物体認識、OCR（文字認識）といった検品の自動化を実現できます。数年前までは専用のソフトを開発し、高性能のサーバーを利用しなければ実現できませんでしたが、最近ではカメラだけでも利用が可能になってきたため、倉庫現場でも充分に採算計算が合うシステムが導入できます。

人数カウントの進歩

ほかにも人数カウント機能では、従来だとカウントする対象に身長の制限があったり、限られた範囲内でしか高いカウントすることができまませんでしたがDeep Learningを活用することで、赤ちゃんや小さな子供も正確にカウントでき、広範囲の人数もカウントできるようになりました。イベント会場やテーマパークのブースでの来場者数のカウントなど、より正確な来場者数をカウントすることができます。 このように様々な画像認識機能をカメラに搭載することで、より精度の良い情報を得ることが可能になります。

ついにInternet Explorer（IE）のサポート終了がアナウンスされました。※1 業務システムでは今でも使用しているところもあるかと思います。弊社でも長くご利用いただいているシステムについては、対策を検討しなければならないでしょう。幸いGAZOQSは刷新を完了し、影響はありません。今後はこの基盤の開発経験を生かして、長く使えるサービスの開発を行いたいものです。
前回はGAZOQS刷新の経緯と新基盤の特徴を大まかに紹介しました。中編では、React画面の特徴やメリットを詳しく見ていきたいと思います。

画面遷移の高速化

動画では、最初にGAZOQSのメニュー画面が表示されています。そこでメニューヘッダの切り替えや検索画面を開いています。React画面の特徴として、画面切り替え時にページ更新を行わずスムーズに遷移できます。

旧GAZOQSでは、各画面に切り替え時にはページの更新を行っていました。一覧画面のページ遷移も、これまでは10件ずつ表示するために何度も画面の切り替えを行っていました。『検索時1～10件目を取得・表示する→2ページ目のボタンをクリックする→11～20件目を取得・表示する』という動きをしていました。

新GAZOQSでは、画面の全てを更新せず変化する一部のみを更新しています。このおかげで、操作しているユーザーには高速で表示が切り替わっているように見えます。検索・更新処理についても同様です。画面全体を更新せず裏側で処理を行い、結果が取得できればその内容に関する部分のみを更新します。ページ遷移についても、一覧の切り替えがスムーズにできるほか、表示件数の変更も可能になりました。

入力ヘルプ

動画では、検索時に入力する項目の候補を一覧表示したり、カレンダーを表示して入力を助けています。

旧GAZOQSでは、ブラウザの新しいウィンドウを開き選択されれば閉じるという形で実現していました。新しいウィンドウを開くために読み込みが発生し、少し時間がかかっていました。

新GAZOQSの入力ヘルプは、一覧が正面に浮き出るような形になっています。裏で一覧の取得を行い画面の一部を更新することで、先ほどの画面切り替えと同様にヘルプ画面のオープン/クローズの高速化を実現しています。カレンダーの入力ヘルプでは「DatePicker」というライブラリを使用しています。※2 こちらは入力欄の下にカレンダーが出現するのみで、別ウィンドウを開くことも正面に浮き出るようなことも起こりません。もちろんキーボードから入力することも可能で、ユーザーの入力を妨げることなくヘルプ機能での入力が可能です。

画面サイズ

画面サイズ：1280×1024の画面イメージ
　

画面サイズ：1920×1080の画面イメージ
　
上記画像は、同じ画面を異なる画面サイズで表示しています。ボタンの大きさや一覧検索結果の幅が変わっていることがわかると思います。表示が見にくくなったり、操作しにくくならないよう、ちょうどいいバランスを保とうとしてくれます。

もちろんこの2種類以外のサイズでも自動で調整してくれます。

まとめ

これまで読み込みで時間がかかっていた部分が省略され、煩わしい部分は少し軽減できました。また、マルチブラウザ対応や画面サイズによって自動調整がされるようになり、様々な条件のユーザーに利用いただきやすくなりました。
次回では開発時やカスタマイズ時のメリットについてお話ししたいと思います。

※1…Internet Explorer 11 のサポートを終了する Microsoft アプリとサービス
※2…React Datepicker

物流現場でバースの管理や作業場の安全管理に従事してきた保安・警備・守衛・巡回要員などの人材確保が、有効求人倍率７倍という超難関となっています。
コロナ禍で交代要員の確保も厳しい中、新たな代替策として監視カメラ映像を活用したAI行動検知が注目されています。

AI行動検知とは、機械学習のプログラムに特定の行動パターンを認識させ、対象映像を自動で分析・レポートする仕組みで、従来主に小売店舗での犯罪検知に利用されてきました。
近年、AIの分析精度の向上により、多様な業界・業種での導入が相次いでいます。

緊急度の高い事象が発生した場合、リアルタイムに予め指定したデバイスに通知を送り、迅速な対応が可能になるため事後検証の曖昧さや犯罪者の言い逃れを防ぐことができます。

この仕組みを物流現場に応用することにより、以下のような事象の可視化・管理強化が可能となります。

・バース内での駐禁違反検知： 車番から瞬時に事業者を特定することも可能
・バース内での長時間駐車検知： 事実ベースで退去を指示
・入出庫のトラブル検知： ドライバーや作業員間の軋轢を検知
・作業員の体調不良検知： 怪我・熱中症・感染症などの労災要因を検知
・禁止行為・出火検知： 喫煙・暴力・さぼりなどの禁止行為や出火を検知
・物品の不正な持ち出し検知： 不審者・出入り業者・作業員による持ち出しを検知

倉庫運営に死角なし。

警備・守衛・歩哨の高齢化や人材確保、機械警備のコスト高にお悩みの現場にお薦めの効率化ソリューションです。

AI行動検知に関するホワイトペーパーはこちらからダウンロードいただけます。
進化する監視カメラの行動検知　クラウドAIで現場を守り損失を最小化