読者です 読者をやめる 読者になる 読者になる

コンパイラかく語りき

文系新卒プログラマーのメモ

文系プログラマーがRailsでロシア語アプリケーションをつくる⑰ ~単語のお気に入り登録~

Rails

どうも!chuckです。

前回に引き続き、Railsで単語クイズを実装していきます(`・ω・´)ゞ

 

chuckwebtips.hatenablog.com

 

 

答え画面の作成

前回はクイズ画面を作成しました!

f:id:chuck0523:20150730205512p:plain

このように、データベースから単語を1つランダムで出題します。

 

「答え!」ボタンを押すことで回答を表示させてみたいと思います。

 

1, 出題画面の修正

ただし、今までとは違って今回は、ページ遷移でデータを引き継ぐ必要があります。つまり、出題された単語が何だったのかを答えページに渡さなければなりません。

 

なので、まず出題ページを修正します。

f:id:chuck0523:20150729231452p:plain

こちらが修正前。ただ単語の表示させているだけですね。

これを以下のように修正。

f:id:chuck0523:20150730205956p:plain

ちょっと複雑ですね(;・∀・)

 

ちょっとここでRailsのデータ送りについて復習してみます。(以後、ページをまたいで送られるデータをパラメータと呼びます)

Railsでパラメータをやりとりするには2種類あるそうです。1つがリンクによるパラメータ渡しで、もう一つがフォームによるものです。

params - リファレンス - - Railsドキュメント

 

今回はフォーム送信を採用しました!

 

なので、出題画面はフォームタグである<%= form_for( ) %>が使われています。

3行目の記述はanswer_path(回答画面)に、:quizとしてパラメータを渡しています。

 

また、7行目にはhidden_fieldが使われています。これはHTMLの<input type="hidden">に相当します。一応、単語のIDを埋め込んでおきます。

 

以上が出題画面の変更点になります。送信ボタンである「答え!」を押すことで、フォーム内のデータがパラメータとして送信されます。

※パラメータを送るので、HTTPリクエストはもちろんPOSTです

 

2, 答えアクションの作成

次に回答を表示するためのアクションを作成します。

f:id:chuck0523:20150730210741p:plain

このようになりました!

今回使うのは6行目のanswerアクションになります。

answerにはPOSTリクエストとして、:quizパラメータが渡っています。なので、param[:quiz]でパラメータを取得することができます。

そして、:quizの中にはhidden_fieldで渡していた単語のidが含まれています。param [ :quiz ] [ :word_id] は、:quizに入っている:word_idを取得するという意味です。

パラメータで渡されたIDを利用して、回答画面でも出題画面と同じ単語を抽出することができますヽ(=´▽`=)ノ

 

3, 答え画面の作成

f:id:chuck0523:20150730211246p:plain

このようになりました!

2行目で、@answerから単語の意味(meaning)を取得しています。

 

ブラウザで確認するとこのようになります。

f:id:chuck0523:20150730211412p:plain

こちらがまず出題画面。домはとてもカンタンな単語で、家という意味です(^O^)

回答画面に飛ぶとこのとおり。

f:id:chuck0523:20150730211459p:plain

じゃーん!違うページでもちゃんと同じ単語を取得できています。

ちなみに、答え画面には「クイズ!」というリンクがついており、また別の単語クイズを受けることができますヽ(=´▽`=)ノ

 

 

単語のお気に入り登録

答えが間違っていたときや、単語を気に入ったときに、お気に入り登録できるようにします。

 

1, ルーティング

お気に入りをするとお気に入りをしたユーザーのIDと、お気に入りをされた単語のIDをパラメータにしたPOSTリクエストを送信させます。

なので、ルーティングはPOSTですね!

f:id:chuck0523:20150730213344p:plain

一番下に新しく名前付きルートを追加。

 

2, ビューの追加

お気に入りボタンを作成します。

このボタンはaddアクションを起こすこと、かつサインインしている時のみ表示されることの2つが求められます。

f:id:chuck0523:20150730215608p:plain

というわけで、このようになりました。

ちょっと複雑ですね…(;・∀・)

addアクションのためのform_forタグと、サインイン限定のためにsigned_in?関数を使っています。

 

まずサインインしていない状態だと、

シンプルな回答画面が。

f:id:chuck0523:20150730215209p:plain

 

その後、サインインしてから回答画面にやってくると、

f:id:chuck0523:20150730215243p:plain

 

このように、お気に入り追加ボタンが表示されていますヽ(=´▽`=)ノ

f:id:chuck0523:20150730215256p:plain

 

3, お気に入り追加アクション

ボタンを押した時に呼ばれるアクションを作成します。

と言っても、カンタンにはできそうにないです…ヽ(´Д`;)ノアゥア…

ちょっとずつ段階的にやっていきます。

 

f:id:chuck0523:20150730215953p:plain

10行目のaddアクションを追加しました。

まず、current_user.idでサインインしているユーザーのidを取得します(current_userはたしかどの画面からも利用できたはず…たぶん(;・∀・))

そして、POSTリクエストで渡ってきた単語IDも取得しています。

 

遷移先の画面では、デバッグのためにデータを表示させてみます。

f:id:chuck0523:20150730220318p:plain

 

いざ、ブラウザで確認!

f:id:chuck0523:20150730220426p:plain

なんか出た…!

僕がいまサインインしてるユーザーのIDは1。一方で追加を試みたбезという単語のIDは…(単語一覧で確認)

f:id:chuck0523:20150730220545p:plain

16番です!ちゃんと必要な情報が取れています(´;ω;`)

 

この情報を元に、お気に入り単語のデータを作成すればOKですね!

 addアクションに追加しました!

f:id:chuck0523:20150730221004p:plain

参考にしたのはこちら -> create - リファレンス - - Railsドキュメント

 

これで作成されるのかな…???(;・∀・)

 

 

案の定、怒られてしまった。そんなカンタンには行かないですよねw

f:id:chuck0523:20150730221120p:plain

 

変数の前に@がなかったようです

f:id:chuck0523:20150730221238p:plain

 

もう一度トライ!

f:id:chuck0523:20150730221305p:plain

回答画面にて、お気に入り追加を押します!すると遷移に成功!addアクションが正常に行われたようです

f:id:chuck0523:20150730223106p:plain

 

念のため、DBを確認してみます。

f:id:chuck0523:20150730223046p:plain

ちゃんと登録されてるヽ(=´▽`=)ノ

 

 

まとめ

というわけで、単語クイズの回答ページとお気に入り追加機能を作成することができました!いやー、今回も勉強になった…。そしてやっぱりRailsって楽しい(´;ω;`)

 

次回はお気に入りした単語一覧を表示する画面でも作ろうかな〜

 

 

FollowMe!