質問編集履歴

4

index.html.slim全体を追加しました。

2019/12/09 01:20

投稿

HIRO76
HIRO76

スコア9

test CHANGED
File without changes
test CHANGED
@@ -30,10 +30,202 @@
30
30
 
31
31
 
32
32
 
33
-
34
-
35
33
  ```slim
36
34
 
35
+ / ヘッダーここから
36
+
37
+ .header-bg.sticky-top
38
+
39
+ .header.navbar
40
+
41
+ = link_to "Fishtweet", root_path, class: "my-2 h3 text-white text-decoration-none"
42
+
43
+ ul.nav
44
+
45
+ - unless user_signed_in?
46
+
47
+ li.nav-item
48
+
49
+ = link_to "ログイン", new_user_session_path, class: "nav-link text-white"
50
+
51
+ li.nav-item
52
+
53
+ = link_to "新規登録", new_user_registration_path, class: "nav-link text-white"
54
+
55
+ - else
56
+
57
+ li.nav-item
58
+
59
+ = link_to "マイページ", user_path(current_user), class: "nav-link text-white"
60
+
61
+ li.nav-item
62
+
63
+ = link_to "ログアウト", destroy_user_session_path, method: :delete, class: "nav-link text-white"
64
+
65
+ / ヘッダーここまで
66
+
67
+
68
+
69
+
70
+
71
+ / コンテンツ ここから
72
+
73
+ .contents.d-flex.justify-content-end.vh-100
74
+
75
+ / leftcontents
76
+
77
+ .left-content.w-50
78
+
79
+ .article.card.h-100 id="append_to"
80
+
81
+ = image_tag @article.images.first.variant(resize: "450x400").processed, class: "article-img img-fluid shadow-sm"
82
+
83
+ .article-description.card-body.p-1
84
+
85
+ h5.card-title.m-0
86
+
87
+ = @article.title.truncate(10, omission: '…')
88
+
89
+ p.card-text.m-0
90
+
91
+ = @article.user.nickname
92
+
93
+ p.card-text
94
+
95
+ = @article.body.truncate(100, omission: '…')
96
+
97
+ = link_to "続きを読む", article_path(@article), class: "btn btn-outline-dark rounded-pill float-right"
98
+
99
+
100
+
101
+ / rightcontents
102
+
103
+ .right-content.w-50.overflow-auto.vh-100
104
+
105
+ - @articles.each do |article|
106
+
107
+ = link_to article_path(article), class: "text-dark text-decoration-none" do
108
+
109
+ .article-list.card.m-4.shadow-sm
110
+
111
+ .row
112
+
113
+ .article-list-img.col-4
114
+
115
+ - if article.images.count > 0
116
+
117
+ = image_tag article.images.first.variant(resize: "150x150").processed, class: "article-list-img"
118
+
119
+ .article-list-description.card-body
120
+
121
+ h5.card-title
122
+
123
+ = article.title
124
+
125
+ .pagenate.font-weight-bold.text-monospace.mx-auto.mb-5.d-flex.justify-content-center id="page"
126
+
127
+ = paginate(@articles)
128
+
129
+
130
+
131
+ .archive.m-5
132
+
133
+ h5 アーカイブ
134
+
135
+ ul.list-group.list-group-flush
136
+
137
+ = link_to "#", class: "text-dark text-decoration-none"
138
+
139
+ li.list-group-item 2019/10
140
+
141
+ = link_to "#", class: "text-dark text-decoration-none"
142
+
143
+ li.list-group-item 2019/9
144
+
145
+ = link_to "#", class: "text-dark text-decoration-none"
146
+
147
+ li.list-group-item 2019/8
148
+
149
+ = link_to "#", class: "text-dark text-decoration-none"
150
+
151
+ li.list-group-item 2019/7
152
+
153
+
154
+
155
+ .embed-responsive.embed-responsive-16by9.mb-5
156
+
157
+ iframe.embed-responsive-item src="https://www.youtube.com/embed/eo_s9aynXSw?rel=0"
158
+
159
+
160
+
161
+ .right-content-footer.border-top.mx-auto.mb-3.w-75.d-flex.justify-content-around
162
+
163
+ = link_to "#"
164
+
165
+ i.fab.fa-facebook-f.fa-lg.pt-4.text-muted
166
+
167
+ = link_to "#"
168
+
169
+ i.fab.fa-twitter.fa-lg.pt-4.text-muted
170
+
171
+ = link_to "#"
172
+
173
+ i.fab.fa-instagram.fa-lg.pt-4.text-muted
174
+
175
+ = link_to "#"
176
+
177
+ i.fab.fa-github.fa-lg.pt-4.text-muted
178
+
179
+ / コンテンツ ここまで
180
+
181
+
182
+
183
+
184
+
185
+ / フッターここから
186
+
187
+ .footer-bg
188
+
189
+ .footer.page-footer.font-small.pt-3.fixed-bottom
190
+
191
+ .container
192
+
193
+ ul.list-unstyled.list-inline.text-center.py-3.
194
+
195
+ li.list-inline-item.text-white
196
+
197
+ h5.mb-1.h5 enjoy fishing
198
+
199
+ li.list-inline-item.text-white
200
+
201
+ - if current_user
202
+
203
+ = link_to new_article_path do
204
+
205
+ .btn.btn-outline-light.btn-lg.rounded-pill 投稿する
206
+
207
+ - else
208
+
209
+ = link_to new_user_session_path do
210
+
211
+ .btn.btn-outline-light.btn-lg.rounded-pill 投稿する
212
+
213
+
214
+
215
+ .footer-copyright.text-center.py-2.text-white.bg-dark © 2019 Copyright
216
+
217
+ / フッターここまで
218
+
219
+
220
+
221
+ ```
222
+
223
+
224
+
225
+
226
+
227
+ ```slim
228
+
37
229
  / #index.html.slim
38
230
 
39
231
 

3

コード及び質問情報の修正

2019/12/09 01:20

投稿

HIRO76
HIRO76

スコア9

test CHANGED
@@ -1 +1 @@
1
- 縦に2分割したページで画面だけページネーション
1
+ 縦に2分割したページで片ページネーションさせると、もう片方の画面が何も表示されなくなる
test CHANGED
@@ -38,79 +38,45 @@
38
38
 
39
39
 
40
40
 
41
-
42
-
43
- / ヘッダここから
41
+ / leftcontents 固定ペ
44
-
45
- .header-bg.sticky-top
46
-
47
- .header.navbar
48
-
49
- = link_to "Fishtweet", root_path, class: "my-2 h3 text-white text-decoration-none"
50
-
51
- ul.nav
52
-
53
- - unless user_signed_in?
54
-
55
- li.nav-item
56
-
57
- = link_to "ログイン", new_user_session_path, class: "nav-link text-white"
58
-
59
- li.nav-item
60
-
61
- = link_to "新規登録", new_user_registration_path, class: "nav-link text-white"
62
-
63
- - else
64
-
65
- li.nav-item
66
-
67
- = link_to "マイページ", user_path(current_user), class: "nav-link text-white"
68
-
69
- li.nav-item
70
-
71
- = link_to "ログアウト", destroy_user_session_path, method: :delete, class: "nav-link text-white"
72
-
73
- / ヘッダーここまで
74
42
 
75
43
 
76
44
 
45
+ .left-content.w-50
46
+
47
+ .article.card.h-100 id="append_to"
48
+
49
+ = image_tag @article.images.first.variant(resize: "450x400").processed, class: "article-img img-fluid shadow-sm"
50
+
51
+ .article-description.card-body.p-1
52
+
53
+ h5.card-title.m-0
54
+
55
+ = @article.title.truncate(10, omission: '…')
56
+
57
+ p.card-text.m-0
58
+
59
+ = @article.user.nickname
60
+
61
+ p.card-text
62
+
63
+ = @article.body.truncate(100, omission: '…')
64
+
65
+ = link_to "続きを読む", article_path(@article), class: "btn btn-outline-dark rounded-pill float-right"
66
+
67
+ ```
77
68
 
