質問編集履歴

5

書式の改善

2018/08/31 02:16

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -134,7 +134,7 @@
134
134
 
135
135
 
136
136
 
137
- #### クラス名だけ変数をつかう
137
+ ####妥協案1 クラス名だけ変数をつかう
138
138
 
139
139
  ```
140
140
 

4

書式の改善

2018/08/31 02:16

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -78,7 +78,9 @@
78
78
 
79
79
 
80
80
 
81
+
82
+
81
- - 方法1 パーシャルレイアウトを使う
83
+ ####方法1 パーシャルレイアウトを使う
82
84
 
83
85
 
84
86
 
@@ -114,7 +116,7 @@
114
116
 
115
117
 
116
118
 
117
- - 方法2 メソッドを使う
119
+ ####方法2 メソッドを使う
118
120
 
119
121
 
120
122
 
@@ -132,7 +134,7 @@
132
134
 
133
135
 
134
136
 
135
- - 妥協案1 クラス名だけ変数をつかう
137
+ #### クラス名だけ変数をつかう
136
138
 
137
139
  ```
138
140
 
@@ -156,9 +158,7 @@
156
158
 
157
159
 
158
160
 
159
- - 妥協案2
160
-
161
- サブルーチンのコードをブロックごとにわける
161
+ ####妥協案2 サブルーチンのコードをブロックごとにわける
162
162
 
163
163
  ```
164
164
 

3

書式の改善

2018/08/31 02:14

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -38,7 +38,7 @@
38
38
 
39
39
 
40
40
 
41
- - HTML には最低限のクラスのみをつけて
41
+ HTML には最低限のクラスのみをつけて
42
42
 
43
43
  SCSS でセレクタを使って bootstrap のクラスを extend して適用する
44
44
 
@@ -68,19 +68,17 @@
68
68
 
69
69
 
70
70
 
71
- - https://teratail.com/questions/142621
71
+ https://teratail.com/questions/142621
72
72
 
73
- で質問し結局 HTML に bootstrap のクラスをつけるしかないという結論に
73
+ で質問し結局 HTML に bootstrap のクラスをつけるしかないという結論に
74
74
 
75
75
 
76
76
 
77
- - Rails 側でなるべく共通の部品クラス指定をまとめたい
77
+ Rails 側でなるべく共通の部品をサブルーチン化してクラス指定をまとめたい
78
78
 
79
79
 
80
80
 
81
-
82
-
83
-  Rails で部品サブルーチン化したい
81
+ - 方法1 パーシャルレイアウト使う
84
82
 
85
83
 
86
84
 
@@ -116,13 +114,17 @@
116
114
 
117
115
 
118
116
 
117
+ - 方法2 メソッドを使う
118
+
119
+
120
+
119
121
  https://teratail.com/questions/143292
120
122
 
121
- ここでパーシャルを使わずにサブルーチン化する書き方を教えていただいたのですが
123
+ ここでメソッド化する書き方を教えていただいたのですが
122
124
 
123
125
  def acc(&block1, &block2)
124
126
 
125
- のように複数のブロックを引数にとれないらしくどうしたらいいか困っています
127
+ のように複数のブロックを引数にとれないらしくどうしたらいいか困っています
126
128
 
127
129
 
128
130
 
@@ -130,9 +132,7 @@
130
132
 
131
133
 
132
134
 
133
- 妥協としてはクラス変数をつかって
135
+ - 妥協案1 クラス名だけ変数をつか
134
-
135
-
136
136
 
137
137
  ```
138
138
 
@@ -152,9 +152,11 @@
152
152
 
153
153
  ```
154
154
 
155
- とかく
155
+ とかく
156
156
 
157
157
 
158
+
159
+ - 妥協案2
158
160
 
159
161
  サブルーチンのコードをブロックごとにわける
160
162
 
@@ -166,4 +168,6 @@
166
168
 
167
169
  ```
168
170
 
171
+
172
+
169
173
  というのを考えていますがどうするのがきれいな書き方なのでしょうか

2

書式の改善

2018/08/31 02:11

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -12,9 +12,13 @@
12
12
 
13
13
  たとえば
14
14
 
15
+ ```
16
+
15
17
  <h2 class=".....">ラベル</h2>
16
18
 
17
19
  <p class=".....">コンテンツ</p>
20
+
21
+ ```
18
22
 
19
23
  みたいなアコーディオンやカードといったよく使う部品のレイアウトを調整したくて
20
24
 
@@ -40,6 +44,8 @@
40
44
 
41
45
 
42
46
 
47
+ ```
48
+
43
49
  <div class="acc">
44
50
 
45
51
  <h2></h2>
@@ -52,7 +58,7 @@
52
58
 
53
59
  .acc > p { @extend .p-1 }
54
60
 
55
- という感じ
61
+ ```
56
62
 
