斜度を細かく知れるツールの続き（グラフを表示してみた）

こんにちは

先日、GPXファイルをアップロードしチェ、一定距離毎の平均斜度等をCSV形式で生成するWebツールを作りました。

最初はCSVデータをコマンドで出力するツールでした

→　斜度を細かく知れるツールを作ってみようかなと思ってみました

次のはバージョンアップして、Webツールとして用意して、GPXファイルをアップロードしてCSVデータを生成する所まで作りました。

→　斜度を細かく知れるツールの続き（ファイル読み込み）

CSVデータからExcel等でグラフを作ってみましたが、イマイチかなと思ったのですがコメント欄で、たかにぃさんからアドバシス？を頂いた案を、ありがたく参考にして、今回のグラフを表示する所まで作ってみました。

データはあるので、グラフを表示すれば良い訳なので、グラフを描画するライブラリ（ミドルウェア）を探してみます。

ツールは、今までphpで作ったのでphpで使える物に限定してみます。

プログラム言語は、ruby,phytonとかもかじった事があるので、使ってみたい気もしますが、環境を用意するのがめんどくさくなったので、やっぱり何もしないで使えるperl,php辺りが楽ちんそうです。(^_^;

jpGraph, pChartと言うのが有って、グラフを生成するのは出来そうですが、同じデータのなかで色を変更する。。と言うのができそうにありません。pChartは途中まで作ってみましたが、やっぱり無理そうです。

データを用意して定義すれば、勝手にグラフが生成できるのは凄い便利なんですが。グラフが特殊すぎたか。。

と言う事で、初心？に帰って、GDライブラリを作って、線をゴリゴリ引いてグラフを作るか。。

なんか久しぶりだな。。

昔はそうでしたが、最近便利なツールが多くて。。人間楽するとダメになりそうです（笑）

と言う事で、それっぽいのができました。スマホでも動くと思いますが、全く動作検証していないんので、画面からはみ出て見づらいかも？です。

→　https://road-bike.net/tools/gpx/calc_slope_graph.html

軽く説明します。

上のリンクから、Webページを表示すると、下の様なページが表示されます。

上から、「斜度計算単位(m)」には、集計単位を指定します。初期値は今は50mです。

ここで指定した距離を進む毎に、1ポイント分のデータが生成され、その間の平均斜度等が算出されます。

これが50mだと、50m移動する間に変化があった高度差から平均斜度を計算します。例えば、1000mだと、1km毎になります。サイコンなどで記録したデータ等は数秒単位で記録されます。1m等と極端に短くすると、その間にデータが記録されていなくなり、計算結果が微妙な事になりそうです。できるだけ、最低でも1つ又は、2つぐらいのデータが存在する様な距離を指定すると良いと思いまs．

次の「GPXファイル」は、アップロードするGPXファイルを指定します。指定したGPXファイルは、処理後すぐに削除されますが、エラーが出た時等の保存期間は、前の記事をご参照ください。GPXファイルは削除されますが、次のページに表示されるCSVデータは処理後30分間はサーバ上に残ります。と言うは、グラフ生成が別プログラムになってて、CSVファイルを元に生成するので、ファイルが無いとページ表示後に、グラフ画像のダウンロード（保存）ができなくなりますので、30分間だけ保持しています。

また、GPXファイルはGarmin Connect,Strava,ルートラボのデータで検証しました。他のデータでも出来る筈ですが、ルートラボなども含めて、GPSの位置情報と、高度が保存されていないGPXファイルをアップロードしても処理できませんので、ご注意ください。

これで、「処理開始」ボタンを押すと、グラフが表示されます。

下側におまけで、「斜度色分けマップ」があります。

Level1から、9までの9段階の斜度でグラフの色分け表示をします。

固定にすると、ルート毎で緑しか出なかったりして楽しくないので、変更できる様にしてあります。

下側に、ボタンが2つ有って、ブラウザ上に設定内容を保存するボタンと、初期化するボタンを用意しました。

説明は省略します。

あと、手抜きで相関チェック等はしていませんので、設定する時に斜度の範囲がlevel1からlevel9の間で逆転したり、範囲におかしな値を設定しない様に注意してください。基本的にはLevel1から順に見ていくので最初に見つかった範囲で表示される。。はずです。極端な所では、Level1の右側（終了）に100%とか書いちゃうと、Level1の色でしかグラフが表示されないはずです。(^_^;

あと、色は面倒なので固定しました。

頂いたアドバイスの色でやってみましたが、色の濃淡で表現しないと、ぱっと見て斜度の強さが理解できなかったので、緑→黄→赤の濃淡で表現してみました。

で処理すると、前とほぼ同じ画面の下側に、グラフが出ます。

この間の、ツールド美ヶ原のデータで処理してみました。

30m刻みで、上りだけ？と思う所で分割してみました。

激坂だった所などが表現できてて、自画自賛です（笑）

30分間だけグラグだけもダウンロードできます。

往復の全データを入れてみます。

ついでに、ツール・ド・つくばのルートを。。不動峠が。。。黄色いです。（笑）

なかなか、面白くできたと思います。いかがでしょうか？