Chocolate Craft Campusプロジェクト！ [CCC Vol.52]
『Chocolate Craft Campus』
今回は、チャッピーとのやりとりを公開します^^
質問
この画面をもとに、コード作成を進めたい。
その作成手順を教えてください。
チャッピーの回答
ひろさん、いよいよ Chocolate Craft Campus の「チョコレートラウンジ」を実際に動くホームページにしていく段階ですね！🍫
添付画像を見る限り、デザインの方向性はかなり具体的になっています。今回は、完成イメージを崩さずに、HTML・CSS・JavaScriptで画面を再現し、メッセージ投稿機能まで段階的に実装する手順がおすすめです。
特に大切なのは、最初から全部を作ろうとしないことです。まず見た目を完成させ、次に機能を加えると、問題が起きても原因を特定しやすくなります。
まず、完成までの全体像を確認しましょう
STEP 1 画面の土台を作る
HTMLでヘッダー、メッセージ一覧、プロフィール、フッターの構造を作ります。
STEP 2 デザインを再現する
CSSでダークブラウンの背景、金色の枠線、文字、ボタン、2カラム配置を整えます。
STEP 3 スマホ対応を行う
PCでは左右2カラム、スマホでは縦1列に並ぶように調整します。
STEP 4 メッセージ機能を作る
投稿フォーム、入力チェック、メッセージ表示、返信数の表示などを実装します。
STEP 5 承認機能と公開設定を作る
投稿を管理者が確認してから公開できるようにし、データ保存の仕組みを整えます。
STEP 6 GitHub Pagesで公開する
スマホ・PCで動作確認し、既存のChocolate Craft Campusからアクセスできるようにします。
STEP 1：最初に作る画面の構成
添付画像をベースに、以下の4つのエリアに分けて作成します。
① ヘッダー
Chocolate Craft Campusのロゴ、Chocolate Loungeのタイトル、キャッチコピー。チョコレートの背景画像を配置します。
② 左側：メッセージ一覧
投稿者名、投稿日時、本文、コメント数を表示し、下部に「メッセージを投稿する」ボタンを配置します。
③ 右側：運営者プロフィール
ひめひろさんのプロフィール、受賞歴、資格、作品集、運営者からのひとこと、SUZURIへのリンクを配置します。
④ フッター
ロゴと「知る、見つける、つながる。」のメッセージを配置します。
STEP 2：GitHubで準備するファイル
既存の Chocolate Craft Campus に追加するなら、まずは次の構成がおすすめです。
chocolate-craft-campus/
├── index.html
├── lounge.html
├── css/
│ └── lounge.css
├── js/
│ └── lounge.js
└── images/
├── lounge-header.png
├── lounge-background.png
├── lounge-logo.png
└── profile-icon.png
ファイル 役割
lounge.html ラウンジの画面構造
lounge.css 色、配置、文字、スマホ対応
lounge.js 投稿フォームや画面操作
images/ ヘッダー画像、背景、ロゴなど
既存の画像ファイルやフォルダがある場合は、重複して作らず、そのまま活用します。
ポイント： 最初はHTML・CSS・JavaScriptを分けて管理すると、後から修正しやすくなります。
ひろさんがこれまで取り組んできたページと同様、コードは必要に応じてファイル単位で丸ごと差し替えられる形にできます。
STEP 3：機能は「見た目」と切り離して作る
ここは重要です。GitHub PagesはHTMLなどの静的ファイルを公開する仕組みなので、画面を作るだけでは、投稿を全員で共有したり、管理者承認後に公開したりする機能は完成しません。
機能ごとの実装方針
◆画面表示・ボタン・投稿フォーム
HTML・CSS・JavaScriptで実装できます。
◆投稿内容の保存・全員への共有
データベースなどの保存先が必要です。ブラウザ内だけの保存では、別の
利用者と投稿を共有できません。
◆管理者による公開承認
管理者だけが承認できる認証・権限管理と、未承認投稿を公開しない
仕組みが必要です。
最初はサンプルのメッセージを表示するところまで作り、画面が整ってからデータ保存や承認機能に進むのが安全です。
ひろさんにおすすめの進め方
これまでのサイト制作と同じく、1段階ずつコードを作り、ブラウザで確認してから次へ進む方式にしましょう。
まずは最初の一歩として、現在のGitHubの構成を確認したいです。
****ｺｺﾏﾃﾞ****
難易度がグッと上がった感じですね！
また明日から一歩ずつ進めていきます^^
