このブログを検索

大文字小文字を区別する 正規表現

Atelierで“KMLファイル”が含まれるブログ記事

2016年12月11日

隠居の散策:千早赤阪村金剛山のロープウェイに乗る

昨年の暮に、学生時代に参加していた教育キャンプ場のキャンプ長だった方が亡くなった。一周忌前に、偲ぶ会が開かれた。それに参加するために、埼玉から同期の友人がやってきた。その日、梅田で宿泊した翌日、金剛山に行きたいというので、付き合った。
 今年のはじめ登山中に脚の筋肉を痛め、まだリハビリ中ということで、ロープウェイで上るという。奈良の友達二人も付き合ってくれた。
 その一人が何回か来たことがあり、山上を案内してくれた。頂上にある葛木神社にも参って、さわやかな秋の日を楽しんだ。
 記録は、埼玉の友に教えてもらったスマホのアプリ<山旅ロガー>で記録し、それから出力したKMLファイルをもとに、Google Map で歩行地図を作成してみた。

2016年11月13日

隠居のパソコン備忘録:Google Map で旅行地図を作成する

先日から、独自のルート地図を作るなどで Google Map をいろいろといじっていて分かったのだが、スマホアプリの山旅ロガーなどで記録したKMLファイルがなくてもルートを表現した旅行地図を作成をできることが分かった。
 当サイトのブログ Studio YAMAKO の執筆者は旅行した記録をこまめにアップロードされている。この旅行地図を、今までは Google Maps API という Javascript を使ったユティリティで作成して、Studio YAMAKO に、収載してもらっていた。。
 今回、郡上八幡や高山をバスツアーした記録を4回に分けてブログにアップロードされている。これを参照して旅行ルート地図を作成したので、手順を記録として残して置きたいと思う。

Google Map でルートつき旅行地図を作成する方法
  1. Google Map を起動する。
  2. 画面左上の検索窓左にあるメニューアイコンgmap02.JPGをクリックすると表示される「マイプレイス」をクリックすると表示される画面で、さらに「マイマップ」をクリックすると枠の下の方に地図を作成という青い文字が現れる。
  3. 地図を作成をクリックすると「無題の地図」と表示されたポップアップが表示される。
    gmap03.JPG

  4. ここで、ツールアイコン群から、ルート追加ボタンtour12.JPGをクリックし、左ボックスの下に表示される交通手段がになっていることを確認して、その下の枠に出発点から順次、マーカーを立てたい場所を入力する。すると、下のスクリーンショットのように、ルートが自動的にルートが表示される。
    tour11.JPG

  5. 地点を入力し終えると、下のようにルートが描画される。地点名は、例えば平湯温泉と入力すると何地点か候補を表示してくれるので、適切と思われる名前を選択すればよい。
    tour13.JPG

  6. この地図を左ボックスの右上にあるメニューボタンgmap16.JPGをクリックすると表示されるリストから、「KMLにエクスポート」を選択する。すると、下のようなボックスが表示されるので、セレクトボックスで<XXX地点からXXX地点へのルート>を選択し、<KMLファイルにエクスポートします・・・>にチェックを入れて、【ダウンロード】ボタンをクリックする。
    tour14.JPG

    KMLファイルに任意なファイル名をつけて、任意のフォルダーに保存する。

  7. 一旦、Google Map を閉じて、再度起動する。そして、上記 1. 2. まで実行する。

  8. ここで、左上ボックスの無題レイヤーの下のインポートをクリックする。すると、<インポートするファイルの選択>という画面が出るので、「アップロード」タグになっているのを確認して、【パソコンからファイルを選択】ボタンをクリックする。

  9. すると、ファイルを選択する画面となるので、先ほど保存した KML ファイルを読み込む。すると多分下のスクリーンショットのような縮尺の大きな地図が表示される。
    tour16.JPG

  10. 地図の縮尺の大きさは、右下のtour17.JPGボタンでも調整できるが、左ボックスの上部の「プレビュー」をクリックすると下のように適切な大きさで表示してくれる。
    tour15.JPG

  11. ここで、ボックス上部の「編集します」をクリックすると各マーカーを編集できるようになる。マーカーにカーソルを合わせクリックすると、下のスクリーンショットのように、マーカーの色やスタイル、リンク先のURL 表示、関連写真や動画の挿入などができるツールアイコンが表示される。
    tour19.JPG

  12. 用意されているマーカのスタイルは、例えば下の例のように、場所のジャンルだけでも数多くのスタイルの中からチョイスできる。
    tour18.JPG

  13. そのようにして、Google Map として機能する旅行地図を作成したものが以下の地図である。


