製造実行システム(MES) · モバイル/タブレットアプリ
DongjinMES
製造現場の作業者のための、モバイル/タブレット最適化のMES(製造実行システム)フロントエンド。入庫から生産・品質・出庫まで、製造の全工程を現場で処理できるよう設計したReactベースのハイブリッドアプリです。
プロジェクト概要
DongjinMESは、製造企業の生産現場のデジタル化を目的としたMES(製造実行システム)クライアントです。
作業者がPCではなくタブレット・モバイル端末を持って現場を回り、入庫検収、生産実績の登録、品質検査、出庫処理をリアルタイムで行えるよう設計しました。
ウェブアプリをCapacitorでパッケージ化してAndroidネイティブアプリとして配布することで、単一のReactコードベースでウェブとネイティブを同時に運用するハイブリッド戦略を採用しました。
本プロジェクトでSilmarilはフロントエンド開発を担当しました。
担当と貢献
- フロントエンド開発全般 — 機能設計・実装・API連携・ネイティブビルドを担当しました。
- TypeScript/Reactで約31,000行、38ページ、24のAPIモジュール規模で実装しました。
- 製造の全工程(入庫 → 生産 → 品質 → 出庫)を7つのドメインにモジュール化しました。
- ウェブアプリをCapacitorでパッケージ化し、Androidネイティブアプリとして配布しました。
- 単一のReactコードベースで、レスポンシブなウェブとネイティブアプリを同時に運用するハイブリッド戦略を適用しました。
主な機能
入庫 (Inbound)
入庫登録、数量入力、ラベル出力設定、入庫履歴を処理します。
出庫 (Outbound)
バーコードスキャンによる出庫、数量処理、出庫履歴を管理します。
生産 (Production)
生産指示の照会、投入品目の管理、生産実績・検査の登録を、BOM・LOTトラッキングと連携して提供します。
品質 (Quality)
受入検査・工程検査・出荷検査の3段階の検査ワークフローを実装しました。
整備・設備 (Maintenance)
設備点検と整備履歴を管理します。
運転日誌 (Operation)
運転記録と特記事項のメモを残します。
通知 (Notification)
FCMプッシュ通知と通知履歴を管理します。
技術ハイライト
開発/パブリッシング分離モノレポ
apps/(API連携の開発)とpages/(純粋なパブリッシング)を、それぞれ独立したshared/を持つ2つのワークスペースに分離しました。パブリッシャーと開発者が互いの作業を侵さずに並行して進められ、Path Alias(@components・@hooksなど)を両方で同一に揃えてコード移動のコストを最小化しました。
JWT自動失効管理APIクライアント
Axiosインターセプターの上に、トークンの失効を定期的に検知(setInterval)して自動更新するレイヤーを自作しました。isRefreshingフラグで同時多発的な401リクエストの重複リフレッシュを防ぎ、リクエスト/レスポンスを色分けして出力するデバッグロガーで現場でのデバッグ効率を高めました。
APIレイヤーの一貫した抽象化
24のドメインそれぞれに、endpoints(純粋なAPI関数)→ hooks/api(Reactカスタムフック)の2層パターンを一貫して適用しました。コンポーネントはビジネスデータに集中し、ローディング・エラー・再呼び出しのロジックはフックがカプセル化します。
現場に優しいモバイルUX
数字キーパッド・検索選択・日付選択・数量入力など20種類以上のモーダルを再利用単位で設計し、iPhoneのノッチ・ホームインジケーターに対応するSafe Areaと、モバイル(375px)〜タブレット横(851px+)の3段階のレスポンシブを適用しました。手袋をした作業者でも使える大きなタッチターゲットとキーパッド中心のインタラクションで構成しました。
ウェブ→ネイティブのハイブリッドビルドパイプライン
Viteのビルド成果物をCapacitorに同期するビルドスクリプト(cap:build・copy-static)を構成し、単一のコマンドでウェブビルドからAndroidアプリのパッケージングまで自動化しました。
技術スタック
成果・意義
- 製造の全工程(入庫 → 生産 → 品質 → 出庫)を一つのモバイルアプリに統合し、現場の紙ベースの作業をデジタル化しました。
- 単一のコードベースでウェブとAndroidアプリを同時に運用し、保守コストを削減しました。
- ドメインごとに一貫したAPI・コンポーネントのパターンを確立し、新機能追加時の拡張性を確保しました。