どうも!chuckです。
前回に引き続き、Railsで単語クイズを実装していきます(`・ω・´)ゞ
答え画面の作成
前回はクイズ画面を作成しました!
このように、データベースから単語を1つランダムで出題します。
「答え!」ボタンを押すことで回答を表示させてみたいと思います。
1, 出題画面の修正
ただし、今までとは違って今回は、ページ遷移でデータを引き継ぐ必要があります。つまり、出題された単語が何だったのかを答えページに渡さなければなりません。
なので、まず出題ページを修正します。
こちらが修正前。ただ単語の表示させているだけですね。
これを以下のように修正。
ちょっと複雑ですね(;・∀・)
ちょっとここでRailsのデータ送りについて復習してみます。(以後、ページをまたいで送られるデータをパラメータと呼びます)
Railsでパラメータをやりとりするには2種類あるそうです。1つがリンクによるパラメータ渡しで、もう一つがフォームによるものです。
params - リファレンス - - Railsドキュメント
今回はフォーム送信を採用しました!
なので、出題画面はフォームタグである<%= form_for( ) %>が使われています。
3行目の記述はanswer_path(回答画面)に、:quizとしてパラメータを渡しています。
また、7行目にはhidden_fieldが使われています。これはHTMLの<input type="hidden">に相当します。一応、単語のIDを埋め込んでおきます。
以上が出題画面の変更点になります。送信ボタンである「答え!」を押すことで、フォーム内のデータがパラメータとして送信されます。
※パラメータを送るので、HTTPリクエストはもちろんPOSTです
2, 答えアクションの作成
次に回答を表示するためのアクションを作成します。
このようになりました!
今回使うのは6行目のanswerアクションになります。
answerにはPOSTリクエストとして、:quizパラメータが渡っています。なので、param[:quiz]でパラメータを取得することができます。
そして、:quizの中にはhidden_fieldで渡していた単語のidが含まれています。param [ :quiz ] [ :word_id] は、:quizに入っている:word_idを取得するという意味です。
パラメータで渡されたIDを利用して、回答画面でも出題画面と同じ単語を抽出することができますヽ(=´▽`=)ノ
3, 答え画面の作成
このようになりました!
2行目で、@answerから単語の意味(meaning)を取得しています。
ブラウザで確認するとこのようになります。
こちらがまず出題画面。домはとてもカンタンな単語で、家という意味です(^O^)
回答画面に飛ぶとこのとおり。
じゃーん!違うページでもちゃんと同じ単語を取得できています。
ちなみに、答え画面には「クイズ!」というリンクがついており、また別の単語クイズを受けることができますヽ(=´▽`=)ノ
単語のお気に入り登録
答えが間違っていたときや、単語を気に入ったときに、お気に入り登録できるようにします。
1, ルーティング
お気に入りをするとお気に入りをしたユーザーのIDと、お気に入りをされた単語のIDをパラメータにしたPOSTリクエストを送信させます。
なので、ルーティングはPOSTですね!
一番下に新しく名前付きルートを追加。
2, ビューの追加
お気に入りボタンを作成します。
このボタンはaddアクションを起こすこと、かつサインインしている時のみ表示されることの2つが求められます。
というわけで、このようになりました。
ちょっと複雑ですね…(;・∀・)
addアクションのためのform_forタグと、サインイン限定のためにsigned_in?関数を使っています。
まずサインインしていない状態だと、
シンプルな回答画面が。
その後、サインインしてから回答画面にやってくると、
このように、お気に入り追加ボタンが表示されていますヽ(=´▽`=)ノ
3, お気に入り追加アクション
ボタンを押した時に呼ばれるアクションを作成します。
と言っても、カンタンにはできそうにないです…ヽ(´Д`;)ノアゥア…
ちょっとずつ段階的にやっていきます。
10行目のaddアクションを追加しました。
まず、current_user.idでサインインしているユーザーのidを取得します(current_userはたしかどの画面からも利用できたはず…たぶん(;・∀・))
そして、POSTリクエストで渡ってきた単語IDも取得しています。
遷移先の画面では、デバッグのためにデータを表示させてみます。
いざ、ブラウザで確認!
なんか出た…!
僕がいまサインインしてるユーザーのIDは1。一方で追加を試みたбезという単語のIDは…(単語一覧で確認)
16番です!ちゃんと必要な情報が取れています(´;ω;`)
この情報を元に、お気に入り単語のデータを作成すればOKですね!
addアクションに追加しました!
参考にしたのはこちら -> create - リファレンス - - Railsドキュメント
これで作成されるのかな…???(;・∀・)
案の定、怒られてしまった。そんなカンタンには行かないですよねw
変数の前に@がなかったようです
もう一度トライ!
回答画面にて、お気に入り追加を押します!すると遷移に成功!addアクションが正常に行われたようです
念のため、DBを確認してみます。
ちゃんと登録されてるヽ(=´▽`=)ノ
まとめ
というわけで、単語クイズの回答ページとお気に入り追加機能を作成することができました!いやー、今回も勉強になった…。そしてやっぱりRailsって楽しい(´;ω;`)
次回はお気に入りした単語一覧を表示する画面でも作ろうかな〜
FollowMe!
git pushするとよく眠れる気がする
— タク(chuck) (@chuck0523) July 29, 2015