First Light

現在の製品範囲

ホスト型 AI とセマンティック検索は 2026-10-18 に終了しました。docs/PUBLIC_CONTENT_FACTS.md と src/lib/product-availability.ts をご覧ください。以下に記載されている以前の AI セットアップ手順は過去の情報です。

First Light

クラウドエンジニアリング、分離されたチェック、リリースゲート：運用ワークフロー | 優先順位付きバックログ。

落ち着いて作業に取り組める場所です。タスク、カレンダー、習慣、ポモドーロをどこでも同期できます。タスク管理アプリクラスの機能を備えた、セルフホスト可能な、あなた自身のツールです。Web を優先しつつ、コアコードを変更せずに、アーキテクチャをモバイル（Capacitor）やデスクトップ（Tauri / Electron）へ自然に拡張できます。

v1 の内容

• 認証 — Supabase によるメールアドレス／パスワードとマジックリンク
• スマートビュー — 今日、明日、次の 7 日間、受信トレイ
• リスト（プロジェクト）（色付き）
• タグ — クイック追加から自動抽出（#tag）
• クイック追加 — 自然言語解析に対応 — "Email Sam tomorrow 9am #work !1 ~Inbox"
• 優先度（4 段階）
• カレンダービュー（ドラッグしてスケジュール変更）
• ポモドーロタイマー（集中／短い休憩／長い休憩、セッションログ付き）
• 習慣トラッカー（週間グリッド付き）
• アイゼンハワーマトリックス（緊急度 × 重要度）
• 検索 + コマンドパレット（⌘K / Ctrl K）
• リアルタイム同期 — Supabase Realtime によるタブ／デバイス間の同期
• ダーク／ライトテーマ
• PWA（インストール可能、オフラインシェル）

技術スタック

• Next.js 14（App Router）+ TypeScript
• Tailwind CSS
• Supabase（Postgres + Auth + Realtime）
• TanStack Query（サーバー状態）+ Zustand（UI 状態）
• @dnd-kit（ドラッグ＆ドロップ）
• date-fns + chrono-node
• lucide-react アイコン
• next-themes、sonner

---

はじめに

1. 前提条件

• Node.js 18+ と npm
• 無料の Supabase プロジェクト

2. インストール

npm install

3. Supabase データベースを作成する

1. Supabase プロジェクトを開き、SQL Editor に移動します
2. このリポジトリの supabase/migrations/0001_init.sql を開きます
3. SQL エディターに貼り付けて、Run をクリックします

これにより、すべてのテーブル、インデックス、RLS ポリシーと、新しいユーザーのサインアップ時にプロフィールとデフォルトのリストを作成するトリガーが作成されます。また、該当するテーブルで Realtime が有効になります。

4. 環境を設定する

.env.example を .env.local にコピーして、次の項目を入力します：

NEXT_PUBLIC_SUPABASE_URL=https://YOUR-PROJECT.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=YOUR-ANON-KEY
# Optional — enables AI features (Daily Edition, Weekly Retro, LLM quick-add,
# Smart Eisenhower). The app works without this; AI features are skipped.
ANTHROPIC_API_KEY=sk-ant-...

Supabase のキーは、Supabase → Project Settings → API にあります。Anthropic のキーは https://console.anthropic.com/ で取得できます。

AI 機能

ANTHROPIC_API_KEY が設定されていると、アプリで次の機能が有効になります：

• デイリーエディション — Today ページに表示される、落ち着いた雑誌調の朝の編集ブリーフィングです。ユーザーごと、ローカル日付ごとにサーバー側でキャッシュされます。
• 週間レビュー（/app/retro）— 先週の振り返りです。完了したこと、予定どおりに進まなかったこと、手放す価値があることをまとめます。
• LLM クイック追加パーサー — クイック追加とすべてのインライン「タスクを追加」行は、送信時に Claude Haiku による解析を実行し、既存の chrono-node パーサーをフォールバックとして使用します。「オフサイト前の金曜日」「歯医者の後、子どものお迎え前」といった、より豊かな自然言語を理解します。
• スマートアイゼンハワー — マトリックスページの AI · suggest ボタンをクリックすると、配置が適切でないと思われるタスクの移動先が提案されます。ワンクリックで適用できます。
• 音声入力 — すべての「タスクを追加」入力欄にマイクボタンがあります。ブラウザー内蔵の webkitSpeechRecognition を使用します（API キー不要、サーバーとの通信なし）。
• 過負荷防止バナー — Today ビューで、その日の予定が一日の上限（デフォルト 4 時間）を超えている場合に明確に警告し、優先度が最も低いタスクを延期するよう提案します。

