概要

第1段階でユーザーの取り扱い全般を実装したが、第2段階ではコンテンツの投稿に関する機能を実装していく。

ここでは以下を含む。

• プロフィールや新規投稿などユーザーに応じたページの表示と操作
• CDNによるアイコンの導入
• データベースへのカラムの追加
• リレーションを持ったテーブル構造の操作
• 画像のアップロードなどを含む。

掲示板の全体ページへ

要件

画面遷移

サインイン中の画面遷移を対象とする。

• /top画面で
  • ユーザーの投稿記事(名前、コメント、画面、日付)を表示(上限数付き)
  • メニューの「プロフィール」からユーザーごとの/profile画面へ
  • メニューの「ユーザー設定」からユーザーごとの/edit画面へ
  • メニューの「投稿する」から/post画面へ
• /profile画面で
  • ユーザーの名前、画像、コメントを表示
  • コメントの投稿と画像のアップロードが可能(いずれか一方でも可)
  • ヘッダーメニューのロゴあるいは「トップ画面」から/top画面へ
• /edit画面で
  • プロフィール画像、プロフィールコメントを選択・編集
  • ボタンを押してプロフィールの内容を変更し、/profile画面へ遷移
• /post画面で
  • コメントの投稿と画像のアップロードが可能(いずれか一方でも可)
  • 記事投稿後、ヘッダーメニューのロゴあるいは「トップ画面」から/top画面へ

データベース

テーブル

登録ユーザーテーブル：users

userテーブルは、プロフィールに表示する以下の項目について新たにカラムに追加。

• プロフィール画像のファイル名
• コメントテキスト

カラム名	型(SQL)	型(Rails)	内容
id	BIGINT(AI)	Rails生成
name	VARCHAR(255)	string	ユーザー名
email	VARCHAR(255)	string	メールアドレス
pasword	VARCHAR(255)	string	パスワード
image_file_name	VARCHAR(255)	string	プロフィール画像ファイル名
comment	TEXT	text	プロフィールコメント
created_at	DATETIME	Rails生成
updated_at	DATETIME	Rails生成

投稿記事テーブル：posts

postsテーブルは、Railsが設定する項目以外に以下の項目を持つ。

• 投稿ユーザーのid(users.idを参照)
• 投稿記事のメッセージを保存する。なお画像のみの投稿も認めるため、commentはNULLを許容する。

カラム名	型(SQL)	型(Rails)	内容
id	BIGINT(AI)	Rails生成
user_id	BIGINT	references	usersテーブルのid
message	TEXT	text	メッセージ本文
created_at	DATETIME	Rails生成
updated_at	DATETIME	Rails生成

投稿画像テーブル：post_images

post_imagesテーブルは、Railsが設定する項目以外に以下の項目を持つ。

• 投稿記事のid(posts.idを参照)
• 画像ファイルのファイル名

カラム名	型(SQL)	型(Rails)	内容
id	BIGINT(AI)	Rails生成
post_id	BIGINT	references	postsテーブルのid
file_name	VARCHAR(255)	string	画像ファイル名
created_at	DATETIME	Rails生成
updated_at	DATETIME	Rails生成

リレーション

テーブル間の関係は以下のとおり。

• userは0以上複数のpostを持つ
• postは必ず1つのuserに属する
• postは0以上複数のpost_imageを持つ
• post_imagesは必ず1つのpostに属する

検討

コントローラーとアクション

/profile/:id -> users#show

• ユーザーごとのプロフィールを表示する
• プロフィールの内容はプロフィール画像とコメント

users#edit, users#update

• ユーザーごとのプロフィールを編集する
• 編集内容は、画像の登録／差し替え、コメントの記入／変更

posts_controller.rb

• 投稿記事を取り扱うコントローラー
• 投稿記事の新規登録、編集、削除
• 投稿記事は1つのメッセージと0～複数の画像からなる
• メッセージがあれば画像はなくてもよく、画像があればメッセージは空でもよい

ビュー

users

• users/profile.html.erb：ユーザーのプロフィールページ
• users/edit.html.erb：ユーザー設定ページ
• posts/new.html.erb：新規投稿ページ
• posts/edit.html.erb：投稿内容編集ページ

スタイルファイル

プロフィールページやユーザー設定ページのスタイル定義を追加。

• users.css

投稿関係ページのスタイルは以下のファイルに新規に作成

• posts.css

実装手順

プロフィール

• 仮のプロフィールページを作成する
  →ユーザーに応じた表示
• アイコンを導入する
• ユーザー属性を追加する
  →データベースのカラムの追加
• ユーザー設定の枠組み
• プロフィールコメントの編集機能を実装する
• プロフィール画像のアップロード機能を実装する

記事投稿

• モデルとデータベースの準備
• 新規投稿ページを作成する
• 新規投稿機能を実装する
• 投稿記事表示を実装する
• 投稿記事の削除機能を実装する