2016年11月11日

隠居のスマホ備忘録:山旅ロガーを使う。測定結果を Google Map に表示する方法

前回のYahoo!地図印刷のエントリーを書くために、いろいろとウェブサーチをしているときに、Yahoo! が地図上にルートを描くことのできる「ルートラボ」というユティリティを提供していることが分かった。
 この「ルートラボ」を使って、ご近所散策ルートを作成したのが、下の地図である。作成方法などについては、ルートラボの使い方に詳しく載っている。
 旅行後の記録として、地図に記載しておくのは便利かもしれないが、まだ使い方をよく理解していないので記録ができない。

Yahoo! ルートラボによる地図作成

 

 この「ルートラボ」の学習と関連して、Google MAP での地図作成を再度復習してみると、前回2014年11月7日に記載した手順からさらに進化していることが分かった。 それで上で「ルートラボ」で表示した近頃散策しているコースを、スマホのアプリ山旅ロガーで記録した結果をもとにルート地図を作成した方法を記録しておきたいと思う。
 最新の方法で作成した地図を以下に示す。 

Google Map での地図作成



 2014年11月7日に記載した手順を最新の方法に修正して記録しておきたい。
山旅ロガーで記録したKML ファイルで歩行記録地図を作成する方法
 
  1. Google Map を起動する。Google のアカウントを持っていない場合には、新たに登録する。アカウントをひとつ持っておけば、Gmail(Web mail)、Google chrome(ブラウザ)、You Tube 、Google Map(地図検索)、Google ドライブ(クラウド型データ保存)などを利用できる。特に、Google ドライブは、スマホからデータを転送するときに便利なので、インストールしておきたい。
    起動すると登録したアカウントの場所を中心とする地図が表示されるはずである。

    Google 地図検索画面
    gmap01.JPG

  2. 画面左上の検索窓左にあるメニューアイコンgmap02.JPGをクリックすると表示される「マイプレイス」をクリックすると表示される画面で、さらに「マイマップ」をクリックすると枠の下の方に地図を作成という青い文字が現れる。
  3. 地図を作成をクリックすると「無題の地図」と表示されたポップアップが表示される。
    gmap03.JPG

  4. 上の画面で、インポートをクリックすると、下のようにKMLファイルを選択する画面となる。私はスマホで山旅ロガーに記録したKMLファイルを Google ドライブに転送しているので、<Google ドライブ>タグをクリックして <マイドライブ>を開き収納されているKMLファイルをインポートした。
    gmap04.JPG

  5. 最近の散策で山旅ロガーを使って記録した KMLファイルをインポートすると、下のスクリーンショットのように表示された。
    gmap07.JPG

  6. このとき、<プレビュー>タグをクリックすると適切な縮尺で表示される。
    ここで<編集します>をクリックすると下のスクリーンショットのように編集のためのボタンガ表示される。
    この手順以降の地図修飾手順がが、2014年11月7日のエントリーと大きく変わっている。
    gmap06.JPG

  7. <マーカーを追加>ボタンgmap11.JPGをクリックするとカーソルが十字マークになるので、目的とする位置でクリックしてマーカーを設置する。
    マーカーを設置するとその位置にポップアップ画面が表示されると同時に、左のポップアップ画面のマーカーのタイトルにカーソルすると、スタイルアイコンgmap13.JPGが出て来る。ここで<マーカーアイコンの色や形を選択できるようになっている。
    gmap14.JPG
  8. マーカーを保存し、再度マーカーをクリックすると、編集アイコンが表示されるので、<編集ボタン>でリンク先を挿入したり、<カメラボタン>をクリックして該当マーカーに関する写真をアップロードしたりできる。
    gmap15.JPG


  9. 上のいろいろなツールを使って、地図を編集し終わったら、左上のボックスの<コマンドボタン>gmap16.JPGをクリックすると表示されるボックスで「地図をコピー」を選択すると「Google マップ」⇛「マイプレイス」⇛「マイマップ」に保存できる。
    上の同じボックスで、「自分のサイトに埋め込む」を選択すると、HTMLコード( <iframe ・・></iframe>)が表示されるの、これをコピーしてブログに貼り付ければ、ブログ上に作成したMapが表示できる。

 行程を記録する KML ファイルがあれば、ルート地図の作成はなんとかなりそうである。もう少し学習して、旅行地図を google maps API の助けなしに作ってみたいと考えている。

