質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.45%
Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Q&A

1回答

1759閲覧

星評価が正常に表示されません。

begin1990

総合スコア31

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

0グッド

0クリップ

投稿2018/02/03 07:59

編集2018/02/16 14:41

やりたいこと
dounan_kuchikomiに☆評価を付ける

やったこと
☆評価を付けて口コミを投稿

問題点
星を、5段階評価で最高の5個を付けたにも拘らず、口コミ投稿後のビュー画面では0になっている。
https://gyazo.com/929c1dcd7ae4e2c1222ecb9bd0559bb4

該当コード

dounan_kuchikomi_new.html.erb

<div class="area dounan"> <h1><%= @dounan.title %></h1> <ul class="media-list"> <div class="row"> <aside class="col-xs-6"> <div class="panel panel-default"> <div class="panel-heading"> <li class="media"> <h2>レビューを投稿する</h2> <%= form_for ([@dounan, @dounan_kuchikomi]) do |f| %> <%= f.label :rate, '評価' %> <%= tag.div('', class: 'raty', data: { rating: @dounan_kuchikomi.rate }) %> <!-- this hidden field will manipulated by raty-js / See: app/assets/javascripts/kuchikomis.js --> <%= f.hidden_field :rate %> <%= f.label :title, '題名' %> <%= f.text_field :title, class: 'form-control', rows: 5 %> <%= f.label :picture, '写真' %> <%= f.file_field :picture %><br /> <%= f.label :content, 'レビュー' %> <%= f.text_area :content, class: 'form-control', rows: 5 %> <br /> <%= f.submit '投稿' , class: 'btn btn-success btn-lg'%> <% end %> </li> </div> </div> </aside> </div> </ul> </div> <script> $('#star').raty({ size : 36, starOff: '<%= asset_path('star-off.png') %>', starOn : '<%= asset_path('star-on.png') %>', scoreName: 'kuchikomi[star]' }); </script>

dounan_kuchikomi.html.erb

<div class="area dounan"> <ul class="media-list"> <div> <%= link_to 'レビューする', new_dounan_dounan_kuchikomi_path(@dounan, @dounan_kuchikomi), class: 'btn btn-success' %> </div> </div><br /> <div class="panel panel-default"> <h2>レビュー一覧</h2> <% @dounan_kuchikomis.each do |dounan_kuchikomi| %> <% user = dounan_kuchikomi.user %> <ul class="media"> <div class="media-body"> <div> <%= link_to user.name, user_path(user) %> <span class="text-muted">投稿日時 <%= dounan_kuchikomi.created_at %></span> </div> <div> <div id="star"></div> <p>題名:<%= dounan_kuchikomi.title %></p> <p><%= dounan_kuchikomi.content %></p> </div> <div> <% if current_user == dounan_kuchikomi.user %> <%= link_to 'このレビューを削除する', dounan_kuchikomi, method: :delete, data: { confirm: '本当に削除してよろしいですか?' }, class: 'btn btn-danger btn-xs' %> <% end %> </div> </div> </ul> <% end %> </div> <%= paginate @dounan_kuchikomis %> </ul> </div> <script> $('#star').raty({ size : 36, starOff: '<%= asset_path('star-off.png') %>', starOn : '<%= asset_path('star-on.png') %>', scoreName: 'kuchikomi[star]' }); </script>

dounan_kuchikomi_controller

class DounanKuchikomisController < ApplicationController before_action :require_user_logged_in, only: [:new, :crete, :edit, :update, :destroy] before_action :correct_user, only: [:destroy] def index @dounan = Dounan.find(params[:dounan_id]) @dounan_kuchikomis = @dounan.dounan_kuchikomis.all.page(params[:page]) end def new @dounan = Dounan.find(params[:dounan_id]) @dounan_kuchikomi = @dounan.dounan_kuchikomis.new end def create @dounan = Dounan.find(params[:dounan_id]) @dounan_kuchikomi = @dounan.dounan_kuchikomis.new(dounan_kuchikomi_params) @dounan_kuchikomi.user_id = current_user.id if @dounan_kuchikomi.save flash[:success] = 'レビュー が正常に投稿されました' redirect_to dounan_dounan_kuchikomis_path else flash.now[:danger] = 'レビュー が投稿されませんでした' render :new end end def edit @dounan_kuchikomi = @dounan.dounan_kuchikomis.find(params[:id]) render :edit end def update @dounan_kuchikomi = @dounan.dounan_kuchikomis.find(params[:id]) if @dounan_kuchikomi.update_attributes(dounan_kuchikomi_params) redirect_to @dounan_kuchikomi flash[:success] = "プロフィールを更新しました" else flash.now[:danger] = 'プロフィールを更新できませんでした。' render'edit' end end def destroy @dounan_kuchikomi.destroy flash[:success] = 'レビューを削除しました。' redirect_back(fallback_location: root_url) end private def set_dounan_kuchikomi @dounan = Dounan.find(params[:dounan_id]) @dounan_kuchikomi = @dounan.dounan_kuchikomis.find(params[:id]) end # Strong Parameter def dounan_kuchikomi_params params.require(:dounan_kuchikomi).permit(:content, :star, :picture, :title) end def correct_user @dounan_kuchikomi = current_user.dounan_kuchikomis.find_by(id: params[:id]) unless @dounan_kuchikomi redirect_to root_path end end end

