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

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

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

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

Q&A

解決済

Rails6でRaty4.1.0を使いたい

NASKA--
NASKA--

総合スコア21

Ruby on Rails 6

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

1回答

0グッド

0クリップ

505閲覧

投稿2022/11/05 13:42

前提

本のレビューを投稿できるサイトを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に依存しないというところまでは理解したのですが、その先がわからなくなってしまいました。

以下のような質問にはグッドを送りましょう

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

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

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

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

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

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

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

適切な質問に修正を依頼しましょう。

NASKA--

2022/11/05 17:32

試してはみたのですが、そもそもnew Ratyの部分でRatyが使えないと言われ、弾かれてしまっているため、何をやってもダメな状態になってしまっています
no1knows

2022/11/05 18:29

公式だとUsage with ImagesとかUsage with Fontのところに記載がありますが、事前に必要なファイルをダウンロードするなりしてRailsに認識させる必要があるかと思います。
no1knows

2022/11/07 04:44

うーん。僕もテスト的にhtmlとjsファイルで実装しようと思ったのですが、うまくできなかったです。 ちなみにratyのRails版は試しましたか? https://github.com/wbotelhos/rating
NASKA--

2022/11/07 04:58

そちらは少しみたのですが、やり方がわからなくてまだやってません。

回答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

no1knows

総合スコア3363

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

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

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

このような回答には修正を依頼しましょう。

回答へのコメント

NASKA--

2022/11/08 02:50

なるほど!そういう手もあるんですね... 私はratyのバージョンが古いものをなんとか見つけて実装できましたが、ずっとそういうわけにもいかないので、この方法も覚えておきます!有意義な情報をありがとうございます!

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

ただいまの回答率
86.02%

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

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

質問する

関連した質問

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

Ruby on Rails 6

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