概要 📌
Copilot を活用してブラウザ上だけで完結する「目安箱＋掲示板」プロジェクトを作成しました。
目次 🗂️
- 作成目的
- 技術スタックと設計方針
- 主要ファイル一覧とサマリ
- 実装済み機能の詳細（管理者・投稿・認証）
- ページごとの挙動メモ
- 実装上のポイントと運用メモ
- 感想と学び
- 今後の展望
作成目的 🎯
- 設計と検証による開発経験の取得 — 設計→検証→修正の反復で実務力を強化。
- チームのスキル底上げ — 実装・共有を通じた技術力の向上。
- AI に関する知見の深化 — Copilot による文書・コード支援、校正、画像生成の実践。
技術スタックと設計方針 🛠️
- フロント技術: HTML5 / CSS / JavaScript
- 暗号化: Web Crypto API / CryptoJS（パスワード暗号化）
- クライアント保存: localStorage / sessionStorage
- 共通処理: common.js / styles.css
-
設計方針:
- ブラウザのみで完結（サーバレスでプロトタイプを迅速に検証）
- ユーザー役割（管理者／一般）で表示・操作を制御
- 監査ログやパスワード初期化フローを localStorage で模擬
主要ファイル一覧とサマリ 📁
- index.html — トップページ
- signup.html — 新規登録フォーム
- admin.html — 管理者インターフェース（承認・ロール管理・監査ログ・初期化）
- login.html — 認証ページ（入力パスワードを暗号化して照合）
- pw_reset_request.html — パスワード初期化依頼（管理者宛・localStorage pwResetRequests に格納）
- change_password.html — パスワード変更（初期化後の初回遷移／通常更新）
- delete_account.html — アカウント削除（本人確認→削除→強制ログアウト）
- opinion.html — 意見投稿／閲覧（スレッド表示・返信・ロール別表示制御）
- common.js / styles.css — 共通ロジックとスタイル
実装済み機能の詳細 🔍
-
ユーザー管理
- 登録 → localStorage に保存。
- 管理者承認フロー：admin.html で承認・ロール付与を実行。管理者画面にてロールを作成／付与可能。
-
認証とパスワード管理
- パスワードは暗号化して localStorage に保存・照合。
- パスワード初期化はユーザーから管理者へ依頼（pwResetRequests に保存）。
- 初期化後は change_password.html にて最初のログイン時に強制パスワード変更。
-
投稿機能（opinion.html）
- スレッド表示、返信機能を実装。
- 表示制御はロール単位で設定。投稿削除は投稿者と管理者のみ可能。
- 監査ログは管理者のみ取得可能に制御（localStorage ベースで模擬）。
-
アカウント削除
- delete_account.html でパスワード入力による本人確認後、localStorage から該当アカウントを削除し強制ログアウトを実行。
ページごとの挙動メモ（非表示スライド反映） 🧭
-
admin.html
- 管理者画面ではロールを作成し、ユーザーへ付与できるUIを用意。
- 監査ログ取得・パスワード初期化（ボタン押下でポップアップ→処理）を実装済み。
-
pw_reset_request.html
- 管理者向けパスワード初期化依頼を localStorage 内の key pwResetRequests に格納する仕様を明記。
-
change_password.html
- 初期化後の最初のログイン時に遷移して既存・新パスワードを入力して更新。更新は localStorage に即時反映。
- 初期化操作は管理者画面からトリガー可能で、ポップアップ確認を挟むフローを組み込んでいる。
-
opinion.html
- スレッド表示・返信の UI と、投稿削除権限（投稿者＋管理者のみ）を繰り返し説明。
実装上のポイントと運用メモ ⚙️
- クライアント保存の限界: localStorage を使うため永続性や機密性に限界がある。実用化にはサーバサイド移行が必須。
- 監査ログと権限設計: 管理者のみが監査ログを閲覧できるよう UI/ロジックで厳格に制御。ログは localStorage に append する形で模擬。
- パスワードフローの注意点: 初期化→強制変更→保存の順序を守ることで UX を確保。暗号化は必須。
- UI ユーザビリティ: ポップアップ確認（初期化、削除など）を随所に挿入して誤操作を防止。
- テスト用情報: レビュー／デモがスムーズ。
感想と学び 💡
- 設計→検証→修正の反復により設計力と実装スキルが向上した。
- Copilot の活用により具体的な修正案や互換性チェックが効率化。
- AI に指示する際のテンプレート化や条件の明文化が成果に直結した。
今後の展望 🔭
- セキュリティ強化（暗号化方式の見直し、サーバサイド移行）
- デザイン改善と操作性向上（レスポンシブ、アクセシビリティ）
- localStorage ベースからの発展（バックエンド構築、永続 DB、認証 API 連携）
- 実運用レベルを目指したリファクタと負荷対策