プロジェクトの進捗を報告します（Hubtan）
Posted date at 2025-05-20
現在開発している社内アプリケーションの進捗共有と、実装済み・予定の機能をご紹介します。 アプリの目的、機能一覧、使用している技術、開発プロセスについてまとめています。
今回は生成AIの力も借りながら、市場に流通しているアプリケーションと同等のUI品質を目指して開発を進めています。
🛠️現在の進捗状況（2025年5月20日時点）
全体の約30パーセントが完成。
認証機能・メイン画面・マスタ設定系の機能は実装済みで、これから主要機能の開発に入ります。
🖍️実装済みの機能
・ユーザ認証（初回ログイン時に社員情報を付与し、アプリへユーザ登録）
・個人設定（社員情報、画像、通知設定、ロール確認、お気に入りページ）
・経費科目マスタ設定（カテゴリ、科目）
・承認ルートマスタ設定（管理区分、ロール（権限）、承認ステップ、承認ルート）
・ユーザ管理（登録、削除、ロール（権限）設定）
🔜これから実装する主な機能
・シート管理（現場・製品・営業担当者・作業責任者・作業員の情報）
・旅費管理（経費入力〜承認フロー、複写、自動計算、受払金引継ぎ、支払履歴など）
・作業報告書（入力〜承認フロー、完了報告、音声入力、写真アップロードなど）
・写真アップロード（営業担当者への即時共有）
・外部連携（kintone（⇒AS/400）とのバッチ処理）
・PDF出力と履歴付き保存・表示機能
🚀現在開発中の社内アプリケーションについて
🐡アプリの概要
このアプリは、現場出張者に関する経費の管理や作業報告書の作成・確認・保管を行うためのものです。
現場出張者は現場終了時に経費を入力し、作業報告書と旅費精算書をアプリ内で提出します。提出された情報は、承認フローに回されます。
利用対象は、現場出張者、営業担当、生産管理、経理、製造、品質保証部門など多岐にわたります。
🎯アプリの目的
これまで スプレッドシートや紙ベースで行っていた経費精算・作業報告のフローを見直し、間接コストを削減する ことが目的です。
具体的には：
・入力ミスの減少
・確認・再入力（転記）にかかる時間の短縮
・情報の一元管理により、探す手間の削減
などを実現することで、日々の業務負担を軽減します。
🧩主な機能
・認証（Google）／認可（ロールによるアクセス制御）
・マスタ設定（ユーザー、経費科目、承認ルート、ロール管理など）
・経費入力（複写、自動計算、受払金引継ぎ、支払履歴など）
・作業報告書入力（音声入力、完了日の外部連携など）
・写真アップロード（営業担当者への即時共有）
・PDF生成、kintonie（⇒AS/400）との連携、ダッシュボード機能など
🧪技術スタック・設計
モノレポ構成（TurboRepo）を活かし、以下の環境で開発を進めています🌐
・フロントエンド：Next.js
・API：Hono
・DB：Supabase（Prisma使用）
・インフラ：Cloud Run
・認証：Clerk + Google認証（自社ドメイン制限）
✅実施済みの技術的チャレンジ
・Prisma + Supabase によるDB設計・開発
・コンテナ・プレゼンテーションパターンの採用
・React Query（クライアントサイド）による状態管理
・PPR（パーシャルプリレンダリング）＋ Suspense でスケルトンローディング対応
・TurboRepoによるモノレポ構成
・Jest、React Testing Library によるテスト導入
・GitHub ActionsによるCI/CD構築
・Cursor + Claude 3.7 を使ったAI駆動開発
・Supabase Storageへの画像アップロード
・Clerk + Google認証（社内限定ドメイン）
🎨UI・画面のご紹介（一部デモ）
🏠ランディングページ＆ログイン
初めて使う社員向けに概要・マニュアル・問い合わせ先をまとめたページを設置。
ログイン後はkintoneから所属・氏名などの情報を取得してユーザー情報を登録。
📋メインメニュー
今後の機能追加を見越してスケーラブルに設計。アプリで取り扱う情報が増えた場合はメニューを追加します。
👤個人設定
初期表示画面、通知設定、ロール確認、プロフィール画像の変更などが可能。
🔧アプリ設定
機能追加に伴う設定項目の増加を想定してスケーラビリティに設計。
🔧ユーザー管理
管理者によるユーザー追加・編集・ロール変更、更新履歴表示などが可能。
🔁承認ルート設定
4つのマスタ（管理区分・ロール・ステップ・ルート）で柔軟な承認フローを実現。
関連情報の相互参照・操作、ツールチップやアイコンを活用して視認性も意識。
💰経費科目設定
カテゴリ／経費科目の構造をわかりやすく可視化。
有効無効の切り替え、表示順ドラッグ＆ドロップ対応、割増料金・適用期間も複数設定可能。
🚀まとめ
これまでの開発では「要件を満たすこと」が主な目的でしたが、今回はUIの品質にも本格的に取り組んでいます。
市場に流通しているSaaSと同等のUIを目指すと、必然的に構成も複雑になり、AIを活用していても記述に時間がかかるのが現実です。
どちらが正解かは一概に言えませんが、今回はUIにこだわった結果どう評価されるかを試してみたいと思っています。
これから実装に入る経費入力や作業報告書といったコア機能は、ユーザーに「これは使いやすい」と思ってもらえるような体験を目指し、気を引き締めて開発を進めていきます。
←ホームに戻る