by shigemk2

当面は技術的なことしか書かない

csv2tableを使ってみて

JavaScript

csv2tableとは

CSVファイルをHTML上でテーブルにします。というライブラリを今日知りました。

見た目としてはこんな感じです。

f:id:shigemk2:20150612201912p:plain

サンプルのCSVとHTMLは以下から拝借しています。

qiita.com

<html>
  <header>
    <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="http://jsgt.org/lib/jquery/plugin/csv2table/v002/js/jquery.csv2table-0.02-b-4.7.js" type="text/javascript" charset="utf-8"></script>
  </header>
  <body>
    <div id="view0"></div>
    <script>
      $(function(){
      $('#view0').csv2table('./data1.csv');
      });
    </script>
  </body>
</html>

日付,結果,遠征,燃料,弾薬,鋼材,ボーキ,開発資材,高速修復材,高速建造材
2014-12-14 08:04:36,大成功,水上機基地建設,828,0,345,345,0,1,0
2014-12-14 08:19:08,成功,長距離練習航海,0,100,30,0,0,0,0
2014-12-15 22:55:59,成功,長距離練習航海,0,100,30,0,0,1,0
2014-12-15 22:56:09,大成功,海上護衛任務,345,345,34,34,0,0,0

いろいろさわってみる

囲い文字つき

"日付","結果","遠征","燃料","弾薬","鋼材","ボーキ","開発資材","高速修復材","高速建造材"
"2014-12-14 08:04:36","大成功","水上機基地建設","828","0","345","345","0","1","0"
"2014-12-14 08:19:08","成功","長距離練習航海","0","100","30","0","0","0","0"
"2014-12-15 22:55:59","成功","長距離練習航海","0","100","30","0","0","1","0"
"2014-12-15 22:56:09","大成功","海上護衛任務","345","345","34","34","0","0","0"

f:id:shigemk2:20150612201959p:plain

途中で改行が入る

"日付","結果","遠征","燃料","弾薬","鋼材","ボーキ","開発資材","高速修復材","高速建造材"
"2014-12-14 08:04:36","大成功","水上機基地建設
test","828","0","345","345","0","1","0"
"2014-12-14 08:19:08","成功","長距離練習航海","0","100","30","0","0","0","0"
"2014-12-15 22:55:59","成功","長距離練習航海","0","100","30","0","0","1","0"
"2014-12-15 22:56:09","大成功","海上護衛任務","345","345","34","34","0","0","0"

f:id:shigemk2:20150612202120p:plain

これはよくない。こういう感じのcsvってたまにあると思うんですよ。

ちょっとチョロマカしてみる

まずCSVの改行コードをCRLFにしてみる

nkf -Lw data_rn.csv

"日付","結果","遠征","燃料","弾薬","鋼材","ボーキ","開発資材","高速修復材","高速建造材" "2014-12-14 08:04:36","大成功","水上機基地建設 test","828","0","345","345","0","1","0" "2014-12-14 08:19:08","成功","長距離練習航海","0","100","30","0","0","0","0" "2014-12-15 22:55:59","成功","長距離練習航海","0","100","30","0","0","1","0" "2014-12-15 22:56:09","大成功","海上護衛任務","345","345","34","34","0","0","0"

(追記 改行まわりは、ちょこっと試してみたときのことなので、どの改行コードにも対応されています)

498行目周辺を直してみる。

差分

f:id:shigemk2:20150612205308p:plain

直したものが反映されているのがこっち。

f:id:shigemk2:20150612204452p:plain

直りましたね。

修正版コード

gist.github.com