最近取り掛かっている日曜プログラミングの話です。
GPS 位置情報データのポピュラーなフォーマットである GPX 形式のデータを、 Google Maps API を用いて地図にオーバーレイし、 GPS 位置情報を視覚的に閲覧するビューワーを HTML と JavaScript で作っているので、それについて紹介したいと思います。名付けて GPX Casual Viewer v3 （名称変更しました。次の記事を参照してください： maps.gpx a.k.a. GPX Casual Viewer v3 また以下では GPX Casual Viewer v3 を maps.gpx と読み替えてください） 。
歴史
実を言うと、その最初の取り組みはかれこれ何年も前になります。 Google Maps API が世に始めた頃（いつでしたっけ？）。当時はまだ API バージョン 2 でしたが、そのころからこつこつ弄ってはいたのでした。
その成果はじぶんのホームページで公開していたので、いちぶのマニアックな方々（失礼がありましたらお詫びいたします）の目に止まって、使って頂いたりもしていたのですが、しばらくして互換性のない上位の API バージョン 3 が主流になってからというものは、いつかバージョンアップして書き換えようと思いつつも、結局ほったらかしになっていました。
尤も、簡単な閲覧機能だけ API バージョン 3 で実装し直して、個人的に旅の軌跡を眺めてニヤニヤするぶんには、使ってはいたのですが、見方を変えればそれだけで済んでしまっていたので、がっつり作り直すモチベーションが盛り上がることもなく、気がつけばこのように思い出話をするように、いまに至っている次第でした。
モチベーション
それがなぜに再び筆を取ろう、いえ、コードを書き直そうかと思ったかといえば、特に大きな理由はないのですが、小さな理由のひとつは、じぶんの JavaScript 技能の維持のために、なにかしら常に書いていたほうがよいな、ということがありました。使わないと、失われてしまいますからね。でもそれは二の次かもしれません。
それから、さきほど、個人的にニヤニヤするための仮の実装があると言いましたが、それが実は使いづらくて、こう治せればいいのになあという部分が常に目についてはストレスに感じていたことがありました。
具体的に例えば、視覚化したい GPX ファイルが、デスクトップ上にあったとします。それを Google Maps API を用いた地図上にオーバーレイしようとしたとき、次の手順を踏む必要がありました。ちょっと細かいですが、そこにストレスの元があるのです：
- Google Maps API で実装した地図の HTML ファイルをブラウザで開きます。
- GPX ファイルの URL
file:///Users/hiroaki/デスクトップ/data.gpxをクリップボードに取得します（これがちょう★面倒） - ブラウザのロケーション欄にカーソルを持って行きます（せまい領域にマウスカーソルを合わせないといけない）
- ロケーションの URL の末尾にクエリストリングを、「キーボードを叩いて」加えます
?url= - さらに続けて、クリップボードに入れた URL 文字列をペーストします（ああ、イライラする！）
- エンターキーをヒットします。
- オーバレイされた GPS 情報を観て、ニヤニヤします。
これは、こうあるべきです：
- Google Maps API で実装した地図の HTML ファイルをブラウザで開きます。
- GPX ファイルを、デスクトップからブラウザへドロップします。
- オーバレイされた GPS 情報を観て、ニヤニヤします。
ただ、こうすっきりとした手際に仕上げるには、当時の目では困難に見えました。しかし、いまになってみれば、昨今 HTML5 周辺の整備状況が整ってきたという新しい事情があります。──気がつけば、になってしまうのですが、そのへんの技術を用いることで、この理想の形を簡単に実現できる見通しが明らかになっていました。
そう、時代の流れに取り残され気味になっていたことに、気が付いたとも言えるでしょうか。それは最初の理由にも繋がることなのですが、気付きながらも具体的にコードとして書いたことはありませんでしたから、ではなにか取り組むべき課題がないかと考えたときには、その対象がすでに定まっていたも同然、そうした経緯や状況がしぜんと導いて、その適当な課題としてぴったりとあったということが、再開し始めとなった所以となったのでした。
個人的な話ですから、大した理由ではないと言われればそれまでですけれども、そういう個人的な理由はさておき、しかしながらその成果は、僭越ながらも、どなたかのお役にも立てるものではないかしらんと、ちょっと気持ちが大きくなっていたこともあったので、その勢いでここで紹介することにしました。
使い方は上に書いたように３ステップするだけですので、繰り返しません。ここでは主たる機能を紹介します。その前にダウンロードから。
ダウンロード
ZIP ファイルにまとまったものが、ここからダウンロードできます：
https://github.com/hiroaki/gpx-casual-viewer/releases
https://github.com/hiroaki/maps.gpx/releases
もし Github に馴染みがありましたら、クローンして master をチェックアウトしてください。
構成
なお GPX Casual Viewer v3 は Google Maps API を用いて HTML ページ上の地図をどうにかするための機能を提供する JavaScript ライブラリ gpx-casual-viewer.js のことを云いまして、それを利用しながら HTML + JavaScript でもってアプリケーションを組み立てていけるように設計されているものです。
つまり純粋なる GPX Casual Viewer v3 の利用はプログラミングが必要ですが、ホームページやブログをちょこっと改造したことがあれば、手間はさほどでもないと思います、というより、手間のなるべくかからないようにじぶんなりに考えながら、作成しているものであります。
とはいえ、ただ単に GPX データを閲覧したいだけならば、プログラミングなどはしたくありません。そうしたニーズに対しては、あらかじめ組み立て済みとして用意してある HTML ファイルを、ブラウザで開くだけで、使うことができます。それが viewer.html です。
そして、それはひとつの利用例にすぎません。利用例、それは、ドラッグ＆ドロップで入力するユーザ・インタフェースを備えたビューワーに仕立てた例です。
以下の紹介はひとつの例として組み立て済みの HTML ページ（アプリケーション） viewer.html について、ということになります。
機能
ダウンロードした ZIP ファイルを展開したら、中に viewer.html がありますので、最新のブラウザで開いてください。もちろん Internet Exploler ではダメです。
画面いっぱいに、まっさらな地図が表示されます。
GPX ファイルを入力し、地図にオーバレイします
GPX ファイルを地図のあるウィンドウにドロップします。
これにより、ひらたく言えば、 GPS のトラック（軌跡）データをポリライン、ピン（地点）データをマーカーとして描画します。 GPS データをどんな機器やアプリで取得したかによって用語は異なるかもしれません。とにかく、歩いた・走った軌跡と、どこかでマークしておいた地点のデータを、 Google Maps 上に視覚化します。
ちなみに GPS データの形式が GPX フォーマットとなったとき、 GPX フォーマットの用語としてはそれぞれ「トラック」と「ウェイポイント」と言います。
ところで、 GPX ファイルの入力の仕方は、じつは幾つかあって、それがこのライブラリの特徴でもあるのですが、ここでは割愛しています。が、もし、任意の GPX データを視覚化した地図を、ご自身のホームページやブログに貼り付けて活用してみたいとお考えであれば、 README-ja.md に書いた説明書きを参照してください。そこには GPX Casual Viewer v3 の API の記述があります。
もともと GPX Casual Viewer v3 は、そうしたウィジェット（貼り付け、エンベッド）のためのフレームワークとして開発してきたという経緯もあり、本来そちらが主たるインタフェースになっています。
それはさておき、とにかく、手っ取り早く入力するには、ドラッグ＆ドロップするだけです。そして、複数の GPX ファイルを同時にドロップすることもでき、それらを同時に地図上に描画することができます。
位置情報付き JPEG 画像ファイルを入力し、地図上に示します
これは GPX ファイルとは関係がない、オマケの機能なのですが、重宝するので組み込んでいます。
GPS 搭載の携帯端末のカメラ（もちろん、スマートフォンなどのカメラがポピュラーでしょう）、それで撮影した写真には、位置情報が内包されている場合があります（専門的には、「 EXIF に GPS タグが付随している場合」）。私が使っている iPhone 6 で撮影した画像には当てはまります。そうした JPEG 画像を、地図にドロップすると、その位置を示します。もちろん、複数の画像ファイルをいっぺんにドロップしても構いません。
また、カメラが GPS 非搭載であったり、撮影時に測位が失敗していたがために、位置情報が入っていない画像となっていることがあり、その撮影場所がわからなくて惜しいと思う場面があるかもしれません。そのとき同時に、 GPS ログを取得していたら、その GPX データを先に投入し、それから画像を追加投入してみてください。
viewer.html は画像ファイルの撮影日時の情報を読み取り、先に投入されている GPS データに記録されている日時の情報と照らし合わせることで、だいたいこのへんという位置を示すことができます。
地点の情報、また任意の２点間の関係を計算し、示します
トラック（歩いた・走った軌跡）の線上のある地点の情報を、その地点をクリックすることにより、 Google Maps のフキダシとして表示します。
そしてトラック上の２点間の関係情報とは、ある始点Ｐから、任意の点Ｑの、道なりの距離と、かかった時間（ついでに平均速度 km/h ）を表示するものです。 これは、あたりまえのようなことですが、数多ある閲覧ツールの中には、このあたりまえのことができないものが、しばしあるので、ひとつの特徴として記しておきます。
これは操作が分かりづらいかもしれませんし、ゆえにそれを説明するのも難しい、しかしながら一目瞭然なので、動画にしてみました。
最初のフキダシは起点を記します。左上のラジオボタンで、起点としています。
そして次に開いたフキダシまでの距離を計算します。このフキダシはトラック上を移動でき、その操作はキーボードの矢印キーです。シフトキーを押しながら操作すると、現在操作中のフキダシが中央になるように画面をパンします。
今後について
いまのところは、主だった機能はこれだけです。大したものではないかもしれませんが、最大の目標であったそのユーザ体験の改善としては、いい結果にできたのでは、ないでしょうか（、どうでしょうか）。
GPX Casual Viewer v3 の今後については、まだ追加したい機能もあることはあるので、まだしばらくは、この取り組みを続けていくつもりで、なにかあれば記事にしたいと考えています。
不具合の発見や、機能の要望などありましたら、プロジェクトのページから Issue を作成していただければと思います。ただ、目下のところまだまだプロトタイプ色が強く、内部仕様が安定せず、インタフェースやデータ形式も含め、コードがころころ書き変わるので、そのへんにかかる API の齟齬や機能の不都合についてはご容赦ください。