株式会社シーネットコネクトサービス

お問い合せはこちら

047-422-1299
サイト内検索
公開日:2021/06/08
カメラソリューション

検品動画サービスをReactでリニューアルしてみた。前編

検品動画サービスをReactでリニューアルしてみた。前編

システム刷新のきっかけは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に組み込み表示・再生しています。

動画再生については、「Video.js」を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公式

この記事に関連するページ

最新記事

音声認識システム

医薬品製造におけるGMP実現に、音声検査システムができること

品質管理は製造業にとっての最重要課題です。特に品質不良が人命に直結する医薬品業界ではGMP(Good Manu […]

音声認識システム

音声システムによりSOPに基づく作業を実現

目次1  音声システムの現状2  現場作業での利用拡大3  SOPに基づく作業とトレーサビリティ確立  音声シ […]

物流IoT

カゴ車ロケーターのダッシュボード機能

目次1 ダッシュボード機能について1.1 平均滞在日数1.2 滞留発生回数1.3 アラートログ2 位置測位デー […]

カメラソリューション

検品動画サービスをReactでリニューアルしてみた。中編

ついにInternet Explorer(IE)のサポート終了がアナウンスされました。※1 業務システムでは今 […]

ロボット

自律移動ロボットAMRの特長と導入効果

自律移動ロボットAMRの特長として「人と一緒に働く協働ロボットであること」「SLAM方式で自律移動ができること […]

ロボット

AGV・AMR・GTPとは?物流現場で一緒に働く協働ロボット

「物流ロボティクス」という言葉をよく耳にするようになりました。物流ロボティクスとは物流のロボット化のこと。人に […]

一覧へもどる

お気軽にお問い合わせください

お電話でのお問い合わせ

(CCS) 043-307-7170
(CIS) 043-307-5125

メールでのお問い合わせ