言いにくいことの翻訳

上司に言いにくい報告・相談を、相手のタイプとこれまでの実績に合わせた言い方に翻訳する、会社員向けの Web アプリです。

プロトタイプ(docs/honne-translation-app.prototype.jsx)をベースに、Supabase の認証・データ保存と Claude API の呼び出しを組み込み、Vercel で公開できる形にしています。

パソコンは不要です。 スマホのブラウザだけで、Supabase・Vercel・Anthropic の3つの管理画面を触れば公開まで到達できます。以下の手順もその前提で書いています。

できること

• 上司プロフィールの登録・編集 — 呼び名 / 5つの特性(反応のタイプ・聞きたい順番・好む連絡手段・確認の細かさ・ミスへの反応)/ 地雷ワードの自由記述メモ
• 言い方の候補とリスク予測 — 状況を入力すると、Claude がトーンの異なる3案と、それぞれの「信頼への影響」「関係の温度感」「今後求められそうな対応」を返します
• 結果の記録と学習 — 「うまくいった / 様子見 / こじれた」を記録。同じ上司の実績が3件以上たまると、一般論ではなくその実績を最優先の判断材料として予測します
• ログインとデータ保存 — Supabase Auth(パスワード / メールリンク)と Postgres。データは Row Level Security で本人しか読み書きできません

---

セットアップ手順

順番が大事です。Supabase → Vercel → Supabase に戻る の流れで進めます。Vercel の URL が決まらないと Supabase の設定が完了しないためです。

1. Supabase プロジェクトを作る

1. Supabase で New project
2. Project name は任意、Database Password は自動生成して保存(このアプリでは使いませんが、後から確認できません)、Region は Northeast Asia (Tokyo)
3. 作成完了まで2分ほど待つ

2. テーブルを作る

1. 左メニューの SQL Editor → New query
2. このリポジトリの supabase/schema.sql の中身を全部貼り付けて Run
3. Success. No rows returned と出れば成功
4. Table Editor に boss_profiles と outcome_records が並び、どちらにも緑の RLS enabled バッジが付いていることを確認

3. Supabase の接続情報を控える

Settings → API Keys と Settings → Data API から2つ取得します。

必要なもの	場所	正しい形
Project URL	Settings → Data API	https://xxxxx.supabase.co
公開キー	Settings → API Keys → Publishable and secret	sb_publishable_...

