teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

10

編集

2023/10/23 11:33

投稿

ninjawanko3d
ninjawanko3d

スコア5

title CHANGED
File without changes
body CHANGED
@@ -318,4 +318,8 @@
318
318
  end
319
319
 
320
320
  end
321
- ```
321
+ ```
322
+
323
+ ------------------------------------------------------
324
+
325
+ **10000字をオーバーするため質問を改めます**

9

編集を施した

2023/10/23 11:31

投稿

ninjawanko3d
ninjawanko3d

スコア5

title CHANGED
File without changes
body CHANGED
@@ -32,44 +32,8 @@
32
32
 
33
33
  ご回答のおかげにより以下のようなコードに書き換えさせていただいたところ、図2のようなエラー?が発生しました!
34
34
 
35
- ```erb/app/viws/likes/_likes
36
- +<% if @posted %>
37
- + <% post = @posted %>
38
- +<% end %>
39
- <%= turbo_frame_tag :like_buttons do %>
40
- <% if Liker.find_by(content: session[:user_id],content2: post.id) %>
41
- <%= link_to "/likes/#{post.id}/destroy" do %>
42
- <span class="fa fa-heart liked-btn"></span>
43
- <% end%>
44
- <% else %>
45
- <%# link_to "/likes/#{post.id}/create", remote: true do %>
46
- <%# 下記リンクをクリックしたとき、`like_buttons ` という名前の Turbo Frame を更新する %>
47
- <%= link_to "/likes/#{post.id}/create", data: { turbo_frame: :like_buttons } do %>
48
- <span class="fa fa-heart unliked-btn"></span>
49
- <% end %>
50
- <% end %>
51
- <div>
52
- <%= Liker.where(content2: post.id).count %>
53
- </div>
54
- <% end %>
55
- ```
56
- ```ruby/app/controllers/likescontroller
57
- class LikesController < ApplicationController
58
- before_action :authenticate_user
59
- def create
60
- @posted = Posted.find_by(id: params[:post_id])
61
- if !Liker.find_by(content: session[:user_id], content2: params[:post_id])
62
- @like = Liker.new(
63
- content: session[:user_id],
64
- content2: params[:post_id]
65
- )
66
- @like.save
67
- end
68
- render :_likes
69
- end
70
- 以下略
71
- ```
72
35
 
36
+
73
37
  次からエラー?というか失敗画像
74
38
  図1
75
39
  /app/viws/likes/_likesの12行目をクリックしたところ図1から図2のようになりました!
@@ -281,3 +245,77 @@
281
245
 
282
246
 
283
247
 
248
+ ---------------------------------------------------------------------------------------------
249
+
250
+ 10/23更新
251
+
252
+ 以下のサイトを参考にturboを用いてコードを書き換え図1のハートボタンを押したところ図3のようなビューに移行しました。
253
+
254
+ 参考サイト
255
+ https://blog.aiandrox.com/posts/tech/2021/09/10/
256
+
257
+ https://zenn.dev/shita1112/books/cat-hotwire-turbo/viewer/turbo-streams-fetch
258
+
259
+ 図3
260
+ ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-10-23/53c9dade-09c2-42de-b842-859b4e19e5db.png)
261
+
262
+ --------------------------------------------
263
+ 変更したコード
264
+
265
+ ```erb/app/viws/likes/_likes
266
+ <% if @posted %>
267
+ <% post = @posted %>
268
+ <% end %>
269
+ <%# turbo_stream.update :like_buttons do %>
270
+ <turbo_stream id="like_buttons">
271
+ <% if Liker.find_by(content: session[:user_id],content2: post.id) %>
272
+ <%= link_to "/likes/#{post.id}/destroy" do %>
273
+ <span class="fa fa-heart liked-btn"></span>
274
+ <% end%>
275
+ <% else %>
276
+ <%# link_to "/likes/#{post.id}/create", remote: true do %>
277
+ <%# 下記リンクをクリックしたとき、`like_buttons ` という名前の Turbo Frame を更新する %>
278
+ <%= link_to "/likes/#{post.id}/create" do %>
279
+ <span class="fa fa-heart unliked-btn"></span>
280
+ <% end %>
281
+ <% end %>
282
+ <div>
283
+ <%= Liker.where(content2: post.id).count %>
284
+ </div>
285
+ </turbo-frame>
286
+ <%# end %>
287
+ ```
288
+
289
+ ```ruby/app/controllers/likescontroller
290
+ class LikesController < ApplicationController
291
+ before_action :authenticate_user
292
+ def create
293
+ @posted = Posted.find_by(id: params[:post_id])
294
+ @posts = Posted.all.order(created_at: :desc)
295
+ if !Liker.find_by(content: session[:user_id], content2: params[:post_id])
296
+ @like = Liker.new(
297
+ content: session[:user_id],
298
+ content2: params[:post_id]
299
+ )
300
+ @like.save
301
+ end
302
+ render turbo_stream: turbo_stream.update(
303
+ 'like-buttons',
304
+ partial: 'likes/likes',
305
+ locals: { post: @posted}
306
+ )
307
+ #format.html { render :_likes }
308
+ #render :_likes
309
+ end
310
+
311
+ def destroy
312
+ @like = Liker.find_by(
313
+ content: session[:user_id],
314
+ content2: params[:post_id]
315
+ )
316
+ @like.destroy
317
+ redirect_to("/")
318
+ end
319
+
320
+ end
321
+ ```

