質問編集履歴

8

書式の修正

2019/02/15 03:09

投稿

s_diff
s_diff

スコア107

test CHANGED
File without changes
test CHANGED
@@ -38,7 +38,7 @@
38
38
 
39
39
  > t.text "products_image1", limit: 65535
40
40
 
41
- > # products_image1 ~ 30まであります。
41
+ > products_image1 ~ 30まであります。
42
42
 
43
43
 
44
44
 

7

情報の追加

2019/02/15 03:08

投稿

s_diff
s_diff

スコア107

test CHANGED
File without changes
test CHANGED
@@ -22,6 +22,28 @@
22
22
 
23
23
 
24
24
 
25
+ productsテーブルのカラムは以下です。
26
+
27
+ > t.integer "area_id", limit: 4
28
+
29
+ > t.string "building_name", limit: 255
30
+
31
+ > t.string "number", limit: 255
32
+
33
+ > t.string "station", limit: 255
34
+
35
+ > t.string "address", limit: 255
36
+
37
+ > t.text "zip", limit: 65535
38
+
39
+ > t.text "products_image1", limit: 65535
40
+
41
+ > # products_image1 ~ 30まであります。
42
+
43
+
44
+
45
+
46
+
25
47
 
26
48
 
27
49
  ###実装手順

6

情報の修正

2019/02/15 03:08

投稿

s_diff
s_diff

スコア107

test CHANGED
File without changes
test CHANGED
@@ -64,15 +64,89 @@
64
64
 
65
65
  namespace :manage do
66
66
 
67
- resources :products do
67
+ resources :products do
68
-
68
+
69
- member do
69
+ member do
70
-
70
+
71
- get 'pre_sort'
71
+ get 'pre_sort'
72
-
72
+
73
- post 'sort'
73
+ post 'sort'
74
-
74
+
75
- post 'create_sorted'
75
+ post 'create_sorted'
76
+
77
+ end
78
+
79
+ end
80
+
81
+ end
82
+
83
+ ```
84
+
85
+
86
+
87
+ コントローラ
88
+
89
+ ```ruby
90
+
91
+ #manage/products_controller.rb
92
+
93
+ def pre_sort
94
+
95
+ @product = Product.new
96
+
97
+ @areas = Area.all
98
+
99
+ end
100
+
101
+
102
+
103
+ def sort
104
+
105
+ @product = Product.new(product_params)
106
+
107
+ @products_images = params[:products_images]
108
+
109
+ end
110
+
111
+
112
+
113
+ def create_sorted
114
+
115
+ @product = Product.new(product_params)
116
+
117
+
118
+
119
+ @product.building_name = ActiveSupport::Multibyte::Unicode.normalize(@product.building_name, :c)
120
+
121
+ @product.address = ActiveSupport::Multibyte::Unicode.normalize(@product.address, :c)
122
+
123
+
124
+
125
+ num = 1
126
+
127
+ params[:products_images].each do |img|
128
+
129
+ @product.send("products_image#{num}=", img)
130
+
131
+ num += 1
132
+
133
+ end
134
+
135
+
136
+
137
+ respond_to do |format|
138
+
139
+ if @product.save
140
+
141
+ format.html { redirect_to [:manage, @product], notice: "#{@product.building_name}を作成しました。" }
142
+
143
+ format.json { render :show, status: :created, location: @product }
144
+
145
+ else
146
+
147
+ format.html { render :pre_sort }
148
+
149
+ format.json { render json: @product.errors, status: :unprocessable_entity }
76
150
 
77
151
  end
78
152
 
@@ -80,134 +154,152 @@
80
154
 
81
155
  end
82
156
 
83
- end
157
+
84
-
158
+
85
- ```
159
+ ```
86
-
87
-
88
-
160
+
161
+
162
+
89
- コントロ
163
+ ビュ①(pre_sort.html.erb)
90
164
 
