🌍 001 システム全体像 (Overview)
登場人物・技術スタック・データフロー・Vercelの役割
設計書 v1.2 / 2026-05-06
0 上位思想
このシステム全体像は、000-I Intention Layer を上位思想、000 要求仕様 を上位仕様として読む。
俺の付箋は、単なる付箋アプリではなく、AIエージェント時代の「意図の置き場」である。 PC、iPhone/PWA、Google Drive、Vercel、通知基盤は、すべて Capture -> Land -> Persist -> Surface -> Act -> Resolve の loop を支える構成要素として扱う。
1 登場人物
以下7つの登場人物でこのアプリは構成されています。
図 1-1 システム全体関係図
登場人物の役割一覧
表 1-1 登場人物の役割一覧
| No | 登場人物 | 一言で言うと | 何のために使うか |
|---|---|---|---|
| 1 | 1⃣ 🖥 PC アプリ | デスクトップ付箋アプリ | 付箋の表示・編集・保存。iPhone に通知付きで送信。iPhone から受け取った本文・画像・動画を付箋として開く |
| 2 | 2⃣ 📱 iPhone PWA | ホーム画面に追加した Web アプリ | PC からのノートを受け取り閲覧。メモを書き、画像・動画を添付して PC に送る |
| 3 | 3⃣ ⚙️ Service Worker | iPhone の常駐プログラム | アプリを閉じていても Push を受信してノートを保存・通知表示。IndexedDB がデータの唯一の保存場所 |
| 4 | 4⃣ ☁️ Google Drive | PC と iPhone の中継所 | ノートデータを一時的に置く場所。処理したら即削除。開発者はアクセス不可 |
| No | 登場人物 | 一言で言うと | 何のために使うか |
|---|---|---|---|
| 5 | 5⃣ 🌐 Vercel | 開発者が置いた Web サーバー | iPhone PWA を配信。開発者が守る client_secret を iPhone に入れず、Google OAuth のトークン交換・更新だけを行う |
| 6 | 6⃣ 🔑 Google OAuth2 | Drive 操作の許可を受け取る仕組み | ユーザーが Google にログインし、「俺の付箋が Drive のアプリ用ファイルを扱ってよい」と許可する |
| 7 | 7⃣ 📡 APNs / FCM | 通知配信サーバー | PC からの「通知してください」を受け取り iPhone に届ける。APNs は iPhone/Mac、FCM は Chrome/Android |
2 技術スタック
PCアプリ・iPhone PWA・共有インフラの3層に分けて使用技術を整理します。
表 2-1 技術スタック一覧
| No | 領域 | 技術・役割 |
|---|---|---|
| 1 | フレームワーク | Tauri v2（WebView + Rust） |
| 2 | UI | Next.js 14 / React 18 / TypeScript / Tailwind |
| 3 | エディタ | CodeMirror 6（Markdown ハイライト・検索） |
| 4 | バックエンド | Rust（AppState・ファイル I/O・Win32 API） |
| 5 | データ保存 | ファイルシステム（JSON / Markdown） |
| 6 | テスト | Vitest（ユニット）/ Playwright（E2E） |
| No | 領域 | 技術・役割 |
|---|---|---|
| 1 | ページ | Next.js 14 App Router（app/viewer/page.tsx） |
| 2 | 配信 | Vercel（API Routes も同居） |
| 3 | バックグラウンド | Service Worker（worker/index.js） |
| 4 | ローカル DB | IndexedDB（fusen-drafts） |
| 5 | 認証 | Google OAuth2（Vercel API 経由） |
| 6 | 通知 | Web Push / APNs / FCM |
| No | 領域 | 技術・役割 |
|---|---|---|
| 1 | ホスティング | Vercel（PWA 配信・OAuth2 API） |
| 2 | データ中継 | Google Drive API（ユーザー所有） |
| 3 | 通知基盤 | APNs / FCM（Apple / Google 運営） |
| 4 | CI / CD | GitHub Actions（ビルド・Winget 自動リリース） |
3 データフロー概要（2つのフロー）
PCアプリ・iPhone・Driveを結ぶ2つのデータの流れを概観します。
3.1 ➡️ フロー① PC → iPhone（メモを受け取る）
PCで書いたメモが、ロック画面の通知として iPhone に届くまでの全工程です。
図 3.1-1 PC → iPhone データフロー概要
3.2 ⬅️ フロー② iPhone → PC（メモを送る）
図 3.2-1 iPhone → PC データフロー概要
4 なぜ Vercel が必要か
この節は、主に開発者・保守担当向けです。Google OAuth2 の client_secret を iPhone に入れず、Vercel で扱う理由を説明します。
守っている対象：俺の付箋アプリ開発者が Google に登録した「俺の付箋アプリ」そのもの。 ユーザーに守ってもらう値ではありません。詳細な 3 者関係は 005_GLOSSARY 「0 登場人物と関係」 を参照。
ここでいう client は、ユーザーの iPhone や PC のことではなく、Google Cloud Console に登録した「俺の付箋アプリ」のこと。 client_id は Google がそのアプリを見分けるための公開ID、client_secret はそのアプリが本物であることを Google に示すための秘密値。
client_secret は俺の付箋アプリ開発者が Google Cloud Console で発行した「このアプリが本物であることを示す秘密値」。漏れると、悪意ある第三者が俺の付箋の OAuth 設定を悪用し、俺の付箋アプリ開発者のアプリ名義でトークン交換を試みるリスクがある。iPhone PWA のコードに埋め込むと、端末上で読めてしまう。
表 4-1 client_secret 保護方式の比較
| No | 手法 | client_secret の場所 | 問題点・利点 |
|---|---|---|---|
| 1 | ✕ iPhone 直接 | iPhone PWA のコードに埋め込む | 端末上で読めてしまうため、開発者のアプリ名義の OAuth 処理を悪用される恐れがある |
| 2 | ✔ Vercel 経由 | Vercel の環境変数に置く | iPhone には届かない。Vercel のサーバー内で、トークン交換・更新の瞬間だけ使う |
5 改版履歴
表 5-1 改版履歴
| No | バージョン | 日付 | 変更内容 |
|---|---|---|---|
| 1 | 1.0 | 26-04-19 | 設計書を 001/002/003 に再編。本ファイル（001）は全体像を担当。旧 001_ARCHITECTURE_DESIGN・003_SYSTEM_OVERVIEW の該当部分を統合 |
| 2 | 1.1 | 26-04-24 | システム全体関係図を graph LR（横向き）に変更。スクロールなしで全体が見えるよう改善。 |
| 3 | 1.2 | 26-05-06 | 1 登場人物、2 技術スタック、4 なぜ Vercel が必要かを修正。技術スタック表に No を追加し、OAuth / Vercel の説明を開発者・保守担当向けとして明記。client_secret を誰が何のために守るのか分かる表現へ修正。 |
| 4 | 1.3 | 26-05-25 | iPhone → PC フローに VideoDrop を追加。画像・動画を添付メディアとして扱い、PC 側で動画を assets/video/ に保存する全体像を追記。 |
| 5 | 1.4 | 26-05-31 | 4「なぜ Vercel が必要か」の表現を 3 者語彙に統一。「アプリ作者」を「俺の付箋アプリ開発者」、「第三者」を「悪意ある第三者」に修正し、005「0 登場人物と関係」への参照を追加。 |