Ruby・Rails を使ったポートフォリオ

概要

Ruby・Ruby on Railsの基礎文法と基本的な使い方を覚えるために、ポートフォリオを作成しました。
ビジネス系YouTubeを視聴して学んだことを投稿できるアウトプットアプリケーション。

工夫した点

• コードを書く前にER図作成
• 単調なアウトプットにならないよう質問の型も用意した
• 単体テストコード記述
• YouTube埋め込み
• バリデーションの記述
• AWSでEC2にデプロイ

利用方法

ログインしているユーザーが投稿、編集、投稿削除できる。
ログインしてなくても投稿は見れる
またログインユーザーは他人の投稿にコメントできる

目指した課題解決

ペルソナ：忙しい中でも効率的に勉強したい人

【人は想起するときに記憶に定着すると研究で明らかになっている。】
という背景から、
昨今流行のビジネス系のYouTubeに特化したアウトプットアプリを作成。

・アウトプットにより学びを深める場を作りたかった
・他人のアウトプットを見て学びを深めることができる
・単調なアウトプットにならないよう質問の型も用意した
他人のアウトプットに対するコメントによる双方向コミュニケーションによりユーザーにとって高め合えるコミュニティにもなると考えている。

洗い出した要件

機能	目的	詳細	ストーリー
投稿機能	アウトプットすることで学びを定着させる	ログインしているユーザーは投稿できる	投稿ボタンから投稿したいテキストを入力して投稿できる
投稿削除	不要な投稿を削除	必要のない投稿を削除できる	投稿一覧ページから削除ボタンを押すと不要な投稿を削除できる
投稿編集	投稿内容を編集	投稿内容を投稿編集ページから編集できる	自分が投稿した投稿を編集ボタンを押すことで編集できる
投稿詳細表示	投稿の詳細を表示	投稿詳細ページからはコメントができる	投稿の詳細をみることができる
ユーザー新規登録	ユーザを登録させる	ユーザーを登録できる	新規登録ボタンからユーザー情報を登録できる
ログイン・ログアウト	アカウントの切り替え	登録ユーザーはログイン・ログアウトができる	ログイン、ログアウトボタンから各操作が実行できる
投稿へコメント	ユーザー間コミュニケーション	詳細ページから投稿にコメントをすることができる	投稿詳細ページにあるコメント欄にコメントを記入してコメントできる

動画埋め込み

①posts_controller.rbでrubyのlastメソッドを使いurl末尾11桁(動画固有ID)を取得。

posts_controller.rb

def create
   @post = Post.new(post_params)

   url = params[:post][:image]
   url = url.last(11)
   @post.image = url

   if @post.valid?
    @post.save
    redirect_to root_path
   else
    render 'new'
   end
end

②iframeタグの中に先ほど①で取得したurl末尾11桁(動画固有ID)をインスタンス化して入れ込む

show.html.erb

<p>
  <iframe width="560" height="315" src="https://www.youtube.com/embed/<%= 
  @post.image %>" frameborder="0" allow="accelerometer; autoplay; encrypted- 
  media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</p>

埋め込み完了。

設計

テーブル設計

users テーブル

Column	Type	Options
nickname	string	null: false
email	string	null: false
password	string	null: false

Association

• has_many :posts
• has_many :comments

posts テーブル

Column	Type	Options
URL	text	null: false
text	text	null: false
question1	text	null: true
question2	text	null: true
user	references	null: false, foreign_key: true

Association

• belongs_to :user
• has_many :comments

comments テーブル

Column	Type	Options
comment	text
user	references	null: false, foreign_key: true
post	references	null: false, foreign_key: true

Association

• belongs_to :user
• belongs_to :post

動画

身についたポイント

• github AWSを用いることで現場に活かせる経験
• エラー解決に多少慣れた
• 実装案を実現する経験
• 部分テンプレートパーシャルを用いてリファクタリング

今後やっていきたいこと

• S3で画像管理
• ITの基礎知識(基本情報)