質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.91%

JavaScriptでcsvファイルを読み込んでブラウザに出力したいのですが、文字化けしてしまいます。

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 13K+

chibi

score 20

JavaScriptでcsvファイルを読み込んでブラウザに出力したいのですが、文字化けしてしまいます。
csvはutf-8で保存しています。サーバーは、Xサーバーです。
文字化けせずにcsvファイルから読み取り、出力するにはどうすれば良いでしょうか?

test.csv
20170404,イチロー,いちご
function getCSV(){
    var req = new XMLHttpRequest();
    req.open("get", "test.csv", true);
    req.send(null);

    req.onload = function(){
    convertCSVtoArray(req.responseText);
    }
}

function convertCSVtoArray(str){
    var tmp = str.split(",");
    alert("データ1:"+tmp[0]+"データ2:"+tmp[1]+"データ3:"+tmp[2]);
}
getCSV();
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • 07JP27

    2017/04/05 08:12

    表示するHTMLのheadに<meta charset="UTF-8" />は書かれていますか?

    キャンセル

  • chibi

    2017/04/05 21:17 編集

    回答していただき、ありがとうございます!<meta charset="UTF-8" />は書いています。

    キャンセル

  • Lhankor_Mhy

    2017/04/08 15:07

    文字化けした出力結果を見せていただくことは可能ですか?

    キャンセル

回答 1

+6

次のようなスクリプトで実験してみました。

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta http-equiv="Content-Type" content="text/Shift-JIS; charset=utf-8" />
 <title>csv test</title>
 <script type="text/javascript">
//---------- from ----------
function getCSV(){
  var req = new XMLHttpRequest();
  req.open("get", "test.csv", true);
  req.send(null);

  req.onload = function(){
    var reshdr = req.getResponseHeader("content-type") //for debug
    console.log(reshdr)                                //for debug
    convertCSVtoArray(req.responseText);
  }
}

function convertCSVtoArray(str){
    var tmp = str.split(",");
    alert("データ1:"+tmp[0]+"データ2:"+tmp[1]+"データ3:"+tmp[2]);
}
//---------- to ----------
 </script>
</head>
<body>
 この行はShift-JISでエンコードしてあります。
 <form>
  <input type="button" value="show csv" onClick="getCSV()">
 </form>
</body>
</html>
  • HTML自体はShift-JISでエンコード
  • ブラウザー(firefox: テキストエンコーディングを「日本語(Shift-JIS)」「自動判別:解除」)
    上記ページのボタンをクリックするとalertの内容は文字化けしていませんでした。
    なお、上記javascriptでcsvファイルを受け取ったときのレスポンスヘッダーの"content-type"をコンソールに出していますが"text/csv; charset=UTF-8"となっていました。

また、サーバーはちょっといい加減なものを使っており応答の際にcharsetを無条件にutf-8にしているのですが、firefoxのテキストエンコーディングを「unicode」「自動判別:解除」にするとHTMLドキュメント上の文字列やalertの「データ1」などは文字化けしますが、受信したcsvデータ自体は文字化けしません。

つまり「サーバーから応答されたtest.csvのレスポンスがcharset=utf-8になっていないかまたはサーバー上にあるtest.csv自体がutf-8でないかのいずれかではないかと思いました。


追記:まず事実を確認してみるとよいと思います。

  • server上のtest.csvはutf-8になっているか

小さなテストデータなので確認は容易だと思います。例えばlinux/unix上であれば下記と同じ結果になればutf-8であることは確実です。(通常はLANG=ja_JP.UTF-8となっている端末上でcat test.csvとして文字化けしてなければutf-8であるといった確認をするでしょうけども)

$ od -c test.csv
0000000   2   0   1   7   0   4   0   4   , 343 202 244 343 203 201 343
0000020 203 255 343 203 274   , 343 201 204 343 201 241 343 201 224  \n
0000040
  • serverからtest.csvを受信した際のcharset
    上述の実験コードのようにリクエストオブジェクトに対してgetResponseHeader("content-type")メソッドの呼び出しで文字セットが確認できます。

補足しますと、自分はwebアプリケーションの知識に乏しいため、「どういう確認ができるか」を考え上記のような実験をしてみた次第です。まず上記を確認して「推測した通りの不整合がみつかったなら」その先を調査するようにしたほうがよいでしょう。サーバーからの応答のcharsetがutf-8になっていないかも知れないという推測のままで前へ進むのは時間を無駄にする可能性があると思います。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/04/08 11:45

    すみません。自分の方が見落としてました。Xサーバーと書いてありますがレンタルサーバーということですね?

    キャンセル

  • 2017/04/09 06:07

    はい、そうです。

    キャンセル

  • 2017/04/09 09:59

    >ターミナルで入力してみたのですが・・・
    というのはXサーバーへSSHで接続してそこでやってみたということですね?サーバーのOSが何かわかりますか?

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.91%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る