ハンディターミナルをやめて、スマホ＋Webアプリで工程データを集める｜バーコード読取の具体例とセキュリティの鉄則

ハンディターミナルをやめて、スマホ＋Webアプリで工程データを集める
スマホ活用は、すでに「当たり前」になっている
なぜ「Androidアプリ」ではなく「HTMLのWebアプリ」なのか
Webアプリでバーコードを読み取る2つの手段
1. ① Barcode Detection API（ブラウザ標準）
2. ② ZXing-js（ライブラリ方式・iOSもカバー）
具体的な活用例：トレースと指図書照合
絶対の鉄則：会社支給のスマホを使い、個人のスマホは使わない
ハンディターミナルとの使い分け
まとめ
出典・参考
あわせて読みたい

ハンディターミナルをやめて、スマホ＋Webアプリで工程データを集める

製造現場でトレーサビリティや工程データを集める際、これまでは専用のハンディターミナルが当たり前でした。しかしハンディターミナルは専用機ゆえに高額で、一般的に1台あたり数万〜20万円前後の費用がかかります（SmartFの解説）。複数台の導入や買い替えが難しい中小工場にとって、大きなハードルです。

そこで注目したいのが、現場の作業者が持っているスマートフォンを活用する方法です。とくに「専用のAndroidアプリを入れる」のではなく、HTMLで書いたWebアプリをブラウザで開かせる方式なら、導入・更新が格段に楽になります。本記事では、スマホのカメラでバーコードを読み取り、製品のトレースや指図書の照合を行うWebアプリの仕組みと、その際のセキュリティ上の鉄則を解説します。

スマホ活用は、すでに「当たり前」になっている

「現場のスマホで工程データを取る」と聞くと、「まだ先の話」と思うかもしれません。しかし現実は、スマホの業務活用はすでにさまざまな現場で始まっています。

店舗在庫管理：小売・流通の現場では、ハンディターミナルではなく、店員のスマホで在庫確認や入出荷を行うケースが増えています。
工場内連絡網：従来はPHSで行われていた社内連絡を、社内スマホとWi-Fiでまかなう工場も増えています。セキュリティを担保した上で、社内ネットワーク内でメッセージ・写真・位置情報を共有する仕組みが動いています。
古いスマホの再利用：スマホは毎年モデルチェンジし、古い機種は格安で払い下げられるか、社内で再利用できます。カメラ・Wi-Fi・ブラウザが動く限り、充分な現場端末です。

スマホがこれだけ普及した以上、「わざわざ高額な専用機を買う」前に、手持ちのリソースで始めない手はありません。本記事では、まさにその「スマホで始める工程データ収集」の手段を解説します。

なぜ「Androidアプリ」ではなく「HTMLのWebアプリ」なのか

バーコード読取の仕組みとして、専用のAndroidアプリを作る手もあります。しかし現場運用では、Webアプリ（HTML＋JavaScript）のほうが柔軟です。

配布・更新が楽：アプリストアの審査や端末ごとのインストール作業が不要。サーバーのHTMLを差し替えるだけで全員に最新版が行き渡る
OSに依存しにくい：AndroidでもiPhoneでも、同じブラウザアプリで動く
MDMとの相性が良い：後述の会社支給端末管理と組み合わせやすい

もちろん読取性能はハンディターミナルの専用モジュールに劣る面もあります（例えば汚れたバーコードや遠い距離の読取りに弱い）。ただ「スキャン効率はほどほどでよく、自社業務に最適化した低コストなDXを求めるなら、スマホ＋Webアプリを検討すべき」というのが、製造業DX事業者（イットウェブ）の整理です。

環境構築は、過去に本サイトで解説したPHP環境で十分対応できます。Windows にローカル開発環境を整える手順は次の記事を参照してください。

PHP + MariaDB（またはMySQL）の組み合わせで、バーコード値をPOST送信し、トレース履歴や指図書のデータを保存・参照するWebアプリが作れます。特別な開発環境は不要です。

Webアプリでバーコードを読み取る2つの手段

スマホのブラウザからカメラを使ってバーコードを読み取るには、主に2つの手段があります。

① Barcode Detection API（ブラウザ標準）

ChromeやAndroidに組み込まれたShape Detection APIの一部で、外部ライブラリを入れずにカメラの映像からバーコードを検出できます（Chrome for Developersの解説）。対応フォーマットは qr_code、code_128、ean_13、data_matrix、pdf417、aztec など多岐にわたり、macOS・ChromeOS・Androidで利用可能です（iOSのSafariでは未対応）。基本的な使い方は次のようになります。

