Webサービスプロジェクト ～ ファイルの中身を取り出す
2019年8月20日
ファイルの中身を取り出す！
Javascriptに予め用意された機能で、テキストファイルの読み込みは簡単にできます。このテキストから必要な情報を取り出す必要があります。
今回のプロジェクトでは、GPSデータを含んだXMLのファイルを扱います。
XMLを読み込む
前回は、XMLファイルの中身をそのまま表示するようなプログラムでしたが、今回は、このXMLの構造に従って読みだして、必要なデータを抜き出す所までやります。
XML自体はそれほど複雑な構造ではありませんので、
自分で最初から読み込むプログラムを書いてもそれほど難しくはありません。
テキストを読み込みながら、「<」と「>」の間の文字列を処理すれば良い事になります。
「<」と「>」の間はタグとアトリビュート、「>」の「<」の間は値が入っています。
文字列を取り込みながら「<」と「>」を見つけたら、「<」ならば値を、「>」ならばタグとアトリビュートとして処理します。タグの前に「/」がある場合は、一つのタグがクローズするという処理をします。
それでも、初めてXMLを扱う方にはなんだかよくわかりませんよね！
jQueryを使えば簡単
XMLの読み込みには、jQueryを使うと簡単です。そこで今回はjQueryを利用して簡略化してしまう事にします。まずは「TCX形式」のXMLを読み込むには、こんな感じです。
「TCX形式」のXMLの場合、GPSの個別のデータは、「Trackpoint」というタグの下に記録されています。そこで、Trackpointのタグのデータを全て抽出してそのデータを取り出せば良い事になります。
抽出した後で、必要なデータを抜き出せば完了です。
var current_class = this;
var reader = new FileReader();
var inside = false;
reader.readAsText(file);
reader.onload = function(e) {
var error = e.target.error;
if (error !== null) {
alert("Error: " + error);
} else {
var xml = e.target.result;
var xmlDoc = $.parseXML(xml);
var $xml = $(xmlDoc);
//各レコードの抽出
var $trackpoint = $xml.find("Trackpoint");
var records = [];
var record = {};
$trackpoint.each(function() {
//各レコードの読み込み
record['time'] = $(this).find('Time').text();
record['latitude'] = $(this).find('LatitudeDegrees').text();
record['longitude'] = $(this).find('LongitudeDegrees').text();
record['altitude'] = $(this).find('AltitudeMeters').text();
record['distance'] = $(this).find('DistanceMeters').text();
record['hr'] = $(this).find('HeartRateBpm').find('Value').text();
// ネームスペースを使った拡張の場合
record['speed'] = $(this).find('ns3\\:Speed').text();
records.push(record);
});
}
};
var reader = new FileReader();
var inside = false;
reader.readAsText(file);
reader.onload = function(e) {
var error = e.target.error;
if (error !== null) {
alert("Error: " + error);
} else {
var xml = e.target.result;
var xmlDoc = $.parseXML(xml);
var $xml = $(xmlDoc);
//各レコードの抽出
var $trackpoint = $xml.find("Trackpoint");
var records = [];
var record = {};
$trackpoint.each(function() {
//各レコードの読み込み
record['time'] = $(this).find('Time').text();
record['latitude'] = $(this).find('LatitudeDegrees').text();
record['longitude'] = $(this).find('LongitudeDegrees').text();
record['altitude'] = $(this).find('AltitudeMeters').text();
record['distance'] = $(this).find('DistanceMeters').text();
record['hr'] = $(this).find('HeartRateBpm').find('Value').text();
// ネームスペースを使った拡張の場合
record['speed'] = $(this).find('ns3\\:Speed').text();
records.push(record);
});
}
};
- 時間
- 距離
- 標高
- 位置情報（緯度と経度）
- 心拍数
- スピード（TCXの拡張でns3というネームスペースを使用）
をこの例では抜き出しています。
位置情報が抜ける事がある
TCX形式のファイルでは、GPSの位置情報が抜ける事があります。
時間は必須で抜ける事はありませんが、GPSのデータが得られない場合は抜ける事があります。GPSのデータが無くても、心拍数などのデータは取得できるためレコードが作られます。その場合の処理を考える必要があります。
位置情報が無い場合のレコード全部を無視する方法もありますし、位置情報以外を取り込んで、置く事も出来ます。
今回は取りあえず全てのレコードを取り込んでおくことにします。位置情報が無い場合は、ブランクにしておきます。（JavascriptでNaNでも良い）
実際の処理は、データを使う時に考える事にします。
次のステップは？
今回はここまでですが、次のステップはまずは読み込んだデータを表示する機能をつけます。データを解析するにしてもまずは「生データ」を見る必要があるので、各レコードを表示する機能を付ける事にします。
お問い合わせはこちら！
コメント
コメントを投稿