ZEN大学のドメインのGoogleアカウントユーザーのみが利用できるクローズドなZEN大学の授業評価レビューサイト
半匿名でレビューを投稿・閲覧できます
ZEON（ジオン）は、ZEN university's classes Evaluation Online Network（Unofficial）の略称で、ZEN大学の授業評価を行うためのWebサービスです。Googleアカウント認証を用いて、ZEN大学のドメイン（zen.ac.jp）のGoogleアカウントユーザーのみが利用できるクローズドなサービスとなっています。
ユーザーは半匿名で授業評価を投稿できます。ユーザーIDから生成された固有の名前が表示されるため、完全な匿名ではありませんが、実名は表示されません。これにより、学生は自由に正直な評価を共有しながらも、一定の責任を持って投稿することができます。
- 授業評価機能
- 科目ごとの評価（星の数：1〜5）
- 授業を受けたクォーターの設定
- 半匿名でのレビュー投稿、編集、削除
- レビュー閲覧機能
- 科目ごとのレビュー一覧表示
- 平均評価と評価数の表示
- 「役に立った」機能
- 他ユーザーのレビューに「役に立った」を付与
- 「役に立った」数によるレビュー表示順の影響
- 通報機能
- 不適切なレビューの通報（無関係、不適切、フェイク、その他）
- 通報理由とコメントの送信
- 管理者機能
- 通報の確認
- レビューの非表示設定
- ユーザー管理
このプロジェクトは現在開発中です。基本的な機能は実装されていますが、一部の機能はまだ開発中または計画段階にあります。
詳細な情報は以下のドキュメントを参照してください：
MITライセンスのもとで公開されています。
著作権は、Soichiro Yoshimura (@sifue) に帰属します。
Next.jsとSupabaseを使用したGoogle認証（Google One Tap対応）のテンプレートプロジェクト
機能 · デモ · Vercelへのデプロイ · ローカルでの実行 · Google認証の設定
このテンプレートは、Next.jsとSupabaseを使用して、Google認証を実装したWebアプリケーションを素早く構築するためのものです。
- Google認証
- Googleアカウントでのログイン/サインアップ
- Google One Tap対応（ワンクリックでログイン）
- Cross-Origin-Opener-Policy（COOP）ヘッダー設定済み
- Supabase統合
- Row Level Security（RLS）ポリシー設定例
- サーバーサイドとクライアントサイドの認証処理
- Next.js App Router対応
- App Routerを使用したルーティング
- サーバーコンポーネントとクライアントコンポーネント
- ミドルウェアによる認証状態の管理
- UI/UX
- Tailwind CSSによるスタイリング
- shadcn/uiコンポーネント
- レスポンシブデザイン
デモサイトはhttps://nextjs-quickstart-kappa.vercel.app/で確認できます。
このプロジェクトをVercelにデプロイする場合、以下の手順で設定を行います。
- GitHubにリポジトリをプッシュ
- Vercelでプロジェクトを作成し、リポジトリを連携
- 環境変数を設定
NEXT_PUBLIC_SUPABASE_URL=[SupabaseプロジェクトのURL] NEXT_PUBLIC_SUPABASE_ANON_KEY=[SupabaseプロジェクトのAnon Key] NEXT_PUBLIC_GOOGLE_CLIENT_ID=[GoogleプロジェクトのClient ID]
デプロイ後、以下の追加設定が必要です：
# VercelにデプロイしてURLが分かった後に設定
# 1. GoogleのプロジェクトダッシュボードのOAuthクライアント設定
JavaScript生成元に以下を追加：
https://あなたのドメイン.vercel.app
# 2. OAuth同意画面の設定
承認済みドメインに以下を追加：
あなたのドメイン.vercel.app
# 3. Supabase側の設定
Auth > URL Configurationで、Site URLに以下を設定：
https://あなたのドメイン.vercel.app
-
まず、Supabaseダッシュボードでプロジェクトを作成します
-
このリポジトリをクローンします
git clone https://github.com/sifue/nextjs-quickstart.git cd nextjs-quickstart -
依存関係をインストールします
npm install
-
.env.localファイルを作成し、以下の環境変数を設定しますNEXT_PUBLIC_SUPABASE_URL=[SupabaseプロジェクトのURL] NEXT_PUBLIC_SUPABASE_ANON_KEY=[SupabaseプロジェクトのAnon Key] NEXT_PUBLIC_GOOGLE_CLIENT_ID=[GoogleプロジェクトのClient ID] -
開発サーバーを起動します
npm run dev
これでlocalhost:3000でアプリケーションが実行されます。
- Google Cloud Consoleで新しいプロジェクトを作成
- 「APIとサービス」>「認証情報」で「認証情報を作成」>「OAuthクライアントID」を選択
- アプリケーションの種類で「ウェブアプリケーション」を選択
- 承認済みのJavaScript生成元に以下を追加
http://localhosthttp://localhost:3000- 本番環境の場合:
https://あなたのドメイン.vercel.app
- 承認済みのリダイレクトURIに以下を追加
http://localhost:3000/auth/callback- 本番環境の場合:
https://あなたのドメイン.vercel.app/auth/callback
- 「OAuth同意画面」で必要な情報を設定
- アプリ名
- ユーザーサポートメール
- 承認済みドメイン（本番環境の場合:
あなたのドメイン.vercel.app） - デベロッパーの連絡先情報
- Supabaseダッシュボードでプロジェクトを作成
- 「Authentication」>「Providers」でGoogleプロバイダーを有効化
- GoogleのClient IDとClient Secretを設定
- 「URL Configuration」でSite URLとRedirect URLを設定
- Site URL:
http://localhost:3000（本番環境の場合:https://あなたのドメイン.vercel.app） - Redirect URL:
http://localhost:3000/auth/callback（本番環境の場合:https://あなたのドメイン.vercel.app/auth/callback）
- Site URL:
-- テーブル作成例
create table instruments (
id bigint primary key generated always as identity,
name text not null
);
-- サンプルデータ挿入
insert into instruments (name)
values
('violin'),
('viola'),
('cello');
-- RLS有効化
alter table instruments enable row level security;
-- 未認証ユーザー向けポリシー
create policy "public can read instruments"
on public.instruments
for select to anon
using (true);
-- 認証済みユーザー向けポリシー
create policy "authenticated can read instruments"
on public.instruments
for select to authenticated
using (true);Next.jsとSupabaseでアプリを構築する最速の方法
- Next.jsスタック全体で動作
- App Router
- Pages Router
- Middleware
- Client
- Server
- すべてシームレスに動作！
- supabase-ssr: Supabase認証をCookieを使用するように設定するパッケージ
- Tailwind CSSによるスタイリング
- shadcn/uiコンポーネント
- オプションでSupabaseのVercel統合とVercelデプロイ
- 環境変数が自動的にVercelプロジェクトに割り当てられる
完全に動作するデモはdemo-nextjs-with-supabase.vercel.appで確認できます。
Vercelデプロイでは、Supabaseアカウントとプロジェクトの作成をガイドします。
Supabase統合をインストールすると、関連するすべての環境変数がプロジェクトに割り当てられ、デプロイが完全に機能するようになります。
-
まず、SupabaseダッシュボードでSupabaseプロジェクトを作成する必要があります
-
Supabaseスターターテンプレートを使用してNext.jsアプリを作成します
npx create-next-app --example with-supabase with-supabase-app
yarn create next-app --example with-supabase with-supabase-app
pnpm create next-app --example with-supabase with-supabase-app
-
cdコマンドでアプリのディレクトリに移動しますcd with-supabase-app -
.env.exampleを.env.localにリネームし、以下を更新します：NEXT_PUBLIC_SUPABASE_URL=[SUPABASEプロジェクトURLを挿入] NEXT_PUBLIC_SUPABASE_ANON_KEY=[SUPABASEプロジェクトAPI ANON KEYを挿入]NEXT_PUBLIC_SUPABASE_URLとNEXT_PUBLIC_SUPABASE_ANON_KEYはSupabaseプロジェクトのAPI設定で確認できます -
Next.jsのローカル開発サーバーを実行できます：
npm run dev
スターターキットがlocalhost:3000で実行されるはずです。
-
このテンプレートにはデフォルトのshadcn/uiスタイルが初期化されています。他のui.shadcnスタイルが必要な場合は、
components.jsonを削除してshadcn/uiを再インストールしてください。
Supabaseもローカルで実行するには、ローカル開発のドキュメントをチェックしてください。
フィードバックと問題はSupabase GitHub orgに報告してください。