57
63
 
58
64
 
@@ -138,9 +144,13 @@
138
144
 
139
145
  と定義してアコーディオンの部品に毎回
140
146
 
147
+ ```
148
+
141
149
  <h2 class="<%=@acc_label_class%>"
142
150
 
143
151
  <p class="<%=@acc_contents_class%>"
152
+
153
+ ```
144
154
 
145
155
  とかくか
146
156
 
@@ -148,8 +158,12 @@
148
158
 
149
159
  サブルーチンのコードをブロックごとにわける
150
160
 
161
+ ```
162
+
151
163
  def acc_label(&block)
152
164
 
153
165
  def acc_contents(&block)
154
166
 
167
+ ```
168
+
155
169
  というのを考えていますがどうするのがきれいな書き方なのでしょうか

1

内容修正

2018/08/31 02:06

投稿

退会済みユーザー
test CHANGED
@@ -1 +1 @@
1
- Rails の view 内でサブルーチン
1
+ Rails で複数ブロックを受け取って複数回よべるサブルーチンって作れますか?
test CHANGED
@@ -1,229 +1,155 @@
1
- 以前 https://teratail.com/questions/143292 で view のサブルーチン化の書き方を教えてもらったのですが
2
-
3
- 複数のタグを出力する場合にうまくきません
1
+ ###やりたこと
4
2
 
5
3
 
6
4
 
7
- <%= <%どこにつければいいかがよくわかっなくきちんとつければうまく動くようになるのでしょうか
5
+ Rails で動いているシステムに bootstrap ベースのテンプレートやテーマをいろあててデザインをみたい
8
6
 
9
7
 
10
8
 
11
- 呼び出すところは以下で固定して
12
-
13
- ```erb
9
+ ###問題点
14
-
15
- <div>
16
-
17
- <div>
18
-
19
- <div>
20
-
21
- <%= test('TEST') do %>
22
-
23
- <p>CONTENTS</p>
24
-
25
- <% end %>
26
-
27
- </div>
28
-
29
- </div>
30
-
31
- </div>
32
-
33
- ```
34
10
 
35
11
 
36
12
 
13
+ たとえば
14
+
15
+ <h2 class=".....">ラベル</h2>
16
+
17
+ <p class=".....">コンテンツ</p>
18
+
19
+ みたいなアコーディオンやカードといったよく使う部品のレイアウトを調整したくて
20
+
21
+ コンテンツのクラスに p-1 を追加したいみたいなときに
22
+
23
+ あちこちの view にちらばってる部品を使ってる場所全部に p-1 を追加して回らなければならない
24
+
37
- 定義部分を以下のようにいろいろえてみんですがどれもうくいかないです
25
+ 表示してみてやっぱり px-2 px-1 にしようなった書き直し
38
26
 
39
27
 
40
28
 
41
- ```erb
42
-
43
- <%
44
-
45
- def test(head, &block)
46
-
47
- content_tag(:h2, head)
48
-
49
- content_tag(:div, capture(&block))
29
+ なるべく同じ部品のクラスを1回の記述でまとめてレイアウト調整できるようにしたい
50
-
51
- end
52
-
53
- %>
54
-
55
- ```
56
-
57
- ```html
58
-
59
- <div>
60
-
61
- <div>
62
-
63
- <div>
64
-
65
- <div>
66
-
67
- <p>CONTENTS</p>
68
-
69
- </div> </div>
70
-
71
- </div>
72
-
73
- </div>
74
-
75
- ```
76
-
77
- なぜかヘッドが表示されない
78
30
 
79
31
 
80
32
 
81
- ---
33
+ ###ためしたこと
82
34
 
83
- ```erb
84
35
 
85
- <% def test(head, &block) %>
86
36
 
87
- <%= content_tag(:h2, head) %>
37
+ - HTML には最低限のクラスのみをつけて
88
38
 
89
- <%= content_tag(:div, capture(&block)) %>
39
+ SCSS でセレクタを使って bootstrap のクラスを extend して適用する
90
40
 
91
- <% end %>
92
41
 
93
- ```
94
42
 
