シンプルなショートカットアプリ

概要

このプロジェクトでは、ローカルアプリの起動や、よくアクセスするサイトへのクイックアクセスができるアプリを構築します。

よく使うアプリや、Web サイトを登録すると、PC のメニューバーからワンクリックで実行＆ブラウザ表示できる、デスクトップアプリです。

学習目標

Electron と Next.js を組み合わせたデスクトップアプリ開発について、学習します。

Next.js アプリを、システムトレイ（Windows）・メニューバー（macOS）を使用した、デスクトップアプリ化する流れについて、確認してください。

推奨技術

このプロジェクトの難易度と趣旨を踏まえて、以下の使用をお勧めします。

• Electron によるクロスプラットフォームデスクトップアプリ開発
• Next.js を用いた設定画面構築
• TypeScript による型チェック
• Tailwind CSS を用いたスタイリング
• shadcn/ui によるコンポーネントのコレクション
• react-hook-form + Zod を使用したフォーム実装
• SWR による API ロジックの簡素化

---

🎯 お題

• 「ユーザーストーリー」を全て満たす、アプリを構築してください。
• 必要に応じて、スクリーンショットやデモサイトの URL を、参照してください。
• なお、スタイルは、あなた自身で独自にカスタマイズすることが可能です。

必須機能

1. クイックアクセス：
   • よく使うサイトを登録してワンクリックでアクセスできる。
2. プロジェクト登録：
   • フォルダとコマンドをセットで登録・管理する。
3. サーバー起動：
   • 登録されたプロジェクトをワンクリックで起動する。
4. ブラウザ連携：
   • サーバー起動時に自動でブラウザを開く。
5. システムトレイ常駐：
   • システムトレイ（Windows）・メニューバー（macOS）にアイコンを表示し、常駐する。

ユーザーストーリー

• アプリを起動すると、システムトレイ（Windows）・メニューバー（macOS）にアイコンが表示される
• トレイアイコンをクリックすると、アプリ画面が開く
• アプリ画面でプロジェクトの登録・編集・削除ができる
• プロジェクトを登録すると、一覧がトレイアイコンに表示される
• 登録済みプロジェクトをクリックすると、指定フォルダで指定コマンドが実行される
• サーバー起動後、自動的にデフォルトブラウザで localhost が開く
• 起動中のサーバーがメニューに一覧表示される（🟢 マーク付き）
• 起動中のサーバーをクリックすると、停止またはブラウザで開く選択ができる
• クイックアクセスメニューから登録済みサイトにワンクリックでアクセスできる
• アプリ画面でクイックアクセスサイトの追加・削除ができる
• クイックアクセス機能でローカル HTML ファイル（file://プロトコル）も開くことができる
• プロジェクト設定とクイックアクセス設定が JSON ファイルに保存される