2014年11月 7日

隠居のスマホ備忘録:山旅ロガーを使う。(3)測定結果を Google Map に表示する他の方法


 山旅ロガーで得られたトラッキング・データ KML ファイルをGoogle Map で表示する方法については、前回のエントリーで記録した。そのような作業をしているうちに、もっと簡単で便利な方法を Google が提供していることが分かった。今回は、その方法について記録しておきたいと思う。

 地図検索に使ってきた Google Map は、今年の2月くらいに新しくなっている。
 新しくなった Google Map では、オリジナルのカスタム マップを作成して共有することができる。この場合に、山旅ロガーで得られる KML ファイルを使うことができる。

 作成方法を、以下順を追って記録する。
  1. Google Map を起動する。Google のアカウントを持っていない場合には、新たに登録する。アカウントをひとつ持っておけば、Gmail(Web mail)、Google chrome(ブラウザ)、You Tube 、Google Map(地図検索)、Google ドライブ(クラウド型データ保存)などを利用できる。
    起動すると登録したアカウントの場所を中心とする地図が表示されるはずである。

    Google 地図検索画面
    new-map-01.JPG

  2. 画面左上の検索窓をクリックすると表示される「マイマップ」をクリックすると、作成ボタンが現れる。

    new-map-03.JPG

  3. 作成ボタンをクリックすると「無題の地図」と表示されたポップアップが表示される。
    new-map-06.JPG

  4. 上の画面で、インポートをクリックすると、下のようなKMLファイルを選択する画面となる。どのような形式のファイルか確認はしていないが、CSV ファイルでもOKのようだ。
    new-map-07.JPG

  5. 前回のエントリーで使った山旅ロガーで得た KMファイルをインポートすると、下のスクリーンショットのように表示された。
    new-map-08.JPG

  6. この画面で、例えば 15 のマーカーをクリックするとこの地点について編集できる画面となる。
    new-map-09.JPG

  7. この編集画面で、様々なことができる。編集ボタンをクリックするとマーカーをクリックした時に表示されるテキストやURL へのリンク、写真の表示などを指定できる。
    また、左枠内のマーカーにカーソルを合わせた時に表示されるnew-map-12.JPGボタンをクリックすると下の画面のように数多くのアイイコンを選択できるようになる。アイコンは、自分が作成したものでもOKのようだ。
    編集画面の上部にあるツールアイコンのライン描画new-map-13.JPGを使うと自由に線を引くことができる。
    また、地図の表題を変更するのもこの画面でできる。
    new-map-10.JPG

  8. 上の編集のためのツールを使って、下のような地図を作成することができる。
    new-map-11.JPG

  9. この画面の右上にある緑の「共有」ボタンをクリックするとメールやFacebookでこの地図を送信できたり、ブログなどで公開できたりする。
    右をクリックすると地図が表示される。駅への道地図 


 このGoogle Mapでオリジナルのカスタム マップを作成する方法を使えば、散策するときにスマホの山旅ロガーを起動し、行動を記録しておけば、ブログのエントリーに面白いかもしれない。いろいろと試してみたいと思う。

