🍜 Ride with GPSからダウンロードした .gpx を読み込めるようにJSで変換する ②
作成日: 2021/09/26
1

読み飛ばして良いまえがき
前回のローカルファイル読み込み編 → 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
スクリーンショット 2021-09-26 11.28.03.png

この時点で 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

本業はコードを書かせてもらえないフロントエンドエンジニアです。 こんなサービス作っています。 https://lp.re-shine.jp