Made-with: Cursor

2026-03-19 13:59:28 +09:00

5.5 KiB

Raw Blame History

name	description
setup-fb-tool	図解コメントツールのセットアップを対話的にガイドするスキル。「FBツールをセットアップして」「フィードバック機能を設定して」「FBツールを使えるようにして」「セットアップして」と依頼された際に使用する。

Setup FB Tool

図解に対するフィードバック機能を使えるようにする初期セットアップ。Vercel（ホスティング）とNeon Postgres（データベース）の設定を対話的にガイドし、図解テンプレートにwidgetスクリプトを埋め込む。

実行するのは1回だけ。 セットアップ完了後は、図解を作ってSurgeにデプロイするだけで自動的にフィードバック機能が付く。

前提確認

Node.js

node --version

バージョン番号が表示された → 次に進む。 command not found → references/node-install-guide.md の手順でインストールを案内する。

Vercel CLI

vercel --version

バージョン番号が表示された → 次に進む。 command not found → 以下を実行:

npm install -g vercel

ワークフロー

Step 1: 依存関係のインストール

npm install

Step 2: Vercelにログイン

vercel login

ブラウザが開く。以下を伝える:

ブラウザでVercelのログイン画面が開きます。アカウントを持っていない場合は「Sign Up」から無料アカウントを作成してください。メールアドレスまたはGitHubアカウントで登録できます。ログインが完了したら、ターミナルに戻ってください。

Step 3: APIトークンの生成

APIを保護するためのトークンを生成し、Vercelの環境変数に設定する。

openssl rand -hex 16

表示された文字列がトークン。これを2つの環境変数として Vercel に設定する:

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）の場合:

[System.Guid]::NewGuid().ToString("N")

表示された値を使って:

echo "生成したトークン" | vercel env add API_TOKEN production
echo "生成したトークン" | vercel env add NEXT_PUBLIC_API_TOKEN production

同様に fb-api-token.txt に保存する。

Step 4: Vercelにデプロイ

vercel --yes --prod

デプロイが完了するとURLが表示される。このURLを控えておく。

Step 5: データベースの追加

ユーザーにブラウザでの操作を案内する。以下をそのまま伝える:

データベースを追加します。ブラウザで以下の操作をしてください。

Vercelのダッシュボード（https://vercel.com）を開く

デプロイしたプロジェクトをクリック

上部タブの「Storage」をクリック

「Create Database」をクリック

「Neon Postgres」を選択

プランは「Free」を選択（無料、クレジットカード不要）

Resource Nameを fb-tool-db に変更

「Create」をクリック

次の画面で:

「Search Projects」からプロジェクトを選択

「Custom Prefix」の欄を DATABASE に変更

「Connect」をクリック

完了したら教えてください。

Step 6: 環境変数の取得とマイグレーション

vercel env pull .env.local

テーブルを作成:

npx tsx scripts/migrate.ts

Migration complete. と表示されれば成功。

Step 7: 再デプロイ

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インストール手順

5.5 KiB Raw Blame History Unescape Escape