8

編集

2023/10/22 09:43

投稿

ninjawanko3d
ninjawanko3d

スコア5

title CHANGED
File without changes
body CHANGED
@@ -273,6 +273,11 @@
273
273
 
274
274
  参考によろしくお願いします!!!
275
275
 
276
+ ----------------------------
276
277
 
278
+ 10/22更新
277
279
 
280
+ 試しに<%= turbo %> 部分をコメントアウトしてみたのですが表示画面が同様に図2になりました泣
278
281
 
282
+
283
+

7

編集

2023/10/20 09:48

投稿

ninjawanko3d
ninjawanko3d

スコア5

title CHANGED
File without changes
body CHANGED
@@ -26,6 +26,7 @@
26
26
  -----------------------------------------------
27
27
  いいねは保存できているようなのでcreateアクションには行っていると思います。
28
28
  なぜこのようなエラーが生じるのでしょうか?ご教授お願いします。
29
+
29
30
  --------------------------------------------
30
31
  10/19更新
31
32
 
@@ -85,11 +86,193 @@
85
86
 
86
87
 
87
88
  -----------------------------------------
89
+
88
90
  このようになってしまいます”!!!
89
91
  解決法はあるのでしょうか?!
90
92
  ご教授お願いいたします!
91
93
 
94
+ ----------------------------------------------------------
92
95
 
