📝 技術設計ドキュメント：「時空留白」(Chronos Space) アプリ
一、 製品概要
「時空留白」は、ミニマルなプライベート日記と感情沈殿空間アプリです。この製品は、高い美意識を持ち、ソーシャル疲れを感じているユーザー層をターゲットにしており、「呼吸感」と「高級感」を強調しています。コア体験は、「光を拾う（投稿）」、「流年（振り返り）」、「留白（瞑想）」の 3 つの主要機能を中心に展開されます。
二、 モバイルネイティブ機能マトリックス
クロスプラットフォームデバイスにおいて、アプリケーションは以下のネイティブ機能を深く統合します。ユーザーの許可が必要なすべての機能に対して、包括的なフォールバック（代替）戦略が設計されています。
| ネイティブ機能 | ビジネスシナリオ | 両端実装方式 (React Native) | 権限申請のタイミングと戦略 | 拒否後のフォールバック (Fallback) |
|---|---|---|---|---|
| アルバム読み取り | 「光を拾う」投稿時に毎日の写真を選択。 | expo-image-picker | ユーザーが「+」アイコンをクリックして画像を選択する際にポップアップで申請し、用途を説明する事前説明ダイアログ (Rationale Dialog) を併用する。 | ユーザーは手動で拒否可能。フォールバック：純粋な閲覧ギャラリーモードに誘導するか、完全な日記機能を体験するために設定からの有効化を提案する。 |
| ローカルストレージ | 毎日のテキストと画像ログの沈殿。 | expo-sqlite & expo-file-system | 動的な権限は不要。オフラインでも自動的に機能する。 | 該当なし |
| 仮想キーボード | 投稿ページでテキストを入力する際に呼び出し。 | KeyboardAvoidingView | システムのポップアップ権限は不要。テキスト入力ボックスが遮られないように、Push（ビューの押し上げ） 戦略を採用。 | 該当なし |
| アプリのライフサイクル | 「留白」瞑想状態の維持。 | AppState (React Native) | フォアグラウンドとバックグラウンドの切り替えを感知。 | 瞑想開始から 1 分以内にバックグラウンドに切り替わった場合はアニメーションを一時停止し、フォアグラウンドに戻った際にタイムスタンプに基づいてアニメーションの進捗を補完する。 |
| システムジェスチャーの傍受 | 「留白」状態での誤操作による終了の防止。 | BackHandler (Android) | Android の物理バックボタンのみを傍受する。 | 強制終了する場合、現在の瞑想を放棄するか確認する穏やかなプロンプトボックスを提供する。 |
三、 画面の向きへの適応マトリックス
本アプリケーションは没入感とレイアウトの美学を主眼としており、異なるページの回転戦略に対して厳格な制約を設けています：
| コアページ | 回転戦略 (Rotation Strategy) | ビジネス上の理由 | 縦・横画面の差異説明 |
|---|---|---|---|
| ホームページ (Index) | 縦画面にロック | ミニマルなテキストレイアウトと「留白（ネガティブスペース）」を維持。横画面は「空と地平線」の視覚的メタファーを壊しやすい。 | 縦画面版のみ提供、横画面はロック。 |
| 投稿ページ (Publish) | 縦画面にロック | 「画像 1 枚 + テキスト 3 行」の雑誌のインナーページレイアウトは、縦画面で最適なアスペクト比を持つ。横画面で入力すると、キーボードが画像を著しく遮る。 | 縦画面版のみ提供、横画面はロック。 |
| ギャラリーページ (Gallery) | 縦画面にロック | 垂直方向のタイムラインスクロールロジック。横画面での単一画像表示は非効率的であり、流れるような体験を破壊する。 | 縦画面版のみ提供、横画面はロック。 |
| 瞑想モード (Meditation) | 双方向適応 | ユーザーは瞑想のためにスマートフォンを机や枕元に横向きに置く可能性がある。コアとなる画像が、どのような姿勢でも中央に配置され、律動していることを保証する必要がある。 | 縦画面：画像は中央、上下に留白。横画面：画像は高さに適応、左右に留白。どちらも暗色の背景と滑らかな呼吸アニメーションを維持する。 |
四、 ゲシュタルトとインターフェース美学の規範 (Gestalt & UI/UX Constraints)
gestalt-prompt-workflow およびモランディ/冷涼な美学スタイルの要件に従い、以下の 5 次元 (5D) アーキテクチャの制約を実施します：
1. GII (知覚ゲシュタルト指数)
- ボーダーレスレイアウト：実線のボーダー (Borders) の使用を厳格に禁止する。要素の近接性 (Proximity) と広い面積の留白 (Negative Space) を利用して、視覚的な階層を分割する。
- モランディカラーパレット：低彩度の黒、グレー、白、およびアースカラー/グレーブルーの色調を使用し、純色（#FF0000、#00FF00など）は禁止。
2. TPF (時間的イージングと物理的忠実度)
- 滑らかな入場：すべてのコンポーネントが表示される際、非線形のフェードイン (Fade In) を適用しなければならない。
- リップルのキャンセル：Android のデフォルトの Material Ripple を無効にし、クリックのフィードバックとして透明度の低下 (Opacity drop) とイージングカーブ (
cubic-bezier(0.4, 0.0, 0.2, 1)) を統一して使用する。
3. COE (レイヤー合成レンダリングの最適化)
- 強制的な GPU アクセラレーション：瞑想モードの「呼吸アニメーション」およびページ遷移は、
transform(scale, translate) とopacityのみを使用して駆動しなければならず、リフローを引き起こすwidth、height、marginなどのプロパティの操作は絶対の 60fps の滑らかさを保証するために絶対に禁止される。
4. SCR (ソースコードの視覚的な明瞭さ)
- HTML/CSS コードおよび後続の RN コンポーネントは意味論的に明確であること。CSS クラス名の無秩序なネストを避け、明確なレイアウトコンテナから分離された、再利用性の高いアトミッククラスを推奨する。
5. OCC (コンポーネントの凝集性とグリッドの再利用)
- ダークモード/ライトモードの融合と、フルスクリーン SafeArea のパディングを統一して処理する、再利用可能な
<Layout>コンテナコンポーネントを抽象化する。
五、 データフローと技術スタックのマッピング
- UI フレームワーク：Expo / React Native (Expo Router)。
- アニメーションライブラリ：
react-native-reanimated。 - ストレージソリューション：ローカルの SQLite ログテーブル (
id, date, image_uri, text_content)、およびメモリオーバーフローを防ぐための画像のローカルサンドボックス圧縮 (expo-image-manipulator) を組み合わせる。
六、 テスト用モックデータ (Mock Data)
開発段階でインターフェースのレイアウトと視覚的なムードをリアルに復元するために、以下のモックデータ構造とプレースホルダー画像を使用する必要がある。画像の選定は、「留白」、「冷涼感」、「モランディトーン」の美学の基調に厳密に従うこと。
1. 構造化モックデータの例 (JSON)
[
{
"id": "entry-001",
"date": "2023.10.01",
"image_uri": "https://images.unsplash.com/photo-1494438639946-1ebd1d20bf85?auto=format&fit=crop&w=600&q=80",
"text_content": "晨光熹微\n露水打湿了石阶\n今天没有风"
},
{
"id": "entry-002",
"date": "2023.09.28",
"image_uri": "https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=600&q=80",
"text_content": "一杯冷掉的咖啡\n窗外的云跑得很慢\n这是留白的一天"
},
{
"id": "entry-003",
"date": "2023.09.25",
"image_uri": "https://images.unsplash.com/photo-1449243115464-f6e4364af11b?auto=format&fit=crop&w=600&q=80",
"text_content": "夜里下了雨\n听不见外面的车流\n只有安静"
}
]
これらのデータは、gallery.html と publish.html のプロトタイプ表示に注入され、さまざまなコンテンツに対するレイアウトの互換性パフォーマンスが期待通りであることを保証します。