const detector = new BarcodeDetector({ formats: ["qr_code","code_128","ean_13"] }); const barcodes = await detector.detect(video);

カメラの <video> 要素の各フレームを detect() に渡し、検出された rawValue（バーコードの中身）を取り出すだけです。コードは数行で済みます。

② ZXing-js（ライブラリ方式・iOSもカバー）

より広く、iOS Safariを含む多くのブラウザで確実に動かしたい場合は、オープンソースのZXing-js（@zxing/browser）を使います。Googleが公開するZXingをJavaScriptに移植したもので、Code 128やEAN、QRコードなど1次元・2次元の幅広い規格を読み取り可能です（Scanbotの解説）。画像ファイルだけでなく、カメラ映像からの連続読取にも対応しています。Barcode Detection APIが使えない環境でも、こちらでカバーできます。

具体的な活用例：トレースと指図書照合

読み取ったバーコードの値（製品番号やロット番号）を、サーバーのデータベースに送るだけで、さまざまな現場業務が置き換わります。

製品のトレース：各工程でバーコードを読み取り、いつ・どのラインで・誰が作ったかを記録。出荷後に不具合が見つかっても、該当ロットをトレースバック（遡及）して影響範囲を特定できます。キーエンスのガイドが説くトレーサビリティの基本（原材料〜加工〜組立〜流通の履歴追跡）を、低コストで実現できます。
指図書（作業指示書）の読み込み：製品や工程のQRコードを読むと、Webアプリ上で該当する指図書や作業手順を即座に表示。紙の台帳やファイル探しが不要になります。QRコード（GS1 QRなど）はURLやテキストを保持できるため、手順書への連携にも適しています（SmartFのバーコード早見表）。
ロット照合・梱包ミス防止：材料と製品、製品とパレットのバーコードを読み比べて一致を確認するアプリも、スマホ＋Webで十分作れます（イットウェブの開発実績）。

絶対の鉄則：会社支給のスマホを使い、個人のスマホは使わない

ここが最も重要です。業務でスマホを使うなら、必ず会社が支給・管理する端末に限るべきです。個人のスマホ（私物端末）を業務に使うことは、セキュリティ上大きな問題があります。

管理の主体が個人にある：私用スマホでは、会社がアプリの利用を制限したりアクセスをブロックしたりすることが、プライバシーの観点から困難です（NTTドコモビジネスの解説）。
業務データが個人端末に残る：現場の写真や顧客情報を私物スマホに保存すれば、退職時や紛失時に会社はコントロールできず、情報漏洩のリスクが残り続けます（ソフトバンクの解説）。
紛失時の対応が効かない：企業管理外の端末では、遠隔ロックや遠隔データ消去ができません。

これを防ぐのがMDM（モバイルデバイス管理）です。会社支給のスマホにMDMを導入すれば、パスコードの強制、アプリの制限、紛失時の遠隔ロック・消去を一括で行えます（KDDI・Y!mobileの解説）。「社内ネットワークにアクセスできるモバイル端末は、PCと同等に管理する」という原則から外れないことが、情報漏洩を防ぐ前提です。

ハンディターミナルとの使い分け

スマホ＋Webアプリが万能ではありません。読取性能や堅牢性が求められる現場では、引き続きハンディターミナルが適しています。両者の使い分けの目安は次の通りです。

ハンディターミナルが向く：過酷な環境（粉じん・水滴・落下）、高いスキャン効率が必須、1日中連続で使う現場
スマホ＋Webアプリが向く：スキャン頻度がほどほど、清潔な屋内、自社業務に合わせた低コストな仕組みを急ぎたい、小規模から始めたい

最初はスマホ＋Webアプリで小さく始め、必要な現場だけハンディを残す混在運用も現実的です（インフュージョンの指摘）。

まとめ

工程データやトレーサビリティの収集に、高額なハンディターミナルは不要です。作業者のスマホを、HTMLで書いたWebアプリでバーコードリーダーに変えれば、製品のトレースや指図書の照合を低コストに実現できます。読取にはブラウザ標準のBarcode Detection APIや、広範囲対応のZXing-jsを使い、数行のコードでカメラから値を取り出せます。

ただし、使うのは会社が支給・MDM管理するスマホだけに限ります。個人のスマホを業務に使うことは、情報漏洩の入り口になります。セキュリティの鉄則を守りながら、まずは一つの工程からスマホ＋Webアプリを試してみてください。