検品動画サービスを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