By Freepick & Flaticon

Works|ホーム

ProcessVISON（製造工程可視化）

概要

全社員が各々の目的に応じて、製品の製造工程をリアルタイムに確認できるWebアプリケーションです。

数分間隔で基幹システムからkintoneに更新される製品情報と工程の作業進捗情報を表示します。

ユーザーごとに検索条件の設定と、表示項目の並び替え、表示／非表示の設定が可能です。また、CSVをダウンロードして2次加工も可能です。

Points

社員のミッション毎に利用目的が異なるため、検索条件を細かく設定できるようにしたり、カラムの並び替えや、表示／非表示をカスタマイズできるようにしました。

検索条件やカスタマイズ情報はブラウザに保存するようにし、常に見たいデータにアクセスし易いようにしています。

その他、ユーザの利便性に特化した実装をしています。

・ダークモード・ライトモードの切り替え
・ドラッグアンドドロップを使用した操作
・ノンブロッキングなUI操作（React18を活用）
・図面参照アプリへのシームレスな連携
・CSVエクスポート

Stacks

フロントエンド :
- React、
- CSS(Sass、MaterialUI、FlatIcon)、
- Libraries(tanstack-table、papaparse、axios...)
バックエンド :
- Express、
- kintone、
- Libraries(kintoneAPIClient)
ｲﾝﾌﾗ・その他 :
- FirebaseAuthentication（認証）、
- CloudRun（バックエンド）、
- FirebaseHosting（フロントエンド）

アクティブ画像