Ruby onRails (PicTweet) ユーザ登録編

ユーザ登録機能を実装する

ユーザ関連の機能はGemを使用する

 

Twitterなどのウェブサイトにはログイン機能がある

これはユーザに対してアカウントを発行して、そのアカウントでユーザの情報を管理することができる

今回はヘッダーにログインと新規登録のボタンを配置する

ログインすると、ログインボタンがユーザー名に変わり、登録したユーザー名、投稿するボタンのような配置になるようにする

今回はログインしたユーザーのみがツイートの投稿を行えるようにする。ツイートの閲覧に関してはログインしているかどうかに関わらずできるようにする

 

1Gemをインストールし、サーバーを再起動

Gemとはユーザー管理機能を簡単に実装するもの

Gemファイルの最後の行をGem deviceに変更

所定のディレクトリにいることを確認して、bundle installでGemをインストールする

ここでターミナルでrails sとcontrol+cでサーバーを再起動しておく

 

2コマンドを利用し、deviceの設定ファイルを作成

rails g device:installで設定ファイルを作成

rails g deviseはdeviceによるユーザー機能の対象を指定することで、モデルとマイグレーションの生成やルーティングの設定をまとめて処理する

実行すると、モデルが生成され、routes.rbにはdeviceに関するパスが追加される

rails g devise usersでコマンドをユーザーに指定する

補足としてdevice_forはユーザー機能に必要な複数のルーティングを一度に生成するdeviceメソッドである

 

テーブルを作成する

コマンドで作成されたマイグレーションrails db:migrateで実行する

rails sでローカルサーバーを再起動しておく

3コマンドを利用し、userモデルを作成

4未ログイン時とログイン時でボタンの表示を変える実装をする

5コントローラーにリダイレクトを設定する

リダイレクト処理を以下で用意する

(3行目)before_action :move_to_index, except: [:index, :show]

(42行目)def move_to_index

unless user_signed_in?
redirect_to action: :index

end

end

 

バイスのビューを作成する

rails g devise:views

バイス用のビューを編集する

app/views/devise/sessisons/new.html.erb

f:id:kikiMustang:20201118220128j:image

app/views/devise/registrations/new.html.erb

f:id:kikiMustang:20201118220526j:image

ユーザーテーブルにニックネームカラムをstring型で追加するマイグレーションファイルを作成

rails g migration AddNicknameToUsers nickname:string

作成したマイグレーションを実行

rails db:migrate

ニックネームを入力するためのフォーム部分を追加f:id:kikiMustang:20201119210815j:image

サインアップ時に入力する情報はパラメーターとしてサーバーに送信される。deviceを使わない通常のリクエストの場合は、コントローラーにストロングパラメーターを記述し、受け取れるパラメーターを制限していた。

 

deviceも同様にストロングパラメーターをコントローラーに記述する。しかし、deviceの処理を行うコントローラーはGem内に記述されているため、編集できない。

nicknameというキーのパラメーターを新たに許可する。

f:id:kikiMustang:20201119212626j:image

ログインの有無で表示を変える

f:id:kikiMustang:20201119213157j:image

 

 

Ruby onRails(PicTweet) ツイートの詳細を表示しよう編

showで詳細表示をする

手順

1ツイート詳細画面よルーティングを記述

詳細画面のパスは編集や削除と同じくツイートごとに管理する

idが1の詳細画面は/tweets/1のようなパスになる

resourcesの最後に:showを追加

コードがスッキリするのでonlyオプションの記述を削除する

2ツイート詳細画面へのリンクを作成
下記で詳細画面へリンクするボタンを追加

<li>

<%= link_to '詳細', tweet_path(tweet.id), method: :get %>

</li>

3tweets_controllerにshowアクションを作成

ツイート詳細画面に必要な情報を、データベースから取得するためにshowアクションを定義

このときshowアクションでは、詳細を表示したいツイートの情報をビューに受け渡すだけ

def show

@tweet = Tweet.find(params[:id])

end

4ツイート詳細画面のビューを追加

tweetsコントローラーのshowアクションに対応する「投稿詳細画面」を作っていく

まず必要なビューファイルをつくり、コードを書く

f:id:kikiMustang:20201117221258j:image

ここで同じコードをメソッドにまとめる

ここではbefore_actionを利用して、edit、showの2つのアクションの前に実行される、set_tweetというメソッドを定義した

before_action :set_tweet,only: [:edit, :show]

そしてeditとshowの中のコードを消した

 

まとめとして

resourcesは、7つのアクションのルーティングをまとめて設定できるメソッドのこと

before_actionは、コントローラで定義されたアクションが実行される前に、指定した共通の処理を行うことのできるメソッド

 

Ruby on Rails(PicTweet) ツイートの編集編

