プロジェクト概要
OpsGuideは、定型業務ワークフローのモデル化、定型タスクの自動化、実行管理を一元化されたインターフェースで行うマルチテナントSaaSプロダクトです。Reactダッシュボード、FastAPI + GraphQLバックエンド、ブラウザ自動化ジョブ、AWSインフラを組み合わせ、ワークフロー実行、AI支援によるシナリオ生成、使用量ガバナンス、組織レベルのアクセス制御を提供します。
私はフルスタック開発者として2025年4月から2026年2月までこのプロジェクトに参画し、Webアプリケーション、バックエンドAPI、フォーム送信ワークフローを支える自動化パイプラインに貢献しました。
プロダクトへのリンク: OpsGuide
会社ページ: PORTAMENT
使用技術スタック
- フロントエンド: React, TypeScript, Vite, Tailwind CSS, Apollo Client
- バックエンド: Python, FastAPI, Strawberry GraphQL, SQLAlchemy
- 自動化: Node.js, TypeScript, Playwright, AWS Batch
- データ & インフラ: PostgreSQL, Redis, S3, ECS Fargate, Lambda, Step Functions, Terraform
- 認証 & プラットフォーム: Auth0, CloudFront, ALB, CloudWatch
プロダクトの背景
このプロダクトは、従来のSaaSにおけるCRUD画面と、長時間実行される自動化ジョブの双方にまたがる難易度の高い領域に位置しています。ユーザーが以下の作業を行う必要がある場合、通常のWebアプリの単なるリクエスト/レスポンスモデルでは不十分です。
- 組織、シナリオ、ターゲット企業を管理する
- クラウド上で非同期に実行される自動化を開始する
- 後から実行ステータスや失敗原因を確認する
- 使用制限、アクセス制御、テナント分離を一貫して維持する
UI、API、データモデル、実行レイヤーのすべてを整然と噛み合わせる必要があるため、フルスタックの観点から非常に興味深いプロジェクトでした。
担当内容
以下のような領域において、フルスタックでのプロダクト開発を担当しました。
- Reactアプリケーションにおけるプロダクト画面の構築と改善
- フロントエンドフローからGraphQLクエリおよびミューテーションへの接続
- ワークフロー実行、シナリオ処理、組織スコープデータのバックエンドロジックのサポート
- ブラウザベースの実行ワーカーにジョブを投入する自動化パイプラインの調整
- 業務ダッシュボード、設定ページ、結果追跡フロー全般にわたる使いやすさの維持
主な技術的決定
1. ダッシュボード主導のプロダクトフローにおけるGraphQLの採用
OpsGuideには、UIが複数のドメイン（組織、フォームターゲット、企業、シナリオ、結果、使用量情報）から関連データを一度に取得する必要がある画面が多く存在します。多数のREST呼び出しを組み合わせる代わりに、画面に必要な正確なデータ形状をフロントエンドから要求できるGraphQLが最適でした。
2. Webリクエストと自動化実行の分離
長時間のブラウザ自動化ジョブは、同期API処理には不向きです。本アーキテクチャでは、自動化処理をAWS Batchや関連オーケストレーションコンポーネントに委し、ユーザー起因のリクエストと実行ワーカーを分離しています。これによりWebアプリの応答性を保ちつつ、再試行やステータス追跡、エラー処理を扱いやすくしました。
3. 初期からのマルチテナントデータ境界の設計
複数の組織にサービスを提供するため、テナント境界は後付けではなく設計の核心である必要がありました。業務データの孤立性を保ち、請求や上限ロジックを確実に適用するため、組織対応のデータモデル、権限チェック、使用量追跡を徹底しました。
4. ハイブリッドAI + ルールベースのシナリオ生成
プラットフォームの特徴的な機能の1つは、フォームに対するシナリオの自動生成です。すべてをLLMに頼るアプローチは高コストで予測可能性に欠けるため、一般事例にはルールベース検出を使用し、複雑なフォーム構造の場合にAIへフォールバックする構成にしました。すべてのケースを高コストな処理に通すよりも優れた技術的トレードオフです。
フルスタックにおける課題
- 非同期実行モデル: ユーザーは即座のフィードバックを期待しますが、実際の処理は分散ワーカー内で後から発生します
- ワークフローの可視性: 結果、失敗、再試行、状態遷移をUI上で分かりやすく表現する必要があります
- テナントの安全性: 組織の境界はクエリ、ミューテーション、上限、権限に影響します
- 動的なWebサイト: 外部フォームは頻繁に変更されるため、自動化には脆弱さではなく堅牢性が求められます
- コストと機能のバランス: AI支援による生成は有用ですが、慎重な制御が必要です
成果
このプロジェクトにより、私のフルスタック開発者としての経験がさらに強化されました。具体的にはプロダクトのフロントエンド開発、バックエンドAPI構築、ドメインモデリング、および非同期実行システムとの統合です。UI、API、データフロー、バックグラウンド実行のすべてが連携して初めて機能が完成するシステムです。
得られた知見
- 非同期操作向けの設計は、バックエンドの実装だけでなくフロントエンドのUXの意思決定も変えます。
- マルチテナントシステムは、組織の境界がどこでも明確になっていると保守が格段に容易になります。
- ワークフロープロダクトには明確なステータスモデリングが必要です。さもないと、ジョブが成功していても不快感を与えてしまいます。
- AI機能は、確定的なルールやガードレールと組み合わされたときに、本番環境で最も真価を発揮します。
添付資料
実行フロー一覧
フローデザイナー / ビジュアルエディタ
実行履歴
