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

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

#工夫した点

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

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

# 目指した課題解決
###ペルソナ：忙しい中でも効率的に勉強したい人
【人は想起するときに記憶に定着すると研究で明らかになっている。】
という背景から、
昨今流行のビジネス系のYouTubeに特化したアウトプットアプリを作成。

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

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

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

```ruby: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)をインスタンス化して入れ込む

```ruby: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>
```
埋め込み完了。

#設計
![Untitled_Diagram_drawio_-_diagrams_net_-_Gyazo.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542843/cbb4867f-2a07-6ccb-e6a9-69f82d21f4c4.png)

# テーブル設計

## 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

##動画
![ezgif.com-gif-maker.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542843/df730429-a933-3e31-0ef1-59f4fe67dc36.gif)

https://im7.ezgif.com/tmp/ezgif-7-014dc9be269e.gif

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

#今後やっていきたいこと
* S3で画像管理
* ITの基礎知識(基本情報)