⚠️ Project URL に /rest/v1/ を含めないこと。 Data API の画面には REST エンドポイント(https://xxxxx.supabase.co/rest/v1/)も並んで表示されていますが、それは別物です。付けたまま登録すると、ログイン時に Invalid path specified in request URL で失敗します。.co で終わらせてください。

⚠️ sb_secret_... / service_role キーは絶対に使わないこと。 RLS をすべて無視できる管理者キーです。

Project URL が見つからないときは、ダッシュボードのアドレス https://supabase.com/dashboard/project/<ここがプロジェクトID>/... から https://<プロジェクトID>.supabase.co を組み立てても構いません。

4. Claude API キーを発行する

1. Anthropic Console → API キー → キーを作成
2. 「ID連携を使用すれば、APIキーは不要です」と出たら APIキーで続ける を選ぶ(ID 連携は GCP / AWS / GitHub Actions 向けで、Vercel は対象外)
3. 有効期限は長めに(30日のままだと1か月後にアプリが止まります)
4. 表示は一度きり。sk-ant-... をコピーして控える

API の利用料は Claude の有料プランとは別会計です。 残高がゼロだと候補生成だけが失敗するので、Console の課金画面でクレジットを購入するか支払い方法を登録してください。

5. Vercel にデプロイする

1. Vercel に GitHub アカウントでサインアップし、このリポジトリを Import
2. Environment Variables に3つ登録する

Key	Value	Type
NEXT_PUBLIC_SUPABASE_URL	https://xxxxx.supabase.co	Config
NEXT_PUBLIC_SUPABASE_ANON_KEY	sb_publishable_...	Config
ANTHROPIC_API_KEY	sk-ant-...	Secret

⚠️ NEXT_PUBLIC_ で始まる変数は Type を Config にすること。 これらはブラウザに埋め込まれる公開値なので、Secret にすると Environment variables with a public framework prefix cannot use visibility: secret と表示されて保存できません。しかも保存済みの Secret を後から Config に変更することはできないため、その場合は一度削除して作り直す必要があります。逆に ANTHROPIC_API_KEY は本物の秘密なので Secret のままにします。

3. Deploy を押し、Ready になったら Domains に出ている https://xxxxx.vercel.app を控える

6. Supabase に本番 URL を登録する

Authentication → URL Configuration に、5 で得た URL を設定します。

項目	値
Site URL	https://honne.misop-craft.com
Redirect URLs	https://honne.misop-craft.com/**

独自ドメインを使わない場合は、Vercel が割り当てた https://xxxxx.vercel.app を入れてください。

さらに Authentication → Sign In / Providers → Email の Confirm email をオフにしておくと、登録がその場で完了して確認が楽になります(本番運用時は戻してください)。

パスワード再設定のリンクもこの Redirect URLs を通ります。末尾を /** にしておけば /auth/callback も含まれるので、追加の設定は要りません。

Supabase が送るメールは初期状態だと英語で、どのアプリからのメールか分かりません。日本語の文面を docs/email-templates.md に用意してあります。ただし無料プランで標準のメール送信を使っているあいだは編集できないので、先に外部 SMTP の登録が必要です。詳しくは同ファイルを参照してください。

7. 動作確認

Vercel の URL を開いて、上から順に確認します。

1. ログイン画面が表示される → デプロイ成功
2. 「新規登録」でアカウントを作れる → Supabase の認証が疎通
3. 上司を登録できる → データベースへの読み書きが疎通
4. 「言い方の候補を見る」で3案出る → Claude API が疎通

Chrome の「︙」→「ホーム画面に追加」でアプリのように起動できます。

---

つまずいたときは

デプロイが Error になる

No Output Directory named "public" found after the Build completed.

Vercel がこのプロジェクトを Next.js だと認識していません。リポジトリに vercel.json({"framework": "nextjs"})を置いてあるので通常は起きませんが、もし出た場合は Vercel の Settings → Build and Deployment → Framework Preset が Next.js になっているか確認してください。

Vercel の設定画面がスマホで見つからないときは、プロジェクトの URL の末尾に /settings や /settings/environment-variables を足して直接開くのが早いです。

ログイン・新規登録で失敗する

表示されるもの	原因
Invalid path specified in request URL / 接続先の設定が正しくないようです	NEXT_PUBLIC_SUPABASE_URL に /rest/v1/ などの余計なパスが付いている
Invalid API key	NEXT_PUBLIC_SUPABASE_ANON_KEY が違う値(Project URL と取り違えているなど)
ログイン後すぐログイン画面に戻る	手順6の URL Configuration が未設定
メールが届かない	迷惑メールを確認。無料プランは送信数に制限があるため、Confirm email をオフにするのが早い
再設定リンクを開くと「リンクの有効期限が切れています」	リンクの期限切れか、メールを開いたブラウザが送信時と違う。スマホでは、メールアプリが自分の内蔵ブラウザで開いてしまうことがあるので、リンクを長押しして Chrome で開く

環境変数を直したら、必ず再デプロイしてください。 値はビルド時にアプリへ埋め込まれるため、保存しただけでは反映されません(Deployments → 最新の「…」→ Redeploy)。

候補の生成だけ失敗する

Claude API 側の問題です。Anthropic Console の残高と、ANTHROPIC_API_KEY の有効期限を確認してください。キーの期限が切れている場合は、新しく作り直して Vercel の環境変数を更新 → 再デプロイします。

しばらく放置したら Supabase につながらない

無料プランは一定期間アクセスがないとプロジェクトが一時停止します。ダッシュボードの Restore から復帰できます。

---

開発について

この先の変更のしかた

パソコンがなくても、次の流れで開発を続けられます。

1. Claude Code に変更を依頼する
2. GitHub の main に push される
3. Vercel が自動で再デプロイする(1〜2分)
4. スマホで URL を再読み込みして確認する

ビルドが飛ばされることがあります

このリポジトリには、このアプリ以外のものも入っています。

フォルダ	中身	公開先
ルート(app/ components/ など)	このアプリ	Vercel
caramel-just-meet/	カラメル乗せゲーム	Cloudflare Pages
misop-craft-site/	misop-craft.com のトップページ	GitHub Pages

他のフォルダだけを変更した push では、Vercel はビルドしません。vercel.json の ignoreCommand で判定しています。

このとき Vercel の画面には「Skipped」と出ますが、**失敗ではありません。**このアプリに関係のない変更だったという意味です。

判定しているのは、直前のコミットと比べて、caramel-just-meet misop-craft-site .github 以外に変更があったかどうかです。両方に変更がある場合はビルドされます。

This is the beginning of the README. Read the rest at the original. Read the full README ↗