はじめに
「タスク管理アプリ、入れたけど続かない」そんな経験ありませんか？
PiyocoTodoは、タスクをこなすと“ぴよこ”が成長し、AIが励ましてくれる新感覚のTodoアプリです。React + TypeScript + Expressで構築し、AI、音声、ゲーミフィケーション、コラボレーションをフルに盛り込んでいます。
この記事では、PiyocoTodoの設計思想から全機能、技術実装のハイライトまでを解説します。
アプリ概要と特徴
- タスク完了で“ぴよこ”が経験値を獲得し、6段階に成長
- AIが時間・天気・行動に応じて励ましメッセージを生成（Groq API）
- VOICEVOXによる音声再生（150種類以上）
- コスチューム変更でAIの口調や性格が変化
- チームでのタスク共有＆ロール管理
- PWA対応＆スマホ最適化
- Google Calendar / 天気API連携
- Stripeによるサブスクリプション管理
技術スタック
| 分類 | 技術 |
|---|---|
| フロント | React / TypeScript / Material-UI / TanStack Query / React Router / @dnd-kit |
| バックエンド | Express / Node.js / Prisma / SQLite / Passport.js |
| 外部API | Groq (AIメッセージ) / VOICEVOX (音声) / Google Calendar / OpenWeatherMap / Stripe |
実装ハイライト
1. ぴよこの成長 × 経験値システム
const effortLevelXP = { 1: 5, 2: 8, 3: 10, 4: 15, 5: 25 };
const requiredXP = currentLevel * 100;
- タスク完了に応じてぴよこが成長（🥚→🐤→🐓）
- 経験値はタスク難易度に比例
- スキン17種（着物/侍/姫/紳士など）で見た目も性格も変化
→ タスク＝報酬の構図で「やる気の可視化」を実現
2. AIパーソナリティ × Groq API
const context = {
taskTitle: "プレゼン資料作成",
effortLevel: 5,
timeOfDay: "morning",
weather: "sunny",
combo: 3,
levelUp: true
};
- AIは「時刻・天気・連続実行・難易度」などから動的にメッセージ生成
- コスチュームごとに口調が変化
例：着物ぴよこ → 「素晴らしいですわ。朝から3連続完了とは流石ですわね」
→ AIが“行動を評価してくれる存在”として機能
3. VOICEVOX連携で音声出力
await playVoiceMessage(piyocoMessage, speakerId);
- 150種類以上のキャラ音声（ずんだもん等）
- fetch → Blob → Audio再生で即応
- スピーカーIDはユーザー設定可能
→ テキストだけじゃない、“音声で励まされる”体験を実現
4. チームコラボレーション機能
enum CollaboratorRole { OWNER, EDITOR, VIEWER }
- タスクごとの担当者設定
- ロール制で編集・閲覧範囲制御
- Google Calendarとコラボ別に同期
- TanStack Queryでリアルタイム更新
→ 「チームでのタスク共有」がスムーズに
5. ルーチン自動化（cronベース）
const routine = {
executionTime: "07:00",
frequency: "daily",
weekdays: [1, 2, 3, 4, 5],
taskTemplate: { title: "日報作成", effort_level: 3 }
};
- タイムゾーンごとに自動生成
- 日報・ウィークリーレビューなど習慣化をサポート
6. PWA対応（オフライン＆インストール）
self.addEventListener('fetch', (event) => {
event.respondWith(fetch(event.request).catch(() => caches.match(event.request)));
});
- スマホでもホーム画面に追加可能
- オフラインでも使用可能（Network First）
7. プレミアムサブスクリプション（Stripe）
| 機能 | 無料版 | プレミアム版 |
|---|---|---|
| ぴよこレベル上限 | 10 | 50 |
| ガントチャート | ❌ | ✅ |
| 限定スキン | 一部 | 全解放 |
- Stripe Webhookで状態同期
- 顧客IDごとにDBで判定し、機能制限切り替え
設計の工夫ポイント
- Prismaで全モデルをスキーマ管理（User, Task, List, Routine）
- 型安全なAPI通信（フロント⇔バック）
- TanStack Queryで楽観的更新＆キャッシュ管理
- Lazy + Suspenseで画面単位の遅延読み込み
- セキュリティ：CSRF対策 / トークン暗号化 / レート制限
今後の展望
- WebSocket通知＆チャット機能
- AIによる「次のタスク提案」
- React Nativeアプリ版
- データエクスポート（CSV/JSON）
- PostgreSQL + Redisへの移行
まとめ
PiyocoTodoは「タスク管理の継続」をゴールに、ゲーミフィケーション×AI×UXを徹底設計したアプリです。
- ✅ タスクが可視化され
- ✅ やる気が育成として表現され
- ✅ AIが言葉と声で褒めてくれる
“続かない”を“楽しい”に変えるTodo体験を、ぜひ試してみてください。