どうも！chuckです。
前回に引き続き、Railsで単語クイズを実装していきます(｀･ω･´)ゞ
答え画面の作成
前回はクイズ画面を作成しました！
このように、データベースから単語を１つランダムで出題します。
「答え！」ボタンを押すことで回答を表示させてみたいと思います。
1, 出題画面の修正
ただし、今までとは違って今回は、ページ遷移でデータを引き継ぐ必要があります。つまり、出題された単語が何だったのかを答えページに渡さなければなりません。
なので、まず出題ページを修正します。
こちらが修正前。ただ単語の表示させているだけですね。
これを以下のように修正。
ちょっと複雑ですね(；・∀・)
ちょっとここでRailsのデータ送りについて復習してみます。（以後、ページをまたいで送られるデータをパラメータと呼びます）
Railsでパラメータをやりとりするには2種類あるそうです。１つがリンクによるパラメータ渡しで、もう一つがフォームによるものです。
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アクションを起こすこと、かつサインインしている時のみ表示されることの２つが求められます。
というわけで、このようになりました。
ちょっと複雑ですね…(；・∀・)
addアクションのためのform_forタグと、サインイン限定のためにsigned_in?関数を使っています。
まずサインインしていない状態だと、
シンプルな回答画面が。
その後、サインインしてから回答画面にやってくると、
このように、お気に入り追加ボタンが表示されていますヽ(=´▽`=)ﾉ
3, お気に入り追加アクション
ボタンを押した時に呼ばれるアクションを作成します。
と言っても、カンタンにはできそうにないです…ヽ(´Д`；)ﾉｱｩｱ…
ちょっとずつ段階的にやっていきます。
10行目のaddアクションを追加しました。
まず、current_user.idでサインインしているユーザーのidを取得します（current_userはたしかどの画面からも利用できたはず…たぶん(；・∀・)）
そして、POSTリクエストで渡ってきた単語IDも取得しています。
遷移先の画面では、デバッグのためにデータを表示させてみます。
いざ、ブラウザで確認！
なんか出た…！
僕がいまサインインしてるユーザーのIDは１。一方で追加を試みたбезという単語のIDは…（単語一覧で確認）
１６番です！ちゃんと必要な情報が取れています(´；ω；｀)
この情報を元に、お気に入り単語のデータを作成すればOKですね！
addアクションに追加しました！
参考にしたのはこちら -> create - リファレンス - - Railsドキュメント
これで作成されるのかな…？？？(；・∀・)
案の定、怒られてしまった。そんなカンタンには行かないですよねｗ
変数の前に＠がなかったようです
もう一度トライ！
回答画面にて、お気に入り追加を押します！すると遷移に成功！addアクションが正常に行われたようです
念のため、DBを確認してみます。
ちゃんと登録されてるヽ(=´▽`=)ﾉ
まとめ
というわけで、単語クイズの回答ページとお気に入り追加機能を作成することができました！いやー、今回も勉強になった…。そしてやっぱりRailsって楽しい(´；ω；｀)
次回はお気に入りした単語一覧を表示する画面でも作ろうかな〜
FollowMe！
git pushするとよく眠れる気がする
— タク(chuck) (@chuck0523) July 29, 2015