ツイートの編集機能を実装します。editとupdateが該当します。

編集の考え方は「editアクションで編集ページを表示」→「updateアクションでデータの更新」といった流れで実装する。

resourcesでeditを追加することで、編集画面への遷移ができる。

次に編集ボタンを投稿ボタンに追加する。

これは削除ボタンと同じようにlink_toメソッドを使用する。

<li>

<%= link_to '編集', edit_tweet_path(tweet.id), method:  :get %>
</li>

次にeditアクションをコントローラーに定義する

新規投稿時と異なる点は編集→更新の場合はすでに存在しているレコードを選択して中身を置き換えるという点である。

def edit

@tweet = Tweet.find(params[:id])

end

編集画面のビューを作成する

入力情報の送信先は/tweets/編集するツイートのidとなる。

updateアクションのルーティングを設定する

ツイートを更新する際には、/tweets/<<編集するツイートのID>>にPATCHメソッドでアクセスする

このパスにアクセスした際、tweetsコントローラーのupdateアクションが実行される

このとき、updateアクションのルーティングを設定しておく

このupdateアクションも、destroyアクションと同様、ビューファイルへツイート情報を受け渡す必要がないため、インスタンス変数は使用しない

Ruby on Rails (PicTweet) ツイートを削除編

削除昨日はdestroyが該当する。

実装の流れは以下の通り

1ツイートを削除するためのルーティングを設定

2削除ボタンをビューに追加

3destroyアクションをコントローラーに定義

4削除後のビューの追加

 

ルーティングの設定

resourcesに:desrtoyを追加して、destroyアクションのルーティングを設定した

次にlink_toメソッドを使用し、削除ボタンを追加した。削除するツイートを区別するために、削除ボタンのぱすにはツイートのIDをパラメーターをもたせる。具体的には/tweets/<<tweetのid>>というぱすにすると、パラメーターとして受けとることができる

HTTPメソッドは、DELETEとし、methodオプションにシンボルで:deleteとするだけ。

 

今回、destroyアクションは、ツイートを削除するだけで、ビューにツイート情報を受け渡す必要はない。そのため、インスタンス変数ではなくただの変数として置き、destroyメソッドを使用する

def destroy

tweet = Tweet.find(params[:id])

tweet.destroy

end

あとはルーティングとコントローラーの編集が終わったから、最後にビューファイルの追加と編集を行う。これは「削除完了画面」 を作成する。

<div class="contents row">

<div class="success">

<h3>削除が完了しました</h3>

<a class="btn" href="/">投稿一覧に戻る</a>

</div> 

</div>

 

destroyアクションは、ツイートを削除を行うアクションのこと

DELETEはdestroyアクションを動かす際に指定するメソッド

rails routesは、設定されているルーティングを確認するためのコマンドのこと

Ruby on Rails ツイートを保存しよう編

投稿機能を実装する際、ツイートの新規投稿機能を追加する。newで生成、createで保存する。

投稿画面へ遷移するためにNewアクションへのルーティングを設定する

resources = tweets, only: [:index, :new] 

次にnewアクションを定義する

def new

@tweet = Tweet.new 

end

ツイート投稿はフォーム(form_with)を使用する

 

ストロングパラメーターは指定したキーを持つパラメーターのみ受けとるよう制限するもの(設定しないと意図しないデータの更新される可能性がある)

 

requireメソッド

送信したパラメーターの情報をもつparamsが使用できるメソッド。requireはパラメーターからどの取得するか選択する。ストロングパラメーターとして使用する場合、主にモデルを指定する。

Ruby on Rails(PicTweet) ツイートを表示しよう編

  • モデルの作成は次の手順です。

モデルの作成→テーブルの作成→ルーティングの作成(コントローラーを動かすため)→コントローラーの作成→ビューの作成(見た目を作る)

モデルはデータベースとのやりとりを担う

この時テーブルはモデルのファイルと一緒に作成される、マイグレーションファイルというテーブル作成時に必要なファイルを使用

rails g model tweetTweetモデルを作成(tweet.rbというモデルが作成される)

t.に続くのが「型」で:に続くのが「カラム名

マイグレーションはテーブルの設計図を表す

設計図に従ってテーブルを操作するには rails db:migrateコマンドを使用する

ローカルサーバーを起動するにはrails sを使用

rails cでコンソールを起動

Tweet.create(name:"takashi", text: "Nice to meet you")

などを記述しexitでコンソールを終了する

これでテーブルは作成された

CRUD

C...生成(sreate)

R...読み取り(Read)

U...更新(Update)

D...削除(Delete)

の略

その中で7つのアクションはindex,show,new,create,edit,update,destroyである

resourcesメソッドは、7つのアクションへのルーティングを自動生成するメソッドのこと