制作物管理データベース
IRIAMでの配信活動を総合的に管理するためのWebアプリケーションです。依頼管理、発注管理、連絡先管理、ファンアート管理、リスナー管理、活動管理の機能を提供します。
主な機能
📋 依頼管理
- 制作依頼の登録・編集・削除
- 納期管理と進捗追跡
- 成果物のアップロード・管理
- 顧客情報との連携
🛒 発注管理
- 外部への発注情報管理
- 発注先との連携
- 発注ファイルの管理
- 納期とコスト管理
📇 連絡先管理
- 顧客・発注先の連絡先一覧
- タグによる分類管理
- プロフィール情報の管理
🎨 ファンアート管理
- ファンアートのコレクション
- X（Twitter）からの自動インポート
- タグ・分類機能
- グリッド表示サイズ調整
👥 リスナー管理
- IRIAMリスナーの情報管理
- IRIAMプロフィールからの自動インポート
- バッジ・タグ管理
- ソーシャルメディア連携
📅 活動管理
- 配信活動・イベントの管理
- カレンダー表示
- Google Calendar連携
- サムネイル付き活動記録
システム要件
- Node.js 14.0以上
- npm 6.0以上
- モダンなWebブラウザ（Chrome、Firefox、Safari、Edge）
セットアップ手順
1. 基本セットアップ
# リポジトリをクローン
git clone [repository-url]
cd my-commission-app
# 依存関係をインストール
npm install
# メインアプリケーションを起動
npm start
アプリケーションは http://localhost:3000 で起動します。
2. APIサーバーのセットアップ（オプション）
高度な機能（OGP取得、外部API連携）を利用する場合：
# 新しいターミナルでAPIサーバーフォルダに移動
cd api-server
# 依存関係をインストール
npm install
# APIサーバーを起動
npm start
APIサーバーは http://localhost:3001 で起動します。
利用可能な機能と設定
基本機能（APIサーバー不要）
- ✅ 全ての基本CRUD操作
- ✅ オフラインデータ保存（IndexedDB）
- ✅ カレンダー表示
- ✅ ファイル管理
- ✅ 検索・フィルター機能
- ✅ データのExport/Import（バックアップ・復元）
拡張機能（APIサーバー必要）
- 🔗 X（Twitter）からのファンアートインポート
- 🔗 IRIAMプロフィールからの自動情報取得
- 🔗 Google Calendar連携
- 🔗 OGP情報の自動取得
外部サービス連携
- アプリ内の設定モーダルを開く
- X API Bearer Tokenを設定
- X投稿URLからファンアートを自動インポート
Google Calendar連携
- 活動カレンダーの設定ボタン（⚙️）をクリック
- Google Cloud Projectの作成
- Calendar API有効化
- Client IDとAPI Keyを取得・設定
- 認証完了後、Googleカレンダーの予定が自動表示
IRIAM連携
- リスナー管理でIRIAMプロフィールURLを入力
- 「インポート」ボタンで自動情報取得
- プロフィール画像と表示名を自動設定
データ保存・バックアップ
- ローカルストレージ: IndexedDBを使用してブラウザ内にデータを保存
- オフライン対応: インターネット接続なしでも基本機能は利用可能
- データ永続化: ブラウザデータを削除しない限り、データは保持されます
📦 データのExport/Import機能
- Export: 全データをJSONファイルとしてダウンロード可能
- Import: JSONファイルからデータを復元・移行可能
- バックアップ: 定期的なデータバックアップを推奨
- マイグレーション: 別のデバイスやブラウザへのデータ移行が簡単
使用方法
- データエクスポート: ヘッダーの青いダウンロードアイコン（📥）をクリック
- データインポート: ヘッダーの緑いアップロードアイコン（📤）をクリックしてJSONファイルを選択
- 注意: インポート時は既存データが完全に置き換わります
開発・カスタマイズ
プロジェクト構造
my-commission-app/
├── src/
│ ├── components/ # Reactコンポーネント
│ │ ├── modals/ # モーダルコンポーネント
│ │ ├── views/ # ビューコンポーネント
│ │ ├── lists/ # リストコンポーネント
│ │ └── ui/ # UIコンポーネント
│ ├── utils/ # ユーティリティ関数
│ └── App.js # メインアプリケーション
├── api-server/ # APIサーバー（オプション）
│ ├── server.js # Express.jsサーバー
│ └── package.json # API依存関係
└── public/ # 静的ファイル
利用技術
- フロントエンド: React, TailwindCSS
- データベース: IndexedDB（idb library）
- カレンダー: react-calendar
- APIサーバー: Express.js, Cheerio, Axios
- 外部API: Google Calendar API, X API
トラブルシューティング
よくある問題
1. APIサーバー接続エラー
Error: Failed to fetch from API server
解決方法:
- APIサーバーが起動しているか確認
cd api-server && npm start でAPIサーバーを起動
2. Google Calendar連携エラー
Error: Google Calendar API authentication failed
解決方法:
- Google Cloud ProjectでCalendar APIが有効化されているか確認
- Client IDとAPI Keyが正しく設定されているか確認
- ブラウザでポップアップブロックが無効になっているか確認
3. データが消失した
解決方法:
- ブラウザの開発者ツール → Application → IndexedDB を確認
- ブラウザのプライベートモードではデータが保持されません
- バックアップファイルがある場合は、Import機能で復元可能
- 事前にExport機能でバックアップを作成することを強く推奨
4. Import/Exportエラー
Error: Invalid import data format
解決方法:
- 正しいJSONフォーマットのバックアップファイルを使用
- ファイルが破損していないか確認
- アプリと互換性のあるバージョンのバックアップファイルを使用
パフォーマンス改善
- 大量のファイルを扱う場合は、サムネイル機能を活用
- 定期的にブラウザキャッシュをクリア
- 不要なデータは定期的に削除
- 定期的にExport機能でバックアップを作成（データ保護とパフォーマンス向上）
推奨運用方法
データバックアップ計画
- 日次バックアップ: 重要な作業の前後
- 週次バックアップ: 定期的な全データバックアップ
- 月次バックアップ: 長期保存用アーカイブ
- プロジェクト完了時: プロジェクト関連データのバックアップ
ベストプラクティス
- 重要なデータ入力前には必ずExport機能でバックアップを作成
- 複数のデバイスで使用する場合は、Export/Import機能でデータを同期
- ブラウザの設定でIndexedDBデータの自動削除を無効化
- ファイルサイズの大きな成果物は外部ストレージと併用
ライセンス
このプロジェクトはMITライセンスの下で公開されています。
サポート
問題や質問がある場合は、GitHubのIssuesページでお知らせください。
注意: このアプリケーションはローカル環境での利用を想定しています。機密情報を扱う場合は、適切なセキュリティ対策を実施してください。