first commit
Made-with: Cursor
This commit is contained in:
hiroki ito
@@ -0,0 +1,175 @@
|
||||
---
|
||||
name: setup-fb-tool
|
||||
description: 図解コメントツールのセットアップを対話的にガイドするスキル。「FBツールをセットアップして」「フィードバック機能を設定して」「FBツールを使えるようにして」「セットアップして」と依頼された際に使用する。
|
||||
---
|
||||
|
||||
# Setup FB Tool
|
||||
|
||||
図解に対するフィードバック機能を使えるようにする初期セットアップ。Vercel（ホスティング）とNeon Postgres（データベース）の設定を対話的にガイドし、図解テンプレートにwidgetスクリプトを埋め込む。
|
||||
|
||||
**実行するのは1回だけ。** セットアップ完了後は、図解を作ってSurgeにデプロイするだけで自動的にフィードバック機能が付く。
|
||||
|
||||
## 前提確認
|
||||
|
||||
### Node.js
|
||||
|
||||
```bash
|
||||
node --version
|
||||
```
|
||||
|
||||
バージョン番号が表示された → 次に進む。
|
||||
`command not found` → `references/node-install-guide.md` の手順でインストールを案内する。
|
||||
|
||||
### Vercel CLI
|
||||
|
||||
```bash
|
||||
vercel --version
|
||||
```
|
||||
|
||||
バージョン番号が表示された → 次に進む。
|
||||
`command not found` → 以下を実行:
|
||||
|
||||
```bash
|
||||
npm install -g vercel
|
||||
```
|
||||
|
||||
## ワークフロー
|
||||
|
||||
### Step 1: 依存関係のインストール
|
||||
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
### Step 2: Vercelにログイン
|
||||
|
||||
```bash
|
||||
vercel login
|
||||
```
|
||||
|
||||
ブラウザが開く。以下を伝える:
|
||||
|
||||
> ブラウザでVercelのログイン画面が開きます。
|
||||
> アカウントを持っていない場合は「Sign Up」から無料アカウントを作成してください。
|
||||
> メールアドレスまたはGitHubアカウントで登録できます。
|
||||
> ログインが完了したら、ターミナルに戻ってください。
|
||||
|
||||
### Step 3: APIトークンの生成
|
||||
|
||||
APIを保護するためのトークンを生成し、Vercelの環境変数に設定する。
|
||||
|
||||
```bash
|
||||
openssl rand -hex 16
|
||||
```
|
||||
|
||||
表示された文字列がトークン。これを2つの環境変数として Vercel に設定する:
|
||||
|
||||
```bash
|
||||
echo "生成したトークン" | vercel env add API_TOKEN production
|
||||
echo "生成したトークン" | vercel env add NEXT_PUBLIC_API_TOKEN production
|
||||
```
|
||||
|
||||
`echo` の「生成したトークン」は実際に `openssl` で生成した値に置き換える。`vercel env add` が対話式プロンプトを出さずに値を受け取るよう、パイプで渡す。
|
||||
|
||||
同じトークンをルート直下の `fb-api-token.txt` に保存する（1行、トークンのみ）。
|
||||
|
||||
**Windows（PowerShell）の場合:**
|
||||
|
||||
```powershell
|
||||
[System.Guid]::NewGuid().ToString("N")
|
||||
```
|
||||
|
||||
表示された値を使って:
|
||||
|
||||
```powershell
|
||||
echo "生成したトークン" | vercel env add API_TOKEN production
|
||||
echo "生成したトークン" | vercel env add NEXT_PUBLIC_API_TOKEN production
|
||||
```
|
||||
|
||||
同様に `fb-api-token.txt` に保存する。
|
||||
|
||||
### Step 4: Vercelにデプロイ
|
||||
|
||||
```bash
|
||||
vercel --yes --prod
|
||||
```
|
||||
|
||||
デプロイが完了するとURLが表示される。このURLを控えておく。
|
||||
|
||||
### Step 5: データベースの追加
|
||||
|
||||
ユーザーにブラウザでの操作を案内する。以下をそのまま伝える:
|
||||
|
||||
> データベースを追加します。ブラウザで以下の操作をしてください。
|
||||
>
|
||||
> 1. Vercelのダッシュボード（https://vercel.com）を開く
|
||||
> 2. デプロイしたプロジェクトをクリック
|
||||
> 3. 上部タブの「Storage」をクリック
|
||||
> 4. 「Create Database」をクリック
|
||||
> 5. 「Neon Postgres」を選択
|
||||
> 6. プランは「Free」を選択（無料、クレジットカード不要）
|
||||
> 7. Resource Nameを `fb-tool-db` に変更
|
||||
> 8. 「Create」をクリック
|
||||
> 9. 次の画面で:
|
||||
> - 「Search Projects」からプロジェクトを選択
|
||||
> - 「Custom Prefix」の欄を `DATABASE` に変更
|
||||
> - 「Connect」をクリック
|
||||
>
|
||||
> 完了したら教えてください。
|
||||
|
||||
### Step 6: 環境変数の取得とマイグレーション
|
||||
|
||||
```bash
|
||||
vercel env pull .env.local
|
||||
```
|
||||
|
||||
テーブルを作成:
|
||||
|
||||
```bash
|
||||
npx tsx scripts/migrate.ts
|
||||
```
|
||||
|
||||
`Migration complete.` と表示されれば成功。
|
||||
|
||||
### Step 7: 再デプロイ
|
||||
|
||||
```bash
|
||||
vercel --prod
|
||||
```
|
||||
|
||||
### Step 8: URLを保存する
|
||||
|
||||
Step 4またはStep 7で表示されたVercelのURL（`https://xxx.vercel.app` 形式）を、ルート直下の `fb-tool-url.txt` に書き出す。URLのみを1行で保存する。
|
||||
|
||||
### Step 9: 完了報告
|
||||
|
||||
`fb-tool-url.txt` と `fb-api-token.txt` の存在を確認し、以下を伝える:
|
||||
|
||||
```
|
||||
セットアップ完了
|
||||
|
||||
あなたの FB ツール URL:
|
||||
https://xxx.vercel.app
|
||||
|
||||
APIはトークンで保護されています。
|
||||
図解のデプロイ時にトークンが自動で埋め込まれるため、追加の操作は不要です。
|
||||
|
||||
以降「図解を作って」と伝えるだけで、FB 機能付きの図解が公開されます。
|
||||
|
||||
フィードバック画面を直接開く場合:
|
||||
https://xxx.vercel.app?url=公開ページのURL
|
||||
```
|
||||
|
||||
## エラー対応
|
||||
|
||||
エラーメッセージをそのまま見せず、何が起きていて何をすれば解決するかを平易に説明する。
|
||||
|
||||
- **`vercel: command not found`** → `npm install -g vercel` を実行
|
||||
- **`DATABASE_URL is not set`** → Step 5のデータベース追加が完了しているか確認。完了していれば `vercel env pull .env.local` を再実行
|
||||
- **マイグレーション失敗** → `.env.local` に `DATABASE_URL` が含まれているか確認
|
||||
|
||||
## 依存
|
||||
|
||||
- `package.json` — FBツールの依存関係
|
||||
- `scripts/migrate.ts` — DBマイグレーションスクリプト
|
||||
- `references/node-install-guide.md` — Node.jsインストール手順
|
||||
@@ -0,0 +1,66 @@
|
||||
# Node.js インストールガイド
|
||||
|
||||
SKILL.md の前提確認で Node.js が未インストールだった場合に参照する。
|
||||
|
||||
## 説明と許可
|
||||
|
||||
以下をユーザーに伝え、インストールの許可を求める:
|
||||
|
||||
> フィードバックツールのセットアップには「Node.js」のインストールが必要です。
|
||||
> Node.js は、パソコン上でプログラムを動かすための土台で、世界中で使われている安全な道具です。
|
||||
> **AI-Driven School 運営が確認済みですので安心してください。**
|
||||
>
|
||||
> 今からインストールしてもよいですか？
|
||||
|
||||
ユーザーが許可しなかった場合 → セットアップを中断する旨を伝えて終了。
|
||||
|
||||
## macOS の場合
|
||||
|
||||
インストーラーをダウンロードする:
|
||||
|
||||
```bash
|
||||
PKG_NAME=$(curl -sL https://nodejs.org/dist/latest-lts/ | grep -o 'node-v[0-9.]*\.pkg' | head -1) && curl -fsSL "https://nodejs.org/dist/latest-lts/${PKG_NAME}" -o /tmp/node-install.pkg && echo "ダウンロード完了: ${PKG_NAME}"
|
||||
```
|
||||
|
||||
ダウンロード完了後、インストールを実行する**前に**以下を伝える:
|
||||
|
||||
> インストールのために、パソコンのパスワードの入力が必要です。
|
||||
> これはパソコンにログインするときに使っているパスワードです。
|
||||
> 画面下のターミナル欄にパスワードを入力して Enter を押してください。
|
||||
> 入力中の文字は画面に表示されませんが、正常な動作です。
|
||||
|
||||
```bash
|
||||
sudo installer -pkg /tmp/node-install.pkg -target / && rm /tmp/node-install.pkg
|
||||
```
|
||||
|
||||
## Windows の場合
|
||||
|
||||
インストールを実行する**前に**以下を伝える:
|
||||
|
||||
> インストール中に「このアプリがデバイスに変更を加えることを許可しますか？」という確認画面が表示されることがあります。
|
||||
> 「はい」を押してください。
|
||||
|
||||
```powershell
|
||||
winget install OpenJS.NodeJS.LTS --accept-package-agreements --accept-source-agreements
|
||||
```
|
||||
|
||||
インストール完了後、現在のターミナルで Node.js を使えるようにする:
|
||||
|
||||
```powershell
|
||||
$env:Path = [System.Environment]::GetEnvironmentVariable("Path","Machine") + ";" + [System.Environment]::GetEnvironmentVariable("Path","User")
|
||||
```
|
||||
|
||||
winget が使えない場合（「winget は認識されていません」と表示された場合）:
|
||||
|
||||
```powershell
|
||||
$msi = (Invoke-WebRequest -Uri "https://nodejs.org/dist/latest-lts/" -UseBasicParsing).Links.href | Where-Object { $_ -match "x64\.msi$" } | Select-Object -First 1; Invoke-WebRequest -Uri "https://nodejs.org/dist/latest-lts/$msi" -OutFile "$env:TEMP\node-install.msi" -UseBasicParsing; Start-Process msiexec.exe -ArgumentList "/i `"$env:TEMP\node-install.msi`"" -Verb RunAs -Wait; Remove-Item "$env:TEMP\node-install.msi"
|
||||
```
|
||||
|
||||
## インストール完了の確認
|
||||
|
||||
```bash
|
||||
node --version
|
||||
```
|
||||
|
||||
バージョン番号が表示された → インストール成功。
|
||||
エラーが出た → Cursor を再起動してからもう一度試すよう案内する。
|
||||
Reference in New Issue
Block a user