東京理科大学ピアノの会

課題と目的

私が所属する「東京理科大学ピアノの会」には、これまで公式な Web サイトが存在しませんでした。そのため、新入生や演奏会のお客様への情報発信が SNS などに限定され、信頼性のある情報集約地がないことが課題でした。

そこで、サークルの公式な顔として、誰でも必要な情報にアクセスでき、かつサークル員（管理者）自身が簡単かつ安全に情報を更新・管理できる Web サイトをゼロから設計・制作しました。

主な機能と特徴

ユーザー向け機能 高速なページ表示: Next.js の SSG/ISR を採用し、CDN からの配信による高速なレスポンスを実現。

モダンな UI/UX: Rive によるスプラッシュスクリーン、スクロールに追従するヘッダーで、豊かで心地よいユーザー体験を提供。

豊富なコンテンツ: microCMS と連携した「お知らせ」「ブログ」の動的な一覧・詳細ページ。

インタラクティブな要素: スライダーによる活動写真やフライヤーの紹介、Twitter タイムラインの埋め込み。

完全レスポンシブ: PC からスマートフォンまで、あらゆるデバイスで最適化された表示。

管理者向け機能 セキュリティ:

Firebase Authentication (Google)による管理者認証。

Firestore を利用した役割ベースのアクセス制御（RBAC）。

Next.js Middleware による管理者専用ページ・API へのアクセス保護。

多機能ダッシュボード:

サイトの主要な数値（記事数など）を一目で把握できるキーメトリクス。

microCMS へのショートカット、サイトキャッシュの更新機能。

サイト内でのコンテンツ管理:

お知らせ・ブログの新規作成、編集、削除機能。

Tiptap（リッチテキストエディタ）による本文編集。

画像のアップロード、更新、削除機能（microCMS メディア API と連携）。

データ損失防止機能: 記事作成・編集ページから離脱する際の警告機能。

工夫した点・技術的な挑戦

ハイブリッドなレンダリング戦略: 公開ページ（トップ、記事一覧）には ISR を採用し表示速度を最大化する一方、管理者ページには動的サーバーサイドレンダリング(SSR)やクライアントコンポーネントを適用。ページの特性に応じてレンダリング手法を使い分ける、Next.js App Router の思想に基づいた最適なアーキテクチャを設計しました。

安全な管理者システムの構築: firebase-admin をサーバーサイド（API ルート、ミドルウェア）でのみ使用し、クライアントには秘密鍵を一切公開しない安全な認証・認可フローを構築。セッション管理には jose ライブラリによる JWT の検証をミドルウェアに組み込み、環境に依存しない堅牢性を確保しました。

ヘッドレス CMS と連携した動的コンテンツ管理: microCMS をコンテンツのデータベースとして利用するだけでなく、そのメディア API を Next.js の API ルートから安全に呼び出すことで、サイト内から直接メディアファイルをアップロード・管理できる高度な CMS 連携を実現。Webhook による更新の自動デプロイ（CI/CD）も構築し、運用フローを完全に自動化しました。