🌐 ブログの初期画面構成とログインについて
本ドキュメントは、ブログ（apps/blog）トップ画面のレイアウト構成と、基本的な会員登録およびログイン方式の概要を紹介します。
🎨 1. ブログの画面構成とレイアウト
ブログの画面は、訪問者が情報を迅速に見つけられるよう、直感的なレイアウト（ヘッダー、本文、サイドバー、フッター）で設計されています。
- ナビゲーションヘッダー (Header):
- サイトロゴ: クリックするといつでもトップ画面に戻ります。
- ショートカットメニュー: カテゴリへのショートカットや外部リンクなど、主要なリンクが表示されます。
- 多言語切り替え: 地球儀アイコンをクリックすると、メニュー言語や記事の翻訳版をリアルタイムで切り替えて表示できます。
- サイドバー (Sidebar):
- PC画面では、カテゴリ一覧、運営者プロフィールカード、人気タグなどが表示され、自由な探索をサポートします。
- モバイル端末からのアクセス時には、本文の視認性向上のため自動的に非表示になります。
- メインコンテンツ領域 (Main Content):
- 最新の記事一覧とカテゴリフィルターが、カードデザイン形式で配置されています。
🔑 2. 会員登録とログイン
コメントの入力やゲストブックへのメッセージ作成に必要な、アカウント作成およびログイン機能をサポートしています。
⚙️ ログインおよび登録サポート方式
- 標準メールログイン/登録 (Default):
- インストール直後にデフォルトで有効化されているログイン方式です。メールアドレス、表示名（ニックネーム）、パスワードを登録して新規登録でき、登録後は即座に自動ログインが適用されます。
- ソーシャルログイン (Better-Auth):
- 内部的にBetter-Authエンジンを搭載しており、Google、GitHub、カカオ、ネイバーなどを含む 計21種のソーシャルプロバイダーログイン をサポートしています。
- ただし、ソーシャルログインは、サイト構築後に管理者が各ソーシャルプラットフォームから取得したクライアントIDおよびシークレットキーを設定用の環境変数に手動で挿入する必要があります。入力されていない場合、ログイン画面にソーシャルボタンは表示されず動作しません。（プロバイダーごとの具体的な連携手順は、後日別のドキュメントで案内予定です。）
- ログイン状態の表示:
- ログインが完了すると、右上ボタンがユーザーのプロフィール画像アイコンとマイページへのショートカットに切り替わります。
- 参考：ユーザーのプロフィール写真を実際に連携して表示する機能は現在開発中のため、デフォルトの画像アイコンで代替表示される場合があります。
コメント 0件
コメントを投稿するにはログインが必要です。