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

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

ただいまの
回答率

90.75%

  • Ruby on Rails

    6732questions

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

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

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 562

begin1990

score 21

やりたいこと
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に反映させる方法を、ネットで検索しても出てこないので、ご教示お願いできませんでしょうか?

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • 退会済みユーザー

    2018/02/12 10:03

    複数のユーザーから「やってほしいことだけを記載した丸投げの質問」という意見がありました
    「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。

回答 1

+1

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

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

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

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

 Links

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/02/05 22:51

    現在、「rails_raty_demo」リポジトリ通りに実装中ですが、現在
    https://gyazo.com/1e08c3abb60d88248775b22941a8a194
    で、「/raty-js/lib/jquery.raty.cssというファイルが見つかりません」というエラーが発生しています。

    ちゃんと「node_modules」フォルダの中に、「/raty-js/lib/jquery.raty.css」パスがあることを確認できるのに、なぜでしょうか?

    キャンセル

  • 2018/02/06 00:30

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

    キャンセル

  • 2018/02/06 20:37 編集

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

    キャンセル

  • 2018/02/06 20:49

    確認していませんでしたが jquery.raty.css は Raty が用意したフォントを...星をフォントとして表示させるために必要なものです

    そのため、画像として星を表示させたい場合に必要はないと思います

    どちらでの表示をさせたいのですか?

    キャンセル

  • 2018/02/06 21:00

    画像です。

    キャンセル

  • 2018/02/06 21:13

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

    キャンセル

  • 2018/02/06 21:31

    ちなみに、ビューのところは、
    https://github.com/gouf/rails_raty_demo
    と全く変わらないでしょうか?

    現在、ビューでは、「dounan_kuchikomi_new.html.erb」の12行目で、呼び出し側の引数の数とメソッド側の引数の数がずれている、というエラーが発生しています。
    https://gyazo.com/28f367f32d42002284cadbc4481c640c

    キャンセル

  • 2018/02/06 23:12 編集

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

    Rails で利用できるメソッドについては http://api.rubyonrails.org/ を参照してみてください

    キャンセル

  • 2018/02/07 08:51

    現在、ArgumentErrorが発生していますが、その件については、また別に質問を立てた方がよろしいでしょうか?
    https://gyazo.com/003a1b190b04181c7773e3da0a6dd16d

    ちなみに、content_tag でも全くエラーは変わりませんでした。

    キャンセル

  • 2018/02/07 17:59

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

    キャンセル

  • 2018/02/07 22:05 編集

    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})」の部分はそのままの方がよろしいでしょうか?

    キャンセル

  • 2018/02/07 22: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 以外にも選択肢があることを忘れないでください

    キャンセル

  • 2018/02/07 22:52

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

    キャンセル

  • 2018/02/09 23: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 %>の部分は変えても大丈夫でしょうか?

    キャンセル

  • 2018/02/10 03:02

    理解できない点があれば1つ1つ、このコメント欄、ないし新規質問として書き込んでください
    細かく噛み砕いて1歩ずつ進めましょう

    可能な限り、丸投げに近づくことは避けてください

    キャンセル

  • 2018/02/10 17:35

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

    キャンセル

  • 2018/02/12 10:00

    ここで質問ですが、
    / this hidden field will manipulated by raty-js
    / See: app/assets/javascripts/kuchikomis.js

    の部分はコメントアウトする箇所でしょうか?

    キャンセル

  • 2018/02/12 11:43

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

    キャンセル

  • 2018/02/12 11: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'
    }

    の部分です。

    キャンセル

  • 2018/02/12 12:08 編集

    Ruby(Rails) ではなく、JavaScript ですね。Raty のドキュメント (≒ GitHub リポジトリにある README.md) を見てみると判るのですが、Raty の初期化時に様々なオプションが渡せるのです。

    そのうちの幾つかとして、画像の指定が用意されているのです

    キャンセル

  • 2018/02/12 12: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 %>
    の部分を修正するところでしょうか?

    キャンセル

  • 2018/02/12 12:54 編集

    修正というよりは正確には移植ですね。

    その順番で進めたいのであれば、また、「Rails のドキュメントを参照してみてください」というところに戻ってきますね

    そうではなく、raty クラスを持つ div タグの出力は、タグヘルパーメソッドを使わずに HTML + ERB で記述してみてはいかがでしょう

    キャンセル

  • 2018/02/12 12:57

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

    キャンセル

  • 2018/02/12 16: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>のように出力されることです。

    キャンセル

  • 2018/02/12 23: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>」としてあげると 動作するのではないでしょうか

    キャンセル

  • 2018/02/13 20:54

    ご回答ありがとうございます。
    現在は以下のように表示されています。
    https://gyazo.com/7d1f18fdf5bf9d8a290146f10ba99fce

    「<div class="raty" data-rating="<%= @dounan_kuchikomi.rate %>"></div>」と記述しても、星が表示されないため、cssを変えようと考えていますが、cssは変えない方が無難でしょうか?

    また、変えるとしたらjavascriptの方がいいでしょうか?

    キャンセル

  • 2018/02/13 22:50

    それは実装を参考に試行錯誤してみてください

    ブラウザの開発者ツールや Rails サーバのログが解析のヒントになると思います

    キャンセル

  • 2018/02/13 23:43

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

    キャンセル

  • 2018/02/15 23: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>

    口コミ一覧でも星が表示されるようにするためには、どんな方法がありますか?

    キャンセル

  • 2018/02/16 05:50

    そこまで来ると最早ライブラリに頼らない自力実装路線で、Raty 無関係になってきますね...

    あと、もしかしたらこの問題に取り組む前に、次の3点:「Rails でのフォームの作成方法」「Controller から渡された値を View で form として再利用する方法」「View 側のフォームから値を送信する方法 ならびに送信された値の扱い方」について、改めて「調査」「サンプルプロジェクトの作成と実装」「teratail などのQ&A サービスに質問」の何れかあるいはすべてを実施する必要があるかもしれませんね

    [口コミサイトの星(★★★☆☆)をCSSだけで実装してみた - Qiita]( https://qiita.com/mfujimori/items/1c8055678a76d64587d9 ) についてはコピペで動きそうですし、Rails に組み込むのも容易でしょう(コピペが量産され得る未来についての是非はともかくとして)

    なので、先に書いた内容を実施後にでも、新たに質問を立ててみると、望んだ回答が得られるかもしれません

    キャンセル

  • 2018/02/16 08:49

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

    キャンセル

  • 2018/02/16 23:40 編集

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

    キャンセル

  • 2018/02/17 06:53 編集

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

    キャンセル

  • 2018/02/17 08:42

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

    キャンセル

  • 2018/02/17 09:32

    判断はおまかせします。

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

    キャンセル

  • 2018/02/17 09:48

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

    キャンセル

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

  • ただいまの回答率 90.75%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • Ruby on Rails

    6732questions

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