78
69
 
79
- / コンテンツ ここから
80
70
 
81
- .contents.d-flex.justify-content-end.vh-100
71
+ ```slim
82
72
 
83
- / leftcontents
73
+ / #index.html.slim
84
74
 
85
- .left-content.w-50
86
75
 
87
- - @articles.each_with_index do |article, i|
88
76
 
89
- .article.card.h-100 id="append_to"
77
+ / rightcontents ページネーションページ
90
78
 
91
- - if article.images.count > 0
92
79
 
93
- = image_tag article.images.first.variant(resize: "450x400").processed, class: "article-img img-fluid shadow-sm"
94
-
95
- .article-description.card-body
96
-
97
- h6.card-title.m-0
98
-
99
- = article.title.truncate(10, omission: '…')
100
-
101
- p.card-text.m-0
102
-
103
- = article.user.nickname
104
-
105
- p.card-text
106
-
107
- = article.body.truncate(100, omission: '…')
108
-
109
- = link_to "続きを読む", article_path(article), class: "btn btn-outline-dark rounded-pill float-right"
110
-
111
- - break
112
-
113
- / rightcontents
114
80
 
115
81
  .right-content.w-50.overflow-auto.vh-100
116
82
 
@@ -138,113 +104,13 @@
138
104
 
139
105
  = paginate(@articles)
140
106
 
141
-
142
-
143
- .archive.m-5
144
-
145
- h5 アーカイブ
146
-
147
- ul.list-group.list-group-flush
148
-
149
- = link_to "#", class: "text-dark text-decoration-none"
150
-
151
- li.list-group-item 2019/10
152
-
153
- = link_to "#", class: "text-dark text-decoration-none"
154
-
155
- li.list-group-item 2019/9
156
-
157
- = link_to "#", class: "text-dark text-decoration-none"
158
-
159
- li.list-group-item 2019/8
160
-
161
- = link_to "#", class: "text-dark text-decoration-none"
162
-
163
- li.list-group-item 2019/7
164
-
165
-
166
-
167
- .embed-responsive.embed-responsive-16by9.mb-5
168
-
169
- iframe.embed-responsive-item src="https://www.youtube.com/embed/eo_s9aynXSw?rel=0"
170
-
171
-
172
-
173
- .right-content-footer.border-top.mx-auto.mb-3.w-75.d-flex.justify-content-around
174
-
175
- = link_to "#"
176
-
177
- i.fab.fa-facebook-f.fa-lg.pt-4.text-muted
178
-
179
- = link_to "#"
180
-
181
- i.fab.fa-twitter.fa-lg.pt-4.text-muted
182
-
183
- = link_to "#"
184
-
185
- i.fab.fa-instagram.fa-lg.pt-4.text-muted
186
-
187
- = link_to "#"
188
-
189
- i.fab.fa-github.fa-lg.pt-4.text-muted
190
-
191
- / コンテンツ ここまで
192
-
193
-
194
-
195
-
196
-
197
- / フッターここから
198
-
199
- .footer-bg
200
-
201
- .footer.page-footer.font-small.pt-3.fixed-bottom
202
-
203
- .container
204
-
205
- ul.list-unstyled.list-inline.text-center.py-3.
206
-
207
- li.list-inline-item.text-white
208
-
209
- h5.mb-1.h5 enjoy fishing
210
-
211
- li.list-inline-item.text-white
212
-
213
- = link_to new_article_path do
214
-
215
- .btn.btn-outline-light.btn-lg.rounded-pill 投稿する
216
-
217
-
218
-
219
- .footer-copyright.text-center.py-2.text-white.bg-dark © 2019 Copyright
220
-
221
- / フッターここまで
222
-
223
-
224
-
225
-
226
-
227
107
  ```
