teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問【Ruby on Rails】外部から新しいフォントを導入したが反映されない。404エラーが発生する

編集履歴

質問編集履歴

3

追記：使用フォント

2020/05/19 23:25

投稿

shota-imoto
shota-imoto

スコア37

test CHANGED
File without changes
test CHANGED
@@ -299,3 +299,13 @@
299
299
  以上です。
300
300
 
301
301
  ご教示のほど、よろしくお願いいたします。
302
+
303
+
304
+
305
+ #追記
306
+
307
+ ##使用フォント
308
+
309
+ [MusiSync Font](https://www.fontspace.com/musisync-font-f3723)
310
+
311
+ 画面上にコード譜を表示するために音楽記号が使えるようなフォントを使用しています。

2

下書きの修正

2020/05/19 23:25

投稿

shota-imoto
shota-imoto

スコア37

test CHANGED
@@ -1 +1 @@
1
- 【Ruby on Rails】form_withで親子レコード同時保存：子レコードを複数保存するために配列で送信するための記述をすると「idが定義されていない」エラーが発生する
1
+ 【Ruby on Rails】外部から新しいフォントを導入したが反映されない。404エラーが発生する
test CHANGED
@@ -1,29 +1,301 @@
1
- #下書き段階で誤って投稿しました。詰まった段階でこのページを編集して投稿させていただきます。
2
-
3
-
4
-
5
-
6
-
7
- #実現したいこと
8
-
9
- 子レコードを複数保存するためにform_withで配列を送信したい。
10
-
11
-
12
-
13
- #発生している現象
14
-
15
- [fields_forを使った一括更新](http://j-caw.co.jp/blog/?p=1590)
16
-
17
- 上記リンク先など複数を参考にしたところ、
1
+ # やりたいこと
2
+
3
+ 新しいフォントを導入し、view上に反映させたい
4
+
5
+
6
+
7
+ # 起こっていること
8
+
9
+ assets内にfontsフォルダを作成し、その中にフォントファイル（ttfファイル）を設置。
10
+
11
+ @font-faceにてscssファイルに読み込みを実施し、scssで記述。
12
+
13
+ hamlでクラス付与して画面をリロードするもコンソール上で、ttfが見つからない、と404エラー発生。
14
+
15
+
16
+
17
+ #主なソースファイル
18
+
19
+ ##ディレクトリ構造
20
+
21
+ ```
22
+
23
+ app
24
+
25
+ ├── assets
26
+
27
+ │   ├── fonts
28
+
29
+ │   │   ├── Dvmarticulations-Yqpy.ttf　//←こちらはまだ一度も読み込んでいない。
30
+
31
+ │   │   └── Musisync-qYy6_base.ttf //←読み込もうとしているフォントファイル
32
+
33
+ │   └── stylesheets
34
+
35
+ │   ├── application.scss
36
+
37
+ │   ├── （中略）
38
+
39
+ │   ├── modules
40
+
41
+ │   │   ├── （中略）
42
+
43
+ │   │   ├── font_read.scss
44
+
45
+ │   │   └── （以下略）
46
+
47
+ │      └──(以下略)
48
+
49
+ ├── （中略）
50
+
51
+ └── views
52
+
53
+ ├── （中略）
54
+
55
+    ├── songs
56
+
57
+ │   ├── （中略）
58
+
59
+ │   ├── show.html.haml
60
+
61
+ │   └── （以下略）
62
+
63
+ 　　　└── （以下略）
64
+
65
+ ```
66
+
67
+ ##stylesheet>modules>font_read.scss:@fontfaceによる読込み
68
+
69
+ ```scss
70
+
71
+ // ↓これから読み込むフォントファイル
72
+
73
+ @font-face {
74
+
75
+ font-family: "score-base";
76
+
77
+ src: font-url("Musisync-qYy6_base.ttf") format("truetype");
78
+
79
+ font-weight: normal;
80
+
81
+ font-style: normal;
82
+
83
+ }
84
+
85
+
86
+
87
+ // ↓未だ読み込んだ実績がない、あとで利用しようとして記述しているフォントファイル
88
+
89
+ @font-face {
90
+
91
+ font-family: "score-repeat";
92
+
93
+ src: font-url("Dvmarticulations-Yqpy.ttf") format("truetype");
94
+
95
+ font-weight: normal;
96
+
97
+ font-style: normal;
98
+
99
+ }
100
+
101
+ ```
102
+
103
+
104
+
105
+ ##applicationファイルによる@font-face記述ファイルの読込み
106
+
107
+ ```scss
108
+
109
+ @import //他にもmodulesフォルダから読み込み実績あり
110
+
111
+ @import "modules/font_read";
112
+
113
+
114
+
115
+ .font_base {
116
+
117
+ font-family: "score-base";
118
+
119
+ }
120
+
121
+ ```
122
+
123
+
124
+
125
+ ##ビューファイル:Railsヘルパーメソッドとhamlの併用
126
+
127
+ ```haml
128
+
129
+ .content__chord
130
+
131
+ - @song.chords.each do |chord|
132
+
133
+ - chord_array = chord.text.split(//)
134
+
135
+ - chord_array.each do |char|
136
+
137
+ 　　　 -#↓フォント読み込み用のクラスを付与
138
+
139
+ %a.font_base
140
+
141
+ =char
142
+
143
+ %br
144
+
145
+ ```
146
+
147
+ ##その他
148
+
149
+ フォント導入にあたって参考にしたWebの記事
150
+
151
+ [Qiita](https://qiita.com/Ryunosuke38/items/788f5470ff9ff8828d25)
152
+
153
+
154
+
155
+ #仮説と検証
156
+
157
+ ##アセットパイプラインへの追加
158
+
159
+ [web-fonts-asset-pipeline](https://gist.github.com/anotheruiguy/7379570)
160
+
161
+ GitHubにて、assets中のfontsファイルをアセットパイプラインへの追加するために記述が必要、という情報がありました。
162
+
163
+ ```terminal
164
+
165
+ ├── app
166
+
167
+ └── config
168
+
169
+    ├── application.rb
170
+
171
+ └── （以下略）
172
+
173
+ ```
174
+
175
+ config>application.rbに追記したものが下記
18
176
 
19
177
  ```rails
20
178
 
179
+ require_relative 'boot'
180
+
181
+ require 'rails/all'
182
+
183
+ Bundler.require(*Rails.groups)
184
+
185
+
186
+
187
+ module GrassChords
188
+
189
+ class Application < Rails::Application
190
+
191
+ config.load_defaults 5.2
192
+
21
- =f.fields_for("tunings[]",:tunings) do |tuning|
193
+ config.time_zone = 'Asia/Tokyo'
22
-
23
- .strings__string
194
+
24
-
25
- =tuning.hidden_field :string_num, value: 5
195
+ config.i18n.default_locale = :ja
196
+
26
-
197
+ # ↓追加の記述
198
+
27
- =tuning.text_field :note_name, placeholder: "string"
199
+ config.assets.paths << Rails.root.join("app", "assets", "fonts")
200
+
28
-
201
+ end
202
+
203
+ end
204
+
29
- ```
205
+ ```
206
+
207
+ →結果：変化なし
208
+
209
+ ##@font-face中のformat()の使い方間違い？
210
+
211
+ 呪文としてコピペしていたので確認
212
+
213
+ [CSS Web Fonts](https://www.w3schools.com/css/css3_fonts.asp)
214
+
215
+ ファイル形式を選択するものと判断。
216
+
217
+ ttf=true type fontなので問題なし、と判断
218
+
219
+
220
+
221
+ ###scssファイルの保存場所がまずい？
222
+
223
+ @font-face中でsrcを指定しているfont-url記述にはファイル名しか書かれていない。
224
+
225
+ modulesの中のファイルに@font-faceを記述しているのがまずいのではないか
226
+
227
+ ###modle>font-_readの記述をapllication.scssに移動
228
+
229
+ →結果：変化なし
230
+
231
+
232
+
233
+ ###src指定の方法をfont-urlからurlに変更
234
+
235
+ ```scss
236
+
237
+ url("/assets/fonts/Musisync-qYy6_base.ttf")
238
+
239
+ ```
240
+
241
+ と記述。
242
+
243
+ →結果：変化なし
244
+
245
+
246
+
247
+ ##まだ試していない妥協案
248
+
249
+ [Rails6にて同じ症状の質問を発見](https://teratail.com/questions/215253)
250
+
251
+ Teratailで似たような症状の質問を発見。
252
+
253
+
254
+
255
+ /public下にfontsフォルダを置き、/fonts/ファイル名とすることで読み込み。
256
+
257
+ publicフォルダが散らかっていくことに抵抗があるため、こちらの手法はあとで検討したいと思います。
258
+
259
+
260
+
261
+ ##補足
262
+
263
+ それぞれ単体で試しましたがアセットパイプラインへの追加のための記述だけは常に有りのまま進めています。
264
+
265
+
266
+
267
+ #補足情報（FW/ツールのバージョンなど）
268
+
269
+ ##開発環境
270
+
271
+ - OS macOS Catalina (10.15.4)
272
+
273
+ - VScode (1.45)
274
+
275
+
276
+
277
+ ※develop環境でのみ動作確認しています。
278
+
279
+ ##ソフトウェアバージョン
280
+
281
+ - ruby 2.5.1p57
282
+
283
+ - rails (5.2.4.2)
284
+
285
+ - haml (5.1.2)
286
+
287
+ - haml-rails (2.0.1)
288
+
289
+ - mysql2 (0.5.3)
290
+
291
+ - sass (3.7.4)
292
+
293
+ - sass-rails (5.1.0)
294
+
295
+ - 他にjQueryを併用しています
296
+
297
+
298
+
299
+ 以上です。
300
+
301
+ ご教示のほど、よろしくお願いいたします。

1

注意書き追加

2020/05/19 23:09

投稿

shota-imoto
shota-imoto

スコア37

test CHANGED
File without changes
test CHANGED
@@ -1,3 +1,9 @@
1
+ #下書き段階で誤って投稿しました。詰まった段階でこのページを編集して投稿させていただきます。
2
+
3
+
4
+
5
+
6
+
1
7
  #実現したいこと
2
8
 
3
9
  子レコードを複数保存するためにform_withで配列を送信したい。