ルートラボでルートマップを作成しブログに貼付する方法~Chrome編

こんにちは。からあげです。

昨日はほとんど気温が上がらず、そのまま夜になってしまったので、今朝は随分と冷えて外はマイナス4度だった。
雨はほとんど降っていないので、霜柱は見られない。
凍った硬い地面を歩いて水道に向かう。

20160112-182555-0

薪ストーブのお陰で、濡れタオルで体を拭くのが楽になった。
これまではロケットストーブで沸かした湯で割っていたとはいえ、寒い小屋の中で裸にならなければならなかった。
それが今ではストーブに当たりながら、ゆっくりと丁寧に体を拭くことが出来る。

20160113-090344-0

そとは氷点下なので、洗濯して干しても凍ってしまう。
そこで、今朝日が昇ってから洗って干した。
この時点でも氷点下でいずれ凍ってしまうが、日に当たれば氷が解けてある程度乾いてくれる。
あとは夜になって小屋の中で乾かせば良い。

ルートラボによるルートマップ作成方法~Chrome編

ところで、今日はルートラボでルートマップを作成してブログに貼付する方法(Chrome)を説明するとしよう。

ルートラボとは、ヤフーが無料で提供しているサイクリングコースや道案内などのルートを簡単に描いて公開できるサービスだ。

参考リンク ルートラボTOPページ

文字や写真だけの説明書きだと分かりにくいので、ルートマップをつけると良い。
ブログ内容が分かりやすく格段に華やかとなる。
去年の北海道の旅をブログにアップする時に、後からルートマップを追加してどこで何をしていたのか読者に分かりやすくした。

それではこれからChromeの場合の使い方に付いて説明しよう。

ルートラボ1

ルートラボのトップページ

Yahoo! JAPAN IDでログインしよう。
画像のようなトップ画面が出てくる。
ルートを見るなどの4つのメニューボタンが現れる。

では、上から2番目のルートを描くボタンをクリックする。

シルバーライト画面1

ルートラボのご利用には、Microsoft Slilverlightのインストールが必要です。」という画面が表示される。

Slilverlightとは、マイクロソフトのブラウザプラグインで、 Windowsだけでなく、Macでも無料でインストールでき、ブラウザはInternet Explorer、Firefox、Sarafiに対応。 インストールするだけで、高画質動画やゲームなどが楽しめるものだ。
Chromeで何度かインストールしてみたが、正常にルート作成画面が表示されない。
そう、Slilverlightはマイクロソフト製なので、Google Chromeには対応していないのだ!

JAVAスクリプト版1

Javascript版のルート作成画面

メニューボタンの「ルートを描くJavaScript版(β)」を押したところ。
通常版では開かないのでJavascriptを開いてみた。
見た目は凄いスタイリッシュだが、致命的な欠陥がある。
それは一つ戻るボタンがないことだ。
短いものならともかく、長いルートをノーミスで描くのは至難の業だ。
ルート作成中は、何度も戻って修正をしてゆくので、一つ戻るボタンがないと使えない。

以前は、ここで途方にくれてしまったのだ。
ルートラボを使うためだけにIEで開かなければならないのか、いや、Chromeでもルートラボのルート作成画面を表示させる方法はあったのだ!
コツコツとネットで調べて使い方を勉強した。

この問題の解決法は、Chromeに拡張機能「IE Tab」を追加するだけでいい

それではIE Tab追加の方法を説明してゆこう。

Chrome拡張機能「IE Tab」の追加

クローム拡張機能1

拡張機能画面

Chromeの右上の黒い横線3本のアイコンをクリックする。
そしてその他のツール拡張機能の順にクリックしよう。

すると上の画像のような拡張機能の画面が表示される。
ページの一番下の方の「他の拡張機能を見る」をクリックしてChromeウエブストアに行こう。

クロームアイコン1

Chromeウエブストア

IE Tab」で検索してChromeに追加するの青ボタンをクリックする。
するとChromeにIE Tabの機能が追加される。

20161-13

ウインドウの右上にeのアイコンが表示される。
これがIE Tabのものだ。
右端の黒い3本線はChromeのアイコンだ。

ルートを描く1

もう一度メニューボタンのルートを描くをクリックしてルート作成画面にして、ウインドウ右上にあるIE Tabのアイコンをクリックする。
始めは先ほどのSilverlightをインストールして下さいという表示画出るが、IE Tab画面になると、画像のように東京の地図が表示される。
地図のウインドウの左上に検索ボックスがあるので、地名などのキーワードを入力すると、その場所にジャンプしてくれる。
私はここで富士山と検索した。

終点

ルート作成には、始点にマウスカーソルを合わせてクリックする。
するとそこからルートの作成が始まる。
あとはルートに沿ってポイントを入力してやるとルートが引かれてゆく。