228
108
 
229
109
 
230
110
 
231
111
  ```ruby
232
112
 
233
- # articles.controller
113
+ # articles_controller.rb
234
-
235
-
236
-
237
- class ArticlesController < ApplicationController
238
-
239
- before_action :set_article, only: [:show, :edit]
240
-
241
- before_action :move_to_index, except: [:index, :show]
242
-
243
-
244
-
245
- helper_method :images_destroy
246
-
247
-
248
114
 
249
115
 
250
116
 
@@ -252,132 +118,22 @@
252
118
 
253
119
  @articles = Article.includes(:user).order(created_at: :desc).page(params[:page]).per(10)
254
120
 
121
+ @article = Article.last
122
+
255
123
  end
124
+
125
+ ```
256
126
 
257
127
 
258
128
 
259
- def show
260
-
261
- end
262
129
 
263
130
 
131
+ 該当箇所のコードになります。一部修正しました。
264
132
 
265
- def edit
133
+ 実装方法としてはJavaScriptでやるというのが最適なのでしょうか?
266
134
 
267
- @images = @article.images
135
+ jQueryを少しかじった程度なのでいまいちイメージが湧きません。
268
136
 
269
- end
137
+ 参考記事等ございましたら紹介していただけると幸いです。
270
138
 
271
-
272
-
273
- def update
274
-
275
- @article = Article.find(params[:id])
276
-
277
- if @article.update(article_params)
278
-
279
- redirect_to @article
280
-
281
- else
282
-
283
- render "edit"
284
-
285
- end
286
-
287
- end
288
-
289
-
290
-
291
- def new
292
-
293
- @article = Article.new
294
-
295
- end
296
-
297
-
298
-
299
- def create
300
-
301
- # @article = Article.create(title: article_params[:title], description: article_params[:description], body: article_params[:body], images: article_params[images: []])
302
-
303
- @article = Article.new(article_params)
304
-
305
- if @article.save
306
-
307
- redirect_to @article
308
-
309
- else
310
-
311
- render "new"
312
-
313
- end
314
-
315
- end
316
-
317
-
318
-
319
- def destroy
320
-
321
- article = Article.find(params[:id])
322
-
323
- if article.user_id === current_user.id
324
-
325
- article.destroy
326
-
327
- redirect_to controller: "users", action: "show"
328
-
329
- end
330
-
331
- end
332
-
333
-
334
-
335
- # def images_destroy
336
-
337
- # # params[:album][:image_ids].each do |image_id|
338
-
339
- # # image = @album.images.find(image_id)
340
-
341
- # # image.purge
342
-
343
- # # end
344
-
345
- # @images = @article.images
346
-
347
- # @images.purge
348
-
349
- # end
350
-
351
-
352
-
353
- private
354
-
355
-
356
-
357
- def move_to_index
358
-
359
- redirect_to root_path unless user_signed_in?
360
-
361
- end
362
-
363
-
364
-
365
- def set_article
366
-
367
- @article = Article.find(params[:id])
368
-
369
- end
370
-
371
-
372
-
373
- def article_params
374
-
375
- params.require(:article).permit(:title, :description, :body, images: []).merge(user_id: current_user.id)
376
-
377
- end
378
-
379
- end
380
-
381
- ```
382
-
383
- 他必要情報あれば随時更新します。
139
+ よろしくお願します。

2

該当ビューのイメージをコードに変更しました。

2019/12/08 16:17

投稿

HIRO76
HIRO76

スコア9

test CHANGED
File without changes
test CHANGED
@@ -32,12 +32,204 @@
32
32
 
33
33
 
34
34
 
35
+ ```slim
36
+
37
+ / #index.html.slim
38
+
39
+
40
+
41
+
42
+
43
+ / ヘッダーここから
44
+
45
+ .header-bg.sticky-top
46
+
47
+ .header.navbar
48
+
49
+ = link_to "Fishtweet", root_path, class: "my-2 h3 text-white text-decoration-none"
50
+
51
+ ul.nav
52
+
53
+ - unless user_signed_in?
54
+
55
+ li.nav-item
56
+
57
+ = link_to "ログイン", new_user_session_path, class: "nav-link text-white"
58
+
59
+ li.nav-item
60
+
61
+ = link_to "新規登録", new_user_registration_path, class: "nav-link text-white"
62
+
63
+ - else
64
+
65
+ li.nav-item
66
+
67
+ = link_to "マイページ", user_path(current_user), class: "nav-link text-white"
68
+
69
+ li.nav-item
70
+
71
+ = link_to "ログアウト", destroy_user_session_path, method: :delete, class: "nav-link text-white"
72
+
73
+ / ヘッダーここまで
74
+
75
+
76
+
77
+
78
+
79
+ / コンテンツ ここから
80
+
81
+ .contents.d-flex.justify-content-end.vh-100
82
+
83
+ / leftcontents
84
+
85
+ .left-content.w-50
86
+
87
+ - @articles.each_with_index do |article, i|
88
+
89
+ .article.card.h-100 id="append_to"
90
+
91
+ - if article.images.count > 0
92
+
93
+ = image_tag article.images.first.variant(resize: "450x400").processed, class: "article-img img-fluid shadow-sm"
94
+
95
+ .article-description.card-body
96
+
97
+ h6.card-title.m-0
98
+
99
+ = article.title.truncate(10, omission: '…')
100
+
101
+ p.card-text.m-0
102
+
103
+ = article.user.nickname
104
+
105
+ p.card-text
106
+
107
+ = article.body.truncate(100, omission: '…')
108
+
109
+ = link_to "続きを読む", article_path(article), class: "btn btn-outline-dark rounded-pill float-right"
110
+
111
+ - break
112
+
113
+ / rightcontents
114
+
115
+ .right-content.w-50.overflow-auto.vh-100
116
+
117
+ - @articles.each do |article|
118
+
119
+ = link_to article_path(article), class: "text-dark text-decoration-none" do
120
+
121
+ .article-list.card.m-4.shadow-sm
122
+
123
+ .row
124
+
125
+ .article-list-img.col-4
126
+
127
+ - if article.images.count > 0
128
+
129
+ = image_tag article.images.first.variant(resize: "150x150").processed, class: "article-list-img"
130
+
131
+ .article-list-description.card-body
132
+
133
+ h5.card-title
134
+
135
+ = article.title
136
+
137
+ .pagenate.font-weight-bold.text-monospace.mx-auto.mb-5.d-flex.justify-content-center id="page"
138
+
139
+ = paginate(@articles)
140
+
141
+
142
+
143
+ .archive.m-5
144
+
145
+ h5 アーカイブ
146
+
147
+ ul.list-group.list-group-flush
148
+
149
+ = link_to "#", class: "text-dark text-decoration-none"
150
+
151
+ li.list-group-item 2019/10
152
+
153
+ = link_to "#", class: "text-dark text-decoration-none"
154
+
155
+ li.list-group-item 2019/9
156
+
157
+ = link_to "#", class: "text-dark text-decoration-none"
158
+
159
+ li.list-group-item 2019/8
160
+
161
+ = link_to "#", class: "text-dark text-decoration-none"
162
+
163
+ li.list-group-item 2019/7
164
+
165
+
166
+
35
- ![該当のビューになります](13ce0cde5bd906a4adb00c46bd420b75.png)
167
+ .embed-responsive.embed-responsive-16by9.mb-5
168
+
169
+ iframe.embed-responsive-item src="https://www.youtube.com/embed/eo_s9aynXSw?rel=0"
170
+
171
+
172
+
173
+ .right-content-footer.border-top.mx-auto.mb-3.w-75.d-flex.justify-content-around
174
+
175
+ = link_to "#"
176
+
177
+ i.fab.fa-facebook-f.fa-lg.pt-4.text-muted
178
+
179
+ = link_to "#"
180
+
181
+ i.fab.fa-twitter.fa-lg.pt-4.text-muted
182
+
183
+ = link_to "#"
184
+
185
+ i.fab.fa-instagram.fa-lg.pt-4.text-muted
186
+
187
+ = link_to "#"
188
+
189
+ i.fab.fa-github.fa-lg.pt-4.text-muted
190
+
191
+ / コンテンツ ここまで
192
+
193
+
194
+
195
+
196
+
197
+ / フッターここから
198
+
199
+ .footer-bg
200
+
201
+ .footer.page-footer.font-small.pt-3.fixed-bottom
202
+
203
+ .container
204
+
205
+ ul.list-unstyled.list-inline.text-center.py-3.
206
+
207
+ li.list-inline-item.text-white
208
+
209
+ h5.mb-1.h5 enjoy fishing
210
+
211
+ li.list-inline-item.text-white
212
+
213
+ = link_to new_article_path do
214
+
215
+ .btn.btn-outline-light.btn-lg.rounded-pill 投稿する
216
+
217
+
218
+
219
+ .footer-copyright.text-center.py-2.text-white.bg-dark © 2019 Copyright
220
+
221
+ / フッターここまで
222
+
223
+
36
224
 