dounan_kuchikomiモデル

class DounanKuchikomi < ApplicationRecord belongs_to :user belongs_to :dounan mount_uploader :picture, PictureUploader validates :user_id, presence: true validates :content, presence: true, length: { maximum: 300 } validates :title, presence: true, length: { maximum: 20 } end

マイグレーションファイル

class CreateDounanKuchikomis < ActiveRecord::Migration[5.0] def change create_table :dounan_kuchikomis do |t| t.string :content t.references :user, foreign_key: true t.references :dounan, foreign_key: true t.string :star t.string :picture t.string :title t.timestamps end end end

kuchikomi.js

// Place all the behaviors and hooks related to the matching controller here. // All this logic will automatically be available in application.js. // jQuery Plugin. Set/show rating by star function initRaty() { if($('.raty-read').length) { $('.raty-read').raty({ starType: 'i', space: false, readOnly: true, score: function() { return $(this).data('rating') } }) } if($('.raty').length) { $('.raty').raty({ starType: 'i', target: 'dounan_kuchikomi', // Sync rating to #dounan_kuchikomi targetKeep: true, targetType: 'number', space: true, score: function() { return $(this).data('rating') } }) } } $(document).on('load turbolinks:load', initRaty)

参照
https://qiita.com/nekonoprotocol/items/4bc5bd9c64dc3f181016
https://qiita.com/kitaokeita/items/1e40724c3384507cec13

試したこと
http://gouf.hatenablog.com/entry/2018/02/05/003548
を参考に、dounan_kuchikomi_new.html.erbで、星評価の機能を実装

参考リポジトリ
https://github.com/wbotelhos/raty
https://github.com/gouf/rails_raty_demo

付けた星の数を、そのままdounan_kuchikomi.html.erbに反映させる方法を、ネットで検索しても出てこないので、ご教示お願いできませんでしょうか?

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

おもしろそうなので書いてみました

詳細についてはリポジトリの各コミットを参照してみてください

Raty 初期化処理を2種類、表示用とフォームへサブミットする用を用意するのがポイントなのかもしれません

何か参考になれば幸いです

Links

投稿2018/02/04 17:20

gouf

総合スコア2321

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

begin1990

2018/02/05 13:51

現在、「rails_raty_demo」リポジトリ通りに実装中ですが、現在 https://gyazo.com/1e08c3abb60d88248775b22941a8a194 で、「/raty-js/lib/jquery.raty.cssというファイルが見つかりません」というエラーが発生しています。 ちゃんと「node_modules」フォルダの中に、「/raty-js/lib/jquery.raty.css」パスがあることを確認できるのに、なぜでしょうか?
gouf

2018/02/05 15:30

頭の `/` を外したら何か変わりますか? : `raty-js/lib/jquery.raty.css`
begin1990

2018/02/06 11:41 編集

すみません。間違えました。 「/raty-js/lib/jquery.raty.cssというファイルが見つかりません」というエラーは、「raty-js/lib/jquery.raty.css」と記載した時に発生したエラーで、頭に`/`を入れると、今度は、「/raty-js/lib/jquery.raty.cssという絶対パスを要求できません」というエラーが発生します。 https://gyazo.com/50d9b54b62e4fbd1f8907466b0d231dd
gouf

2018/02/06 11:49

確認していませんでしたが jquery.raty.css は Raty が用意したフォントを...星をフォントとして表示させるために必要なものです そのため、画像として星を表示させたい場合に必要はないと思います どちらでの表示をさせたいのですか?
gouf

2018/02/06 12:13

であれば CSS を読み込まずとも Raty で使用する画像を用意してあげれば、あとは Raty 初期化時にその画像名を指定すると表示されるはずです
gouf

2018/02/06 14:13 編集

その、あくまでも1例なので、もしエラーが出て動作しないといった状況であれば、tag メソッドの代わりに content_tag メソッドを使ってみるとか、あるいはHTML タグを書いて一部だけ ERB 出力部分として出力するとか、そこは自由に選択できますよ Rails で利用できるメソッドについては http://api.rubyonrails.org/ を参照してみてください
begin1990

2018/02/06 23:51

現在、ArgumentErrorが発生していますが、その件については、また別に質問を立てた方がよろしいでしょうか? https://gyazo.com/003a1b190b04181c7773e3da0a6dd16d ちなみに、content_tag でも全くエラーは変わりませんでした。
gouf

