検品動画サービスを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に組み込み表示・再生しています。

新しい基盤では、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公式