96
+ ```ruby/Gamefile
97
+ source "https://rubygems.org"
98
+ git_source(:github) { |repo| "https://github.com/#{repo}.git" }
93
99
 
100
+ ruby "3.2.2"
94
101
 
102
+ # Bundle edge Rails instead: gem "rails", github: "rails/rails", branch: "main"
103
+ gem "rails", "~> 7.0.4", ">= 7.0.4.3"
95
104
 
105
+ gem 'jquery-rails'
106
+
107
+ gem 'bootstrap', '~> 4.4.1'
108
+
109
+ gem 'googleauth'
110
+
111
+ gem 'dotenv-rails'
112
+
113
+ gem 'omniauth', '1.9.1'
114
+
115
+ gem 'omniauth-google-oauth2'
116
+
117
+ gem 'devise'
118
+
119
+ # The original asset pipeline for Rails [https://github.com/rails/sprockets-rails]
120
+ gem "sprockets-rails"
121
+
122
+ # Use sqlite3 as the database for Active Record
123
+ gem "sqlite3", "~> 1.4"
124
+
125
+ # Use the Puma web server [https://github.com/puma/puma]
126
+ gem "puma", "~> 5.0"
127
+
128
+ # Use JavaScript with ESM import maps [https://github.com/rails/importmap-rails]
129
+ gem "importmap-rails"
130
+
131
+ # Hotwire's SPA-like page accelerator [https://turbo.hotwired.dev]
132
+ gem "turbo-rails"
133
+
134
+ # Hotwire's modest JavaScript framework [https://stimulus.hotwired.dev]
135
+ gem "stimulus-rails"
136
+
137
+ # Build JSON APIs with ease [https://github.com/rails/jbuilder]
138
+ gem "jbuilder"
139
+
140
+ # Use Redis adapter to run Action Cable in production
141
+ # gem "redis", "~> 4.0"
142
+
143
+ # Use Kredis to get higher-level data types in Redis [https://github.com/rails/kredis]
144
+ # gem "kredis"
145
+
146
+ # Use Active Model has_secure_password [https://guides.rubyonrails.org/active_model_basics.html#securepassword]
147
+ # gem "bcrypt", "~> 3.1.7"
148
+
149
+ # Windows does not include zoneinfo files, so bundle the tzinfo-data gem
150
+ gem "tzinfo-data", platforms: %i[ mingw mswin x64_mingw jruby ]
151
+
152
+ # Reduces boot times through caching; required in config/boot.rb
153
+ gem "bootsnap", require: false
154
+
155
+ # Use Sass to process CSS
156
+ # gem "sassc-rails"
157
+
158
+ # Use Active Storage variants [https://guides.rubyonrails.org/active_storage_overview.html#transforming-images]
159
+ # gem "image_processing", "~> 1.2"
160
+
161
+ group :development, :test do
162
+ # See https://guides.rubyonrails.org/debugging_rails_applications.html#debugging-with-the-debug-gem
163
+ gem "debug", platforms: %i[ mri mingw x64_mingw ]
164
+ end
165
+
166
+ group :development do
167
+ # Use console on exceptions pages [https://github.com/rails/web-console]
168
+ gem "web-console"
169
+
170
+ # Add speed badges [https://github.com/MiniProfiler/rack-mini-profiler]
171
+ # gem "rack-mini-profiler"
172
+
173
+ # Speed up commands on slow machines / big apps [https://github.com/rails/spring]
174
+ # gem "spring"
175
+ end
176
+
177
+ group :test do
178
+ # Use system testing [https://guides.rubyonrails.org/testing.html#system-testing]
179
+ gem "capybara"
180
+ gem "selenium-webdriver"
181
+ gem "webdrivers"
182
+ end
183
+
184
+ ```
185
+ ---------------------------------------------------------------------------------
186
+
187
+ ```JavaScript/app/javascript/application.js
188
+ // Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
189
+
190
+
191
+ import jQuery from "jquery";
192
+ window.$ = window.jQuery = jQuery;
193
+ import("jquery-ui-dist")
194
+ import("./custom/jQuery1.js")
195
+
196
+ ```
197
+
198
+ ---------------------------------------
199
+
200
+ ```JavaScript/app/javascript/custom/jQuery1.js
201
+ $(function(){
202
+ $(document).ready(function() {
203
+ $('#login-show').click(function(){
204
+ $('#login-modal, #overlay').fadeIn();
205
+ });
206
+ $('#overlay, .close-modal').click(function(){
207
+ $('#overlay, #login-modal').fadeOut();
208
+ });
209
+ });
210
+ });
211
+
212
+ $(function(){
213
+ $(document).ready(function() {
214
+ $('#posted-show').click(function(){
215
+ $('#posted-modal, #posted-overlay').fadeIn();
216
+ });
217
+ $('#posted-overlay, .close-modal').click(function(){
218
+ $('#posted-overlay, #posted-modal').fadeOut();
219
+ });
220
+ });
221
+ });
222
+
223
+ $(function(){
224
+ $(document).ready(function() {
225
+ $('.three-dot-leader').click(function(){
226
+ $('.posted-detail, .posted-detail-overlay').fadeIn();
227
+ });
228
+ $('.posted-detail-overlay').click(function(){
229
+ $('.posted-detail-overlay, .posted-detail').fadeOut();
230
+ });
231
+ });
232
+ });
233
+
234
+ const init = 4 //初期表示数
235
+ const more = 4 //追加表示数
236
+
237
+ // 初期表示数以降のリスト内容を非表示に
238
+ $(".more-list div:nth-child(n+" + (init+1) + ")").hide()
239
+
240
+ //初期表示数以下であればMoreボタンを非表示
241
+ $(".more-list").filter(function(){
242
+ return $(this).find("a").length <= init
243
+ }).find(".more-btn").hide()
244
+
245
+ // Moreボタンクリックで指定数表示
246
+ $(".more-btn").on("click",function(){
247
+ let this_list = $(this).closest(".more-list")
248
+ this_list.find("div:hidden").slice(0,more).slideToggle()
249
+
250
+ if(this_list.find("div:hidden").length == 0){
251
+ $(this).fadeOut()
252
+ }
253
+ })
254
+
255
+ // 3点リーダーを押したときその投稿のid保存
256
+
257
+
258
+ // 削除項目出すやつ各々表示
259
+
260
+ ```
261
+ -----------------------------------------------------------
262
+
263
+ ```ruby/app/config/importmap.rb
264
+ # Pin npm packages by running ./bin/importmap
265
+
266
+ pin "application", preload: true
267
+ pin "jquery", to: "https://ga.jspm.io/npm:jquery@3.6.0/dist/jquery.js"
268
+ pin "jquery-ui-dist", to: "https://ga.jspm.io/npm:jquery-ui-dist@1.13.1/jquery-ui.js"
269
+ pin_all_from 'app/javascript/custom', under: 'custom'
270
+
271
+ ```
272
+ --------------------------------------------------------
273
+
274
+ 参考によろしくお願いします!!!
275
+
276
+
277
+
278
+