2014年11月 3日

隠居のスマホ備忘録:山旅ロガーを使う。(2)測定結果を Google Map に表示する


 前回、スマホのアプリ山旅ロガーを使う方法について記録した。
 このトラッキング測定結果は、GPX というファイルとKML という形式のファイルでPC に送信することができる。GPX ファイルについては、ネットにあまり自分がやりたいことにぴったり来る情報がない。KMLファイルは、XML ファイルの一種のようなので、多少馴染みがあるので、こちらでトライしてみることにした。
 PC への送信方法は、メールにファイルを添付する方法と Bluetooh で送信する方法がある。PC の近くでの作業では、どちらをとっても大差はない。

測定結果をPCに送信する
測定結果ファイルの機能ボタンをタップすると 左の画面で「共有・出力」ボタンをタップすると;クリックすると大きな写真になります。 ファイル送信方法の選択画面;クリックすると大きな写真になります。"
測定結果一覧で該当ファイルの機能ボタンをタップすると、上のような画面になる。 左の画面で「共有・出力」ボタンをタップすると右の画面になる。 上の画面で Gmail または Bluetooth を選択して、指示に従いPC に送信する。


上の真ん中のスクリーンショットにあるように、KMLファイルを出力するときには、3つの形式から選択できる。
  • ①トラッキングしたルート(ライン)のみを表示する。
  • ② ①に時刻をつける
  • ③ 測定地点にマーカーを立て、時刻と text を表示する

 このような KMLファイルをPC に取り込んで、Google Maps API 表示するサンプルを見つけた。
 このサンプルコードを参考に、自宅から栂・美木多駅までの測定結果の ② の形式KMLファイルを取り込んだHTMLページを作成すると次のように表示された。


 上の地図は、Google Map の機能を持っているので、ストリートビューが見られるなど、駅から自宅までの道案内に有用かもしれない。

 同じトラッキングデータを上の ③ の形式で取り込んで、上のサンプルコードの kml アドレスを変更して Google Map に表示してみると、測定地点のマーカが連なって表示される。
 この時のKMLファイルの中身を覗く方法がわからなかったが、KMLがXMLファイルの一種であることにヒントを得て、XML notepadで開いてみると、これで編集できることが分かった。(もちろん、秀丸のようなテキスト・エディタでもできる)
 だが、固有のタグについては、かなりの学習が必要なようだ。とりあえず、分かりそうなタグに見当をつけて、試行錯誤を繰り返して見た。

 そのようにして作ってみた地図を下に表示する。


  この地図では、もともと38個あったマーカーを間引きして9個にし、
  • 地点1を"自宅"の文字に置き換え、
  • 駅への通り道にある風邪を引いた時などにお世話になる清水内科近く(15の地点)にはGoogle サーチの結果リンクを、
  • 24の地点(池のそば)のマーカ(24の地点)には、その地点で撮った水鳥の写真を表示するリンクを、
  • 終点の栂・美木多駅には、泉北高速鉄道のサイトで表示される栂・美木多駅ページヘのリンク
を挿入してみた。
  写真表示には、撮った写真をかっこ良く表示させる、Google Maps API を使って地図を作成する時に使っている、lightbox のコードを追加してみると上手く動いてくれた。

 上の地図のためのコードは、以下である。

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\" xmlns:v=\"urn:schemas-microsoft-com:vml\">
<head> 
<meta name=\"viewport\" content=\"initial-scale=1.0, user-scalable=no\" />