91
165
  ```ruby
92
166
 
93
- #manage/products_controller.rb
94
-
95
- def pre_sort
96
-
97
- @product = Product.new
98
-
99
- @areas = Area.all
100
-
101
- end
102
-
103
-
104
-
105
- def sort
106
-
107
- @product = Product.new(product_params)
108
-
109
- @products_images = params[:products_images]
110
-
111
- end
112
-
113
-
114
-
115
- def create_sorted
116
-
117
- @product = Product.new(product_params)
118
-
119
-
120
-
121
- @product.building_name = ActiveSupport::Multibyte::Unicode.normalize(@product.building_name, :c)
122
-
123
- @product.address = ActiveSupport::Multibyte::Unicode.normalize(@product.address, :c)
124
-
125
-
126
-
127
- num = 1
128
-
129
- params[:products_images].each do |img|
130
-
131
- @product.send("products_image#{num}=", img)
132
-
133
- num += 1
134
-
135
- end
136
-
137
-
138
-
139
- respond_to do |format|
140
-
141
- if @product.save
142
-
143
- format.html { redirect_to [:manage, @product], notice: "#{@product.building_name}を作成しました。" }
144
-
145
- format.json { render :show, status: :created, location: @product }
146
-
147
- else
148
-
149
- format.html { render :pre_sort }
150
-
151
- format.json { render json: @product.errors, status: :unprocessable_entity }
152
-
153
- end
154
-
155
- end
156
-
157
- end
158
-
159
-
160
-
161
- ```
162
-
163
-
164
-
165
- ビュー①(pre_sort.html.erb)
167
+ #manage/products/pre_sort.html.erb
168
+
169
+
170
+
171
+ <%= form_for([:manage,@product], url: { action: "sort"}, html: { multipart: true }) do |f| %>
172
+
173
+ <div class="input manage-product-create-form">
174
+
175
+ <p class="row"><%= f.label :area_id, class: "label" %><%= f.select :area_id, @areas.map{ |t| [t.name, t.id] }, include_blank: true %></p>
176
+
177
+ <p class="row"><%= f.label :building_name, class: "label" %><%= f.text_field :building_name %></p>
178
+
179
+ <p class="row"><%= f.label :number, class: "label" %><%= f.text_field :number %></p>
180
+
181
+ <p class="row"><%= f.label :floor, class: "label" %><%= f.select :floor, Request::FLOOR, include_blank: true %></p>
182
+
183
+ <p class="row"><%= f.label :station, class: "label" %><%= f.text_field :station %></p>
184
+
185
+ <p class="row"><%= f.label :address, class: "label" %><%= f.text_field :address %></p>
186
+
187
+ <p class="row" id="js-selectFile">
188
+
189
+ <%= f.label "ダウンロードZIP", class: "label" %>
190
+
191
+ <%= f.file_field :zip, id: "js-upload" %>
192
+
193
+ <%= f.hidden_field :zip_cache, id: "js-upload-cache" %>
194
+
195
+ <button class="original-btn">ZIPファイルを選択</button>
196
+
197
+ <span class="icon">未選択</span>
198
+
199
+ </p>
200
+
201
+ <input type='file' name='products_images[]' multiple=true class='uploadFile' id="fileInput" />
202
+
203
+ <div id="drop_zone"><i class="fa fa-picture-o" aria-hidden="true"></i> 物件写真をドラッグ&ドロップしてください</div>
204
+
205
+ <div id="preview"></div>
206
+
207
+ </div>
208
+
209
+ <div class="actions">
210
+
211
+ <%= button_tag type: 'submit', class: "btn-edit" do %>
212
+
213
+ <i class="fa fa-pencil" aria-hidden="true"></i> 作成
214
+
215
+ <% end %>
216
+
217
+ </div>
218
+
219
+ <% end %>
220
+
221
+ ```
222
+
223
+
224
+
225
+ ビュー②(sort.html.erb
166
226
 
167
227
  ```ruby
168
228
 