95
- ```html
43
+ <div class="acc">
96
44
 
97
- <div>
45
+ <h2></h2>
98
46
 
99
- <div>
100
-
101
- <div>
102
-
103
- <h2>TEST</h2>
104
-
105
- <div>
106
-
107
- <p>CONTENTS</p>
47
+ <p></p>
108
48
 
109
49
  </div>
110
50
 
111
51
 
112
52
 
113
- </div>
53
+ .acc > p { @extend .p-1 }
114
54
 
115
- </div>
55
+ という感じ
116
56
 
57
+
58
+
59
+ → @extend で bootstrap クラスを指定するには @import bootstrap を全部の部品でかかなければいけなくて
60
+
61
+ 全部の部品の CSS に bootstrap の中身が展開されて肥大化する
62
+
63
+
64
+
65
+ - https://teratail.com/questions/142621
66
+
67
+ で質問した結局 HTML に bootstrap のクラスをつけるしかないという結論に
68
+
69
+
70
+
71
+ - Rails 側でなるべく共通の部品のクラス指定をまとめたい
72
+
73
+
74
+
75
+
76
+
117
- </div>
77
+ → Rails で部品をサブルーチン化したい
78
+
79
+
80
+
81
+ partial layout を使って _acc.html.erb に
82
+
83
+ ```erb
84
+
85
+ <h2 class="...", href="#<%=id%>"><%= yield :head %></h2>
86
+
87
+ <p class="..." id="<%=id%>"<%= yield %></p>
118
88
 
119
89
  ```
120
90
 
91
+ と名前付き yield でブロックを展開しようとしても
92
+
93
+ ```erb
94
+
121
- 表示はいい感じだけど CONTENTS をかこってる div だけインデントがずれる
95
+ <%= render layout: ’acc’ do %>
96
+
97
+ content_for :head do
98
+
99
+ ラベル
100
+
101
+ end
102
+
103
+ コンテンツ
104
+
105
+ end
106
+
107
+ ```
108
+
109
+ を複数回よぶと名前付きの方だけなぜか記述が重複して表示されてしまう
122
110
 
123
111
 
124
112
 
125
- ---
113
+ https://teratail.com/questions/143292
126
114
 
127
- ```erb
115
+ ここでパーシャルを使わずにサブルーチン化する書き方を教えていただいたのですが
128
116
 
129
- <% def test(head, &block) %>
117
+ def acc(&block1, &block2)
130
118
 
131
- <%= content_tag(:h2, head) %>
119
+ のように複数のブロックを引く数にとれないらしくどうしたらいいか困っています
132
120
 
133
- <%= content_tag(:div) do %>
134
121
 
135
- <%= yield %>
136
122
 
137
- <% end %>
123
+ Rails ではブロック複数をうけとって複数回呼び出せるサブルーチンを作るのは不可能なのでしょうか
138
124
 
125
+
126
+
139
- <% end %>
127
+ 妥協としてはクラス変数をつかって
128
+
129
+
140
130
 
141
131
  ```
142
132
 
143
- ```html
133
+ @acc_label_class=...
144
134
 
145
- <div>
135
+ @acc_contents_class=...
146
136
 
147
- <div>
137
+ ```
148
138
 
149
- <div>
139
+ と定義してアコーディオンの部品に毎回
150
140
 
151
- <h2>TEST</h2>
141
+ <h2 class="<%=@acc_label_class%>"
152
142
 
153
- <div>
143
+ <p class="<%=@acc_contents_class%>"
154
144
 
155
-
156
-
157
- <p>CONTENTS</p>
145
+ とかくか
158
146
 
159
147
 
160
148
 
161
- &lt;p&gt;CONTENTS&lt;/p&gt;
149
+ サブルーチンのコードをブロックごとにわける
162
150
 
151
+ def acc_label(&block)
163
152
 
153
+ def acc_contents(&block)
164
154
 
165
- </div><div>
166
-
167
-
168
-
169
- <p>CONTENTS</p>
155
+ というのを考えていますがどうするのがきれいな書き方なのでしょうか
170
-
171
-
172
-
173
- &lt;p&gt;CONTENTS&lt;/p&gt;
174
-
175
-
176
-
177
- </div> </div>
178
-
179
- </div>
180
-
181
- </div>
182
-
183
- ```
184
-
185
- なんかエスケープされたタグが重複表示される…
186
-
187
-
188
-
189
- ---
190
-
191
- ```erb
192
-
193
- <% def test(head, &block) %>
194
-
195
- <%= content_tag(:h2, head) %>
196
-
197
- <%= content_tag(:div) do %>
198
-
199
- <%= yield %>
200
-
201
- <% end %>
202
-
203
- <% end %>
204
-
205
- ```
206
-
207
- ```html
208
-
209
- <div>
210
-
211
- <div>
212
-
213
- <div>
214
-
215
- <h2>TEST</h2>
216
-
217
- <div>
218
-
219
- <p>CONTENTS</p>
220
-
221
- </div> </div>
222
-
223
- </div>
224
-
225
- </div>
226
-
227
- ```
228
-
229
- 表示は正しいけどやっぱりインデントがずれる…