teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問【JavaScript】FileReaderで読み込んだjsonが文字化けする

編集履歴

質問編集履歴

3

文字化け後のjsonを追加

2017/10/23 08:39

投稿

hota1024
hota1024

スコア354

test CHANGED
File without changes
test CHANGED
@@ -427,3 +427,15 @@
427
427
  長くてすいません。
428
428
 
429
429
  JavaScriptとHTMLは両方UTF8です。
430
+
431
+ `<meta charset="utf-8">`も書いてあります。
432
+
433
+ 文字化け後のjsonは以下のとおりです。
434
+
435
+
436
+
437
+ ![文字化けjson](4f225787c986b0d2fa26c6d32848ddc4.png)
438
+
439
+
440
+
441
+ 不思議とteratailのテキストエリアに載せると文字化けが治ってました。

2

よみこんだjsonと補足情報を追加しました

2017/10/23 08:39

投稿

hota1024
hota1024

スコア354

test CHANGED
File without changes
test CHANGED
@@ -183,3 +183,247 @@
183
183
  読み込んだファイルは`utf8`です。
184
184
 
185
185
  ブラウザは'Google Chrome'です。
186
+
187
+
188
+
189
+ JSON.parse(reader.result)の後も文字化けが起きます。
190
+
191
+ JSONは仕様どおりだと思います。
192
+
193
+ ```json
194
+
195
+ {
196
+
197
+ "objName": "Stage",
198
+
199
+ "sounds": [{
200
+
201
+ "soundName": "ポップ",
202
+
203
+ "soundID": 1,
204
+
205
+ "md5": "83a9787d4cb6f3b7632b4ddfebf74367.wav",
206
+
207
+ "sampleCount": 258,
208
+
209
+ "rate": 11025,
210
+
211
+ "format": ""
212
+
213
+ }],
214
+
215
+ "costumes": [{
216
+
217
+ "costumeName": "背景1",
218
+
219
+ "baseLayerID": 4,
220
+
221
+ "baseLayerMD5": "739b5e2a2435f6e1ec2993791b423146.png",
222
+
223
+ "bitmapResolution": 1,
224
+
225
+ "rotationCenterX": 240,
226
+
227
+ "rotationCenterY": 180
228
+
229
+ }],
230
+
231
+ "currentCostumeIndex": 0,
232
+
233
+ "penLayerMD5": "5c81a336fab8be57adc039a8a2b33ca9.png",
234
+
235
+ "penLayerID": 0,
236
+
237
+ "tempoBPM": 60,
238
+
239
+ "videoAlpha": 0.5,
240
+
241
+ "children": [{
242
+
243
+ "objName": "sprite1",
244
+
245
+ "scripts": [[65.8, 76.1, [["procDef", "test1 %n", ["number1"], [1], false]]],
246
+
247
+ [92.7, 67.55, [["procDef", "test2 %n %s", ["number1", "string1"], [1, ""], false]]],
248
+
249
+ [97,
250
+
251
+ 46.4,
252
+
253
+ [["procDef", "test3 %n %s %b", ["number1", "string1", "boolean1"], [1, "", false], false]]]],
254
+
255
+ "sounds": [{
256
+
257
+ "soundName": "ニャー",
258
+
259
+ "soundID": 0,
260
+
261
+ "md5": "83c36d806dc92327b9e7049a565c6bff.wav",
262
+
263
+ "sampleCount": 18688,
264
+
265
+ "rate": 22050,
266
+
267
+ "format": ""
268
+
269
+ }],
270
+
271
+ "costumes": [{
272
+
273
+ "costumeName": "cosutume1",
274
+
275
+ "baseLayerID": 1,
276
+
277
+ "baseLayerMD5": "f9a1c175dbe2e5dee472858dd30d16bb.svg",
278
+
279
+ "bitmapResolution": 1,
280
+
281
+ "rotationCenterX": 47,
282
+
283
+ "rotationCenterY": 55
284
+
285
+ },
286
+
287
+ {
288
+
289
+ "costumeName": "cosutume2",
290
+
291
+ "baseLayerID": 2,
292
+
293
+ "baseLayerMD5": "6e8bd9ae68fdb02b7e1e3df656a75635.svg",
294
+
295
+ "bitmapResolution": 1,
296
+
297
+ "rotationCenterX": 47,
298
+
299
+ "rotationCenterY": 55
300
+
301
+ }],
302
+
303
+ "currentCostumeIndex": 1,
304
+
305
+ "scratchX": 0,
306
+
307
+ "scratchY": 0,
308
+
309
+ "scale": 1,
310
+
311
+ "direction": 90,
312
+
313
+ "rotationStyle": "normal",
314
+
315
+ "isDraggable": false,
316
+
317
+ "indexInLibrary": 1,
318
+
319
+ "visible": true,
320
+
321
+ "spriteInfo": {
322
+
323
+ }
324
+
325
+ },
326
+
327
+ {
328
+
329
+ "objName": "sprite2",
330
+
331
+ "scripts": [[36.85,
332
+
333
+ 17.8,
334
+
335
+ [["procDef", "test1 %n %s %b", ["number1", "string1", "boolean1"], [1, "", false], false]]],
336
+
337
+ [76.05,
338
+
339
+ 105.45,
340
+
341
+ [["procDef",
342
+
343
+ "test2 %n %n %s %s %b %b",
344
+
345
+ ["number1", "number2", "string1", "string2", "boolean1", "boolean2"],
346
+
347
+ [1, 1, "", "", false, false],
348
+
349
+ false]]]],
350
+
351
+ "sounds": [{
352
+
353
+ "soundName": "ポップ",
354
+
355
+ "soundID": 1,
356
+
357
+ "md5": "83a9787d4cb6f3b7632b4ddfebf74367.wav",
358
+
359
+ "sampleCount": 258,
360
+
361
+ "rate": 11025,
362
+
363
+ "format": ""
364
+
365
+ }],
366
+
367
+ "costumes": [{
368
+
369
+ "costumeName": "cosutume1",
370
+
371
+ "baseLayerID": 3,
372
+
373
+ "baseLayerMD5": "d36f6603ec293d2c2198d3ea05109fe0.png",
374
+
375
+ "bitmapResolution": 2,
376
+
377
+ "rotationCenterX": 0,
378
+
379
+ "rotationCenterY": 0
380
+
381
+ }],
382
+
383
+ "currentCostumeIndex": 0,
384
+
385
+ "scratchX": -17,
386
+
387
+ "scratchY": 36,
388
+
389
+ "scale": 1,
390
+
391
+ "direction": 90,
392
+
393
+ "rotationStyle": "normal",
394
+
395
+ "isDraggable": false,
396
+
397
+ "indexInLibrary": 2,
398
+
399
+ "visible": true,
400
+
401
+ "spriteInfo": {
402
+
403
+ }
404
+
405
+ }],
406
+
407
+ "info": {
408
+
409
+ "videoOn": false,
410
+
411
+ "userAgent": "Scratch 2.0 Offline Editor",
412
+
413
+ "flashVersion": "MAC 26,0,0,137",
414
+
415
+ "scriptCount": 5,
416
+
417
+ "swfVersion": "v456.0.4",
418
+
419
+ "spriteCount": 2
420
+
421
+ }
422
+
423
+ }
424
+
425
+ ```
426
+
427
+ 長くてすいません。
428
+
429
+ JavaScriptとHTMLは両方UTF8です。