169
- #manage/products/pre_sort.html.erb
170
-
171
-
172
-
173
- <%= form_for([:manage,@product], url: { action: "sort"}, html: { multipart: true }) do |f| %>
174
-
175
- <div class="input manage-product-create-form">
176
-
177
- <p class="row"><%= f.label :area_id, class: "label" %><%= f.select :area_id, @areas.map{ |t| [t.name, t.id] }, include_blank: true %></p>
178
-
179
- <p class="row"><%= f.label :building_name, class: "label" %><%= f.text_field :building_name %></p>
180
-
181
- <p class="row"><%= f.label :number, class: "label" %><%= f.text_field :number %></p>
182
-
183
- <p class="row"><%= f.label :floor, class: "label" %><%= f.select :floor, Request::FLOOR, include_blank: true %></p>
184
-
185
- <p class="row"><%= f.label :station, class: "label" %><%= f.text_field :station %></p>
186
-
187
- <p class="row"><%= f.label :address, class: "label" %><%= f.text_field :address %></p>
188
-
189
- <p class="row" id="js-selectFile">
190
-
191
- <%= f.label "ダウンロードZIP", class: "label" %>
192
-
193
- <%= f.file_field :zip, id: "js-upload" %>
194
-
195
- <%= f.hidden_field :zip_cache, id: "js-upload-cache" %>
196
-
197
- <button class="original-btn">ZIPファイルを選択</button>
198
-
199
- <span class="icon">未選択</span>
200
-
201
- </p>
202
-
203
- <input type='file' name='products_images[]' multiple=true class='uploadFile' id="fileInput" />
204
-
205
- <div id="drop_zone"><i class="fa fa-picture-o" aria-hidden="true"></i> 物件写真をドラッグ&ドロップしてください</div>
206
-
207
- <div id="preview"></div>
229
+ #manage/products/sort.html.erb
230
+
231
+ <div class="input manage-product-create-form">
232
+
233
+ <p class="row"><label class="label">エリア</label><%= @product.area_id %></p>
234
+
235
+ <p class="row"><label class="label">物件名</label><%= @product.building_name %></p>
236
+
237
+ <p class="row"><label class="label">号室</label><%= @product.number %></p>
238
+
239
+ <p class="row"><label class="label">間取り</label><%= @product.floor %></p>
240
+
241
+ <p class="row"><label class="label">駅名</label><%= @product.station %></p>
242
+
243
+ <p class="row"><label class="label">住所</label><%= @product.address %></p>
244
+
245
+ <p class="row"><label class="label">DL用zip</label><%= @product.zip.url %></p>
246
+
247
+
248
+
249
+ <% (@products_images).each do |img| %>
250
+
251
+ <%= image_tag img, size: '100x100' %>
252
+
253
+ <% end %>
254
+
255
+
256
+
257
+ <%= form_for([:manage,@product], url: { action: "create_sorted"}, html: { multipart: true }) do |f| %>
258
+
259
+ <div class="file-upload-area">
260
+
261
+ <div class="sort-box-container sortable">
262
+
263
+ <% (@products_images).each do |img| %>
264
+
265
+ <div class="sort-box">
266
+
267
+ <input type="text" class="form-control" readonly="" />
268
+
269
+ <div style='border: dashed 1px #ccc;'>
270
+
271
+ <%= hidden_field_tag 'products_images[]', value: img, class: 'uploadFile', style: 'width: 90px; font-size: 16px;' %>
272
+
273
+ <div class="imagePreview item" style='padding: 0; background-image: <%= img %>'></div>
274
+
275
+ </div>
276
+
277
+ </div>
278
+
279
+ <% end %>
280
+
281
+ </div>
282
+
283
+ </div>
284
+
285
+ <%= f.hidden_field :area_id, value: @product.area_id %>
286
+
287
+ <%= f.hidden_field :building_name, value: @product.building_name %>
288
+
289
+ <%= f.hidden_field :number, value: @product.number %>
290
+
291
+ <%= f.hidden_field :floor, value: @product.floor %>
292
+
293
+ <%= f.hidden_field :station, value: @product.station %>
294
+
295
+ <%= f.hidden_field :address, value: @product.address %>
296
+
297
+ <%= f.hidden_field :zip, value: @product.zip_url %>
208
298
 
