アプリを使ってライド記録を地図上に描こう

いままでに走ったことのある場所を可視化したい。他の人と自分の走行記録を見比べたい。知らない道を手早く見つけたい。

スポーツ自転車に乗ってサイクルコンピュータで走行記録をとっている人であれば、現在までの走行記録をまとめて表示してみたくなることがあるものです。およそ半年前に Garmin / Strava の走行記録をまとめて表示するという記事を書いたところ、今でも毎日、それなりのアクセス数がありますので同じことを考えている人も少なくないのではないかと推測されます。

実際に表示してみると、もう走り尽くしたと思っていた地域にも行ったことがない場所が、そこかしこに残っていたりと、新しい発見につながるものです。

しかし、上の過去記事に取り上げた方法では、多少の事前知識と実行環境の準備が必要となりますので、誰でも直ぐに実現できるというわけではありません。

そこで今回はデスクトップアプリを使用して、1つ以上の FIT ファイルから位置情報を抜き出して、ウェブブラウザ上で地図に表示することを行います。

手っ取り早く使い方だけを知りたい人は、以下のリンクを見てください。


FITファイルから位置情報を取り出して地図上に表示する方法





そんなものがあるなら、どうして最初に紹介しなかったのかと言うと、無かったので(少なくとも私が探した限りでは見つからなかったので)自分で作ったからです。

ただし、要素技術に用いた Electron に触れることも今回が初めて、シングルページアプリケーション (SPA) に挑戦することも今回が初めて、そもそもフロントエンド自体の経験が全くありませんので、出来栄えについては保証できません。

当初は「週末の2日あれば完成するかな」と軽く考えていたところ、実際には見積もりの1.5倍ぐらいの作業時間が完成までに必要となりました。

とにかく未経験なので SPA のファイル構成や暗黙の規則などの勝手が分からないですし、標準エラー出力の表示からモジュールの読み込み、パッケージビルドまで躓き続けて、ドキュメントも部分的にしか目を通せていないので、一応は動くものを作成した現在においても完全に Electron を理解できたとは到底言えません。

と言うか、1年前の情報でも古くて役に立たなくなっていたりするのに、Electron どころか webpack に elecron-builder にと調べることがありすぎて沼が深すぎます。 JVM も Linux もインストールされていない環境でもプログラムを動かせるぞと思って飛び付いたことを後悔するレベルです。

それでは何故、こんな記事やコードやプログラムを公開しているのかと言えば、恥ずかしくても練習しないと上達しないからです。

とくに人が直接的に操作することを前提としたプログラムは、実際に触って動かしてみないと評価できません。そのために開発中においても評価目的でバイナリを公開しています。

現状は以下のとおりです。


読み込めるのは FIT 形式のファイルのみです(GPXファイルへの対応は未定)
FITファイルの保存形式はSI単位系のみ対応しています
ポリライン描画に使用できるのは赤のみです(何を基準に色を変えるかによって様々な表現ができるので実装を保留中)
地図タイルは OSM のみです
一度に読み込めるファイル容量はお使いの環境に依存します

緩募:アイコン、 Wahoo および CATEYE のアクティビティファイル、新機能のアイデア

私の会社ではありませんけれども、同業の知り合いの会社も3月からレイオフが実施されていていて、業績が悪いのにめちゃくちゃ忙しいので、通常にもまして自由時間が少ない(作業の進展が遅い)です。


具体的な使い方はこちらになります


パナレーサー(Panaracer) パナレーサー 日本製チューブ2本入 [W/O700x23~26C] 仏式バルブ 0TW700-25F-NP-2 仏式バルブ34mm

OpenCycleMap で見つけるサイクリングロード

感染症流行の収束のために自宅待機が要請される昨今、ライドイベントの開催や泊りがけの旅行はおろか、輪行して近郊の山間地に出かけたり、名物料理や特産品を楽しむことも実質的に不可能になっています。

健康維持のための運動は容認されているものの、感染者と接触する、あるいは無自覚に他人に感染を拡げる可能性を考慮すると、人が密集する公園や海岸、事故の危険性の高まる悪路や山道、あるいは途中休憩が必要となる遠方への外出は避けるべきと考えられます。

ライドに出かけるにしても、人通りも疎らな午前4時頃に出発して、字義通りにどこにも(自販機にすらも)立ち寄らず、60km 程度の距離を走って帰宅するのであれば、誰とも接触せずに健康維持に必要な運動量を確保することも難しくはありません。

「うちの近所には適切な場所がない」と思われるかも知れませんが、OpenCycleMap を覗いてみると意外と知られていないサイクリングロードが身近にあったりするものです。


OpenCycleMap.org – the OpenStreetMap Cycle Map
https://www.opencyclemap.org/





多摩川から幾度と無く奥多摩に出かけている人でも浅川には行ったことがなかったり、朝霞水門を毎日のように通り過ぎている人でも黒目川(目黒川の誤植ではありません)の存在を知らなかったりすることは珍しくはありません。

意外と知っているようで知らないのがサイクリングロードです。

サイクリングロードの存在そのものが広報されていないことに加えて、どこも出入り口が分かりづらく、途中で未舗装路や行き止まりに突き当たったり、橋を渡って対岸を進まなければならなかったりと全容把握が容易ではないことから、サイクリングロードの情報は常に不足しています。

調べても欲しい情報が見つからないことも普通ですし、そもそも情報そのものが無いと思われていることも少なくありません。

その点、OpenCycleMap では一つのサイクリングロードの沿線だけではなく、地域全体の地図に複数のサイクリングロードが同時に表示されるので、始点や終点だけにとどまらず、サイクリングロードまでの道筋や行き止まりに遭遇した際の代替経路までをも含めてライドプランを俯瞰することができます。

