Ruby on Rails: チャットグループ一覧ページの作成...chapter13-3
今日の完成イメージ図:
今回やること
・ユーザーページからチャットグループ一覧ページへ飛べるようにする。
・グループに参加していなければ『チャットグループに参加していません』と表示する。
①チャットグループのコントローラー作成
$rails g controller chat_groups
↓
②ルーティングを設定
config/routes.rb
③コントローラーのアクションの設定
app/controllers/chat_groups_controller.rb
④ビューの作成(仮)
app/views/chat_groups/index.html.erbを作成。
⑤ユーザーページからチャットグループ一覧へのリンクを作成
ユーザーページのチャットからチャットグループ一覧ページへのリンクを作る。
$rails routes
https://gyazo.com/0b1dea5a33975709270a8040ec2fca8d
↓
app/views/users/user_page.html.erb
↓
$rails s
↓
http://localhost:3000/users/user_page
↓
チャットをクリック
チャットグループ一覧ページへの遷移できた。
⑥チャットグループ一覧のビューの作成(仮)
https://gyazo.com/16fb5d173a0d4cb0e9d90085339758f3
ビュー
⑦作成したグループがない場合、『グループに参加していません』を表示
app/controllers/chat_groups_controller.rb
@chat_group_joining
ここでchat_group_to_usersテーブルからログインしているユーザーのidが存在するかを探している。
↓
app/views/chat_groups/index.html.erb
https://gyazo.com/09387b386694e14c038c116384faa1d8
↓
$rails s
↓
http://localhost:3000/chat_groups
今回はチャットグループ一覧ページへ遷移できるようにした。
前は調べながら作成していたが、調べずに作成できるようになってきた。
次回やりたいこと
・グループを作成できるようにする
・チャットグループ一覧からチャット新規作成ページへ遷移できるようにする
以上です。
Ruby on Rails: 中間テーブルを使用したチャットグループの設定...chapter13-2
今日はチャットグループの設定を行います。
---------------- 今回行った事 ----------------
①DB設計
②モデル、テーブル作成
③モデルの設定
----------------------------------------------
①DB設計
チャットグループを作成します。
チャットグループ一つ一つにはユーザーを沢山持ち、ユーザーは沢山のチャットグループを持つことができます。
イメージ図:
これを多対多の関係と言います。
DB設計図:
しかし、これでは問題があります。
それはDBにあるテーブルに問題が生じてしまいます。
仮にchat_groupsテーブルにuser_idするためのカラムを用意してみるとすると、下の表のようになります。
だが、これは出来ません。
それはカラム一つには一つの値しか入れることが出来ないからです。
つまり、user_idに沢山のユーザーidを入れることはできないということ。
そこでこの問題を解決するのが中間テーブルです。
イメージ図:
DB設計図:
これでカラムには値が1つだけ入ることになるので、問題が解決されます。
それではREADMEにDBを設計していきます。
今回はチャットグループではチャットグループ名とそのチャットグループに関する説明を付けたいと思うのでカラムはchat_group_nameとchat_group_descriptionを作成。
chat_group_nameは文字列であり、長く無いので型はString型。
さらにチャットグループ名は必ず入力しなければならないようにしたいので、null: false。
chat_group_descriptionはその作成したチャットグループの説明を入力したいので型はText型。
この説明は別に入力しなくても良いことにしたいのでオプションは付けないことにします。
次に中間テーブル。
中間テーブル名はchat_group_to_usersテーブル。
ここで管理するのはuser_idとchat_group_id。
この二つは整数で管理するので型はInteger。
さらにこの整数は必ずなくてはならないので空(何も無い状態)では保存できないようにnull: falseを設定。そして、この2つは外部キーとなります。
外部キーとは、他のテーブルの情報(今回はusersテーブルのid=user_idと、chat_groupsテーブルのid=chat_group_id)を使用すると言うこと。
これをforeign_keyで設定する。よって、foreign_key: trueとしてuser_idカラムとchat_groupカラムに設定。
次にusersテーブルとchat_groupsテーブルのアソシエーション について。
イメージ図:
まずはusersテーブルのアソシエーション について。
イメージ図をみるとusersテーブルと中間テーブルでは1対多の関係になっているので、has_many :chat_group_to_usersを設定。
さらにchat_groupsテーブルとの関係性だが、先ほども述べたように多対
多の関係性であるので、has_many :chat_groupsを設定します。しかし、このchat_groupsテーブルは一旦chat_group_to_usersテーブル(中間テーブル)を経由しての関係性なので、through :chat_group_to_usersを設定してあげます(throughの英単語の意味は『...を通って』)。
次にchat_groupsテーブルのアソシエーション について。
usersテーブルと同じように、chat_groupsテーブルとchat_group_to_usersテーブル(中間テーブル)との関係性は1対多。
なので、has_many :chat_group_to_usersと設定。
そして、usersテーブルとの関係性は多対多なのでhas_many :usersを設定します。そして、このhas_many :usersはchat_group_to_usersテーブルを経由しての関係なので、through :chat_group_to_usersを設定します。
そして最後に中間テーブルのアソシエーションについて。
中間テーブルとusersテーブルの関係性は多対1なので、belongs_to :user。
中間テーブルとchat_groupsテーブルの関係性は多対1なので、belongs_to :chat_groupと設定。
これでテーブルの設定、アソシエーションの設計が終わったので、chat_groupsテーブルとchat_group_usersテーブルの作成、モデルの作成をします。
参照:https://qiita.com/ramuneru/items/db43589551dd0c00fef9
②モデル、テーブル作成
1. chat_groupのモデルとテーブル作成
$rails g model ChatGroup chat_group_name:string chat_group_description:text
↓
↓
db/migrate/20200623071132_create_chat_groups.rb
↓
$rails db:migrate
↓
2.中間テーブル、モデルの作成
$rails g model ChatGroupToUser
↓
↓
db/migrate/20200623072426_create_chat_group_to_users.rb
references
英単語での意味『参照』。
references型を使用する目的としては、
- user_idやchat_group_idなど〇〇_idと言うカラムを自動で作成してくれる
- インデックスを自動に張ってくれる
・user_idやchat_group_idなど〇〇_idと言うカラムを自動で作成してくれる
〇〇_idと言うカラムを自動で作成してくれるので、:userとするとuser_idも作成してくれる。:chat_group→chat_group_idを自動作成してくれる。
・インデックスを自動に張ってくれる
インデックスとは特定のカラムからデータを取得する際に、テーブルの中の特定のカラムのデータを複製し検索しやすくしてくれるもの。インデックスを使用することでデーターの読み込みや取得を高速にしてくれる。デメリットとして書き込みが遅いと言う特徴がある。
参照:https://qiita.com/seiya1121/items/fb074d727c6f40a55f22
話を戻しますが、t.references :〇〇だけでは外部キーはつけることはできません。
reference型を設定し、外部キー(foregin_key: true)を設定することで外部キーを使用できるようになります。
参照:https://qiita.com/ryouzi/items/2682e7e8a86fd2b1ae47
設定が終わったので、マイグレーションファイルを実行して DBに中間テーブルを作成します。
↓
$rails db:migrate
↓
これでモデルとテーブルは作成できました。
次にモデルを設定していきます。
③モデルの設定
userモデル
chat_groupモデル
chat_group_userテーブル(中間テーブル)
これで各テーブルの関係性を示せました。
次回はチャットグループのページを作成していきます。
以上です。
Ruby on Rails: ルートページの修正、ユーザーページの作成やルーティングの修正...chapter13-1
今回はユーザーページとルートページ(最初に出る画面)の修正及びルーティングのコードをすっきりさせ見やすくなるように実装していきます。
ユーザーページはあくまでもチャットページとブログ(ツイート)ページへのリンクを貼るまでに今は止めておきたいと思います。
------------- 今日やりたいこと -----------------
・ルートページの修正
・ユーザーページの作成
・ルーティングのコードをすっきりさせる
-------------------------------------------------
そして次の学習ページでチャットページを実装していきます。
ルートページ修正後のイメージ図:
ユーザーページのイメージ図:
ルートページからの遷移イメージ図:
1.ルートページの修正
現在のビュー:
①画像の保存
最初にアプリのロゴとなる画像を保存する。
適当なフリー画像を拾ってくる(私の場合は作成した。センスは...つっこまないで欲しい...)。
←これをロゴと使用します。
画像を拾ってきたら
↓
Finder(macの場合)を開く
↓
自分の作成しているアプリまで移動(私の場合はrensyu1)
↓
app/assets/imagesまで移動
↓
貼り付けて保存
https://gyazo.com/e5c929bbdd579c13b44c18c280a24ce5
②ロゴをビューに表示する
app/views/tweets/home.html.erbを開く
↓
image_tag
このメソッドを使用すると画像が画面に表示されるようになります。
'frige_logo.png'
画像の名前.拡張子(私の使った画像はpng)。
これを記述した場所を第一引数といい、ここに使用したい画像を指定します。
拡張子(ファイルの種類の目印みたいなもの)を忘れずに指定します。
alt
これはimage_tagのオプションとして設定しました。
ちなみにaltを設定した場所を第二引数といいます。
altは別に設定しなくても問題なく画像は表示できます。
またalt自体は画像が表示されている場合は直接的に表示されません。
検証でElementsをみると↓のようになっています。
✍️ altを使うとできること
・画像が表示されなかった場合、altで記述した文字が画面に映し出される(Frige_logo)。
・目の不自由な方が読み上げの音声機能を利用した場合に音声としてaltに記述した文字が読まれる。
・インターネットでこの画像を探すときにクルーラー(インターネットを巡回して情報を集めているもの)が探しやすいようにしている = 検索でaltを設定した画像が引っかかるようになる。
拡張子について
参照:https://wa3.i-3-i.info/word1659.html
altについて
参照:https://www.asobou.co.jp/blog/web/alt
↓
$rails s
↓
2.ユーザーページを作成
ここからは前に勉強したことの復習。
ページ表示までに必要なのは。。。
・ルーティング
・コントローラー
・ビュー
+ モデル(DBを使用する場合)
今回作りたいイメージ図は
新たに作成しなければいけないのは
users_controller.rb
user_page.html.erb(ユーザーページ用)
設定しなければならないのは
routes.rb
①コントローラーの作成
$rails g controller users
↓
↓
app/controller/users_controller.rb
↓
を追加。
②ルーティングの設定
↓
を設定。
③user_page.html.erb(ユーザーページ)を作成
app/views/users/user_page.html.erbを作成。
↓
https://gyazo.com/c23eaf1dd6642102f0e1092f60e01534
仮ユーザーページを作成。
↓
app/controllers/application_controller.rb
https://gyazo.com/b0ef0865fcd3dd402d6c89cb7b0d5951
ログイン後にユーザーページに遷移したいので$rails routesで確認するとprefixはusers_user_pageとなっています。
なので、after_sign_in_path_for(resource)メソッド内をusers_user_page_pathへ変更。
↓
$rails s
↓
↓
ログインしてみる。
↓
ログインできたので、ユーザーページを作成します。
↓
https://gyazo.com/724ad61fac0a497e59754a66a3da1b87
アイコンとなるユーザー画像をFinder(mac)を開き、app/assets/imagesの中へ保存する。
←私はこの画像をアイコンとして使用します。
↓
app/views/users/user_page.html.erb
https://gyazo.com/6455200a0718a0f70bbaa436fe8ea238
image_tag
image_tagを使用し、ロゴとアイコンを表示する。
current_user
deviseを使用すると使用できるメソッド。
current_user.nicknameでログインしているユーザーのニックネームを表示。
current_user.idでログインユーザーのidを表示できる。
link_to
link_toを使用し、ブログ、チャット、ログアウトにリンクをつける。
ブログへのリンクパスはtweets_index_path。
チャットは作成していないので仮のリンクパス(ユーザーページ)をコード(users_user_page_path)。
ログアウトのパスはdestroy_user_session_pathで大丈夫だが、link_toのデフォルトHTTP動詞は 'get' なのでmethod: :deleteと設定してあげます。
↓
リロードしてみる🔁
表示できるがこれでは完成図とはズレが生じている。
完成図イメージ:
▼ 解決しなければならないこと ▼
・画像の大きさを調節。
・ユーザーネーム、IDをアイコンの高さまで調節。
・ユーザーネームのフォントサイズを少し大きくする。
④でこれらを調整します。
④ユーザーページの調整
sassとBEMを使用してビューを調整します。
sassは高級言語と呼ばれ、人間が理解できやすいように設計されたプログラミング言語です。
よって、sassを使うと人間は扱いやすいので今回使用します。
参照:https://webdesign-trends.net/entry/9323
BEMはBlock、Element、Modifierの3つの頭文字を取って名付けられたらしいです。
Block__Element--ModifierとこのようにElementと使用したい場合はElement前に__(アンダースコア)を2つ、Modifierを使用したい場合はModifierの前に--(ハイフン)を2つ記述します。
BEMを使用することでコードが見やすくなり、他の人(チームなど)が見たときに理解しやすくなります。
参照:https://tech-dig.jp/bem-css-html/
最初にuser_page.html.erbを調整できるようにstylesheetsの中にフォルダを作成し、その中にuser_page.scssを作成します。
app/assets/stylesheets/users
usersフォルダを作成。
↓
usersフォルダ内にuser_page.scssファイルを作成。
↓
変更前:
app/assets/stylesheets/application.css
↓
変更後:
このままではuser_page.scssをビューへ反映できないので、css→scssと拡張子を変更。
↓
設定前:
app/assets/stylesheets/application.scss
設定後:
初期で書かれているコードを全て消して、@import "users/user_page";と記述します。
application.scssここに使いたいファイルを記述すると連結して(他のビューとも共通して)使えるようになります。
@import 〇〇;
これを使いたいファイル名の先頭に記述することでそのファイルは共有できるようになる。
そしてファイル名の記述だが、拡張子の.scssは不要。
最後に『 ; 』 セミコロンをつける。
参照:https://diveintocode.jp/blogs/Technology/AssetPipeline
これで設定はできなのでビューの調整をしていきます。
1.画像の大きさを調整
ユーザーページで検証のElementsを開き、element.styleにコードを書きながらビューを調整し、その後、user_page.scssへ記述します。
↓
boder-radius
画像の角の丸みを調整。
width
幅の調整。
height
高さの調整。
user_page.scssへ記述!と行きたいが、画像の調整は直接imgを調節しないとできないので、user_page.html.erbのアイコン設定しているimage_tagへclass名を記述。
↓
app/views/users/user_page.html.erb
<%= image_tag "user_icon_default.png" %>から<%= image_tag "user_icon_default.png", class: "user-page__info__user-icon--img" %>へ修正。
↓
app/assets/stylesheets/users/user_page.scss
↓
リロード🔁 してビューができているか確認。
https://gyazo.com/191c7b7c4d2add925443d76e3b12f9e1
リロードしてみると、検証のElementsの右側に反映されているコードが表示される。
→
表示されたところをよく見ると灰色でapplication....urce.scss:2と書かれています。これをクリックすると、この今見ている場所(今はアイコンのところ)が、どのファイルのscssを使用しているかがわかります。
2.ユーザーネームの高さとフォントサイズの調整
ユーザーネームの高さとフォントサイズの調整を2.で一緒に記述していきます。
まずはユーザーネームの高さの調整。
↓
〇〇さんのページ▼←ここまでを移動させたいのでclassは"user-page__info__nickname"。
https://gyazo.com/3c8496eadd23d88aea38c64bd59dca8f
位置が決まったらuser_page.scssへコード。
↓
positon: relative;
positonで配置方法を決められます。
relativeで基準点から動かせるようにします。
bottom: 60px;
先ほど position: relative; で動けるようになったaaaさんのページを上に持っていきたいのでbottomを使い、基準点から60px分の高さの範囲を確保し文字を上に持ち上げるようにしました。
参照:https://www.aiship.jp/knowhow/archives/18053
次にユーザーネームのフォントサイズを調整します。
↓
ユーザーネームだけを調節するためにclassを設定。
class="user-page__info__nickname--user"これに記述していきます。
大きさが決まったので。。。
↓
app/assets/stylesheets/users/user_page.scss
&--user内にfont-sizeを設定。
大きさは20pxとした。
↓
リロード🔁 してビューを確認。
できているので、次でIDの位置も直していきます。
3.ID:1の位置を調整
IDを調整するためにuser-page__info--idというclassを作ってあるので、これを使い調整します。その前に位置を検証のElementsを使用し決めます。
↓
決まったらuser_page.scssにコード。
↓
position: relative;でID:1を動けるようにして、leftとbottomで調整。
↓
リロード🔁 して。。。
完成!
3.ルーティングのコードをすっきりさせる
現在のルーティング
$rails routes
https://gyazo.com/f528e174a260a72c361e57b1dd1ee708
これに継ぎ足し継ぎ足ししてしまうと見にくくなるので、tweetsの方を一括に設定します。
↓
修正後:
$rails routes
https://gyazo.com/a8f0420974a3e2faaa63ae984c21bef7
これで一括に7つのアクションが設定できた!
しかし、注意しなくてはいけないのが$rails routesして表示されたルーティングをみるとPrefixやURI Pattern、コントローラーのアクション名のところが変わっている。。。
なので、今までリンクを作成した時のパスや、コントローラーのアクション名を修正する必要があります。
今からそのエラーが出る部分を直していきます。
最初はログインしてユーザーページにエラーが出ます。
ブログのところのパスを変更。
次はブログへ行くと、投稿一覧へ遷移されます。
そして投稿したツイートの詳細へ行くと。。。
エラーが発生。
これは詳細を設定するコントローラーアクションがopenとしてあるためです。
これをshowとアクション名を変更。
↓
リロード🔁
これはhtmlが存在しないと言うこと。
htmlを作成する際、open.html.erbと作成。
この名前をshow.html.erbと変更。
open.html.erb → show.html.erb
↓
リロード🔁
次のエラーはパスエラー。
一覧へ戻るのリンクパスがおかしいと言うこと。
これを修正。
_back-index.html.erb
↓
リロード🔁
あとは問題なさそうだ。
今回は新しく、users_controller.rbを作成したり、ルーティングのコードを見やすくしました。また、ビューも整えるためにSassやBEMを使ってコードしてみました。
次回はチャットグループを作成したいと思います。
チャットではチャットグループを作成し、ユーザー達をチャットグループへ参加させるので多対多関係になる。よって中間テーブルを必要が必要となります。
応用編としてチャレンジしていきたいと思うので温かい目で見守って欲しいです。
chapter13-2へ続きます。
以上です。
Ruby on Rails: devise導入〜ログインユーザーの投稿のみを表示...chapter12-2
deviseは簡単にログイン機能を作成できるgem(ライブラリ)で、deviseを導入しログイン画面を実装していきます。
今回作りたいイメージ図↓
https://gyazo.com/183a087aa2783223f8644a47ae6a8d48
------------------------------------今回行った事-------------------------------------
①deviseのインストール
②deviseに必要なファイルを生成
③Userモデルの作成
④deviseに対応したビューを作成
⑤deviseに対応したコントローラーを作成
⑥Log in画面のemail→nicknameへ変更
⑦nicknameを入力するフォームの追加
⑧パラメータの許可
⑨認証の変更
⑩ルーティングの設定
①①ログイン時に実行してほしい処理(ビュー)を設定
①②コントローラーの設定
①③ビューの作成(ルートページ)
①④ユーザー登録ができるか確認
①⑤ログアウトするリンクを作成
①⑥ログインできるか確認
①⑦コントローラーの設定(index)
①⑧モデルの設定
①⑨コントローラーの設定(create)
②⓪保存できるか確認
②①ビューの作成
②②ビューの確認
---------------------------------------------------------------------------------------
①deviseのインストール
Gemfileにgem 'devise'を記述
↓
$bundle install
②deviseに必要なファイルを生成
$rails g devise:install
↓
1. deviseがメール送付する場合の送付元(WebアプリケーションのURL)の指定
2.ログアウト時のリダイレクト(転送)先URLの指定
3.ログインやログアウトなどの処理結果を表示するメッセージ領域の作成
4.deviseで使用する表示画面用テンプレートの作成(作成しなくても良いが、カスタマイズする場合は作成する必要がある)
と書いてあるが、先にUserモデル、コントローラーを作成します。
③Userモデルの作成
$rails g devise user
↓
↓
db/migrate/20200615074103_devise_create_users.rb(作成されたマイグレーションファイル)を開く
t.string :nickname, null: false, default: ""を追加(※)。
※追加し忘れた場合、後からでも追加できます(忘れた場合は🚨内を行う)。
↓
$rails db:migrate
↓
↓
Sequel Proを確認
usersテーブルとカラムが作成されているか確認します。
🚨=========ここはカラムにnicknameを追加し忘れた場合用=========🚨
nicknameを追加し忘れて$rails db:migrate
↓
$rails g migration AddNicknameToUsers nickname:string
↓
作成されたマイグレーションファイルを開く
(db/migrate/〇〇〇〇〇〇_add_nickname_to_users.rb)
↓
↓
$rails db:migrate
↓
Sequel Proを確認
==============================================================
④deviseに対応したビューを作成
$rails g devise:views users
↓
⑤deviseに対応したコントローラーを作成
$rails g devise:controllers users
↓
⑥Log in画面のemail→nicknameへ変更
app/views/users/sessions/new.html.erb
↓
emailと書いてあるところをnicknameへ変更。
email_fieldをtext_fieldへ変更。
⑦nicknameを入力するフォームの追加。
app/views/users/registrations/new.html.erb
↓
nicknameを入力するフォームを追加。
⑧パラメータの許可
app/controllers/application_controller.rb
↓
before_ationは定義されている各アクションの実行前に作動するアクションを書きます。
if: :devise_controller?によってdeviseの使用される画面でのみconfigure_permitted_parametersが使用できるようにしています。
protectedの下にdeviseでのストロングパラメーターを設定します。
参照:https://qiita.com/weedslayer/items/c3ab7ad37d5a1e325989
参照:https://qiita.com/kazukisu3/items/7f60574379dcce0422b1
参照:https://qiita.com/ry023/items/c6a469f65615f796be45
⑨認証の変更
config/initializers/devise.rb
コメントアウトされているのを解除。
↓
emailをnicknameへ変更。
emailの代わりにnicknameで認証するようにしています。
⑩ルーティングの設定
config/routes.rb
↓
これはdevise導入で自動に設定されます。
この設定によって認証に必要なルーティングを自動に設定してくれます。
参照:https://pikawaka.com/rails/devise
設定前:
https://gyazo.com/0e3cd1548b63936f7c3c1b24d59197f4
設定後:
https://gyazo.com/c9d188a71f2a6874b82b7e0da219d47a
設定する事によってdevise/〇〇#△△→users/〇〇#△△となります。
rootに設定する事でhttp://localhost:3000/へアクセスするとここへ記述したコントローラーのアクションを介してビューへ反映します。'tweets#home'はこれからコントローラーへ設定します。最初のページ(ルートページ)のための設定。
①①ログイン時に実行してほしい処理(ビュー)を設定
app/controllers/application_controller.rb
after_sign_in_path_for(resource)メソッドにログインした後に遷移したいビューのパスを指定します。
ツイート一覧へ遷移したいのでtweet_index_pathを設定。
(ルーティングを確認したい場合は$rails routes)
①②コントローラーの設定
app/controllers/tweets_controller.rb
homeメソッドを追加。
homeのビューは「ブログをはじめませんか?」と「『ユーザー登録』へのリンク」、「『ログイン』へのリンク」だけなので特に処理内容は記述しないです。
①③ビューの作成(ルートページ)
app/views/tweets/home.html.erbを作成。
↓
①④ユーザー登録ができるか確認
$rails s
↓
ユーザー登録をクリック
↓
ユーザー登録をする。
↓
まだビューは設定してないのでユーザーが投稿したツイート全てが見られる状態。
Sequel Proでも登録ができているか確認。
①⑤ログアウトするリンクを作成
$rails routes
https://gyazo.com/712a98dc4dbb045c25fec0c7d27706d2
ルーティングを見るとsign_outのところのperfixを見るとdestroy_user_sessionとなっているので、ログアウトのpathは destroy_user_session_path と指定し、さらにmethod: :delete も記述します。
↓
app/views/index.html.erb
method: :deleteをコードした理由としてはlink_toのHTTP動詞は'get'だから。
↓
$rails s
サーバーを立ち上げてログアウトできるか確認。
↓
http://localhost:3000/tweets/index
ログアウトしてみる
↓
①⑥ログインできるか確認
先ほどルートページに戻ったのでそのままログインできるかを確かめてみる。
↓
ログインしてみる
↓
①⑦コントローラーの設定(index)
投稿一覧を映すためにコントローラー(indexアクション)でselectを使いtitleとidを取得していました。しかし、これだけではuser_idを使用できないので紐付けてUsersテーブルに作成したnicknameも使用できない。よってindexアクションでの処理を変更します。
app/controllers/tweets_controller.rb
before:
取得できている情報:
https://gyazo.com/2c6168c3fb1737dcbbde9776f3abca3c
↓
after:
取得できている情報:
https://gyazo.com/1a6dc1ac80bfe8c7f23114bb6088d245
Tweet.allとすることでuser_idも使用できるようになりました。
①⑧モデルの設定
tweetモデルとuserモデルを紐付けなければ各ユーザーごとにツイートを管理することはできないので、ユーザーとツイートの関係性をコードする必要があります。
READMEにも書いたがユーザーとツイートの関係性はユーザー1人に対してツイートはたくさんできるので1対多の関係にあります。
なので、各モデルは以下のようになります。
user.rb
tweet.rb
①⑨コントローラーの設定(create)
app/controllers/tweets_controller.rb
↓
Tweet.newでインスタンスを生成し、tweet_paramsでストロングパラメーターを設定する。それを変数tweetへ代入。
↓
current_userはdeviseを導入したら使えるメソッド。
current_userを使用し、ログインしているユーザーを取得します。
そして、登録したユーザーはusersテーブルの中でidで管理されています。
https://gyazo.com/8f2b04ce4292ea1ac8bbd32c20c43e3d
なのでcurrent_user.idとするとこのidが取得できます。
このidをtweetsテーブルのuser_idでも使用できるようにtweet.user_idにこの値を代入しています。
↓
user_idも取得できるようになったのでユーザーが投稿したツイートを保存できるようにsaveでツイート情報をDBに保存。
②⓪保存できるか確認
投稿をしてみる
$rails s
↓
http://localhost:3000/tweets/index
↓
投稿してターミナルを見てみる
https://gyazo.com/e5baaebcc04895eee4f71dfe2c74567d
投稿は成功していそうだ。
一覧へ戻って確認してみる。
↓
これでuser_idも取得できたので次にビューを作成していきます。
②①ビューの作成
app/views/tweets/index.html.erb
deviseで使用できるメソッド(current_user)を使いnicknameを取得し表示。
上と同様にcurrent_userを使用して、idを取得して表示。
もしログインしているユーザーならこの中の処理をする。
tweet.user_idこれはtweetsテーブルに存在するuser_idがログインしているユーザーのid(current_user.id)と等しければこの中の処理をする。
この中での処理はタイトルや詳細がコードされているので、これでログインしているユーザーのツイートのみが閲覧できるようになります。
②②ビューの確認
$rails s
↓
http://localhost:3000/tweets/index
できているみたい。
ログアウトして新しいユーザーを登録して投稿一覧を見てみる。
sign upしてみて。。。
↓
aaaが投稿したツイートが消えている。
投稿してみる。
↓
投稿がユーザーbbbのだけ表示されている。
参照:https://qiita.com/Hal_mai/items/350c400e8763ce0487a3
参照:https://web-camp.io/magazine/archives/16811
参照:https://url4u.jp/rails-523-devise-username-auth/
参照:https://www.youtube.com/watch?v=Lmq_WLkxp9c&t=522s
この記録を書きながら再度実装していたのが、モデルを設定し忘れていて保存できなくて手こずってしまいました。
アソシエーションのテーブルが増えたら設定する!忘れないようにしないとね😅
以上です。
Ruby on Rails: devise導入準備(作成してしまったUserテーブル、モデル、コントローラーの削除)...chapter12-1
次はdeviseを導入してメールやパスワードをカラムを追加して$rails db:migrateでマイグレーションを実行!!!←ここでエラーが発生する。
なので、今回はdeviseを導入する前にUsersテーブルの削除、Userモデル、コントローラーの削除をします。
①モデルの削除
$rails destroy model user
↓
②コントローラーの削除
$rails destroy controller users
↓
③テーブルの削除
$rails g migration users
↓
↓
db/migrate/20200615043720_users.rbを開く(先ほど作成したマイグレーションファイル)
↓
drop_table :(テーブル名)とコードを書きます。
↓
$rails db:migarete
↓
④Sequel Proでテーブルが削除されているか確認
before:
after:
これでdeviseを導入できる準備ができました。
次回はdeviseを導入してログイン画面の実装をしていきます。
chapter12-2に続きます。
以上です。
Ruby on Rails: form_withとストロングパラメーターの実験のまとめ...chapter11-2
1. permit(:title, :main)あり
https://gyazo.com/3bc5de765b8d6bcce951069d338671c5
params.require(:tweet).permit(:title, :main)ではmodelを設定する必要がある。
また、不要な情報がある場合は外されて保存される。
2.permit(:title, :main)なし
https://gyazo.com/5d0aa5f8ca75e72be950c29e2a1a7413
requireありでpermitなしでは保存はできない。
3.require(:tweet)なし
https://gyazo.com/5506a8ad1d2a4a647fb72cb85b0f36c1
requireなしではurlは必ず必要でmodelは不要。
urlとmethodを設定すれば保存はされる。
また不要情報は外されて保存される。
4.ストロングパラメーターなし
https://gyazo.com/8a3fc3d1546bfc6608ceb30e9a99f263
ストロングパラメーターなしでは保存されない。
ストロングパラメーターは送られて来た情報(ビューから送られて来た情報)が信用できるか不要な情報が入っていないかを確認する検問的な役割を果たしている。
もし不要な情報が含まれる場合は外されて保存される。
ストロングパラメーターで設定されているrequireは必要とする、permitは許可するという意味でrequireはあるがpermitがない場合は保存ができない。
またストロングパラメーターがない場合も保存できない。
requireにモデルを設定しフォーム(form_with)でmodelを設定することでフォームで送った内容がそのモデルのものなのかを判断できる。
そしてrequrieで設定したモデルの中で保存したい情報を保存するためにpermitで設定しなければならない。
参照:https://qiita.com/ozackiee/items/f100fd51f4839b3fdca8
参照:https://skillhub.jp/courses/157/lessons/829
参照:https://pikawaka.com/rails/permit
編集機能の実装でform_withでmethodとmodelを設定しなかったのでエラーが続出して苦労しました。
原因はフォームの情報をPOSTデータで送っているみたいでnewではmethodの設定は必要なかったが、editではmethodを使って設定しなければならなかったみたい。
あとrequireを設定してmodelを設定してなかったので「tweetが空だぞ」とエラーが出ていました。
これを例えるなら山田太郎さんが参加できるオフ会があったとします。
そのオフ会は会場前で名札を提示する必要がある。(require)
さらに会場で会員証明書を提示する必要がある。(permit)
名札をつけて来たが名前を書いてなかったから門前払いをくらっている状態だった(名前書いてこい=名札が空だぞと怒られている状態)。
実験してみてrequireとmodelの関係性やmethodの設定など理解が深まった気がします。
また何かあったら実験しながら勉強を進めていこうと思います。
以上です。
Ruby on Rails: form_withとストロングパラメーターの実験...chapter11-1
編集機能の実装でform_withとストロングパラメーターで苦労したので、今回は新規作成ページと編集ページの2つで以下の順番で実験していこうと思います。
(例:
①url、model、methodあり
1. permit(:title, :main)あり
1-1 create
1-1-1 不要情報なし
1-1-2 不要情報あり
1-2 update
1-2-1 不要情報なし
1-2-2 不要情報あり
2.permit(:title, :main)なし
2-1 create
2-2 update
3.require(:tweet)なし
3-1 create
3-1-1 不要情報なし
3-1-2 不要情報あり
3-2 update
3-2-1 不要情報なし
3-2-2 不要情報あり
4.ストロングパラメーターなし
4-1 create
4-2 update
)
-------------------------------🧪実験内容--------------------------------------------
①url、model、methodあり
②url、modelあり
③url、methodあり
④model、methodあり
⑤urlのみ
⑥modelのみ
⑦methodのみ
⑧設定なし
1. permit(:title, :main)あり
1-1 create
1-1-1 不要情報なし
1-1-2 不要情報あり
1-2 update
1-2-1 不要情報なし
1-2-2 不要情報あり
2.permit(:title, :main)なし
2-1 create
2-2 update
3.require(:tweet)なし
3-1 create
3-1-1 不要情報なし
3-1-2 不要情報あり
3-2 update
3-2-1 不要情報なし
3-2-2 不要情報あり
4.ストロングパラメーターなし
4-1 create
4-2 update
---------------------------------------------------------------------------------------
①url、model、methodあり
1. permit(:title, :main)あり
1-1 create
1-1-1 不要情報なし
↓
↓
1-1-2 不要情報あり
↓
↓
1-2 update
1-2-1 不要情報なし
id=3を編集する
↓
↓
1-2-2 不要情報あり
id=3を編集する
↓
↓
2.permit(:title, :main)なし
2-1 create
↓
↓
2-2 update
id=3を編集する
↓
↓
3.require(:tweet)なし
3-1 create
3-1-1不要情報なし
↓
↓
3-1-2不要情報あり
↓
↓
3-2 update
3-2-1不要情報なし
id=3を編集する
↓
↓
3-2-2不要情報あり
id=3を編集する
↓
↓
4.ストロングパラメーターなし
4-1 create
↓
↓
4-2 update
id=3を編集する
↓
↓
②url、modelあり
1. permit(:title, :main)あり
1-1 create
1-1-1 不要情報なし
↓
↓
1-1-2 不要情報あり
↓
↓
1-2 update
1-2-1 不要情報なし
id=3を編集する
↓
↓
1-2-2 不要情報あり
id=3を編集する
↓
↓
2.permit(:title, :main)なし
2-1 create
↓
↓
1-2 update
id=3を編集する
↓
↓
3.require(:tweet)なし
3-1 create
3-1-1不要情報なし
↓
↓
3-1-2不要情報あり
↓
↓
3-2 update
3-2-1不要情報なし
id=3を編集する
↓
↓
3-2-2不要情報あり
id=3を編集する
↓
↓
4.ストロングパラメーターなし
4-1 create
↓
↓
4-2 update
id=3を編集する
↓
↓
③url、methodあり
1. permit(:title, :main)あり
1-1 create
1-1-1 不要情報なし
↓
↓
1-1-2 不要情報あり
↓
↓
1-2 update
1-2-1 不要情報なし
id=3を編集する
↓
↓
1-2-2 不要情報あり
id=3を編集する
↓
↓
2.permit(:title, :main)なし
2-1 create
↓
↓
1-2 update
id=3を編集する
↓
↓
3.require(:tweet)なし
3-1 create
3-1-1不要情報なし
↓
↓
3-1-2不要情報あり
↓
↓
3-2 update
3-2-1不要情報なし
id=3を編集する
↓
↓
3-2-2不要情報あり
id=3を編集する
↓
↓
4.ストロングパラメーターなし
4-1 create
↓
↓
4-2 update
id=3を編集する
↓
↓
④model、methodあり
1. permit(:title, :main)あり
1-1 create
1-1-1 不要情報なし
↓
↓
1-1-2 不要情報あり
↓
↓
1-2 update
1-2-1 不要情報なし
id=3を編集する
編集ページに遷移した時点でエラー表示。
1-2-2 不要情報あり
id=3を編集する
1-2-1同様エラー表示。
2.permit(:title, :main)なし
2-1 create
↓
↓
2-2 update
id=3を編集する
編集画面を表示しようとしたらエラー表示。
3.require(:tweet)なし
3-1 create
3-1-1不要情報なし
↓
↓
3-1-2不要情報あり
↓
↓
3-2 update
3-2-1不要情報なし
id=3を編集する
編集ページ遷移でエラー。
3-2-2不要情報あり
id=3を編集する
編集ページでエラー
4.ストロングパラメーターなし
4-1 create
↓
↓
4-2 update
id=3を編集する
編集ページでエラー。
⑤urlのみ
1. permit(:title, :main)あり
1-1 create
1-1-1 不要情報なし
↓
↓
1-1-2 不要情報あり
↓
↓
1-2 update
1-2-1 不要情報なし
id=3を編集する
↓
↓
1-2-2 不要情報あり
id=3を編集する
↓
↓
2.permit(:title, :main)なし
2-1 create
↓
↓
2-2 update
id=3を編集する
↓
↓
3.require(:tweet)なし
3-1 create
3-1-1不要情報なし
↓
↓
3-1-2不要情報あり
↓
↓
3-2 update
3-2-1不要情報なし
id=3を編集する
↓
↓
3-2-2不要情報あり
id=3を編集する
↓
↓
4.ストロングパラメーターなし
4-1 create
↓
↓
4-2 update
id=3を編集する
↓
↓
⑥modelのみ
1. permit(:title, :main)あり
1-1 create
1-1-1 不要情報なし
↓
↓
1-1-2 不要情報あり
↓
↓
1-2 update
1-2-1 不要情報なし
id=3を編集する
編集ページでエラーが発生。
1-2-2 不要情報あり
id=3を編集する
1-2-1と同様。エラー。
2.permit(:title, :main)なし
2-1 create
↓
↓
2-2 update
id=3を編集する
編集ページ遷移でエラー。
3.require(:tweet)なし
3-1 create
3-1-1不要情報なし
↓
↓
3-1-2不要情報あり
↓
↓
3-2 update
3-2-1不要情報なし
id=3を編集する
編集ページ遷移でエラー。
3-2-2不要情報あり
id=3を編集する
3-2-1同様、編集ページ遷移でエラー。
4.ストロングパラメーターなし
4-1 create
↓
↓
4-2 update
id=3を編集する
編集ページでエラー。
⑦methodのみ
1. permit(:title, :main)あり
1-1 create
1-1-1 不要情報なし
↓
↓
1-1-2 不要情報あり
↓
↓
1-2 update
1-2-1 不要情報なし
id=3を編集する
↓
↓
1-2-2 不要情報あり
id=3を編集する
↓
↓
2.permit(:title, :main)なし
2-1 create
↓
↓
2-2 update
id=3を編集する
↓
↓
3.require(:tweet)なし
3-1 create
3-1-1不要情報なし
↓
↓
3-1-2不要情報あり
↓
↓
3-2 update
3-2-1不要情報なし
id=3を編集する
↓
↓
3-2-2不要情報あり
id=3を編集する
↓
↓
4.ストロングパラメーターなし
4-1 create
↓
↓
4-2 update
id=3を編集する
↓
↓
⑧設定なし
1. permit(:title, :main)あり
1-1 create
1-1-1 不要情報なし
↓
↓
1-1-2 不要情報あり
↓
↓
1-2 update
1-2-1 不要情報なし
id=3を編集する
↓
↓
1-2-2 不要情報あり
id=3を編集する
↓
↓
2.permit(:title, :main)なし
2-1 create
↓
↓
2-2 update
id=3を編集する
↓
↓
3.require(:tweet)なし
3-1 create
3-1-1不要情報なし
↓
↓
3-1-2不要情報あり
↓
↓
3-2 update
3-2-1不要情報なし
id=3を編集する
↓
↓
3-2-2不要情報あり
id=3を編集する
↓
↓
4.ストロングパラメーターなし
4-1 create
↓
↓
4-2 update
id=3を編集する
↓
↓
chapter11-2に続きます。
以上です。