209
299
  </div>
210
300
 
301
+
302
+
211
303
  <div class="actions">
212
304
 
213
305
  <%= button_tag type: 'submit', class: "btn-edit" do %>
@@ -224,100 +316,6 @@
224
316
 
225
317
 
226
318
 
227
- ビュー②(sort.html.erb)
228
-
229
- ```ruby
230
-
231
- #manage/products/sort.html.erb
232
-
233
- <div class="input manage-product-create-form">
234
-
235
- <p class="row"><label class="label">エリア</label><%= @product.area_id %></p>
236
-
237
- <p class="row"><label class="label">物件名</label><%= @product.building_name %></p>
238
-
239
- <p class="row"><label class="label">号室</label><%= @product.number %></p>
240
-
241
- <p class="row"><label class="label">間取り</label><%= @product.floor %></p>
242
-
243
- <p class="row"><label class="label">駅名</label><%= @product.station %></p>
244
-
245
- <p class="row"><label class="label">住所</label><%= @product.address %></p>
246
-
247
- <p class="row"><label class="label">DL用zip</label><%= @product.zip.url %></p>
248
-
249
-
250
-
251
- <% (@products_images).each do |img| %>
252
-
253
- <%= image_tag img, size: '100x100' %>
254
-
255
- <% end %>
256
-
257
-
258
-
259
- <%= form_for([:manage,@product], url: { action: "create_sorted"}, html: { multipart: true }) do |f| %>
260
-
261
- <div class="file-upload-area">
262
-
263
- <div class="sort-box-container sortable">
264
-
265
- <% (@products_images).each do |img| %>
266
-
267
- <div class="sort-box">
268
-
269
- <input type="text" class="form-control" readonly="" />
270
-
271
- <div style='border: dashed 1px #ccc;'>
272
-
273
- <%= hidden_field_tag 'products_images[]', value: img, class: 'uploadFile', style: 'width: 90px; font-size: 16px;' %>
274
-
275
- <div class="imagePreview item" style='padding: 0; background-image: <%= img %>'></div>
276
-
277
- </div>
278
-
279
- </div>
280
-
281
- <% end %>
282
-
283
- </div>
284
-
285
- </div>
286
-
287
- <%= f.hidden_field :area_id, value: @product.area_id %>
288
-
289
- <%= f.hidden_field :building_name, value: @product.building_name %>
290
-
291
- <%= f.hidden_field :number, value: @product.number %>
292
-
293
- <%= f.hidden_field :floor, value: @product.floor %>
294
-
295
- <%= f.hidden_field :station, value: @product.station %>
296
-
297
- <%= f.hidden_field :address, value: @product.address %>
298
-
299
- <%= f.hidden_field :zip, value: @product.zip_url %>
300
-
301
- </div>
302
-
303
-
304
-
305
- <div class="actions">
306
-
307
- <%= button_tag type: 'submit', class: "btn-edit" do %>
308
-
309
- <i class="fa fa-pencil" aria-hidden="true"></i> 作成
310
-
311
- <% end %>
312
-
313
- </div>
314
-
315
- <% end %>
316
-
317
- ```
318
-
319
-
320
-
321
319
  Sortable.js
322
320
 
323
321
  ```jquery

5

情報の修正

2019/02/15 02:28

投稿

s_diff
s_diff

スコア107

test CHANGED
File without changes
test CHANGED
@@ -96,6 +96,8 @@
96
96
 
97
97
  @product = Product.new
98
98
 
99
+ @areas = Area.all
100
+
99
101
  end
100
102
 
101
103
 

4

情報の修正

2019/02/15 02:24

投稿

s_diff
s_diff

スコア107

test CHANGED
File without changes
test CHANGED
@@ -316,7 +316,7 @@
316
316
 
317
317
 
318
318
 
319
- Sotable.js
319
+ Sortable.js
320
320
 
321
321
  ```jquery
