学習ストリーク・日記（Supabase + Web 版）
英語日記アプリ Learningapp で使っている、データベース（Supabase）と Web 版のコードです。
- メール / パスワードでのログイン
- 連続記録（ストリーク）の保存と表示
- 添削した日記の保存（直近 7 日分）と、Web での閲覧
- 要約練習（Versant 対策）の採点結果の保存と、Web での点数の推移・項目ごとの内訳（内容 50 / 構成 25 / 文法・語彙 25）のグラフ
- お題スピーキングの採点結果の保存と、Web での点数の推移・内訳（内容 40 / 構成 30 / 文法・語彙 30）
- 添削で見つかったミスの種類ごとの集計（Web の「よくあるミス」。アプリの「今日の注意」と採点の重点チェックにも使う）
- やった日カレンダー（日記 = 赤 / 要約 = 青 / お題 = 緑 / リピーティング = ピンク / 単語帳 = 紫 / 2種類 = 銅 / 3〜4種類 = 銀 / 5つ全部 = 金）
ストリークはアプリで日記を添削したときに記録され、Web 版ではアプリと同じ記録と日記の履歴を見られます。
📝 アプリ全体の解説記事（Qiita）：Unity で「話した英語を AI が添削してくれる」英語日記アプリを作った
フォルダ構成
| ファイル | 役割 |
|---|
supabase/schema.sql | テーブル、アクセス制限（RLS）、ストリークや日記を扱う関数 |
supabase/summary.sql | 要約練習の採点結果のテーブルと関数（追加分） |
supabase/topic.sql | お題スピーキングの結果・よくあるミスのテーブルと関数（追加分） |
supabase/repeat.sql | リピーティング（聞いた英文を言い返す練習）の結果のテーブルと関数（追加分） |
supabase/weeks.sql | 週の連続（月曜〜日曜、1 日でも練習した週が何週続いているか）の関数（追加分） |
supabase/sounds.sql | 苦手な発音（発音チェックの判定と言えなかった単語から数える）の表と関数（追加分） |
supabase/vocab.sql | 単語帳（アプリの Vocab）を 1 回終えた日を連続記録・カレンダーに数える関数（追加分） |
supabase/vocab_pron.sql | 単語帳の発音で苦手な音があった単語を 1 回ずつ残す表と関数（追加分。「ミス」のページの「単語の発音」） |
supabase/answer.sql | 短い答えの練習（Versant 式）の結果の表と、その日を連続記録に数える関数（追加分。「ミス」のページの「短い答え」） |
supabase/karaoke.sql | カラオケ（洋楽を歌って、うまく発音できなかった単語を見る）の結果の表と、その日を連続記録に数える関数（追加分。「ミス」のページの「カラオケ」） |
supabase/talk.sql | Talk（3D キャラクターの Lufka と英会話の練習）を 1 回した日を連続記録に数える関数（追加分。会話の中身は保存しない） |
supabase/tests/ | SQL のテスト（手元の PostgreSQL で psql -f topic_test.sql） |
tests/web_test.py | Web 版のテスト（Playwright。Supabase はダミーに差し替える） |
src/streak-client.js | ログイン・ストリーク・日記を呼ぶモジュール（どのフレームワークでも使える） |
index.html + config.js | Web 版の画面。そのまま Vercel に公開できる |
src/main.js | Web 版の入口。言語の切り替えを用意し、config.js が設定済みなら src/page/ を読み込む |
src/page/ | Web 版のページごとの処理（core.js 共通の部品と言語、auth.js ログイン、streak.js 連続記録とカレンダー、diary.js 日記、summary.js 要約と共通のグラフ、topic.js お題、repeat.js リピーティング、mistakes.js よくあるミスと苦手な発音、nav.js メニューとページの切り替え） |
src/styles.css | Web 版の見た目 |
src/practice-logs.js / src/weak-sounds.js | 「ミス」のページの記録の一覧 / 苦手な発音の「その他」をまとめる処理 |
.env.example | Vite / Next.js に組み込むときの環境変数のひな形 |
仕組み
ストリークや日記の読み書きは、ブラウザやアプリからテーブルを直接触るのではなく、**Supabase のデータベース側の関数（RPC）**で行います。
| 関数 | 呼ぶ場所 | 内容 |
|---|
complete_study | アプリ | 今日を「書いた日」として記録する |
get_my_streak | アプリ・Web | 今の連続日数・最長記録・今日書いたかを返す |
import_local_streak | アプリ | ログイン前に端末で数えていた連続日数を、クラウドに引き継ぐ |
save_diary_entry | アプリ | 添削した日記を保存する（直近 7 日分だけ残す） |
get_my_diary | Web | 自分の日記の履歴を返す |
save_summary_result | アプリ | 要約練習の採点結果（合計と項目ごとの点数）を保存する。合計が内訳と合っているかを確かめる。1人あたり新しい 20 件だけ残し、古いものは自動で消す |
get_my_summary_results | Web | 自分の採点結果を新しい順に返す（点数の推移グラフ用） |
complete_study の判定ルールは次のとおりです。
- 最後に書いた日が 昨日 → 連続日数 +1
- 最後に書いた日が 今日 → そのまま（同じ日に何回呼んでも、加算は1回だけ）
- 2日以上空いている / 初回 → 1 にリセット
関数にした理由は2つです。端末の時計を変えても不正に伸ばせないことと、同時に呼ばれても二重に加算されないことです。「今日」は、サーバーの時刻を利用者のタイムゾーン（例：Asia/Tokyo）で換算して決めます。
テーブルは、ブラウザやアプリから直接書き換えられません（本人の行を 読む ことだけ許可しています）。すべての関数は、ログインしたユーザーだけが呼べます。
1. Supabase の準備
-
supabase.com で New project を作る（Region は Northeast Asia (Tokyo) がおすすめ）。データベースのパスワードは控えておく。
-
左メニューの SQL Editor → New query を開き、supabase/schema.sql の中身をすべて貼り付けて Run。Success と出ればよい（何度実行しても問題ない）。
続けて、supabase/summary.sql → supabase/topic.sql → supabase/repeat.sql → supabase/weeks.sql → supabase/sounds.sql → supabase/vocab.sql → supabase/vocab_pron.sql → supabase/answer.sql → supabase/karaoke.sql → supabase/talk.sql の順に、同じように Run する（要約練習・お題スピーキング・リピーティングの結果と、よくあるミス・週の連続・苦手な発音・単語帳の日・単語の発音・短い答え・カラオケを保存・表示し、Talk の日を数えるため）。順番を変えるとエラーになる。
-
Authentication → Sign In / Providers → Email が有効になっているか確認する。
- Confirm email（メール確認）：本番は ON のまま。ON の場合、登録後に届く確認メールのリンクを開くまでログインできない。
- 家族や自分だけで使う場合は、アカウントを作ったあとに Allow new users to sign up をオフにすると、知らない人が登録できなくなる。
-
Project Settings → API（または API Keys）を開き、次の2つを控える。
- Project URL（
https://xxxx.supabase.co）
- anon public キー（新しい画面では publishable key と表示されることがある）
service_role / secret キーは、絶対にブラウザ側のコード、アプリ、Vercel の公開用の環境変数に入れない。
2. Web 版を使う
config.js の2行を、手順 1-4 の値に書き換える。
export const SUPABASE_URL = "https://xxxx.supabase.co";
export const SUPABASE_ANON_KEY = "ここに anon キー";
ローカルで試すには、このフォルダで次を実行して http://localhost:3000 を開く。
npx serve .
anon キーは「公開される前提」の鍵なので、config.js を GitHub に上げても問題ない。データの保護は、schema.sql の RLS と関数の権限が担っている。
3. アプリ（Unity）から使う
アプリ（Learningapp）の Assets/Resources/ApiSecrets.json に、手順 1-4 の値を書く。
{
"supabaseUrl": "https://xxxx.supabase.co",
"supabaseAnonKey": "ここに anon キー"
}
アプリは Supabase の REST API（/rest/v1/rpc/関数名）を直接呼んでいる。
4. 別の Web アプリに組み込む
src/streak-client.js をアプリにコピーし、Supabase のクライアントを渡す。
npm install @supabase/supabase-js
import { createClient } from "@supabase/supabase-js";
import { createStreakApi, friendlyError } from "./streak-client.js";
// Vite の場合: import.meta.env.VITE_SUPABASE_URL
// Next.js の場合: process.env.NEXT_PUBLIC_SUPABASE_URL
const supabase = createClient(
import.meta.env.VITE_SUPABASE_URL,
import.meta.env.VITE_SUPABASE_ANON_KEY
);
export const api = createStreakApi(supabase);
使い方（画面側）：
await api.signUp(email, password); // { needsEmailConfirmation }
await api.signIn(email, password);
await api.signOut();
const { streak, studiedToday } = await api.getStreak(); // 画面に表示する連続日数
const diary = await api.getDiary(); // 日記の履歴（直近 7 日分）
await api.completeStudy(); // 今日を記録する（Web 版の画面では使っていない）
api.onAuthChange((user) => { /* user が null ならログアウト状態 */ });
friendlyError(error); // エラーを日本語のメッセージにする
React の場合は、useEffect で api.onAuthChange を登録し、戻り値（解除用の関数）を return する。src/page/nav.js の最後の部分が、そのまま参考になる。
This is the beginning of the README. Read the rest at the original. Read the full README ↗
