📐 006 4+1 Viewアーキテクチャ
4+1 View Model・システム全体俯瞰図
設計書 v1.7 / 2026-06-01
1 4+1 View Model について
このドキュメントは、俺の付箋を「ユーザーが見る機能」「裏で動く処理」「開発者が保守するコード」「実際に置かれる場所」「代表的な使い方」の5つの視点で整理します。 一般的なアーキテクチャ用語を説明することよりも、PC / iPhone / Google Drive / Vercel / Push がどこで関わるかを確認することを目的にします。
2 論理ビュー
対象: ユーザー / 保守担当。システムが提供する機能要素とドメインモデルを定義します。
2.1 コアドメインモデル：付箋（Fusen）
本システムの最も重要な論理エンティティは「付箋（Fusen）」です。PCではMarkdownファイルとして、iPhoneではIndexedDBオブジェクトとして存在しますが、論理的には同一のエンティティとして扱われます。
図 6-1 論理ドメインモデル関係図
2.2 フロントエンドの状態分離
- ViewingMode（閲覧モード）: HTML/CSSで高速レンダリングされた状態。
- EditingMode（編集モード）: CodeMirrorインスタンスが立ち上がった状態。
3 プロセスビュー
対象: 開発者 / 保守担当。並行処理、同期、IPC（プロセス間通信）、バックグラウンド非同期処理の実行モデルを定義します。
3.1 非同期メッセージングとイベント駆動処理
本システムは「ポーリング」と「イベント駆動（Push）」を適材適所で組み合わせて並行処理を実現します。 PC（Tauri）はバックグラウンドスレッドでイベントを監視（tauri::async_runtime）し、iPhone（PWA）は Service Worker を通じてブラウザのメインスレッドとは独立したプロセスでデータを受け取ります。
図 6-2 通信およびバックグラウンドプロセスのタイムライン
4 開発ビュー
対象: 開発者。ソフトウェアモジュールの階層構造、ディレクトリ構成、ライブラリスタックを定義します。
4.1 モノレポアーキテクチャ
本プロジェクトは単一のリポジトリ（モノレポ）で「PC（Tauri）」「iPhone（PWA）」「Vercel（API）」のすべてのコードを管理しています。フロントエンドを Next.js（React） で統一することで、UIコンポーネントや型定義（TypeScript）を共通化しています。
表 4.1-1 モノレポアーキテクチャ概要
| No | ディレクトリ | 責任範囲 | 技術スタック |
|---|---|---|---|
| 1 | src-tauri/ | PCアプリのコアロジック、OSネイティブAPI（ウィンドウ操作、トレイ）、ローカルファイルI/O | Rust (tokio, tauri, reqwest) |
| 2 | app/viewer/ | iPhone PWA および Vercel API Routes のエントリーポイント | Next.js (App Router), React, Google APIs |
| 3 | app/page.tsx 等 | PCアプリ用のフロントエンド・UIコンポーネント群 | Next.js, Tailwind CSS, CodeMirror |
| No | ディレクトリ | 責任範囲 | 技術スタック |
|---|---|---|---|
| 4 | public/worker/ | iPhone バックグラウンド同期と通知処理 | Vanilla JS (Service Worker API), IndexedDB |
| 5 | docs-v2/ | 設計書、用語集、プライバシーポリシー、利用規約 | VitePress, Markdown |
| 6 | wiki-temp/ | GitHub Wiki 用の一時ドキュメント置き場。公開前の Wiki 原稿やリンク確認に使う | Markdown, GitHub Wiki |
| 7 | .github/workflows/ | CI/CD パイプライン（自動ビルド、Winget自動リリース） | GitHub Actions |
5 物理ビュー
対象: 開発者 / 保守担当。システムがデプロイされる場所、ネットワーク、実行コンテキストを定義します。
5.1 ランタイム環境とネットワーク・トポロジー
俺の付箋は、付箋本文を保存する中央データベースを持たない。付箋本文はユーザーの PC、iPhone 連携中の一時ファイルはユーザー自身の Google Drive に置く。 設定画面内の 1 対 1 掲示板だけは例外として、Vercel API が Firebase / Firestore に会話データを保存する。Firestore に保存するのは、ユーザーが掲示板へ自分で送信した本文、開発者返信、匿名会話 ID、既読状態に限定する。 Vercel は iPhone PWA の配信、開発者が守る client_secret を iPhone に入れず Google OAuth のトークン交換・更新を行う処理、設定画面内の 1 対 1 掲示板 API にだけ使う。
図 6-3 物理デプロイトポロジー
6 ユースケース（Scenarios）
対象: ユーザー / 開発者 / 保守担当。4つのビューを実証する代表的なユースケースのシナリオです。
6.1 中心シナリオ: 「出先での確認と返信」
本アーキテクチャの存在意義と4つのビューの連携をもっとも色濃く反映している一連のシナリオ（ユースケース）です。
表 6.1-1 中心シナリオ展開
| No | ステップ | ユーザー視点のシナリオ展開 | アーキテクチャの関与ビュー |
|---|---|---|---|
| 1 | PCで入力 | ユーザーがPC上で「買い物リスト」を書き、「iPhoneに送る」ボタンを押す。 | [Logical] Fusen オブジェクトの生成 [Development] RustモジュールによるファイルI/O |
| 2 | クラウド中継 | 数秒以内にノートがクラウドにアップロードされ、通知発火のトリガーが引かれる。 | [Physical] Local PC → Google Drive 通信 [Process] APNs への非同期 Push API 呼び出し |
| 3 | iPhoneで受信 | ユーザーが外出先でiPhoneを見ると、ポケットの中で既に通知（新着ノート）が届いている。 | [Process] Service Workerのバックグラウンド起床とDrive取得 [Physical] Safariサンドボックス内でのIndexedDB保管 |
| 4 | 返信して削除 | iPhoneから「牛乳買ったよ」と追記してPCに送り返し、手元のノートを消す。画像や動画を添付した場合も、本文はそのまま保持される。 | [Logical] Viewing/Editing Mode の遷移（PWA） [Process] PCの30秒ポーリングによる即時回収と自動削除 |
6.2 補助シナリオ: 「開発者とのやりとり掲示板」
ユーザーと開発者の 1 対 1 の掲示板 UI、Discord を開発者側 UI として使う流れ、ユーザーとの距離感を守る制約は 007 コミュニケーション設計 で定義します。本章では物理トポロジー上、PC アプリが Vercel 掲示板 API を日次確認する接続だけを扱います。
7 改版履歴
表 7-1 改版履歴
| No | バージョン | 日付 | 変更内容 |
|---|---|---|---|
| 1 | 1.0 | 26-04-21 | 新規作成。4+1 View Model（論理・プロセス・開発・物理・シナリオ）全ビューを整理。 |
| 2 | 1.1 | 26-04-24 | classDiagram・物理ビュー flowchart を LR（横向き）に変更。スクロールなしで全体が見えるよう改善。 |
| 3 | 1.2 | 26-05-06 | 1 4+1 View Model、4.1 モノレポアーキテクチャ、5.1 物理ビュー、6.1 中心シナリオを修正。各ビューの対象者を明記し、4.1 に docs-v2/ と wiki-temp/ を追加。6.1 の表に No を追加。Vercel / Google OAuth の物理トポロジーを修正し、client_secret は Drive ではなく Google OAuth のトークン交換に使うことを明確化。 |
| 4 | 1.3 | 26-05-25 | iPhone → PC のポーリング型受信に VideoDrop を追加。動画を assets/video/ に保存し、本文・添付・一時ファイル名・保存パスを分離する境界を明記。 |
| 5 | 1.4 | 26-06-01 | 5.1 にフィードバック返信 API を追加。6.2 から 007 コミュニケーション設計への参照を追加し、ユーザーと開発者の会話 UI の詳細を独立章へ分離。 |
| 6 | 1.5 | 26-06-01 | 返信付箋方式を廃止し、設定画面内の 1 対 1 掲示板 API として物理ビュー・補助シナリオを更新。 |
| 7 | 1.6 | 26-06-01 | 掲示板 API の永続保存先を Firebase / Firestore と明記し、Vercel と Firestore の責務を分離。 |
| 8 | 1.7 | 26-06-01 | 007 章の表現に合わせ、ユーザーとの距離感を守る制約として参照文言を更新。 |