Q&A
下記のチュートリアルを試してみてはどうでしょうか？
https://github.com/wbotelhos/raty/blob/main/tutorial.md
前提
本のレビューを投稿できるサイトをratyを使用して作成したいのですが、エラーが出てしまい困っています
実現したいこと
- ホシデ評価をつけて投稿できるようにしたい
発生している問題・エラーメッセージ
Uncaught ReferenceError: Raty is not defined at books:109:5
Uncaught ReferenceError: Raty is not defined at <anonymous>:3:5 at o.assignNewBody (turbolinks.js:604:1) at o.replaceBody (turbolinks.js:542:1) at turbolinks.js:535:1 at e.renderView (turbolinks.js:495:1) at o.render (turbolinks.js:533:1) at e.render (turbolinks.js:493:1) at t.renderSnapshot (turbolinks.js:690:1) at t.render (turbolinks.js:686:1) at r.render (turbolinks.js:940:1)
該当のソースコード
_form.html.erb
1<%= form_with model:book,local:true do |f| %> 2 <div id="error_explanation"> 3 <% if book.errors.any? %> 4 <h3><%= book.errors.count %>errors prohibited this obj from being saved:</h3> 5 <ul> 6 <% book.errors.full_messages.each do |message| %> 7 <li><%= message %></li> 8 <% end %> 9 </ul> 10 <% end %> 11 </div> 12 <div class="form-group"> 13 <%= f.label :title %> 14 <%= f.text_field :title, class: 'form-control book_title' %> 15 </div> 16 <div class="form-group"> 17 <%= f.label :opinion %> 18 <%= f.text_area :body, class: 'form-control book_body' %> 19 </div> 20 <div class="form-group row" id="star"> 21 <%= f.label 'Rate', class:'col-md-3 col-form-label' %> 22 <%= f.hidden_field :star, id: :review_star %> 23 </div> 24 <script> 25 $('#star').empty(); 26 new Raty(document.querySelector('#star'), { 27 size : 36, 28 starOff: '<%= asset_path('star-off.png') %>', 29 starOn : '<%= asset_path('star-on.png') %>', 30 starHalf: '<%= asset_path('star-half.png') %>', 31 scoreName: 'book[star]', 32 half: true 33 }); 34 </script> 35 <div class="form-group"> 36 <%= f.submit class: 'btn btn-success' %> 37 </div> 38<% end %>
config/webpack/enviroment.js
1const { environment } = require('@rails/webpacker') 2 3const webpack = require('webpack') 4environment.plugins.prepend( 5 'Provide', 6 new webpack.ProvidePlugin({ 7 $: 'jquery/src/jquery', 8 jQuery: 'jquery/src/jquery', 9 jquery: 'jquery/src/jquery', 10 Popper: 'popper.js' 11 }) 12) 13module.exports = environment
app/javascript/packs/application.js
1// This file is automatically compiled by Webpack, along with any other files 2// present in this directory. You're encouraged to place your actual application logic in 3// a relevant structure within app/javascript and only use these pack files to reference 4// that code so it'll be compiled. 5 6import Rails from "@rails/ujs" 7import Turbolinks from "turbolinks" 8import * as ActiveStorage from "@rails/activestorage" 9import "channels" 10import "jquery" 11import "popper.js" 12import "bootstrap" 13import '@fortawesome/fontawesome-free/js/all'; 14import "../stylesheets/application" 15require('packs/raty') 16window.$ = window.jQuery = require('jquery'); 17 18Rails.start() 19Turbolinks.start() 20ActiveStorage.start()
application.html.erb
1<!DOCTYPE html> 2<html> 3 <head> 4 <title>Bookers2Ver2</title> 5 <%= csrf_meta_tags %> 6 <%= csp_meta_tag %> 7 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 8 <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> 9 <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> 10 </head> 11 <body> 12 <%= render 'layouts/header' %> 13 <main> 14 <p id="notice"><%= notice %></p> 15 <%= yield %> 16 </main> 17 <%= render 'layouts/footer' %> 18 </body> 19</html>
試したこと
最新のバージョンのratyだとjqueryに依存しないというところまでは理解したのですが、その先がわからなくなってしまいました。
試してはみたのですが、そもそもnew Ratyの部分でRatyが使えないと言われ、弾かれてしまっているため、何をやってもダメな状態になってしまっています
公式だとUsage with ImagesとかUsage with Fontのところに記載がありますが、事前に必要なファイルをダウンロードするなりしてRailsに認識させる必要があるかと思います。
https://github.com/wbotelhos/raty/blob/main/build/raty.js
一応こちらのファイルはコピーしてpacksの下のraty.jsにいれたのですが、それでも全く変わらない状態です
うーん。僕もテスト的にhtmlとjsファイルで実装しようと思ったのですが、うまくできなかったです。
ちなみにratyのRails版は試しましたか？
https://github.com/wbotelhos/rating
そちらは少しみたのですが、やり方がわからなくてまだやってません。
回答1件
0
ベストアンサー
質問とそれてしまうのですが、★3.5とかは必要ない、★5段階評価でよければ、gemやJavaScriptを利用せずに実装できそうです。
下記はHTMLでの記載となりますが、事前に配列を準備してcollection_radio_buttonsを利用すればシンプルな実装が可能かと思います。
HTML
1<div class="review"> 2 <p>レビュー</p> 3 <div class="stars"> 4 <span> 5 <input id="review01" type="radio" name="book[review]" value="1"><label for="review01">★</label> 6 <input id="review02" type="radio" name="book[review]" value="2"><label for="review02">★</label> 7 <input id="review03" type="radio" name="book[review]" value="3"><label for="review03">★</label> 8 <input id="review04" type="radio" name="book[review]" value="4"><label for="review04">★</label> 9 <input id="review05" type="radio" name="book[review]" value="5"><label for="review05">★</label> 10 </span> 11 </div> 12</div>
CSS
1.stars span{ 2 display: flex; /* 要素をフレックスボックスにする */ 3 flex-direction: row-reverse; /* 星を逆順に並べる */ 4 justify-content: flex-end; /* 逆順なので、左寄せにする */ 5} 6 7.stars input[type='radio']{ 8 display: none; /* デフォルトのラジオボタンを非表示にする */ 9} 10 11.stars label{ 12 color: #D2D2D2; /* 未選択の星をグレー色に指定 */ 13 font-size: 30px; /* 星の大きさを30pxに指定 */ 14 padding: 0 5px; /* 左右の余白を5pxに指定 */ 15 cursor: pointer; /* カーソルが上に乗ったときに指の形にする */ 16} 17 18.stars label:hover, 19.stars label:hover ~ label, 20.stars input[type='radio']:checked ~ label{ 21 color: #F8C601; /* 選択された星以降をすべて黄色にする */ 22}
参考：https://qiita.com/7note/items/3b3bf85aa779dd757d4b
今後自分で使うかもしれないので、見直してわかるようにざっくりと記載しています。
投稿2022/11/07 23:10
総合スコア3365
なるほど！そういう手もあるんですね...
私はratyのバージョンが古いものをなんとか見つけて実装できましたが、ずっとそういうわけにもいかないので、この方法も覚えておきます！有意義な情報をありがとうございます！
あなたの回答
tips
プレビュー
