Macでcsvで簡単に軽く見る方法がわからなかったので、javascriptとhtmlで書いてみた

さくっとサンプルコード

<html>
<header>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.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>

<script>
$(function(){
$('#view_table').csv2table('./helloworld.csv');
});
</script>

<br>
<div id="view_table"></div>

</body>
</html>

コードの解説

サンプルコード(例:view_csv.html)を書いたのと同じディレクトリに出力させたいCSVファイル(例:helloworld.csv)を設置

jquery.csv2table.js( http://jsgt.org/lib/jquery/plugin/csv2table/v002/test.htm )のjQueryプラグインを使って、ブラウザでテーブル表示させてます。

注意点

このまま不用意にChromeで実行すると、

jquery.min.js:130 XMLHttpRequest cannot load file:///ファイル名1487333771327. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

が出ると思います。js初心者だったので、エラー内容をGoogleさんに聞いてみたところ、同じような問題に当たっている人がいました。

sudo /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --args -allow-file-access-from-files

Chromeの起動オプションで-allow-file-access-from-filesをつけると、回避できるそうです。今回は次のリンクを参考に回避しましたが、sudoコマンドで起動するのがやや面倒そうなので、Safariで暫くは見ることにします。(さくっとcsvを見たいだけなのでw)

tomio2480.hatenablog.com

実行結果

f:id:mamecafe:20170217214722p:plain

終わりに

ことの発端はcsvファイルを見る際にopenコマンドをmacで叩くとやたらと重い(私が開いているアプリケーションのせいかもしれませんが)ソフトが起動するので「さくっと中身が見れて、なおかつ検索も出来るものが欲しい」ということで調べて書きました。
軽く中身を閲覧したいだけならば、Macの簡易表示で十分だと思います。