サブスク管理アプリ

AI系主要サブスクや一般的なサブスクリプションサービスをスマートに管理するWebアプリケーションです。

主な機能

コア機能

• サブスク一覧表示: 登録したすべてのサブスクを見やすいカード形式で表示
• 更新時期の可視化: 次回更新日までの残り日数をカウントダウン表示
• 無料期間管理: トライアル期間の残り日数を強調表示
• 2タップ解約: ワンタップで確認→ワンタップで解約ページへ遷移

サポートサービス

AI系サービス

• ChatGPT Plus
• Claude Pro
• Midjourney
• GitHub Copilot
• Perplexity Pro

ストリーミング

• YouTube Premium
• Netflix
• Amazon Prime
• Spotify Premium
• Disney+

生産性ツール

• Adobe Creative Cloud
• Microsoft 365
• Notion
• Figma

クラウドストレージ

• Google One
• Dropbox
• iCloud+

UX向上機能

1. ダッシュボード

   • 月額・年額の合計コスト表示
   • アクティブなサブスク数
   • カテゴリ別の統計

2. カテゴリフィルター

   • AI、ストリーミング、生産性、クラウド、その他でフィルタリング可能

3. ソート機能

   • 更新日順
   • 価格順
   • 名前順

4. 通知機能

   • 更新日前のリマインダー
   • 無料期間終了前の通知
   • ブラウザ通知に対応

5. テンプレート機能

   • 主要サービスをワンクリックで追加
   • 解約URLやアイコンが自動設定

6. 視覚的なステータス表示

   • 更新日までの日数に応じた色分け
   • 赤: 3日以内
   • オレンジ: 7日以内
   • 黄色: 14日以内
   • 緑: それ以上

7. データ永続化

   • LocalStorageに自動保存
   • ページをリロードしてもデータを保持

技術スタック

• フロントエンド: React 18 + TypeScript
• ビルドツール: Vite
• スタイリング: TailwindCSS
• データ管理: LocalStorage
• 通知: Web Notifications API

セットアップ

前提条件

• Node.js 18以上

インストール

npm install

開発サーバーの起動

npm run dev

ブラウザで http://localhost:5173 を開きます。

ビルド

npm run build

ビルドされたファイルは dist/ ディレクトリに出力されます。

プレビュー

npm run preview

使い方

サブスクの追加

1. 「+ 追加」ボタンをクリック
2. テンプレートから選択、またはカスタム入力
3. 必要な情報を入力
   • サービス名
   • 料金と通貨
   • 請求サイクル（月額/年額）
   • 次回更新日
   • 無料期間終了日（オプション）
   • 解約URL
4. 「追加」ボタンで保存

サブスクの編集

1. カードの「編集」ボタンをクリック
2. 情報を更新
3. 「更新」ボタンで保存

サブスクの解約

1. カードの「解約手続きへ」ボタンをクリック
2. 確認ダイアログで「開く」をクリック
3. 解約ページが新しいタブで開きます

通知の有効化

1. 「通知を有効化」ボタンをクリック
2. ブラウザの許可ダイアログで「許可」を選択

データ構造

各サブスクリプションは以下の情報を持ちます：

interface Subscription {
  id: string;
  name: string;
  category: 'ai' | 'streaming' | 'productivity' | 'cloud' | 'other';
  price: number;
  currency: string;
  billingCycle: 'monthly' | 'yearly';
  nextBillingDate: string;
  trialEndDate?: string;
  cancelUrl: string;
  icon: string;
  color: string;
  isActive: boolean;
  reminderDays: number;
}

ライセンス

MIT