140 lines
5.2 KiB
Markdown
140 lines
5.2 KiB
Markdown
|
# テンプレート機能分析 — 追加候補の優先度評価
|
|||
|
|
|
|||
|
|
作成: 2026-03-10
|
|||
|
|
作成者: Claude Code（世界的ベテランエンジニア兼 UI/UX デザイナー視点）
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 判断基準
|
|||
|
|
|
|||
|
|
| 軸 | 説明 |
|
|||
|
|
|----|------|
|
|||
|
|
| **汎用性** | 全アプリで使う可能性が高いか |
|
|||
|
|
| **複雑度** | テンプレートに入れたとき AI が正しく使えるか |
|
|||
|
|
| **UX インパクト** | ユーザー体験への貢献度 |
|
|||
|
|
| **実装コスト** | 追加にかかる工数 |
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 即追加すべき（Phase 1 — 今すぐ）
|
|||
|
|
|
|||
|
|
### 1. サイドバーフッター（ユーザー表示エリア）
|
|||
|
|
- **理由**: ほぼ全アプリで「誰が使っているか」の表示が必要になる
|
|||
|
|
- **実装**: シンプルなアバター + 名前 + 設定歯車アイコン
|
|||
|
|
- **複雑度**: 低（静的でよい、API 連携は各アプリが実装）
|
|||
|
|
|
|||
|
|
### 2. 設定パネル（右スライドアウト）
|
|||
|
|
- **理由**: API キー、表示設定、テーマ切替など必ず必要になる
|
|||
|
|
- **実装**: `<aside class="settings-panel">` + toggle ボタン
|
|||
|
|
- **複雑度**: 低〜中（HTML/CSS のみで実現可能）
|
|||
|
|
|
|||
|
|
### 3. accordion ナビセクション
|
|||
|
|
- **理由**: ナビアイテムが増えたとき折りたたみは必須 UX
|
|||
|
|
- **実装**: `<details>/<summary>` で実装するか、`data-accordion` パターン
|
|||
|
|
- **複雑度**: 低
|
|||
|
|
|
|||
|
|
### 4. ページ数バッジ（nav-count）
|
|||
|
|
- **理由**: Brain で実績あり、一覧系アプリ全般で有用
|
|||
|
|
- **実装**: `<span class="nav-count">0</span>` を nav-item に追加するだけ
|
|||
|
|
- **複雑度**: 極低
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 中優先（Phase 2 — 次のイテレーション）
|
|||
|
|
|
|||
|
|
### 5. Stale-While-Revalidate API クライアント（`js/api/client.js`）
|
|||
|
|
- **理由**: API を持つアプリには必須パターン。Brain で実証済み
|
|||
|
|
- **実装**: `loadFromStorage()` → render → `fetch()` → 差分更新 → render
|
|||
|
|
- **複雑度**: 中（ただし単体ファイルとして分離すれば AI が使いやすい）
|
|||
|
|
- **注意**: API なしアプリには不要 → オプション扱いにする
|
|||
|
|
|
|||
|
|
### 6. コマンドパレット（Cmd+K）
|
|||
|
|
- **理由**: パワーユーザー向け。全アプリ必須ではないが差別化になる
|
|||
|
|
- **実装**: フローティング `<dialog>` + `keydown` イベント
|
|||
|
|
- **複雑度**: 中
|
|||
|
|
- **推奨**: デフォルト OFF、コメントアウト済みで含める
|
|||
|
|
|
|||
|
|
### 7. Pull to Refresh（モバイル）
|
|||
|
|
- **理由**: PWA + モバイルでは標準的な UX
|
|||
|
|
- **実装**: `touchstart/touchmove/touchend` + CSS アニメーション
|
|||
|
|
- **複雑度**: 中
|
|||
|
|
- **推奨**: `js/utils/pull-to-refresh.js` として分離
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 後回しでよい（Phase 3 — 需要が出てから）
|
|||
|
|
|
|||
|
|
### 8. Magic Link 認証（`?init_key=xxx`）
|
|||
|
|
- **理由**: Synology API と組み合わせた Brain 専用の設計
|
|||
|
|
- **推奨**: Brain/Feed 系のアプリのみで使う。テンプレートには不向き
|
|||
|
|
|
|||
|
|
### 9. BroadcastChannel（タブ間同期）
|
|||
|
|
- **理由**: 複数タブを同時に使うアプリのみ必要
|
|||
|
|
- **推奨**: 必要なアプリで個別実装
|
|||
|
|
|
|||
|
|
### 10. PWA Share Target
|
|||
|
|
- **理由**: URL 共有受信が必要なアプリのみ
|
|||
|
|
- **推奨**: `manifest.json` のコメントアウト済みサンプルとして含める
|
|||
|
|
|
|||
|
|
### 11. クリップボード URL 検知スナックバー
|
|||
|
|
- **理由**: Brain の URL 保存フローに特化した機能
|
|||
|
|
- **推奨**: Brain 系のみ
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 不要（テンプレートに入れるべきでない）
|
|||
|
|
|
|||
|
|
### Drag & Drop URL 保存
|
|||
|
|
- 保存先（API）が確定してから実装すべき。テンプレートでは過剰
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 推奨: テンプレート次バージョンの構成
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
_template/
|
|||
|
|
index.html ← Phase 1 追加済み
|
|||
|
|
├ header（52px glassmorphism、PC/モバイル自動切替）
|
|||
|
|
├ sidebar（accordion nav + count バッジ + フッター）
|
|||
|
|
├ settings-panel（右スライドアウト）
|
|||
|
|
└ main content（card / list-item / empty-state）
|
|||
|
|
js/
|
|||
|
|
├ app.js ← エントリポイント（最小限）
|
|||
|
|
└ api/
|
|||
|
|
└── client.js ← Stale-While-Revalidate（オプション・コメントアウト）
|
|||
|
|
manifest.json
|
|||
|
|
sw.js
|
|||
|
|
package.json
|
|||
|
|
README.md
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## アクセントカラー問題への推奨
|
|||
|
|
|
|||
|
|
**推奨**: CSS 変数で抽象化し、アプリごとに 1 行だけ変更可能にする
|
|||
|
|
|
|||
|
|
```css
|
|||
|
|
/* ── アクセントカラー（各アプリでここだけ変える） ── */
|
|||
|
|
--accent: #6EE7B7; /* Posimai Teal（デフォルト） */
|
|||
|
|
/* --accent: #818CF8; */ /* Indigo（旧 Brain/Feed 系） */
|
|||
|
|
/* --accent: #A78BFA; */ /* Purple（選択肢） */
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
- テンプレートのデフォルトは `#6EE7B7`（Teal）に統一
|
|||
|
|
- 既存の Brain/Feed は当面現状維持（全更新は大工数）
|
|||
|
|
- 新規アプリはすべて Teal を使う
|
|||
|
|
- **Gemini に「どちらが Posimai ブランドに合うか」を確認するのが理想**
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## まとめ: 今すぐやること
|
|||
|
|
|
|||
|
|
| 順番 | 作業 | 工数 |
|
|||
|
|
|------|------|------|
|
|||
|
|
| 1 | サイドバーフッター追加（テンプレート） | 30分 |
|
|||
|
|
| 2 | 設定パネル追加（テンプレート） | 1時間 |
|
|||
|
|
| 3 | accordion ナビ + count バッジ追加（テンプレート） | 30分 |
|
|||
|
|
| 4 | Gemini にレビュー依頼 | 非同期 |
|
|||
|
|
| 5 | アクセントカラー決定後、テンプレート更新 | 15分 |
|