以前に、茨城県のサイクリングロード延伸計画は隣県も意識すべきと書いたことがありますが、OpenCycleMap を見ると現状でも小貝川と利根川、印旛沼、新川、花見川とをつないで、つくばの万博記念公園から幕張メッセ(サイクルモード会場)まで、信号も踏切もほとんどない道を通って行けることが一目でわかります。

ところが、そうした情報は一般的には共有されていませんので、何度も現地を訪れている人でなければ、つくばから千葉まで(あるいは江戸川区の葛西臨海公園まで)複数のサイクリングロードを経由して行くことができるという発想には思い至らないわけです。

このような、おおよそ地元民にしか知られていないようなサイクリングロードが、OpenCycleMap には少なからず掲載されています。

もちろん、善意のボランティアが編集しているものなので、浅川や浜名湖や網走常呂線のように情報が欠落していたり、統一の基準を欠いているために多摩湖自転車道のような自転車走行には不適な遊歩道や普通の一般道が混入していたりと、まだまだ不完全な部分も無いわけではありません。

護岸工事や災害復旧のために一時的に通行禁止になっているところも反映されていませんし、掲載時期も一定ではありませんので、いつの時点の情報なのかも判然としません。

しかし、それでもなお地図を見直すたびに新たな発見があり、行くべきところが容易に把握できる点においては非常に有用です。

早期収束を考えると自宅でローラー台を回していることが最善となりますが、どうしても自宅で必要な運動量を確保できない環境なのであれば、せめて他人と接触しない時間帯に、ほかに誰も来ない場所で運動不足を解消したいものです。

過去の記事を読んでいる人には繰り返しになりますが、全容が明らかになっていない未知のウイルスに感染しても良いことは一つもないですし、重症化して死亡までいかなくとも、肺に後遺症が残ればトレーニングどころか運動を続けることすらも難しくなるかも知れません。

自分自身もそうなる可能性が常にあることを認識した上で、気を緩めずに危険回避に努めてください。


実は以下のように Leaflet を読み込んでやると記事中に OpenCycleMap を埋め込むことができます。

ただし、この場合 Thunderforest で入手できる API key が誰の目にも明らかになってしまう問題があります。API key に対する保護などは特になさそうなので、無闇に公開しない方が良さそうです。

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" />
  <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
</head>

<body>
  <div id="map" style="width:450px"></div>
  <script type="text/javascript">
    const link = '';
    const map = L.map('map');
    map.attributionControl.setPrefix('');
    L.tileLayer(link, {
      attribution: 'Maps &copy; <a href="https://www.thunderforest.com">Thunderforest</a>, Data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMapcontributors </a>',
      maxZoom: 22
    }).addTo(map);
    map.setView([35.676, 139.650], 10);
  </script>
</body>

</html>

ロードバイクに使えるゴムじゃない輪ゴム

先日、とある画像を掲載したときに思わぬを反応をいただきました。このセーフティライトをどうやって固定しているのか、と。

正解はポリウレタン製バンドです。


S日清紡 モビロンバンド55X2X0.3透明/洗浄タイプ100G MB55023TA100G

その性質は「ゴムじゃない輪ゴム」というキャッチコピーそのままで、カーボンフレームやステム、クランクなどへの攻撃性はそれほど高くないので、ライトだけではなくセンサーやサイコンの固定などに利用できます。

硫黄成分も含まれていないので、自作の電子工作品(計測機器やGPS発信機など)をフレームに巻きつけたりするときにも使用できます。

私がロードバイクにサイコンなどを搭載しはじめた頃には、既に一般的に見かけるほど普及している印象があったので、誰もが使っているものだと無意識的に思いこんでいましたが、もしかしたら私の周辺の人の間だけで流行していたのかも知れません。




透明なので目立ちにくい反面、本体の中を光が透過しますので紫外線による劣化も早いですし、柔らかいので引き伸ばして使っていると疲労で切れたりもしますが、複数個をまとめて巻いておけば全部が同時に切れることはほとんどありません。

それでも2ヶ月間ぐらい継続使用していると数本が劣化して切れてきますので、そのタイミングで新品に交換してやれば、大切なライトやサイコンなどを紛失することもありません。少なくとも5年ぐらい使用してきた間に、バンドが切れて何かを紛失した経験は私には一度もありません。

1つのライトやセンサーなどを固定するのに豪快に何本も巻いていますが、1袋購入すると 1,100 本以上も手に入りますので早々にストックが尽きることもないです。

私も5年も昔に購入したものが、まだ半分以上も残っています。

基本的には何にでも利用できる反面、固定力はそれほど強くないため、地面からの衝撃や振動で固定しているライトやカメラなどの向きが変わったり、サイコンのボタンを押したときに位置がズレたりすることはあります。

まあ、これを使ってカーボンエアロハンドルにサイコンを固定しているのは、私の知り合いぐらいだと思いますけれども、「不可能ではない」ぐらいに考えておいたほうが無難です。

その一方で簡単に取り外せるということは、自転車を洗車したり、小物を外して撮影する時には大きなメリットになります。固定力が弱いということは、気軽に付け外しができるということで、意識していると使い道が広がります(ただし、取り外しを繰り返していると劣化も早くなります)。

安価で大量に入手できますので、マルト(MARUTO) 車輪固定フック や結束バンドと一緒にツール缶やサドルバッグに入れて予備バンドをいくつも携帯しておくと、思わぬところで役に立ってくれることがあります。


TRUSCO(トラスコ) ナイロン結束バンド(耐候性タイプ) 3.6×203 100本入

いまさら、これを敢えて取り上げる必要があるのかなとも思うほど有名だとは思いますけれども、物自体はとても良いので、持っていると様々な場面で便利に使えます。良いものはやっぱり良いです。