ルートを描くには、道に沿ってルートを描く道ピタモード2点間を直線で結ぶ直線モードの2種類ある。
一般道の場合は、始点と終点を決めてやると道路に沿って自動でルートが引かれる。
ただし、立体交差や有料道路があるところは、思い通りにルートが引けないので、直線モードで引いてやらなければならない。
登山道や普通の道がないような場所は、直線モードで細かにポイントを指定し引いてゆく。

ルート作成に必要な機能は、地図右上の5つのアイコンや左側の拡大縮小のタブ(マウスのセンターホイールでも地図の拡大縮小が可能)などに用意されている。
特に右上の一つ戻るの機能は頻繁に使う。
Javascriptには無かった機能が、ここでは使用できる。
あとは各自で繰り返し練習して自分のものにして欲しい。

ルートの作成

それでは、ここで実際にルートを引いてみる。
富士山の北側にある富士スバルラインの入口から5五合目まで道ピタモードでルートを引いた。

直線モード

五合目から先は登山道となるので、道ピタモードは使えない。
直線モードでこまめにポイントを入力しルートを山頂の剣ヶ峰まで引いてゆく。
大体のルートが分かれば良いということで、大雑把なカクカクしたルートを引いた。
(滑らかにしようとすると非常に手間が掛かる。)

地図の表示

ルート作成が完了したところ

縮小表示してルート全体を表示させた。
地図の下には、グラフと点数、距離、全体平均斜度、最大標高差表示される。
ルート作成時は、水色の三角マークをクリックしてグラフを閉じて地図を大きく表示させるとやりやすい。

ゴールまでルートを引き終わったら、下の方の「ルートを保存」をクリックする。
この時、「ルートを見る」のチェックマークを外すと非公開となる。
「ルートを保存しますか?」の確認メッセージが表示されるので、OKをクリック。
続いて「ルート再生ページを表示しますか?」が表示されるのでOKをクリック。
キャンセルをクリックすると編集を続行する。

IEタブ表示1

ルートを保存したところ。
画面は真っ白となっている。

IETabが有効のままだとこのような表示となる。
右上のIETabのバツ印をクリックして終了させると通常モードで表示される。

無事ルートマップが表示されたら、ブログ貼付用のHTMLコードを取得する。
表示されている地図の右下にある三角の再生ボタンを押せば、標高グラフと連動してルートが再生される。
コード取得のための設定は、画面下の方に二種類表示されている。

ルートを画像として貼り付ける

ルートを画像として貼り付ける1

地図は固定で拡大縮小が出来ないシンプルなもの。
表示スピードは早い。

サンプル

形 横長、大きさ 中、地図の種類 地形図で貼り付けた。

ルートを動かせる地図として貼り付ける

2016-1-13-2

地図の移動、拡大縮小、距離標高グラフの表示、ルートを再生することが出来る。
動きがあって分かりやすい反面、表示スピードは遅い。

サンプル

形 横長、大きさ 中、地図の種類 通常の地図、標高グラフ あり、タイトル ありで貼り付けた。

右下の三角の再生ボタンをクリックするとスタートからゴールまでルートがゆっくりと再生される。
上の方のボタンを押せば早送りも可能。

ルートを画像で保存するルートを動かせる地図として貼り付けるのどちらかを選択し、設定してHTMLコードをコピーする。
あとは自分のブログにコードを貼り付けるのみ。
WordPressの場合は、編集モードをテキストに切り替えてからコードを貼り付ける。

ルートの作成は、8,000点を越えると保存が出来なくなる。
サンプルのルートマップの点数は569点だ。
一日分のルートマップには十分な量だが、長期の長いルートとなると保存出来なくなる。

まとめ

以上が大体のルートラボを使用したルートマップの作成方法だ。
ブラウザがChromeの場合、ポイントとなるのは、拡張機能のIE Tabを使用することだ。
あとは、IEでのように作成できる。
いつまでルートラボのサービスが提供されるか分からないが、今後ともビジュアル面を大幅に強化出来るルートラボを使ってゆきたい。
サービスが終わってしまったら、その時別な方法を考えるとしよう。

ふぅ~今日も頭が沸騰寸前だ。
時間が掛かった割には大雑把な説明になってしまったので、暇な時にでも追加して分かりやすくしようか。
それでは今日はこれでおしまい。

追記(2016.3.6)

あらかじめSilverlightをインストールしておかないと、IETabを使用しても「ルートラボのご利用には、Microsoft Slilverlightのインストールが必要です。」というエラー画面が表示される。
SilverlightをインストールしてからChromeを立ち上げIETabを使用する。
ちょっと手間だが、細かいことは気にしない。

参考リンク  Microsoft Silverlight(ダウンロード先)

おわり

スポンサーリンク
おすすめ記事
スポンサーリンク