253 lines
8.7 KiB
Markdown
253 lines
8.7 KiB
Markdown
# 新アプリ作成ガイド
|
||
|
||
**最終更新: 2026-04-11**
|
||
|
||
`posimai-project` で新しい PWA アプリを作成し、エコシステムに統合するための完全な手順書。
|
||
|
||
---
|
||
|
||
## 0. テンプレート選択
|
||
|
||
| テンプレート | 使うべきアプリ |
|
||
|------------|--------------|
|
||
| `_template-minimal/` | **全ての新規アプリ**（現行標準） |
|
||
|
||
`_template/`（旧フル版）は廃止予定。`_template-minimal/` が唯一の基準。
|
||
|
||
### テンプレートに含まれるもの
|
||
|
||
- `index.html` — posimai-ui 参照・JWT token handoff・PWA meta 完備
|
||
- `sw.js` — stale-while-revalidate + skipWaiting（即時反映）
|
||
- `manifest.json` — PWA 必須ファイル
|
||
- `package.json` — `npm run deploy` スクリプト
|
||
|
||
---
|
||
|
||
## 1. アプリ分類と技術選定
|
||
|
||
### 実装パターンの選び方
|
||
|
||
| パターン | 対象 | 具体例 |
|
||
|---------|------|--------|
|
||
| **A: 静的 HTML + posimai-ui** | 単機能ツール・表示系 | diff, clean, timer, lens, ambient |
|
||
| **B: 静的 HTML + posimai-ui + Alpine.js** | 状態管理が必要なアプリ | brain, feed, journal, habit, pulse 相当の新アプリ |
|
||
| **C: Next.js** | 複雑なデータダッシュボード・管理画面 | dashboard, analytics 相当のみ |
|
||
|
||
**迷ったらパターン A から始める。** 後から Alpine.js を足す方が、最初から Next.js にするより簡単。
|
||
|
||
### Alpine.js の追加（パターン B）
|
||
|
||
```html
|
||
<!-- </body> 直前の base.js の後に追記 -->
|
||
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.3/dist/cdn.min.js"
|
||
integrity="sha384-GHo7DVRmCTRSFRzLMbZ4YtNhX4mJRqtGSZ6+j5RqbzW8i3KO/pFqGmNE7qJBg1t"
|
||
defer></script>
|
||
```
|
||
|
||
バージョンは `3.14.3` 固定（`@latest` 禁止）。使い方:
|
||
|
||
```html
|
||
<div x-data="{ count: 0 }">
|
||
<button x-on:click="count++">+</button>
|
||
<span x-text="count"></span>
|
||
</div>
|
||
```
|
||
|
||
---
|
||
|
||
## 2. 実装前チェック（0 番台）
|
||
|
||
### 0. アクセントカラーを確定する
|
||
|
||
デフォルトの Teal (`#6EE7B7`) で問題なければ何もしない。
|
||
変更する場合は `docs/design-system.md` の「アプリ別アクセントカラー」テーブルに**先に追記**してから実装を開始する。
|
||
|
||
カテゴリ別ガイドライン:
|
||
|
||
| カテゴリ | 推奨アクセント |
|
||
|---------|--------------|
|
||
| input / routine / create / tools | `#6EE7B7` Teal（デフォルト） |
|
||
| インフラ / 開発ツール | `#22D3EE` Cyan または `#A78BFA` Violet |
|
||
| 公開サイト / CMS | `#80CAEE` Sky-Blue |
|
||
| 和風 / 特殊テーマ | デザインシステム外で独自定義 |
|
||
|
||
### 0.5. logo.png 用 Gemini プロンプトを作成する
|
||
|
||
**共通プロンプト（全アプリ固定）:**
|
||
|
||
```
|
||
App icon, 512x512px, squircle shape with rounded corners.
|
||
A small translucent glass orb character, soft matte-frosted surface with
|
||
inner teal (#6EE7B7) luminescence glowing from within, gentle light refraction.
|
||
Two tiny calm black dot eyes, subtle implied smile.
|
||
Background: deep charcoal (#0D0D0D) with barely visible teal ambient gradient.
|
||
Style: Apple Liquid Glass, multi-material, 2026 premium minimal.
|
||
No outline, no harsh edges. Soft depth, subsurface scattering.
|
||
```
|
||
|
||
アプリ固有の追加プロンプトを末尾に付ける（「持っているもの」「背景の変化」等の感覚的な表現でよい）。
|
||
|
||
---
|
||
|
||
## 3. 新規アプリ作成（コマンド 1 行）
|
||
|
||
```bash
|
||
bash create-app.sh posimai-myapp "My App Name" "アプリの説明"
|
||
```
|
||
|
||
**このコマンドで自動完了するもの:**
|
||
|
||
| ステップ | 内容 |
|
||
|---------|------|
|
||
| 1 | `_template-minimal/` をコピーして APP_ID/APP_NAME/APP_DESC を置換 |
|
||
| 2 | Git 初期化・初回コミット |
|
||
| 3 | Gitea にリポジトリ作成（git credential store から自動認証） |
|
||
| 4 | GitHub にリポジトリ作成（`gh` CLI） |
|
||
| 5 | 2リモート（gitea + github）に push |
|
||
| 6 | Vercel と GitHub を連携 |
|
||
| 7 | 初回本番デプロイ（空 commit で trigger） |
|
||
| 8 | `projects.json` にカード追加 |
|
||
| 8 | `timeline/page.tsx` に launch エントリ追加 |
|
||
| 8 | `roadmap.json` に追加 |
|
||
| 8 | dashboard / roadmap をデプロイ |
|
||
|
||
---
|
||
|
||
## 4. 手動で追加が必要なもの（判断が必要なため自動化不可）
|
||
|
||
### 4-A. apps/page.tsx の projectIds に追加
|
||
|
||
`posimai-dashboard/src/app/apps/page.tsx` の `APP_CATEGORIES` から適切なカテゴリを選んで `projectIds` に追加する。
|
||
|
||
カテゴリ一覧: `input` / `routine` / `create` / `tools` / `business` / `infra` / `ideas`
|
||
|
||
### 4-B. ecosystem/page.tsx のノード/エッジに追加
|
||
|
||
`posimai-dashboard/src/app/ecosystem/page.tsx` の `NODES` と `EDGES` に追加する。
|
||
接続関係（VPS API を使うか・他アプリからデータを受け取るか）を判断して記述する。
|
||
|
||
### 4-C. logo.png の配置とデプロイ
|
||
|
||
Gemini で生成した logo.png をアプリディレクトリに配置後:
|
||
|
||
```bash
|
||
cd posimai-[app-name]
|
||
git add logo.png
|
||
git commit -m "feat: logo 追加"
|
||
npm run deploy
|
||
```
|
||
|
||
### 4-D. Dashboard をデプロイ（4-A / 4-B 完了後）
|
||
|
||
```bash
|
||
cd posimai-dashboard
|
||
git add src/app/apps/page.tsx src/app/ecosystem/page.tsx
|
||
git commit -m "feat: [app-name] をエコシステムに追加"
|
||
npm run deploy
|
||
```
|
||
|
||
---
|
||
|
||
## 5. アプリ固有の実装ガイドライン
|
||
|
||
### CSS の書き方
|
||
|
||
```html
|
||
<style>
|
||
/* posimai-ui のトークンを使う — 直接カラーコードを書かない */
|
||
.my-card {
|
||
background: var(--surface);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius);
|
||
color: var(--text);
|
||
}
|
||
|
||
/* アクセントを使う場合 */
|
||
.my-btn {
|
||
background: var(--accent);
|
||
color: #0D0D0D; /* アクセント上のテキストのみ直書き可 */
|
||
}
|
||
</style>
|
||
```
|
||
|
||
**禁止:**
|
||
- `color: #6EE7B7` のような直接カラーコード（`var(--accent)` を使う）
|
||
- posimai-ui のトークン外の色（`--champions` `--teal-dim` 等は analytics 専用）
|
||
|
||
### API 呼び出しの書き方
|
||
|
||
```js
|
||
const API_BASE = 'https://api.soar-enrich.com/brain/api';
|
||
const token = localStorage.getItem('posimai_token');
|
||
|
||
const res = await fetch(`${API_BASE}/your-endpoint`, {
|
||
headers: { 'Authorization': `Bearer ${token}` }
|
||
});
|
||
if (!res.ok) throw new Error('API error');
|
||
const data = await res.json();
|
||
```
|
||
|
||
### VPS API を使う新アプリの場合
|
||
|
||
`server.js` に新しいエンドポイントを追加する場合は `bash deploy-server.sh` でバックエンドをデプロイする。
|
||
スキーマ変更（ALTER TABLE / DROP TABLE）は mai 確認必須。
|
||
|
||
### SW キャッシュバージョンの管理
|
||
|
||
`sw.js` の `const CACHE = 'APP_ID-v2';` の数値を変更すると旧キャッシュが削除される。
|
||
機能追加・デザイン変更のたびに更新する必要はない。**ファイル追加・削除時のみ更新する。**
|
||
|
||
---
|
||
|
||
## 6. 実装チェックリスト（完了確認）
|
||
|
||
アプリ実装完了前に以下を全て確認すること:
|
||
|
||
```
|
||
[ ] index.html の <html data-app-id="posimai-[app-name]"> が正しいか
|
||
[ ] manifest.json の "id" が "/posimai-[app-name]/" になっているか
|
||
[ ] sw.js の CACHE 名に APP_ID が入っているか
|
||
[ ] posimai-ui の base.css / base.js を参照しているか
|
||
[ ] デザイントークン外の色を直書きしていないか
|
||
[ ] 外部リンクに rel="noopener" が付いているか
|
||
[ ] 絵文字が含まれていないか（コード・UI・コミット全て）
|
||
[ ] Lucide のバージョンが @0.344.0 固定になっているか
|
||
[ ] 空状態（Empty State）が実装されているか
|
||
[ ] PWA インストール可能か（manifest + SW + HTTPS）
|
||
[ ] logo.png が配置されているか
|
||
```
|
||
|
||
---
|
||
|
||
## 7. デプロイ手順（再掲）
|
||
|
||
```bash
|
||
# フロントエンド（全アプリ共通）
|
||
git add . && git commit -m "feat/fix/chore: ..." && npm run deploy
|
||
# = git push gitea main && git push github main → Vercel 自動デプロイ
|
||
|
||
# VPS バックエンド（server.js 変更時）
|
||
bash deploy-server.sh
|
||
|
||
# Ubuntu PC（posimai-dev / Station 変更時）
|
||
npm run deploy:dev # git push + scp + systemctl restart
|
||
```
|
||
|
||
**禁止:**
|
||
- `vercel --prod` 直接実行
|
||
- `git push origin`（gitea と github の2リモートを必ず両方 push）
|
||
|
||
---
|
||
|
||
## 8. 参照ドキュメント
|
||
|
||
| ドキュメント | 内容 |
|
||
|-------------|------|
|
||
| `docs/design-system.md` | カラートークン・フォント・アイコンルール |
|
||
| `docs/master-architecture.md` | インフラ構成・全アプリ一覧・URL |
|
||
| `docs/disaster-recovery.md` | PC 消失時の復元手順 |
|
||
| `docs/server-refactor-plan.md` | server.js 設計・分割方針 |
|
||
| `posimai-ui/public/v1/base.css` | 共通スタイルの実装 |
|
||
| `posimai-ui/public/v1/base.js` | 共通 JS（テーマ・設定パネル・Toast・SW 登録・Lucide） |
|
||
| `STATUS.md` | 今何をしている最中か（毎セッション参照・更新） |
|