6

2023/10/19 11:33

投稿

ninjawanko3d
ninjawanko3d

スコア5

title CHANGED
File without changes
body CHANGED
@@ -72,19 +72,18 @@
72
72
  次からエラー?というか失敗画像
73
73
  図1
74
74
  /app/viws/likes/_likesの12行目をクリックしたところ図1から図2のようになりました!
75
- ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-10-19/b0f3a914-4376-4703-9b9a-0f6adf65313f.png)
75
+ ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-10-19/a33dc1ed-5ac1-4716-a073-e0e0d07e4964.png)
76
76
 
77
77
  ここで一番上のハートを押すと.....
78
78
                    l
79
79
  l
80
80
  l
81
81
  図2
82
- ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-10-19/5db05e7a-95b5-49ad-8bf9-c98159fb480f.png)
82
+ ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-10-19/da5da13a-0ed7-45d0-a740-1f09ac7a6dce.png)
83
83
 
84
84
 
85
85
 
86
86
 
87
-
88
87
  -----------------------------------------
89
88
  このようになってしまいます”!!!
90
89
  解決法はあるのでしょうか?!

5

編集

2023/10/19 10:46

投稿

ninjawanko3d
ninjawanko3d

スコア5

title CHANGED
File without changes
body CHANGED
@@ -70,6 +70,7 @@
70
70
  ```
71
71
 
72
72
  次からエラー?というか失敗画像
73
+ 図1
73
74
  /app/viws/likes/_likesの12行目をクリックしたところ図1から図2のようになりました!
74
75
  ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-10-19/b0f3a914-4376-4703-9b9a-0f6adf65313f.png)
75
76
 
@@ -77,6 +78,7 @@
77
78
                    l
78
79
  l
79
80
  l
81
+ 図2
80
82
  ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-10-19/5db05e7a-95b5-49ad-8bf9-c98159fb480f.png)
81
83
 
82
84
 

4

編集

2023/10/19 10:43

投稿

ninjawanko3d
ninjawanko3d

スコア5

title CHANGED
File without changes
body CHANGED
@@ -26,3 +26,69 @@
26
26
  -----------------------------------------------
27
27
  いいねは保存できているようなのでcreateアクションには行っていると思います。
28
28
  なぜこのようなエラーが生じるのでしょうか?ご教授お願いします。
29
+ --------------------------------------------
30
+ 10/19更新
31
+
32
+ ご回答のおかげにより以下のようなコードに書き換えさせていただいたところ、図2のようなエラー?が発生しました!
33
+
34
+ ```erb/app/viws/likes/_likes
35
+ +<% if @posted %>
36
+ + <% post = @posted %>
37
+ +<% end %>
38
+ <%= turbo_frame_tag :like_buttons do %>
39
+ <% if Liker.find_by(content: session[:user_id],content2: post.id) %>
40
+ <%= link_to "/likes/#{post.id}/destroy" do %>
41
+ <span class="fa fa-heart liked-btn"></span>
42
+ <% end%>
43
+ <% else %>
44
+ <%# link_to "/likes/#{post.id}/create", remote: true do %>
45
+ <%# 下記リンクをクリックしたとき、`like_buttons ` という名前の Turbo Frame を更新する %>
46
+ <%= link_to "/likes/#{post.id}/create", data: { turbo_frame: :like_buttons } do %>
47
+ <span class="fa fa-heart unliked-btn"></span>
48
+ <% end %>
49
+ <% end %>
50
+ <div>
51
+ <%= Liker.where(content2: post.id).count %>
52
+ </div>
53
+ <% end %>
54
+ ```
55
+ ```ruby/app/controllers/likescontroller
56
+ class LikesController < ApplicationController
57
+ before_action :authenticate_user
58
+ def create
59
+ @posted = Posted.find_by(id: params[:post_id])
60
+ if !Liker.find_by(content: session[:user_id], content2: params[:post_id])
61
+ @like = Liker.new(
62
+ content: session[:user_id],
63
+ content2: params[:post_id]
64
+ )
65
+ @like.save
66
+ end
67
+ render :_likes
68
+ end
69
+ 以下略
70
+ ```
71
+
72
+ 次からエラー?というか失敗画像
73
+ /app/viws/likes/_likesの12行目をクリックしたところ図1から図2のようになりました!
74
+ ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-10-19/b0f3a914-4376-4703-9b9a-0f6adf65313f.png)
75
+
76
+ ここで一番上のハートを押すと.....
77
+                   l
78
+ l
79
+ l
80
+ ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-10-19/5db05e7a-95b5-49ad-8bf9-c98159fb480f.png)
81
+
82
+
83
+
84
+
85
+
86
+ -----------------------------------------
87
+ このようになってしまいます”!!!
88
+ 解決法はあるのでしょうか?!
89
+ ご教授お願いいたします!
90
+
91
+
92
+
93
+
94
+

3

tagu

2023/10/13 10:26

投稿

ninjawanko3d
ninjawanko3d

スコア5

title CHANGED
File without changes
body CHANGED
File without changes

2

改善

2023/10/12 11:16

投稿

ninjawanko3d
ninjawanko3d

スコア5

title CHANGED
File without changes
body CHANGED
@@ -17,9 +17,12 @@
17
17
  js.erbファイル
18
18
  ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-10-09/82f309c1-0d1f-46a7-9f2e-cae9ac83c39d.png)
19
19
 
20
+ -----------------------------------
21
+ **試してみたこと**
22
+ 下図のように変数postが悪さをしている要素を除外するためにjs.erbファイルの2行目をコメントアウトし、3行目を追加してみました。
23
+ ブラウザを開いて所、先ほどと同じエラーメッセージが出ました。このエラーは私のあてにならない予想では、「ビューがないよ!」と怒られている気がします。
24
+ ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-10-12/c05b849c-24fa-4d29-9396-dddb802df4cc.png)
20
25
 
21
-
22
-
23
26
  -----------------------------------------------
24
27
  いいねは保存できているようなのでcreateアクションには行っていると思います。
25
28
  なぜこのようなエラーが生じるのでしょうか?ご教授お願いします。

1

改善

2023/10/09 09:04

投稿

ninjawanko3d
ninjawanko3d

スコア5

title CHANGED
File without changes
body CHANGED
@@ -21,4 +21,5 @@
21
21
 
22
22
 
23
23
  -----------------------------------------------
24
+ いいねは保存できているようなのでcreateアクションには行っていると思います。
24
25
  なぜこのようなエラーが生じるのでしょうか?ご教授お願いします。