<!-- jQuery lightbox2.51 -->
<script type=\"text/javascript\" src=\"http://n-shuhei.net/atelier/Jquery2.51/js/jquery-1.7.2.min.js\"></script>
<script type=\"text/javascript\" src=\"http://n-shuhei.net/atelier/Jquery2.51/js/lightbox.js\"></script>
<link rel=\"stylesheet\" type=\"text/css\" href=\"http://n-shuhei.net/atelier/Jquery2.51/css/lightbox.css\" media=\"screen\" />

<script type=\"text/javascript\" src=\"http://maps.googleapis.com/maps/api/js?sensor=false&hl=ja\"></script>
<script type=\"text/javascript\">
  function initialize() {
    var initPos = new google.maps.LatLng(34.490435, 135.482852);
    var myOptions = {
      noClear : true,
      center : initPos,
      zoom : 15,
      mapTypeId : google.maps.MapTypeId.ROADMAP
    };
    var map_canvas = new google.maps.Map(document.getElementById(\"map_canvas\"), myOptions);
    
    var kmlUrl = \"http://n-shuhei.net/atelier/maps/KML-test/141025P.kml\";
    var kmlLayer = new google.maps.KmlLayer(kmlUrl);
    kmlLayer.setMap(map_canvas);
  }

</script>
  </head>

<body onload=\"initialize()\">
  <div id=\"map_canvas\" style=\"width:100%; height:500px\"></div>
</body>
</html>


 ここで、指定しているKMLファイルは、テキストコードは以下である。実際の編集は、XML notepad で作業している。


<?xml version=\"1.0\" encoding=\"utf-8\"?>
<kml xmlns=\"http://www.opengis.net/kml/2.2\">
  <Document>
    <name><![CDATA[2014-10-25 09:15:02]]></name>
    <description><![CDATA[自宅ー駅:2014-10-25 09:15~2014-10-25 09:33]]></description>
    <Placemark>
      <name>自宅</name>
      <description>2014-10-25 09:15:02:</description>
      <TimeStamp>
        <when>2014-10-25T00:15:02.000Z</when>
      </TimeStamp>
      <Point>
        <coordinates>135.48277,34.490517,30</coordinates>
      </Point>
    </Placemark>
    <Placemark>
      <name>5</name>
      <description>2014-10-25 09:16:44</description>
      <TimeStamp>
        <when>2014-10-25T00:16:44.000Z</when>
      </TimeStamp>
      <Point>
        <coordinates>135.48332,34.49017,37</coordinates>
      </Point>
    </Placemark>
    <Placemark>
      <name>10</name>
      <description>2014-10-25 09:18:55</description>
      <TimeStamp>
        <when>2014-10-25T00:18:55.000Z</when>
      </TimeStamp>
      <Point>
        <coordinates>135.48485,34.489635,33</coordinates>
      </Point>
    </Placemark>
    <Placemark>
      <name>15</name>
      <description><![CDATA[<a href=\"https://plus.google.com/104149416183172006475/about?gl=jp&hl=ja\">清水内科</a>]]></description>
      <TimeStamp>
        <when>2014-10-25T00:21:05.000Z</when>
      </TimeStamp>
      <Point>
        <coordinates>135.48608,34.488583,45</coordinates>
      </Point>
    </Placemark>
    <Placemark>
      <name>20</name>
      <description>2014-10-25 09:23:15</description>
      <TimeStamp>
        <when>2014-10-25T00:23:15.000Z</when>
      </TimeStamp>
      <Point>
        <coordinates>135.48712,34.487377,48</coordinates>
      </Point>
    </Placemark>
    <Placemark>
      <name>24</name>
      <description><![CDATA[<a href=\"http://n-shuhei.net/atelier/photo_birds/DSC04864.JPG\" title=\"\" rel=\"lightbox[]\">マガモ交雑種</a>]]></description>
      <TimeStamp>
        <when>2014-10-25T00:25:00.000Z</when>
      </TimeStamp>
      <Point>
        <coordinates>135.48792,34.486824,46</coordinates>
      </Point>
    </Placemark>
    <Placemark>
      <name>29</name>
      <description>2014-10-25 09:27:12</description>
      <TimeStamp>
        <when>2014-10-25T00:27:12.000Z</when>
      </TimeStamp>
      <Point>
        <coordinates>135.48877,34.48632,54</coordinates>
      </Point>
    </Placemark>
    <Placemark>
      <name>35</name>
      <description>2014-10-25 09:30:48</description>
      <TimeStamp>
        <when>2014-10-25T00:30:48.000Z</when>
      </TimeStamp>
      <Point>
        <coordinates>135.49054,34.485283,53</coordinates>
      </Point>
    </Placemark>
    <Placemark>
      <name>38</name>
      <description><![CDATA[<a href=\"http://www.semboku.jp/station/toga_mikita/outline/\">栂・美木多駅</a>]]></description>
      <TimeStamp>
        <when>2014-10-25T00:33:30.000Z</when>
      </TimeStamp>
      <Point>
        <coordinates>135.48999,34.484875,61</coordinates>
      </Point>
    </Placemark>
  </Document>
</kml>


 もう少し高度な加工ができそうであるが、一段の学習が必要のようだ。痴呆予防には役立つかもしれないので、もうちょっと遊んでみたいと思っている。

2014年10月26日

隠居のスマホ備忘録:山旅ロガーを使う(1) 


 3代の家族でよく山登りをする友人から、山に登るときに非常に有用であるというスマホアプリの山旅ロガーIcon-yamatabi.JPGを教えてもらった。山に登ることは1年に一回もないから、自分にとってはあまり関係のないアプリだと思っていたが、友がWalking の記録もできるというので、試しにインストールしてみた。これが、自分の行動を記録するには、なかなかおもしろそうな奥深いアプリなので、記録に残しておきたいと思う。
 フリー版もあるが、有料版(360円)のGOLDをインストールしたほうが機能が多いようだ。 このアプリを有用に使うためには、国土地理院の1/25000の地図が使える地図ロイドIcon-tizuroid.JPGというアプリ(無料)もインストールておいたほうが良い。

 インストールした山旅ロガーを、一度試したくて、自宅から駅まで歩いた道をトラッキングしてみた。

山旅ロガーの使用法
山旅ロガー初期画面;クリックすると大きな写真になります。 測定モードを設定する;クリックすると大きな写真になります。 測定中画面;クリックすると大きな写真になります。
山旅ロガー初期画面 測定開始ボタンをタップする前に、測定モードを設定する。今回の実験では、徒歩 30m で設定した。 測定開始ボタンをタップするとトラッキングを始める。この画面はすぐに消えるが、測定は続いている。
測定結果一覧画面
測定結果一覧画面;クリックすると大きな写真になります。
グラフの画面;クリックすると大きな写真になります。" 地図ロイドの画面;クリックすると大きな写真になります。
測定結果一覧画面
測定を終了するには、測定終了ボタンをタップする。測定の結果を見るには、測定結果の一覧をタップする。
測定結果の一覧から、該当する結果(59)を選択すると上のようなグラフの画面になる。このグラフは、海抜30mから60mまで上がったことを記録している。自宅から駅までは上り坂である。 左の画面にある地図ロイドアイコンをタップすると上のような地図ロイドの画面になる。歩いた道のトラッキングが表示される。地図ロイドの私的利用法はまだ十分に学習できていないので、追って記録したいと思う。
 

 なお、測定モードは、徒歩ばかりでなく 「 自転車 XX秒 」という設定もできる。これを応用して、自動車での移動が測定できないかを試してみたところ、OK であった。この実験については、別の機会に記録したい。

 このアプリは、測定結果をKMLファイルというXML ファイルの一種をPCに送信することができ、Google Maps API で取り扱うことができるので、地図作成に有用と思える。
 次回は、Google Maps APIへの応用で学習したことを記録したいと思う。