ドリップパックコーヒー製造現場向け PWA
iPad で現場に置いて使う業務支援ツール
RoastPlus は、ドリップパックコーヒーの製造現場で、実際に使われることを目的に作った社内ツールです。
少人数でも迷わず使えることを目指して、使う機能を絞って運用性を上げました。
目的は属人化の解消でした。担当者が入れ替わる現場のため、誰が担当しても:
- 迷わず見える
- 誤操作しにくい
- 作業区切りがその場で分かる
を実現できることを優先しました。
運用実績：2025 年 11 月から 2026 年 7 月まで開発し、製造現場で運用していました。 利用者は開発者本人を含めて 8 名で、毎日使用していました。 全機能を一律に使うのではなく、現場で必要な機能を選んで運用していました。 企画・設計・実装・運用までを一人で担当しました。 現在も現場で使われているかは把握していません。
現場中央の大画面 iPad に表示。作業・休憩・掃除の区切りと、次の切り替え時刻が一目で分かる。
掃除当番を班ごとに割り当て。「シャッフル」で長期的な公平性を考慮した自動割り当てを行う。
ハンドピック・焙煎・パッケージの実績を記録し、欠点率・焙煎歩留まりを自動計算。月合計は CSV 出力できる。
現場中央の大画面 iPad での利用を想定した表示。
大きな時間表示の上で、作業・休憩・掃除の区切りがひと目で分かるようにしています。
- 現在時間帯の表示（作業中 / 休憩中 / 掃除）
- 次の区切り時刻と残り時間
- 区切り時刻での中央アラート表示（5 秒自動消去）
- Web Audio によるチャイム再生（必要時のみ有効化）
- 作業/休憩/掃除の開始時刻を設定画面から編集
- 担当表
- スケジュール
- 試飲感想の記録
- 欠点豆図鑑
- 生産記録
- ドリップガイド
新機能より、今ある機能を使いやすくすることを優先していました。
- Node.js 24.x 推奨（フロントエンドCIと同じバージョン）
- npm（
package-lock.jsonに従ってnpm install/npm ciを実行） - Firebase プロジェクト（Authentication / Firestore / Storage / Cloud Functions / Hosting）
補足: Cloud Functions の実行ランタイムは Node.js 20 です。Functions 側の詳細は functions/package.json と functions/README.md を参照してください。
git clone https://github.com/IKcoding-jp/RoastPlus.git
cd RoastPlus
npm install
cp .env.example .env.local
# .env.local を編集して Firebase 設定を入れる
npm run devローカルは既定で http://localhost:3000 を開きます。
iPad 実機確認がある場合は同一ネットワークからアクセスしてください。
npm run dev # 開発サーバ起動
npm run typecheck # TypeScript型チェック
npm run lint # ESLint
npm run test:run # Vitestを1回実行
npm run test:rules # Firestore Rulesテスト
npm run build # 本番ビルド（productionではstatic exportでout/を生成）
npm run test:e2e # Playwright E2E| カテゴリ | 技術 |
|---|---|
| フレームワーク | Next.js 16 (App Router) |
| UI | React 19, Tailwind CSS v4, Framer Motion |
| 言語 | TypeScript 5 |
| 認証・DB | Firebase Authentication, Firestore |
| ストレージ | Firebase Storage |
| AI | OpenAI API（Cloud Functions経由。クライアントから直接呼び出さない） |
| 問い合わせ | EmailJS（お問い合わせフォーム） |
| テスト | Vitest, Playwright |
| PWA | Service Worker, Web App Manifest |
本番URL: https://roastplus-72fa6.web.app
本番ビルドは Next.js の static export です。next.config.ts では production 時のみ output: 'export' が有効になり、Firebase Hosting は firebase.json の設定どおり out/ を配信します。
public/ 配下は本番でそのまま配信される公開素材置き場です。秘密情報、テスト用ファイル、デバッグ用ファイルは置かないでください。
- バックアップ運用手順 — Firestore / Storage の手動バックアップ・復元手順