2018/02/07 08:59

そもそもとして content_tag の用法に誤りがあるような気がします... 今一度 Rails のドキュメントを参照してみてください
begin1990

2018/02/07 13:12 編集

Rails のドキュメントを参照し、content_tag(:rate, class: 'raty', data: {rating: @dounan_kuchikomi.rate})と変えたころ、ArgumentErrorは無くなりましたが、「class: 'raty', data: {rating: @dounan_kuchikomi.rate}」の部分がhtml出力されています。 https://gyazo.com/cecdb6f76b4111ce92e1028ab0185046 この部分を、星評価に変えたいのですが、「content_tag(:rate, class: 'raty', data: {rating: @dounan_kuchikomi.rate})」の部分はそのままの方がよろしいでしょうか?
gouf

2018/02/07 13:31

繰り返しになりますが、今一度 Rails のドキュメントを参照してみてください。 content_tag メソッドの第1引数はHTML タグ名を指定するようになっているはずです : http://api.rubyonrails.org/classes/ActionView/Helpers/TagHelper.html#method-i-content_tag それと、そもそもとして なぜ、tag ないし、content_tag を使用しているのかについては、モデルに紐付いたフォームの作成の中に、モデルに基づかない任意のタグを、Raty による星の表示と、JavaScript によるレート値の操作、機能を含めるためです tag, content_tag 以外にも選択肢があることを忘れないでください
begin1990

2018/02/07 13:52

ご回答ありがとうございます。 参考にさせていただきます。
begin1990

2018/02/09 14:53

現状報告します。 星評価の箇所を、 <%= tag("div", class: 'raty', data: { rating: @dounan_kuchikomi.rate }) %> <!-- this hidden field will manipulated by raty-js / See: app/assets/javascripts/kuchikomis.js --> <%= f.hidden_field :rate %> にすると、ページソースでは、 <div class="raty" /> <!-- this hidden field will manipulated by raty-js / See: app/assets/javascripts/kuchikomis.js --> <input type="hidden" name="dounan_kuchikomi[rate]" id="dounan_kuchikomi_rate" />と表示されました。 口コミ投稿画面で星が表示されるようにしたいのですが、<%= f.hidden_field :rate %>の部分は変えても大丈夫でしょうか?
gouf

2018/02/09 18:02

理解できない点があれば1つ1つ、このコメント欄、ないし新規質問として書き込んでください 細かく噛み砕いて1歩ずつ進めましょう 可能な限り、丸投げに近づくことは避けてください
begin1990

2018/02/10 08:35

わかりました。 色々と迷惑をかけるかもしれませんが、よろしくお願いします。
begin1990

2018/02/12 01:00

ここで質問ですが、 / this hidden field will manipulated by raty-js / See: app/assets/javascripts/kuchikomis.js の部分はコメントアウトする箇所でしょうか?
gouf

2018/02/12 02:43

わたしが公開したリポジトリでは、Rails のテンプレートエンジンにERB ではなく Slim を採用しているので、「/」はコメントアウトです
begin1990

2018/02/12 02:51

ありがとうございます。 それと、Raty 初期化時の追加設定は、「config/application.rb」に記述して大丈夫でしょうか? // Raty 初期化時に `/` を先頭に付与して画像ファイル名を指定する // 相対パス指定ではなくルートディレクトリから探させる { cancelOff: '/cancel-off.png', cancelOn: '/cancel-on.png' starHalf: '/star-half.png', starOff: '/star-off.png', starOn: '/star-on.png' } の部分です。
gouf

2018/02/12 03:10 編集

Ruby(Rails) ではなく、JavaScript ですね。Raty のドキュメント (≒ GitHub リポジトリにある README.md) を見てみると判るのですが、Raty の初期化時に様々なオプションが渡せるのです。 そのうちの幾つかとして、画像の指定が用意されているのです
begin1990

2018/02/12 03:30

「node_modules/raty-js/lib/jquery.raty.js」で確認できました。 `/` が入っていなかったので、先頭に付与しました。 画像は既に「public」フォルダにダウンロードしていますが、まだ表示されません。 その次に必要な工程は <%= f.label :rate, '評価' %> <%= tag("div", class: 'raty', data: { rating: @dounan_kuchikomi.rate }) %> <!-- / this hidden field will manipulated by raty-js / See: app/assets/javascripts/kuchikomis.js --> <%= f.hidden_field :rate %> の部分を修正するところでしょうか?
gouf

2018/02/12 03:54 編集

修正というよりは正確には移植ですね。 その順番で進めたいのであれば、また、「Rails のドキュメントを参照してみてください」というところに戻ってきますね そうではなく、raty クラスを持つ div タグの出力は、タグヘルパーメソッドを使わずに HTML + ERB で記述してみてはいかがでしょう
begin1990