費用は少額になるよう設計されています。解析や象限の処理には Haiku、編集ブリーフィングには Sonnet を使用し、日次および週次の出力はキャッシュされます。

5. 起動する

npm run dev

http://localhost:3000 を開いてサインアップすると、すぐに利用できます。

---

キーボードショートカット

ショートカット	操作
⌘K / Ctrl K	コマンドパレット／検索
q	タスクをクイック追加
Esc	開いているダイアログを閉じる

クイック追加の構文

Email Sam tomorrow 9am #work !1 ~Inbox

トークン	意味
自由入力	タスクのタイトル
tomorrow 9am, next monday, in 2 days	期限の日時（chrono-node）
#tag	タグを追加します（存在しない場合は作成します）
!1–!4	優先度：1 = 高、2 = 中、3 = 低、4 = なし
~ListName	リストに振り分けます（存在しない場合は作成します）

---

Vercel にデプロイする

1. このフォルダーを GitHub にプッシュします。
2. Vercel にインポートし、同じ環境変数を設定します。
3. 本番 URL を Supabase の Authentication → URL Configuration に追加します。
   • Site URL：https://yourdomain.com
   • Redirect URLs：https://yourdomain.com/auth/callback

これで完了です。URL を開けるあらゆるデバイスから、スムーズにクラウド同期できます。

PWA アイコンを追加する（任意ですが推奨）

public/icons/ に 2 つの PNG ファイルを配置します。

• icon-192.png（192 × 192）
• icon-512.png（512 × 512）

見た目はどのようなものでも構いません。マニフェストから参照されます。（realfavicongenerator.net などのツールを使えば、ロゴからすぐに生成できます。）

---

ロードマップ — 今後実装する機能

現時点でも十分に強力な v1 ですが、タスク管理の主要機能にはまだ実装が必要なものがあります。

• 繰り返しタスク（RRULE の連携 — カラムはすでに存在します。UI エディターと、完了時のタスク生成が必要です）
• リマインダー／プッシュ通知（Web Push とサービスワーカーによるスケジューリング）
• サブタスクの UI（テーブルカラムはすでに存在します）
• リストごとのカンバンビュー（projects.view_mode はすでに存在します）
• タイムライン／ガントビュー
• 共有と共同作業者（members テーブルと RLS を追加）
• 添付ファイル（Supabase Storage）
• スマートリスト／保存済みフィルター
• 一括編集、複数選択
• 付箋ウィジェット、集中度統計ダッシュボード
• TickTick／Todoist／Apple Reminders／Google Tasks からのインポート
• メールからのクイックキャプチャ（Postmark の受信メール解析）

他のデバイスへの対応

「後で決める」を選びました。準備ができたら、次の簡単な方法で対応できます。

• PWA — すでに有効です。モバイル版 Chrome／iOS Safari でアクセスし、「ホーム画面に追加」を選択すれば完了です。
• iOS／Android ネイティブアプリ — Capacitor でラップします：npx cap init && npx cap add ios && npx cap add android。シェル内で Web アプリはそのまま動作します。プッシュ通知などに必要なネイティブプラグインを追加するだけです。
• デスクトップネイティブアプリ — Tauri または Electron でラップします。Web バンドルは同じものを使用します。
• 完全なネイティブアプリへの書き換え — UI は置き換えますが、Supabase、スキーマ、RLS、リアルタイムチャネルの構成はそのまま維持します。

プロジェクトの構成

first-light/
├── middleware.ts
├── next.config.mjs
├── package.json
├── tailwind.config.ts
├── tsconfig.json
├── public/
│   ├── manifest.webmanifest
│   ├── sw.js
│   └── icons/                    # add icon-192.png and icon-512.png
├── supabase/
│   └── migrations/0001_init.sql
└── src/
    ├── app/
    │   ├── layout.tsx
    │   