37
225
 
38
226
 
39
227
  ```
40
228
 
229
+
230
+
231
+ ```ruby
232
+
41
233
  # articles.controller
42
234
 
43
235
 

1

該当ビュー、コントローラー追記しました。

2019/12/07 07:35

投稿

HIRO76
HIRO76

スコア9

test CHANGED
File without changes
test CHANGED
@@ -27,3 +27,165 @@
27
27
  Rails 5.2
28
28
 
29
29
  gem 'kaminari'(ページネーション用)
30
+
31
+
32
+
33
+
34
+
35
+ ![該当のビューになります](13ce0cde5bd906a4adb00c46bd420b75.png)
36
+
37
+
38
+
39
+ ```
40
+
41
+ # articles.controller
42
+
43
+
44
+
45
+ class ArticlesController < ApplicationController
46
+
47
+ before_action :set_article, only: [:show, :edit]
48
+
49
+ before_action :move_to_index, except: [:index, :show]
50
+
51
+
52
+
53
+ helper_method :images_destroy
54
+
55
+
56
+
57
+
58
+
59
+ def index
60
+
61
+ @articles = Article.includes(:user).order(created_at: :desc).page(params[:page]).per(10)
62
+
63
+ end
64
+
65
+
66
+
67
+ def show
68
+
69
+ end
70
+
71
+
72
+
73
+ def edit
74
+
75
+ @images = @article.images
76
+
77
+ end
78
+
79
+
80
+
81
+ def update
82
+
83
+ @article = Article.find(params[:id])
84
+
85
+ if @article.update(article_params)
86
+
87
+ redirect_to @article
88
+
89
+ else
90
+
91
+ render "edit"
92
+
93
+ end
94
+
95
+ end
96
+
97
+
98
+
99
+ def new
100
+
101
+ @article = Article.new
102
+
103
+ end
104
+
105
+
106
+
107
+ def create
108
+
109
+ # @article = Article.create(title: article_params[:title], description: article_params[:description], body: article_params[:body], images: article_params[images: []])
110
+
111
+ @article = Article.new(article_params)
112
+
113
+ if @article.save
114
+
115
+ redirect_to @article
116
+
117
+ else
118
+
119
+ render "new"
120
+
121
+ end
122
+
123
+ end
124
+
125
+
126
+
127
+ def destroy
128
+
129
+ article = Article.find(params[:id])
130
+
131
+ if article.user_id === current_user.id
132
+
133
+ article.destroy
134
+
135
+ redirect_to controller: "users", action: "show"
136
+
137
+ end
138
+
139
+ end
140
+
141
+
142
+
143
+ # def images_destroy
144
+
145
+ # # params[:album][:image_ids].each do |image_id|
146
+
147
+ # # image = @album.images.find(image_id)
148
+
149
+ # # image.purge
150
+
151
+ # # end
152
+
153
+ # @images = @article.images
154
+
155
+ # @images.purge
156
+
157
+ # end
158
+
159
+
160
+
161
+ private
162
+
163
+
164
+
165
+ def move_to_index
166
+
167
+ redirect_to root_path unless user_signed_in?
168
+
169
+ end
170
+
171
+
172
+
173
+ def set_article
174
+
175
+ @article = Article.find(params[:id])
176
+
177
+ end
178
+
179
+
180
+
181
+ def article_params
182
+
183
+ params.require(:article).permit(:title, :description, :body, images: []).merge(user_id: current_user.id)
184
+
185
+ end
186
+
187
+ end
188
+
189
+ ```
190
+
191
+ 他必要情報あれば随時更新いたします。