CSVデータを表示する

 CSV形式はデータ(項目)をカンマで区切ったテキストファイルです。例えば以下のように項目がカンマで区切られています。

91,塩ラーメン,300
94,味噌ラーメン,290
95,豚骨ラーメン,320
102,牛丼,150
200,カレー,80
201,ドライカレー,85
500,コーンスープ,25
502,野菜スープ,35
505,コンソメスープ,31

 前項でやったタブ形式はデータがタブで区切られていました。CSVの場合にはタブの代わりにカンマで区切るようにスクリプトを変更すればできあがりです。以下のスクリプトは改行コードがCR (13番)で区切られているものとして処理しています。(サンプルを実行する

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>CSVファイルを表示する</title>
<script type="text/javascript" src="xmlhttp.js"></script>
<script type="text/javascript"><!--
function loadDataFile(fName)
{
httpObj = createXMLHttpRequest(displayData);
if (httpObj)
{
httpObj.open("GET",fName,true);
httpObj.send(null);
}
}
function displayData()
{
if ((httpObj.readyState == 4) && (httpObj.status == 200))
{
$("result").innerHTML = parseTabText(httpObj.responseText);
}else{
$("result").innerHTML = "<b>Loading...</b>";
}
}
// CSVファイルを解析して表示
function parseTabText(tabText)
{
var resultText = "<table border='1' cellspacing='0'>";
var CR = String.fromCharCode(13); // 改行コード (CR)
lineData = tabText.split(CR);
for (var i=0; i<lineData.length; i++)
{
wCount = lineData[i].split(",");
resultText += "<tr>";
for (j=0; j<wCount.length; j++)
{
tData = wCount[j]; // データ
resultText += "<td>"+tData + "</td>";
}
resultText += "</tr>";
}
resultText += "</table>";
return resultText;
}
// --></script>
</head>
<body>
<h1>CSVファイルを表示する</h1>
<p>CSVファイルを読み込み表示します</p>
<form name="ajaxForm">
<input type="button" value="sample.csvファイルを読み込み" onClick="loadDataFile('sample.csv')"><br>
</form>
<div id="result"></div>
</body>
</html>

 実際にはCSV形式の処理を上記スクリプトで完全にできるわけではありません。例えばカンマがデータ内に含まれている場合にはダブルクォーテーション(")でデータが囲まれます。"がデータ内に含まれる場合には""のように2つ記述されます。このため、どのようなCSV形式のファイルが分かっていない場合には上記のスクリプトでは全く使い物になりません。上記のスクリプトはデータ内にカンマやダブルクォーテーションが含まれないといった条件を満たしている必要があります。普通のCSV形式を処理するのであれば、CSVを解析するライブラリを探してダウンロードするか、自前で作成する必要があります。
 データ項目さえ抽出できれば、あとはただのテキストファイルなので簡単に処理を行うことができます。
 次項ではRPG(ロールプレイングゲーム)などでみかけるゲーム画面のマップセレクト処理をAjaxで行ってみます。

[第三章 3:ゲームのマップを表示するへ]
[目次へ]

(2006.1.4)