322
322
 

3

情報の修正

2019/02/15 02:22

投稿

s_diff
s_diff

スコア107

test CHANGED
File without changes
test CHANGED
@@ -368,7 +368,7 @@
368
368
 
369
369
  ```
370
370
 
371
- Dropzon.js
371
+ Dropzone.js
372
372
 
373
373
  ```jquery
374
374
 

2

情報の追加

2019/02/15 02:21

投稿

s_diff
s_diff

スコア107

test CHANGED
File without changes
test CHANGED
@@ -368,6 +368,120 @@
368
368
 
369
369
  ```
370
370
 
371
+ Dropzon.js
372
+
373
+ ```jquery
374
+
375
+ $(function(){
376
+
377
+ var formData = new FormData();
378
+
379
+ var dropZone = document.getElementById("drop_zone");
380
+
381
+ var fileInput = document.getElementById("fileInput");
382
+
383
+
384
+
385
+ if (!($('#drop_zone').length)){
386
+
387
+ return false;
388
+
389
+ }
390
+
391
+
392
+
393
+ dropZone.addEventListener("dragover", function(e) {
394
+
395
+ e.stopPropagation();
396
+
397
+ e.preventDefault();
398
+
399
+
400
+
401
+ this.style.background = "#87cefa";
402
+
403
+ }, false);
404
+
405
+
406
+
407
+ dropZone.addEventListener("dragleave", function(e) {
408
+
409
+ e.stopPropagation();
410
+
411
+ e.preventDefault();
412
+
413
+
414
+
415
+ this.style.background = "#ffffff";
416
+
417
+ }, false);
418
+
419
+
420
+
421
+ dropZone.addEventListener("drop", function(e) {
422
+
423
+ e.stopPropagation();
424
+
425
+ e.preventDefault();
426
+
427
+
428
+
429
+ this.style.background = "#ffffff";
430
+
431
+
432
+
433
+ var files = e.dataTransfer.files;
434
+
435
+
436
+
437
+ fileInput.files = files;
438
+
439
+ for (var i = 0; i < files.length; i++) {
440
+
441
+ (function() {
442
+
443
+ var fr = new FileReader();
444
+
445
+ fr.onload = function() {
446
+
447
+ var div = document.createElement('div');
448
+
449
+
450
+
451
+ var img = document.createElement('img');
452
+
453
+ img.setAttribute('src', fr.result);
454
+
455
+ div.appendChild(img);
456
+
457
+
458
+
459
+ var preview = document.getElementById("preview");
460
+
461
+ preview.appendChild(div);
462
+
463
+ };
464
+
465
+ fr.readAsDataURL(files[i]);
466
+
467
+ })();
468
+
469
+
470
+
471
+ formData.append("file", files[i]);
472
+
473
+ }
474
+
475
+ }, false);
476
+
477
+
478
+
479
+ });
480
+
481
+
482
+
483
+ ```
484
+
371
485
 
372
486
 
373
487
  長くなってしまい申し訳ありません。

1

情報の修正

2019/02/15 02:21

投稿

s_diff
s_diff

スコア107

test CHANGED
File without changes
test CHANGED
@@ -46,7 +46,7 @@
46
46
 
47
47
 
48
48
 
49
- 2. sort.html.erbでバリデーションを外して送信すると、products_image1~30とzipに値が入っていますが、何も表示されません。バリデーションを記述すると、エラーメッセージが出てレコード作成れません
49
+ 2. sort.html.erbでバリデーションを外して送信すると、products_image1~30とzipに値が入っていますが、何も表示されません。products_image1~30とzip両方共、バリデーションを記述するとレコード作成は弾かれま
50
50
 
51
51
 
52
52