1

関数を追加。ブラウザを追加。

2017/10/23 07:07

投稿

hota1024
hota1024

スコア354

test CHANGED
File without changes
test CHANGED
@@ -50,16 +50,136 @@
50
50
 
51
51
  setTimeout(project_load,500);
52
52
 
53
+ console.log(reader.result);//ここでreader.resultの日本語が文字化けしてる
54
+
53
55
  }
54
56
 
55
57
  reader.readAsBinaryString(file);
56
58
 
57
59
  });
58
60
 
61
+ function project_load(){
62
+
63
+ json = JSON.parse(reader.result);
64
+
65
+ functions = [];
66
+
67
+ Loading.project();
68
+
69
+ var children = json.children;
70
+
71
+ children.some(function(child,cindex,ct){
72
+
73
+ if(child.objName){
74
+
75
+ child.scripts.forEach(function(script,sindex,t){
76
+
77
+
78
+
79
+ if(script[2][0][0] == "procDef") functions.push(script[2][0]);
80
+
81
+
82
+
83
+ setTimeout(function(){
84
+
85
+ var parcent = (sindex + 1) / t.length;
86
+
87
+ parcent = ((cindex + 1) * parcent) / ct.length * 100;
88
+
89
+ Loading.project().css('width',parcent + '%');
90
+
91
+ Loading.project().text('Getting functions...('+parcent+'%)');
92
+
93
+ },0);
94
+
95
+ });
96
+
97
+ }
98
+
99
+ setTimeout(function(){
100
+
101
+ var parcent = (cindex + 1) / ct.length * 100;
102
+
103
+ Loading.project().css('width',parcent + '%');
104
+
105
+ Loading.project().text('Getting functions...('+parcent+'%)');
106
+
107
+ },0);
108
+
109
+ });
110
+
111
+ setTimeout(function(){
112
+
113
+ Loading.project().text('Geted function!(100%)');
114
+
115
+ },1);
116
+
117
+ setTimeout(functions_output,500);
118
+
119
+ }
120
+
121
+ function functions_output(){
122
+
123
+ Loading.functionsOutput();
124
+
125
+ var result = '';
126
+
127
+ functions.forEach(function(func,index,t){
128
+
129
+ console.log(func);
130
+
131
+ result += 'define ' + func[1] + '<br />';
132
+
133
+
134
+
135
+
136
+
137
+ setTimeout(function(){
138
+
139
+ Loading.functionsOutput().css('width',(index + 1) / t.length * 100 + '%');
140
+
141
+ Loading.functionsOutput().text('Generating define blocks(' + (index + 1) / t.length * 100 + '%)');
142
+
143
+ },0);
144
+
145
+ });
146
+
147
+ $('.define_blocks').html(result);
148
+
149
+ $('#json').text(JSON.stringify(json, null, " "));
150
+
151
+ editor = ace.edit("editor");
152
+
153
+ editor.setValue(JSON.stringify(json, null, " "));
154
+
155
+ editor.setTheme("ace/theme/monokai");
156
+
157
+ editor.setFontSize(14);
158
+
159
+ editor.getSession().setMode("ace/mode/json");
160
+
161
+ editor.getSession().setUseWrapMode(true);
162
+
163
+ editor.getSession().setTabSize(2);
164
+
165
+ scratchblocks.renderMatching('.define_blocks');
166
+
167
+ setTimeout(function(){
168
+
169
+ Loading.functionsOutput().text('Generated define blocks(100%)');
170
+
171
+ },1);
172
+
173
+ }
174
+
59
175
  ```
176
+
177
+ スパゲッティーでごめんなさい。
60
178
 
61
179
 
62
180
 
63
181
  これで読み込んだ`reader.result`の日本語の部分が文字化けしてしまいます。
64
182
 
65
183
  読み込んだファイルは`utf8`です。
184
+
185
+ ブラウザは'Google Chrome'です。