GPXファイルの読み込み
Silicon Valley Super Ware
2020年8月4日
GPXファイルの読み込み
今月のテーマは趣味を基にしたWebサービスの紹介です。 このサービスの紹介を通してついでに、ファイルの読み込み、 特にXMLファイルの扱いも一緒にやってしまおうという予定です。ランニングの世界では、GPSのデータを基にトレーニングの記録をつけたり、 トレーニングの強度を決めたりするのが一般的になって幾つかのWebサービスも 存在します。 大手のGPSのメーカも独自でサイトを運営して製品の利用者に提供しています。
私が利用しているデバイスはガーミンの物なので、基本はガーミン製品を念頭に考えています。
ただし、GPSのデータ自体はある程度標準化が進んでいて、大手のサービスの多くは 「GPX」という形式のファイルをサポートしていて、これ以外に「TCX」というファイルを サポートすると、基本的にかなり多くのサービスから取り込んだGPSデータが使えます。GPXもTCXもどちらも「XML」と呼ばれる、タグ付きの書式で書かれています。 タグ付きという意味ではHTMLの親戚という感じで、ファイルの書式自体は余り 複雑ではありません。
XMLファイル
XMLファイルは、いろいろなデータを階層構造で記述できるため、応用範囲が広く いろいろな所で利用されています。JavaScriptのプログラミングの場合、 もっと簡単に扱うことが出来る、「JSON」の方が一般的ですが、多くのプログラムでは JSONと並んで良く使われている書式です。今回は、多くのサービスでサポートされて広く普及しているGPXのデータを中心に扱っていきます。
TCXのファイルも非常に良く似た形式ですが、一番大きな違いは GPXは標準で距離情報を持っていないところです。 従って、移動距離は、GPSで計測した緯度と経度を基に計算して求める必要があります。
基本的なデータは、位置情報（緯度・経度）と時間です。
これに加えて拡張情報として、心拍数や標高のデータが加えられています。これらのデータを取り込んで、処理する事で役に立ちそうな情報を利用者に 提供しようというのがサービスの趣旨です。
ファイルの読み込みも基本機能の一つ
このファイルの読み込みもWebサービスでよく使われる基本機能の一つなのでこの連載でも ぜひ取り上げたいと思っていたので、丁度良い題材だと思います。先月までの題材にはファイルの読み込みが必要な機能は無かったので Webサービスの基本要素としてファイルの取り込みを取り上げます。
もう一つの特長は今回のサービスは基本的に数値データを扱っているので、 こうした数値データの扱い方を紹介できます。
ファイルの読み込みは？
XMLと言っても、中身は基本的にはテキストファイルです。JavaScriptは基本的なテキストファイルの読み込みは、標準で読み込む機能を既に サポートしているのでファイルの読み込み自体はいたって簡単です。
「FileReader」のオブジェクトを作成して、「readAsText()」のメソッドを 呼び出せば基本的にテキスト部分は取り込んでくれます。 読み込みは非同期で行われます。
XMLの情報を抽出するには、この読み込んだ結果を処理するだけです。
function readFile(file) {
return new Promise((resolve) = {
const reader = new FileReader();
reader.readAsText(file);
reader.onload = (e) => {
const error = e.target.error;
if (error) {
resolve([]);
} else {
const contents = e.target.result;
resolve(contents); }
});
reader.onerror = (error) => {
resolve([]);
};
});
}
ファイルの読み込み自体はこれだけですが、これは単にテキストを取り込んだだけで、
埋め込まれたタグを基にデータの階層を読み込む必要があります。
現在の実装は「jQuery」を利用して作ったので、jQueryの機能でXMLファイルの情報を取り込んでいました。
今回は、「npm」でモジュールを追加してそれを利用して読み込むことにしました。
明日の投稿に続きます！
return new Promise((resolve) = {
const reader = new FileReader();
reader.readAsText(file);
reader.onload = (e) => {
const error = e.target.error;
if (error) {
resolve([]);
} else {
const contents = e.target.result;
resolve(contents); }
});
reader.onerror = (error) => {
resolve([]);
};
});
}
シリコンバレースーパーウエアでは、単に機能を作るだけではなく、利用者を第一に考えた 使いやすく価値のあるサービス作りの手法を提供しています。 単純に、Webサービスを作るだけではなく、どのように作って、どのようにビジネスにつなげて 行くかが鍵です。また、フリーランスの方だけではなく、就職を考えている方にも 「実践力」を養うことで「即戦力」のエンジニアとしてのスキルを身に着ける事ができます！
興味のある方は今すぐお問合せください！
またよろしければ、ニュースレターの登録をお願いします！大体週一回お届けしています。ブログよりは一歩踏み込んだもっと濃い内容を発信しています。
コメント
コメントを投稿