2018/02/12 03:57

ご回答ありがとうございます。 raty クラスを持つ div タグを出力させたいので、何か参考になる例はありますか?
begin1990

2018/02/12 07:01

raty クラスを持つ div タグの出力は、<div class="raty"></div>とできましたが、それに、「data: { rating: @dounan_kuchikomi.rate }」の部分を追加し、@dounan_kuchikomi自体の、星の数を正確に表示できるようにするには、<div class="raty" data-rating ="@dounan_kuchikomi.rate"></div>とすればいいでしょうか? 理想は、<article data-user-id="123"></article>のように出力されることです。
gouf

2018/02/12 14:16

「<div class="raty" data-rating ="@dounan_kuchikomi.rate"></div>」惜しいですね、ですが大体あってます @dounan_kuchikomi.rate は Rails 側で処理してブラウザに表示される部分なので、ERB テンプレートの置換・埋め込み処理が実行されるタイミング内でRuby コードとして評価される必要があります つまり、「<%= %>」の出番ですね 「<div class="raty" data-rating="<%= @dounan_kuchikomi.rate %>"></div>」としてあげると 動作するのではないでしょうか
begin1990

2018/02/13 11:54

ご回答ありがとうございます。 現在は以下のように表示されています。 https://gyazo.com/7d1f18fdf5bf9d8a290146f10ba99fce 「<div class="raty" data-rating="<%= @dounan_kuchikomi.rate %>"></div>」と記述しても、星が表示されないため、cssを変えようと考えていますが、cssは変えない方が無難でしょうか? また、変えるとしたらjavascriptの方がいいでしょうか?
gouf

2018/02/13 13:50

それは実装を参考に試行錯誤してみてください ブラウザの開発者ツールや Rails サーバのログが解析のヒントになると思います
begin1990

2018/02/13 14:43

ご回答ありがとうございます。 では、やってみます。
begin1990

2018/02/15 14:00

レビュー画面の星を、画像として表示させるために、 application.html.erbの<head>部分に <script type="text/javascript"> $(function() { $('.raty').raty();  }); </script> を追加したり、 kuchikomi.jsやjquery.raty.jsを読み込ませたりしても、星が表示されませんでした。 そこで、今度は https://qiita.com/mfujimori/items/1c8055678a76d64587d9 を参考に、CSSで星を実装してみました。 https://gyazo.com/6b9d81ed20ca3ea727c4eca002f0fe03 すると、今度は星が表示されました。 この状態で、評価を付けて投稿しても、星が表示されませんでした。 https://gyazo.com/d9b755cbce9b903bf3ce401bc3a1a10a 口コミの一覧ビューで、評価を表示させる箇所は以下のようになっています。 <p><%= dounan_kuchikomi.rate %></p> 口コミ一覧でも星が表示されるようにするためには、どんな方法がありますか?
gouf

2018/02/15 20:50

そこまで来ると最早ライブラリに頼らない自力実装路線で、Raty 無関係になってきますね... あと、もしかしたらこの問題に取り組む前に、次の3点:「Rails でのフォームの作成方法」「Controller から渡された値を View で form として再利用する方法」「View 側のフォームから値を送信する方法 ならびに送信された値の扱い方」について、改めて「調査」「サンプルプロジェクトの作成と実装」「teratail などのQ&A サービスに質問」の何れかあるいはすべてを実施する必要があるかもしれませんね [口コミサイトの星(★★★☆☆)をCSSだけで実装してみた - Qiita]( https://qiita.com/mfujimori/items/1c8055678a76d64587d9 ) についてはコピペで動きそうですし、Rails に組み込むのも容易でしょう(コピペが量産され得る未来についての是非はともかくとして) なので、先に書いた内容を実施後にでも、新たに質問を立ててみると、望んだ回答が得られるかもしれません
begin1990

2018/02/15 23:49

ご回答ありがとうございます。 参考にさせていただきます。
begin1990

2018/02/16 14:42 編集

あと、今までに「kuchikomi.js」や「jquery.raty.js」といったjavascriptのファイルを読み込ませても、星が表示されなかったのは、どんな理由が考えられますか? javascriptのコードは殆ど変えず、正しく書いたつもりでいますが、理由が分かりません。 また、kuchikomi.jsは質問文に追加しました。
gouf

2018/02/16 22:17 編集

begin1990 さんの書かれたコードは公開リポジトリではない(?)ですし、共同開発者でもないので、現時点では分かりかねます
begin1990

2018/02/16 23:42

必要なら、一度公開した方がいいでしょうか?
gouf

2018/02/17 00:32

判断はおまかせします。 ただ、最初の回答が全てなので、わたしは協力いたしかねます。
begin1990

2018/02/17 00:48

つまり、リポジトリを公開しても分からないということでしょうか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.45%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問