お題

Excelで編集したCSVファイルをJavaScript(UTF-8)で定義ファイルとして読込みたい。

ShiftJISでの対応

Papa ParseというjQueryライブラリがあるので、それを使ってみる。
http://papaparse.com/
http://plugins.jquery.com/parse/

あとmimetypeを上書き。
jQueryでShiftJISエンコードされたCSVを処理する
http://qiita.com/svartalfheim/items/36100328a37c8221d0dd

csv.html

<!DOCTYPE html>
<html lang="ja">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="js/papaparse.min.js"></script>
<script>
var alldata={};
$(function(){
    var init_data = function(){
    var _def = $.Deferred(), 
    _defs=[], 
    _keys=["user", "group","shop"],
    _func = function(key) {
        var _def2 = $.Deferred();
        $.ajax({
            type:"GET",
            url:"data/" + key + ".csv",
            // ShiftJISをUTF-8で読み込む。
            beforeSend:function(xhr){
                xhr.overrideMimeType("text/plain; charset=shift_jis");
            },
            dataType:'text',
            cache: false
        }).then(
            function(res) {
                Papa.parse(res,{
                     delimiter: ",", // 区切り文字
                     header: true, // 実データ一行目を項目名とするか
                     comments: "#", // "#"始まりはコメント行
                     skipEmptyLines: true, // 空行を飛ばす 
                     // 完了時
                     complete:function(res){
                         alldata[key] = res.data;
                         _def2.resolve();
                     },
                     // エラー時
                     error:function(err) {
                         _def2.reject(err);
                     }
                });
            },
            function(err) {
                _def2.reject(err);
            }
        );
        return _def2.promise();
    };

    $.each(_keys, function(){
        _defs.push(_func(this));
    });

    // 配列を渡したいので、applyで。
    $.when.apply($, _defs).then(
        function(){
            _def.resolve();
        },
        function(err){
            _def.reject(err);
        }
    );
    return _def.promise();
};

init_data().then(function(){console.log(alldata);});

});
</script>
<body>
</body>
</html>

UTF-8での対応

BOM付きUTF-8であれば、Excelで直接開いて編集可能。
Windowsのメモ帳の場合、UTF-8保存で常にBOM付きになる。
vimの場合、:set bomb でBOM付き、:set nobomb で削除。BOM付きかどうかは vi -b hoge.csv で確認。

vimでBOM
http://saihoooooooo.hatenablog.com/entry/2012/09/06/000535

$.ajax を経由した文字コード変換が不要になるので、以下のようなリモートファイルの直接読込が利用できそう。

Papa.parse(url, {
    download: true,
    // rest of config ...
})

JavaScriptのCSV読込メモ

お題

ShiftJISでの対応

UTF-8での対応