読み飛ばして良いまえがき
前回のローカルファイル読み込み編 → https://ticketnote.dev/ticket/DUpAHv85tU3vuFNuKE3v
完成予定のCodePen → https://codepen.io/kaitou1192/pen/gORyBGX
本日の本題
今回は、前回XMLファイルから読み込んだものが文字列になっているので、今回はそれをDOMに変換。その後、DOM → 文字列 → Blob にしてからaタグのdownload属性を使ってファイルとして出力させます。
文字列 → DOM
早速、前回の文字列をDOMに変換します。
追加したのはこんなコード。
const parser = new DOMParser();
const temporaryGpx = parser.parseFromString(loadedGpx, 'application/xml');
loadedGpx は、前回ローカルの .gpx から読み込んだファイル内の文字列です。
new DOMParser() で、parserというオブジェクトを作成し、parseFromString を通して、文字列をドキュメントオブジェクト temporaryGpx にしています。この temporaryGpx の中身を console.log で覗くとこんな感じです。
この時点でのCodePen → https://codepen.io/kaitou1192/pen/qBjJzZe
DOMParser や .parseFromString() について知りたい方は → https://developer.mozilla.org/ja/docs/Web/API/DOMParser
この時点で temporaryGpx.documentElement.querySelector('trk') とかを指定してあげれば、具体的にDOMを操作できるようになります。
DOM → 文字列
まずはDOMから文字列に変換します。
XMLSerializer や .serializeToString() について知りたい方は → https://developer.mozilla.org/ja/docs/Web/API/XMLSerializer
const outputGpx = new XMLSerializer();
let outputGpxText = outputGpx.serializeToString(temporaryGpx);
文字列 → Blob
ここは知っていれば簡単です。
JSにおけるBlobについて知りたい方は → https://developer.mozilla.org/ja/docs/Web/API/Blob
const blob = new Blob([outputGpxText], {type: 'application/xml'});
ファイルの出力
ここは先ほどまでに比べるとちょっと長いですが、仕組みがわかってしまえば簡単です。
html側に .download というのを用意しました。これはファイルの出力が整ったら表示するというブロックです。
あとはaタグのhref属性に先程のblobを格納するために window.URL.createObjectURL(blob)。ダウンロードさせる際のファイル名をdownload属性を指定しています。textContentはaタグの中のテキストをどうするか？なので、仮に「ダウンロード」としています。
最後に download.appendChild(a) として、.downloadの中に、作ったaタグを格納しました。
この時点でのCodePen → https://codepen.io/kaitou1192/pen/eYRPwKo
<div class="file">
<label>RWGのGPX: <input type="file" accept=".gpx"></label>
</div>
<div class="download"></div>
const download = document.querySelector('.download');
//ダウンロード用のエリアを表示
download.setAttribute('style','display: block;');
//ダウンロード用のエリア内に要素がある場合は削除
while(download.firstElementChild) {
download.firstElementChild.remove();
}
//ファイルをダウンロードさせる
const a = document.createElement('a');
a.href = window.URL.createObjectURL(blob);
a.textContent = 'ダウンロード';
a.download = 'convert.gpx';
download.appendChild(a);
これで前回のと組み合わせて、HTMLとJSでXMLファイル（.gpx）を読み込み、それを新たなXMLファイル（.gpx）として出力するというところまで来ました。💪🏻
次回こそはDOMを操作して加工するところをやりたいと思います。
Ride with GPSからダウンロードした .gpx を読み込めるようにJSで変換する
Twitterもやっているので、よかったらフォローしてください。🙏🏻
https://twitter.com/Kaitou1192