Atelierで“xml”タグの付いているブログ記事

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>


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

2013年3月28日

隠居のドライブ:南紀の私的観光地図とその作成方法。


 南紀をドライブしたときの訪問地点を地図にプロットしてみた。地図作成に使ったのは、【隠居のパソコン備忘録: Google Maps API JS V3 で、番号付きマーカーを表示する】で記録した方法である。この地図は、右メニューの観光地図一覧に【初春の南紀私的観光地図】として追加した。



 この地図を作るためには、Google Map を表示するための HTML ファイルと、このページに呼び込んでくる XML ファイルを記述する必要がある。いずれも、宍道湖周辺を旅行した時の地図を作ったファイルをコピーして作成した。
 html ファイルはテキスト編集ソフト【秀丸】で、xml ファイルは Microsoft が提供する【XML Notepad】で修正をした。XML ファイルは、秀丸でも編集できるが、このXML Notepad は、XMLファイル編集に特化しており、文法の間違いも指摘してくれるので助かる。

 html ファイルで修正・追加する箇所は次の青字部分である。

90行目あたり、
     case "num05": num = "05";
                break;
     case "num06": num = "06";
                break;
--------------------------------------------------------------------------
に、次を追加する。番号マークは、7番目まで設定したので。
    case "num07": num = "07";
                break;  

103行目あたり
    gicons["num05"] = getMarkerImage(category2num("num05"));
      gicons["num06"] = getMarkerImage(category2num("num06"));
-----------------------------------------------------------------------------------
 に、次を追加する。
      gicons["num07"] = getMarkerImage(category2num("num06"));

184行目あたり、
zoom: 10,
      center: new google.maps.LatLng(35.430603,133.012136),   //松江
      zoom: 10,
--------------------------------------------------------------------------------------------------
を、次の地点の経度・緯度に変更する。もう少し、拡大したい場合は、zoom を11と大きくする。

   center: new google.maps.LatLng(33.676354,135.677032),   //熊野古道中辺路道の駅
   zoom: 10,     

193行目あたりの 読み込む xml ファイルを新しい xml ファイルに変更する。
      downloadUrl("http://n-shuhei.net/atelier/maps/V3_sinnjiko_num.xml", function(doc) {
----------------------------------------------------------------------------------------------------------------
      downloadUrl("http://n-shuhei.net/atelier/maps/V3_kisyuu_num.xml", function(doc) {  

221行目あたり、
<tr><td align="center"style="width:1000px; background-color: #ffffe0;" ><br /><h2>晩秋の宍道湖私的観光地図</h2></td></tr>
--------------------------------------------------------------------------------------------------------------
地図のタイトルおよび大きさを指定する。地図の幅を指定する箇所はもう一箇所ある。
<tr><td align="center"style="width:700px; background-color: #ffffe0;" ><h2>初春の南紀州観光地図</h2></td></tr>      
<tr><td><div id="map" style="width: 700px; height: 500px"></div></td></tr><tr>


読み込む XML ファイルは、XML Notepad を使って、宍道湖の地図を作った時のファイルをもとに、番号マークをプロットする地点の経度・緯度とプロット地点の名前や紹介する写真リンク先を 入力すればよい。リンク先のURL などは、ブログのソースを使えば簡単である。参考までに、作成した XMLファイルは次のようなものである。


<?xml version="1.0" encoding="utf-8"?>
<markers>
 <marker name="1:志原海岸" address="<a href="http://n-shuhei.net/atelier/photo_drive/130321_024.jpg" title="志原海岸" rel="lightbox[nanki]">志原海岸</a><br /><a href="http://n-shuhei.net/atelier/photo_drive/130321_003.jpg" title="ハマダイコン:志原海岸" rel="lightbox[nanki]">ハマダイコン</a><br /><a href="http://n-shuhei.net/atelier/photo_drive/130321_004.jpg" title="イソヒヨドリ:志原海岸" rel="lightbox[nanki]">イソヒヨドリ</a>" lng="135.431213" lat="33.570291" category="num01"/>
 <marker name="2:串本海中公園" address="<a href="http://n-shuhei.net/atelier/photo_drive/130321_020.jpg" title="水中トンネル:海中公園" rel="lightbox[nanki]">水中トンネル</a>" lng="135.745783" lat="33.481639" category="num02"/>
 <marker name="3:串本ロイヤルホテル" address="<a href="http://n-shuhei.net/atelier/photo_drive/130321_023.jpg" title="露天風呂:串本ロイヤルホテル" rel="lightbox[nanki]">露天風呂:串本ロイヤルホテル</a><br /><a href="http://n-shuhei.net/atelier/photo_drive/130321_021.jpg" title="日の出:串本ロイヤルホテル" rel="lightbox[nanki]">日の出</a><br /><a href="http://n-shuhei.net/atelier/photo_drive/130322_028.jpg" title="小雨にけぶる橋杭岩:串本ロイヤルホテル" rel="lightbox[nanki]">小雨にけぶる橋杭岩</a>" lng="135.784836" lat="33.481281" category="num03"/>
 <marker name="4:潮岬" address="<a href="http://n-shuhei.net/atelier/photo_drive/130321_009.jpg" title="潮岬灯台" rel="lightbox[nanki]">潮岬灯台</a><br /><a href="http://n-shuhei.net/atelier/photo_drive/130322_027.jpg" title="潮岬から太平洋を望む" rel="lightbox[nanki]">潮岬から太平洋を望む</a><br /><a href="http://n-shuhei.net/atelier/photo_drive/130321_007.jpg" title="ジョウビタキ雌:潮岬" rel="lightbox[nanki]">ジョウビタキ雌</a><br /><a href="http://n-shuhei.net/atelier/photo_drive/130321_008.jpg" title="トビ:潮岬" rel="lightbox[nanki]">トビ</a>" lng="135.762500" lat="33.433055" category="num04"/>
 <marker name="5:樫野崎灯台" address="<a href="http://n-shuhei.net/atelier/photo_drive/130321_010.jpg" title="樫野崎灯台" rel="lightbox[nanki]">樫野崎灯台</a><br /><a href="http://n-shuhei.net/atelier/photo_drive/130321_025.jpg" title="樫野崎から潮岬の眺望" rel="lightbox[nanki]">樫野崎から潮岬の眺望</a><br /><a href="http://n-shuhei.net/atelier/photo_drive/130321_013.jpg" title="樫野崎から太平洋の眺望" rel="lightbox[nanki]">樫野崎から太平洋の眺望</a><br /><a href="http://n-shuhei.net/atelier/photo_drive/130321_012.jpg" title="内海側の定置網" rel="lightbox[nanki]">内海側の定置網</a>" lng="135.86259" lat="33.473263" category="num05"/>
 <marker name="6:那智の滝" address="<a href="http://n-shuhei.net/atelier/photo_drive/130321_018.jpg" title="那智の滝" rel="lightbox[nanki]">那智の滝</a><br /><a href="http://n-shuhei.net/atelier/photo_drive/130321_014.jpg" title="那智の滝への石段" rel="lightbox[nanki]">那智の滝への石段</a>" lng="135.887704" lat="33.675069" category="num06"/>
 <marker name="7:熊野那智大社" address="<a href="http://n-shuhei.net/atelier/photo_drive/130321_016.jpg" title="熊野那智大社" rel="lightbox[nanki]">熊野那智大社</a><br /><a href="http://n-shuhei.net/atelier/photo_drive/130321_015.jpg" title="イソヒヨドリ:熊野那智大社" rel="lightbox[nanki]">イソヒヨドリ</a>" lng="135.890236" lat="33.668533" category="num07"/>
 </markers>


なお、地図作成と直接関連していないが、Internet Explorer 9 では、ページを編集・更新して、サーバーにアップロードしてもも反映されないことが起こった。(Google Chrome ではすぐに反映される) IE8 のときと違って更新されるタイミングが異なるようだ。
 このようなときは、IE9 で ツール⇒インターネットオプション⇒全般タグ⇒閲覧の履歴の設定で、出てくるポップアップ画面で、インターネット一時ファイルの選択を【Web サイトを表示するたびに確認する】(default では 自動的に確認する となっている)を選択すれば治るようだ。

 

2012年9月22日

隠居のパソコン備忘録: Google Maps API JS V3 で、番号付きマーカーを表示する

 
 従来、右フレームの【晩秋の宍道湖私的観光地図】は、Google Maps API のV2版で作成したものを置いていた。V2 でかいた地図はまだ動くが、2010年5月に廃止されており、V3 へ移行することが奬められている。
 この地図では、必要性はあまりないが、マーカーに番号を表示させていた。新しく V3 で作りなおすときにも、学習も兼ねて番号を表示させたかった。

 ところが、番号入りマーカーを表示するサンプルコードが見つからない。V2 で作成したコードを V3 に置き換えることも試みたが、悲しいかな十分な知識がないし、一から勉強する意欲もないので、うまく行きそうにない。
 今までに成功した V3 のコードを眺めていると【Google Maps API JS V3 で、カテゴリー別に色違いマーカーを表示する】 で使ったコードを、わかる範囲でいじってみれば、なんとかなるのではないかと思われた。色違いのマーカーを、番号付きマーカーに置き換えるのである。この地図では、category 別に赤・青・黄色・緑などのマーカーにしているが、これを番号つきのマーカーに置き換えるのである。また、また、一つずつのマークを、一つのカテゴリーと考えるのである。
 このコードでは、マーカーを立てる地点の経度・緯度や吹きだしに表示するHTMLなどは、XML ファイルを読み込んでくることになっている。V2 で作成した地図では、HTMLの中に直接入力されていた。

 とりあえずうまく表示できるようなので、自分用の備忘録として、XML ファイルおよびHTML コードを記録しておきたい。よくわかった人から見れば、へんてこなコードとなっていると思うが、古希を超えるとほとんど羞恥心はなくなっている。

使用したXML ファイル。項目 category は num01, num02・・・のようになっている。
<?xml version="1.0" encoding="utf-8" ?> 
- <markers>
  <marker name="1:宍道湖温泉" address="   <a href="http://n-shuhei.net/atelier/photo_drive/DSC_4820-1.JPG" title="宍道湖の夕焼け" rel="lightbox[sinjiko]">宍道湖の夕焼け</a><br/>   <a href="http://n-shuhei.net/atelier/photo_drive/DSC_4831.JPG" title="宍道湖の朝" rel="lightbox[sinjiko]">宍道湖の朝</a>" lng="133.053875" lat="35.469199" category="num01" /> 
  <marker name="2:米子水鳥公園" address="   <a href="http://n-shuhei.net/atelier/photo_digisco/DSC01539.JPG" title="コハクチョウ" rel="lightbox[sinjiko]" >コハクチョウ</a><br/>   <a href="http://n-shuhei.net/atelier/photo_digisco/DSC01510.JPG" title="オナガガモ:♀を追いかける♂たち" rel="lightbox[sinjiko]" >オナガガモ</a><br/>   <a href="http://n-shuhei.net/atelier/photo_digisco/DSC01529.JPG" title="マガンの群れ:沖の州" rel="lightbox[sinjiko]" >マガンの群れ</a><br/>   <a href="http://n-shuhei.net/atelier/photo_digisco/DSC01591.JPG" title="キンクロハジロ?" rel="lightbox[sinjiko]" >キンクロハジロ</a>" lng="133.284674" lat="35.44333" category="num02" /> 
  <marker name="3:宍道湖グリーンパーク" address="   <a href="http://n-shuhei.net/atelier/video/digisco_1.wmv" target="_blank">コハクチョウ(video)</a><br/>   <a href="http://n-shuhei.net/atelier/photo_digisco/DSC01620.JPG" title="セグロセキレイ" rel="lightbox[sinjiko]" >セグロセキレイ</a><br/>   <a href="http://n-shuhei.net/atelier/photo_digisco/DSC01632.JPG" title="トビ?" rel="lightbox[sinjiko]" >トビ</a><br/>   <a href="http://n-shuhei.net/atelier/photo_birds/0911211.jpg" title="ジョウビダキ?" rel="lightbox[sinjiko]" >ジョウビダキ</a><br/>   <a href="http://n-shuhei.net/atelier/photo_drive/DSC_4872.JPG" title="ゴビウスにある水槽" rel="lightbox[sinjiko]">ゴビウスにある水槽</a>" lng="132.866077" lat="35.444729" category="num03" /> 
  <marker name="4:出雲大社" address="   <a href="http://n-shuhei.net/atelier/photo_drive/DSC_4886.JPG" title="出雲大社にて" rel="lightbox[sinjiko]">出雲大社にて</a>" lng="132.685919" lat="35.401434" category="num04" /> 
  <marker name="5:足立美術館" address="   <a href="http://n-shuhei.net/atelier/photo_drive/DSC_4908.JPG" title="足立美術館の紅葉" rel="lightbox[drive]">足立美術館の紅葉</a><br/>   <a href="http://n-shuhei.net/atelier/photo_drive/Stitched_003.JPG" title="枯山水の庭:3枚の合成写真" rel="lightbox[drive]">枯山水の庭</a><br/>   <a href="http://n-shuhei.net/atelier/DSC_4932.JPG" title="足立美術館:絵画を観ているように" rel="lightbox[drive]">仏間から庭を望む</a>" lng="133.198242" lat="35.377854" category="num05" /> 
  <marker name="6:米子自動車道大山PA" address="   <a href="http://n-shuhei.net/atelier/photo_drive/DSC_4720-1.JPG" title="雪化粧した大山:大山PAより" rel="lightbox[sinjiko]">大山の紅葉</a>" lng="133.419342" lat="35.386531" category="num06" /> 
  </markers>


 作成した地図作成の稚拙なHTMLコード(Google Maps API V3 のJavaScript を含む)は、右フレームに掲載している【晩秋の宍道湖私的観光地図】のソース・コードを見ていただければ、わかると思うが、参考までに下に記載し、少しのコメントを加えたいと思う。

<!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" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 

<title>Google Maps Javascript API v3 Example: Marker Categories</title> 

<!-- 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.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript" src="http://n-shuhei.net/atelier/maps/V3test/downloadxml.js"></script>
    <title>Google Maps</title>
<style type="text/css">
html, body { height: 100%; } 
</style>
    <script type="text/javascript">
    //<![CDATA[
      // this variable will collect the html which will eventually be placed in the side_bar 
      var side_bar_html = ""; 
      var gmarkers = [];
      var gicons = [];
      var map = null;
var infowindow = new google.maps.InfoWindow(
  { 
    size: new google.maps.Size(150,50)
  });

gicons["01"] = new google.maps.MarkerImage("http://n-shuhei.net/Googlemaps/Markers/marker_01.png",
      // This marker is 20 pixels wide by 34 pixels tall.
      new google.maps.Size(20, 34),
      // The origin for this image is 0,0.
      new google.maps.Point(0,0),
      // The anchor for this image is at 9,34.
      new google.maps.Point(9, 34));
  // Marker sizes are expressed as a Size of X,Y
  // where the origin of the image (0,0) is located
  // in the top left of the image.
  // Origins, anchor positions and coordinates of the marker
  // increase in the X direction to the right and in
  // the Y direction down.

  var iconImage = new google.maps.MarkerImage('http://n-shuhei.net/Googlemaps/Markers/marker_01.png',
      // This marker is 20 pixels wide by 34 pixels tall.
      new google.maps.Size(20, 34),
      // The origin for this image is 0,0.
      new google.maps.Point(0,0),
      // The anchor for this image is at 9,34.
      new google.maps.Point(9, 34));
  var iconShadow = new google.maps.MarkerImage('http://n-shuhei.net/atelier/maps/V3test/msmarker.shadow.png',
      // The shadow image is larger in the horizontal dimension
      // while the position and offset are the same as for the main image.
      new google.maps.Size(37, 34),
      new google.maps.Point(0,0),
      new google.maps.Point(9, 34));
 
function getMarkerImage(iconNum) {
   if ((typeof(iconNum)=="undefined") || (iconNum==null)) { 
      iconNum = "01"; 
   }
   if (!gicons[iconNum]) {
      gicons[iconNum] = new google.maps.MarkerImage("http://n-shuhei.net/Googlemaps/Markers/marker_"+ iconNum +".png",
      // This marker is 20 pixels wide by 34 pixels tall.
      new google.maps.Size(20, 34),
      // The origin for this image is 0,0.
      new google.maps.Point(0,0),
      // The anchor for this image is at 6,20.
      new google.maps.Point(9, 34));
   } 
   return gicons[iconNum];
}

function category2num(category) {
   var num = "01";       
   switch(category) {
     case "num01": num = "01";
                break;
     case "num02": num = "02";
                break;
     case "num03": num = "03";
                break;
     case "num04": num = "04";
                break;
     case "num05": num = "05";
                break;
     case "num06": num = "06";
                break;
     default:   num = "01";
                break;
   }

   return num;
}

      gicons["num01"] = getMarkerImage(category2num("num01"));
      gicons["num02"] = getMarkerImage(category2num("num02"));
      gicons["num03"] = getMarkerImage(category2num("num03"));
      gicons["num04"] = getMarkerImage(category2num("num04"));
      gicons["num05"] = getMarkerImage(category2num("num05"));
      gicons["num06"] = getMarkerImage(category2num("num06"));
      // A function to create the marker and set up the event window
function createMarker(latlng,name,html,category) {
    var contentString = html;
    var marker = new google.maps.Marker({
        position: latlng,
        icon: gicons[category],
        shadow: iconShadow,
        map: map,
        title: name,
        zIndex: Math.round(latlng.lat()*-100000)<<5
        });

        // === Store the category and name info as a marker properties ===
        marker.mycategory = category;                                 
        marker.myname = name;
        gmarkers.push(marker);

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString); 
        infowindow.open(map,marker);
        });
}

      // == shows all markers of a particular category, and ensures the checkbox is checked ==
      function show(category) {
        for (var i=0; i<gmarkers.length; i++) {
          if (gmarkers[i].mycategory == category) {
            gmarkers[i].setVisible(true);
          }
        }

        // == check the checkbox ==
        document.getElementById(category+"box").checked = true;
      }

      // == hides all markers of a particular category, and ensures the checkbox is cleared ==
      function hide(category) {
        for (var i=0; i<gmarkers.length; i++) {
          if (gmarkers[i].mycategory == category) {
            gmarkers[i].setVisible(false);
          }
        }

        // == clear the checkbox ==
        document.getElementById(category+"box").checked = false;
        // == close the info window, in case its open on a marker that we just hid
        infowindow.close();
      }

      // == a checkbox has been clicked ==
      function boxclick(box,category) {
        if (box.checked) {
          show(category);
        } else {
          hide(category);
        }

        // == rebuild the side bar
        makeSidebar();
      }

      function myclick(i) {
        google.maps.event.trigger(gmarkers[i],"click");
      }

      // == rebuilds the sidebar to match the markers currently displayed ==
      function makeSidebar() {
        var html = "";
        for (var i=0; i<gmarkers.length; i++) {
          if (gmarkers[i].getVisible()) {
            html += '<a href="javascript:myclick(' + i + ')">' + gmarkers[i].myname + '<\/a>' + ' ' ;
          }
        }

        document.getElementById("side_bar").innerHTML = html;
      }

  function initialize() {
    var myOptions = {
      zoom: 10,
      center: new google.maps.LatLng(35.430603,133.012136),   //松江
      mapTypeId: google.maps.MapTypeId.HYBRID
    }
    map = new google.maps.Map(document.getElementById("map"), myOptions);
    google.maps.event.addListener(map, 'click', function() {
        infowindow.close();
        });

      // Read the data
      downloadUrl("http://n-shuhei.net/atelier/maps/V3_sinnjiko_num.xml", function(doc) {
  var xml = xmlParse(doc);
  var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
          // obtain the attribues of each marker
          var lat = parseFloat(markers[i].getAttribute("lat"));
          var lng = parseFloat(markers[i].getAttribute("lng"));
          var point = new google.maps.LatLng(lat,lng);
          var address = markers[i].getAttribute("address");
          var name = markers[i].getAttribute("name");
          var html = "<b>"+name+"<\/b><p>"+address;
          var category = markers[i].getAttribute("category");
          // create the marker
          var marker = createMarker(point,name,html,category);
        }

        // == create the initial sidebar ==
        makeSidebar();
      });
    }

    //]]>
    </script>
  </head>

<body style="margin:0px; padding:0px;" onload="initialize()"> 
    <!-- you can use tables or divs for the overall layout -->
    <table border=1 >
<tr><td align="center"style="width:1000px; background-color: #ffffe0;" ><br /><h2>晩秋の宍道湖私的観光地図</h2></td></tr>      
<tr><td>
           <div id="map" style="width: 1000px; height: 500px"></div>
        </td></tr><tr>
<td valign="top" style="width:1000px; background-color: #ffffe0; font-size: small;"> 
 上の地図は、Google Mapsの機能を持っています。拡大・縮小・移動ができます。下の該当番号をクリックすると該当番号マーカーに吹きだしが出てきます。その吹き出しにある青文字をクリックすると写真(一部 動画)がでてきます。</td></tr><tr>
        <td valign="top" style="width:1000px; background-color: #ffffe0; font-size: small;"> 
           <div id="side_bar"></div>
        </td>
      </tr>
    </table>


    <noscript><b>JavaScript must be enabled in order for you to use Google Maps.</b> 
      However, it seems JavaScript is either disabled or not supported by your browser. 
      To view Google Maps, enable JavaScript by changing your browser options, and then 
      try again.
    </noscript>

<br /><br />
<!-- Google AdSense -->
<script type="text/javascript"><!--
google_ad_client = "pub-8556873278052332";
/* AdSense foot ad */
google_ad_slot = "1589991765";
google_ad_width = 728;
google_ad_height = 15;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
  </body>
</html>


  • 番号付きマーカーは、dLINKbRING というサイトからダウンロードできる
  • 表示する地図を、ラベル付き航空写真とするには、mapTypeId: google.maps.MapTypeId.HYBRID とすればよい。通常は、HYBRID の部分が、ROADMAP となっている。
  • マーカーをクリックしてでる吹きだしの中に表示される写真リンクをクリックして出てくる写真を、同一画面の中央に表示するJavaScript ソフト lightbox は機能する。 jQuerylightbox2.51 を使った。


2012年9月 2日

隠居のパソコン備忘録: Google Maps API JS V3 で、カテゴリー別に色違いマーカーを表示する


 酷暑で屋外での活動は歳を考えて自粛していた。それで、自然とパソコンに向かう時間が多くなっていた。取り組んだのは、V3 にバージョンアップした Google Maps JS API で旅行地図などを作成するなどのいろいろなトライである。

 といっても、一から Google Maps JS API で希望する地図を作成する能力はないから、公開されている人様のコードをいじることが主体である。このようなときに、重宝させていただいているのは、Using the Google Maps API v3にあるサンプルである。
 Mike Williams' tutorial というサイトで V2 でサンプル表示されていた More advanced stuff - Part 25 Marker Categoriesを、V3 コードに置き換えた translated to v3というのが紹介されている。これを利用すれば、野鳥撮影地点を種別に表示するときなどに使えそうと思い自分のできる範囲でいじって見ることにした。

 このような作業をする時の手順は、だいたい次のようにしており、備忘録として記録しておきたい。
  1. サンプル画面のソース・コード(IE の場合、メニューバーの表示⇒ソース)を取得する。これを、テキスト編集ソフト(私の場合:秀丸)にコピペし、名前をつけて、適当なフォルダーに、html ファイルとして保存する。
  2. サンプルコードで使用されている Javascript ユティリティ ファイル(今回の例では、downloadxml.js ファイル)や使用するマーカイメージ・ファイル(今回のサンプルでは、marker_red.png のようなファイル)を用意し、ファイル転送ソフト(私の場合:FFFTP )でサーバー(私の場合:Xserver )上の適当なフォルダーにアップロードしておく。
  3. サンプル・コードで使用されている xml ファイル(普通はサンプル・コード内で相対パスで表示されている。これを絶対パスにして、ブラウザで表示させる)をC&P して、秀丸の新しいファイルとする。適当な名前(xmlファイルで)で保存する。これも、先ほどと同じサーバー上の同じフォルダーにアップロードしておく。
  4. 秀丸画面で、自分の環境に合うように、サンプルコードのそれらのファイルの path を書き換える。私の場合、ミスがないように、絶対パスで書くことにしている。
  5. 自分のサーバー環境に合わせたサンプル・コードをブラウザで表示してみる。これで、參照サンプルと同じように表示されたら、サンプルのコピーは成功である。
  6. このサンプルコードを少しづついじって、目的とする地図(今回、地元の公園・ホームセンター・大型電気店を種別( category )に表示することを目指した。)に近づけていく。先ず、地図の中心を地元にするために、地図の center 緯度・経度を置き換えた。
  7. と同時に、xml ファイルも、サンプルで使われているファイルを真似して、新たに日本語を含むファイルを作って(XML ファイルの編集は、XmlNotepad を使っている)サーバー上にアップロードした。(日本語のエンコードは、UTF-8 )
  8. その他、category の名前を変えたことに対応する修正などを加えて保存、サーバーにアップロードして、ブラウザで表示してみた。地図やチェックボックス、日本語のサイドバーは、期待通り表示されたが、肝心のマーカーが表示されない。元のサンプルコードと見比べながら、チェックしてみたが、原因が分からない。
    JavaScriptや HTML のコードは、カンマ一つ抜けても動かないことがあるので、再度やり直すなど作業を続けて見たが、うまくいかない。
  9. 3日間ほど悩んで、諦めかけていたが、原因はどうやら XML ファイルにあるらしいと思われたので、再度フィルを眺めていると、ing(longitude:経度) と lat(latitude:緯度)の数字が入れ替わっていることに気がついた。今まで、このような XML ファイルは lat ⇒ lng という順序で記入していたのに、今回使ったサンプル XML ファイルは順序が逆になっていたのだ。サンプル XML ファイルの経度・緯度が海外の地点を示していたので、気づくのが遅れたらしい。
     数字を入れ替えてみると期待通りに表示されるようになった。ミスというのは大体において、このようにうっかりミスが多いものだが、ついつい難しく考えてしまいがちだ。
  10. このサンプルコードを土台に、マーカーの吹きだし(infowindow) に画像やリンクURL を表示を試みたが、それらも OK のようである。
     なお、写真の表示が、画面の中心に表示され背景がフェードアウトする lightbox も使えるので、今後いろいろな応用ができるのではないかと考えている。


 作成例:泉北ニュータウンの公園・ホームセンター・大型電気店地図 サンプル・ページ

  

2012年8月18日

隠居の旅行地図:真夏の山陰地方

 先のエントリー【隠居、真夏の山陰旅行を楽しむ】で、訪れた地点の地図を、Google Maps API V3 で作成してみた。
 訪問順に番号付きのマークを入れたいのだが、なかなかうまく行かない。ネットでいろいろと探ってみたが、ピッタリのサンプルが見あたらない。そのようなサーチの間に、標準のマーカー・アイコンを種々のアイコンに変える方法が分かったので、赤い押しピンを模したアイコンを採用してみた。このような種々のマーカー・アイコンは、Google から提供されていて、ダウンロードしなくても直接リンクすることで使えることも分かった。

 この地図は、加賀地方へ旅行した時とほぼ同じ形式であるが、各地点の経度・緯度、写真へのリンクなどは、外部ファイルとしての XML ファイルを呼び込む形式を取っている。

2012年7月21日

隠居のパソコン備忘録: Google Maps API JS V3 でXML ファイルを読み込む

 
 自作地図を作成するのに便利していた Google Maps API のバージョンが、 V2 から V3 に大幅に変更され、来年5月には V2 で作成した地図が動かなくなりそうだということは、隠居のパソコン備忘録:Google Maps API V3 で旅行地図を作成するで、記録した。

  V2 で作成した多くの地図では、外部ファイルである XML ファイルを読み込んでマーカを立てる地点やマーカをクリックすると出てくる吹きだしの中に、リンク先などの情報を表示していた。年間の旅行先などマーカが順次増える場合には、XML ファイルに経度・緯度や必要なリンクを書き足すだけでいいので便利をしていた。
 今まで V2 で作成してきた地図を V3 にバージョンアップして XML ファイルを読み込むためのサンプル・コードを探し回したが、適切なコードが見つからなかった。一から、作成する能力はからきしない。途方に暮れて、上のブログに記録した前回の方法で、XML ファイルを使わず直接 JavaScript に書き込むことも挑戦しかけたが途方も無い作業のようなのでやめて、今までの XML ファイルが使えそうなサンプル・コードで、再度粘ってみることにした。

 拝借したサンプル・コードは、上のブログに記録した前回の方法ときにも拝借した、【Using the Google Maps API v3】 というページにある【lLoading the data from an XML file translated to v3】のソース・コードである。
 V3 のGoogle Maps API にXML ファイルを読み込む方法は、多くの場合、前回に lightbox 2.51 の導入で紹介した JavaScript のライブラリー jQuery が使われている。拝借したサンプル・コードでは、jQuery ではなく、downloadxml.js というライブラリーが使われている。どうも、jQuery の方が本流らしいが、私にとっては、V3 で今までの XML ファイルが使えるサンプル・コードの方がありがたい。
 一週間以上かなりの時間を使って粘った甲斐があって、下のようなコードで XML が読み込めるようになった。
 

<!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" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>Google Maps Javascript API v3 Example: Loading the data from an XML</title> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript" src="http://n-shuhei.net/XXXXX/XXX/XXXXX/downloadxml.js"></script>

<style type="text/css">
html, body { height: 100%; } 
</style>

<script type="text/javascript"> 
//<![CDATA[
// this variable will collect the html which will eventually be placed in the side_bar 
      var side_bar_html = ""; 

      // arrays to hold copies of the markers and html used by the side_bar 
     // because the function closure trick doesnt work there 

      var gmarkers = []; 

     // global "map" variable
      var map = null;

// A function to create the marker and set up the event window function 
function createMarker(latlng, name, html) {
    var contentString = html;
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        zIndex: Math.round(latlng.lat()*-100000)<<5
        });

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString); 
        infowindow.open(map,marker);
        });

    // save the info we need to use later for the side_bar
    gmarkers.push(marker);

    // add a line to the side_bar html
    side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br>';
}

// This function picks up the click and opens the corresponding info window
function myclick(i) {
  google.maps.event.trigger(gmarkers[i], "click");
}

function initialize() {
  // create the map
  var myOptions = {
    zoom: 12,
    center: new google.maps.LatLng(35.377556,134.534862),
    mapTypeControl: true,
    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
    navigationControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

  map = new google.maps.Map(document.getElementById("map_canvas"),
                                myOptions);

  google.maps.event.addListener(map, 'click', function() {
        infowindow.close();
        });

      // Read the data from hachi.xml
      downloadUrl("hachi.xml", function(doc) {
        var xmlDoc = xmlParse(doc);
        var markers = xmlDoc.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {

          // obtain the attribues of each marker
          var lat = parseFloat(markers[i].getAttribute("lat"));
          var lng = parseFloat(markers[i].getAttribute("lng"));
          var point = new google.maps.LatLng(lat,lng);
          var html = markers[i].getAttribute("html");
          var label = markers[i].getAttribute("label");

          // create the marker
          var marker = createMarker(point,label,html);
        }

        // put the assembled side_bar_html contents into the side_bar div
        document.getElementById("side_bar").innerHTML = side_bar_html;
      });
    }

var infowindow = new google.maps.InfoWindow(
  { 
//    size:  new google.maps.Size(200,50)
  });

    // This Javascript is based on code provided by the
    // Community Church Javascript Team
    // http://www.bisphamchurch.org.uk/   
    // http://econym.org.uk/gmap/
    // from the v2 tutorial page at:
    // http://econym.org.uk/gmap/basic3.htm 

//]]>

</script> 
  </head> 

<body style="margin:0px; padding:0px;" onload="initialize()"> 

    <!-- you can use tables or divs for the overall layout --> 
    <table border="1"> 
<tr>
<td bgcolor="#FFFFCC" align="center" colspan="2"><font color="#000000"><strong><big>ハチ高原近辺私的観光地図</big></strong><br /></font></td></tr>      
<tr> 
        <td> 
           <div id="map_canvas" style="width: 800px; height: 600px"></div> 
        </td> 
        <td width = 200 valign="top"  bgcolor="#ffffe0" style="text-decoration: underline; color: #000000; font-size: small;" >
<!--<td valign="top" style="width:150px; text-decoration: underline; color: #4444ff;">-->
           <div id="side_bar"></div> 
        </td> 
      </tr> 
    </table> 

    <noscript><p><b>JavaScript must be enabled in order for you to use Google Maps.</b> 
      However, it seems JavaScript is either disabled or not supported by your browser. 
      To view Google Maps, enable JavaScript by changing your browser options, and then 
      try again.</p>
    </noscript> 

  </body> 
</html> 
サンプル地図

 試行錯誤は、拡張子の前につける . (ピリオド)が抜けていたり、ファイルのアップロード先を間違ったりなど実に単純なミスの連続であった。
 とくに、Geekなぺーじの【Google MAPS JavaScript APIでのデバッグ】にも書かれているように、日本語コードで最後までつまづいた。V2 のときには、Shift-JIS でも OK だったXML ファイルが、UTF-8 でないとエラーを起こすというより、全く読んでくれない。
 この試行錯誤のお陰で、Google Maps API について、少し理解が深まったが、JavaScript に十分な知識がない老人にはやっぱり難解な世界である。中断していた JavaScript の学習も再開せねばと思うが、なにしろやりたいことが多すぎる。
 来年5月までに、順次 V2 の地図を V3 にしていくつもりである。

2010年6月24日

隠居のGoogle Maps API: データ用XML ファイルの編集

 友人や私が旅行に行ったところなどをプロットする地図を、Google Maps API を使って作成しブログに埋め込んでいる。
 作成する自分用の地図はいろいろとあるが、プロットする地点が少しずつ増えていく旅行地図--例えば、Studio YAMAKO 【国内旅行:2009】などでは、本体の Javascript はいじらずに、行った地点の経度・緯度などのデータを XML ファイルに追加して呼び込んでいる。

 ところがいつも使っているエディタの【秀丸】できちんと XML の文法に則ってファイルを作成しているはずなのに、Google Maps API が読み込んでくれない。原因を乏しい知識のなかでググって見たが、なかなか解決策が見当たらないまま1週間くらいが過ぎてしまった。ひょんなことから、完全な解決ではないが、原因がわかったので、この間に学習したことを備忘録として記録しておきたい。

 XML fileにエラーがある場合、Internet Explorer でこのファイルを開く(フォルダー⇒該当ファイルを右クリック⇒プログラムから開くで出るセレクトボックスから、Internet Explorer を指定する)と、次のようなメッセージがでて開けない。
Internet Explorer
XML_01.JPG
  Google Chromeでは、次のようなメッセージが出る。
Google Chrome
XML_02.JPG

ここで出てくるライン( line) とは、開始タグと終了タグで囲まれたテキストが行を表していると思われる。 それで推定すると、どうやら最後の行の外に、余計な何かが附加されているようである。

いつも使っているエディタの【秀丸】でXML fileを眺めつすがめつしてみたが、よくわからない。
【秀丸】XML_05.JPG
この表示の最後にある [EOF] は、End Of File のことであり、【秀丸】特有のものである。後で分かったことだが、この[EOF] が問題であった。

XML の文法が正しいかどうかは、W3CSchool のXML のセクションにある validator で確認できる。 この validator で【秀丸】で表示されるコードを確認すると no error と表示される。

XML file の中身は、Notepad でも確認できる。IE でエラーとなった XML file をNotepad で開いてみると、下のように【秀丸】の [EOF]部分が黒い四角形の文字となっている。Notepad で、この黒い四角形の文字を削除して保存して、IE で実行してみるとエラーは起こらない。
Notepad XML_07.JPG


 再度、"秀丸 EOF"でググってみると、【秀丸】への理解が十分でなかったことが判明した。【秀丸】の設定で、 [EOF] を保存しない、読み込むときに EOF制御文字を無視するとすると(【秀丸】で「その他」⇒「ファイルタイプ別の設定」⇒「保存の対象」「その他」「保存読み込み」で設定できる)、IE での展開でエラーは起こらなくなった。

 これらを調査するなかで、XML エディタとして【XML Notepad 2007】というユティリティがあることが分かった。今まで、XML file のエディタとしては便宜的に【秀丸】を使ってきたが、これが問題であった。まだ十分に理解出来ているとはいえないが、XML に特化した【XML Notepad 2007】を使うと下のスクリーンショットで分かるように非常に簡便となる。
 今後は、Google Maps API で使うXML file の作成は、このユティリティを使っていくつもりである。
【XML Notepad 2007】
XML_04.JPG

2008年3月11日

MT用フォトサムネイラーのインストール

 このブログに 2005年3月から掲載してきた種々雑多な写真も結構な量になってきた。これらの写真をカテゴリー別にアルバムにしたいと、ブログのタイトルなどで使っている Sothink SWF Quicker という Flash 作成ソフトのテンプレート利用も考えてきたが、日本語対応ができないなど意図したとおりにできないので諦めていた。

 写真のアルバムは、DIY作品集で実現しているが、新しいエントリーをあげるたびに修正しなければならないなど結構面倒な作業である。サムネイルに載せる写真を選択できるのは、いい点であるが。

 Flash カレンダーや Flash 天気予報を利用させていただいている Kinarie&May さん にMT用フォトサムネイラーというエントリーの中の画像ファイルをサムネイルで表示する Flash プラグインがある。前から気になっていたが、トライする機会がないままになっていた。今回、試してみると思い通りのインストールができたので、注意点などを記録として残しておきたい。

 次のサムネイルは、私のブログでカテゴリーを Gardening として分類しているエントリーに掲載されている写真である。下の << Prev ボタンをクリックすると日付を遡って見ることができる。サムネイルをクリックすると該当するエントリーが表示される。サムネイルに戻る場合は、ブラウザーの戻るボタンを使う。

   


 インストールの手順は、Kinarie&May さんのMT用フォトサムネイラー1.20 に親切に書いてある。
 以下は、注意点。
  • サムネイルされる写真は、HTMLに、<"img","src" >で指定される .jpg 写真である。いずれも小文字でなければならない。Picasa2 でエクスポートした写真は、大文字の .JPG となりサムネイルされないので要注意である。
  • テンプレートの新規作成で作成した xml ファイルは、作成した blog のルートフォルダーに保存される。ダウンロードしたphoto_thumbnailer120.zip を解凍してできる photo_thumbnailer120.swf ファイルは、同じフォルダーに置けばよい。
  • カテゴリー別にサムネイルを作る場合は、 xml ファイルの中で、<MTEntries category="004Gardening" lastn="999"> のようにするが、category の名前は、ブログ管理画面のカテゴリー名と一致させる必要がある。なお、サブカテゴリーも指定できる。私の場合、ソートのためにつけていた頭3桁の数字を忘れていたので、当初上手くいかなかった。
  • いくつかのカテゴリーでサムネイル集を作成する場合は、出力名を変えた xml ファイルをいくつか作ればOKである。

 このプラグインを応用して、私のサイトで運営している友達のブログの写真集とかのようなカテゴリー別のサムネイル集を作成していきたいと考えている。
 Kinarie&May さん Thanks a lot !!

(追記:2008/3/12) 私のサイトで運営している Studio YAMAKO はプロ級の腕前の YAMAKO が撮った趣味の蝶の写真が中心である。この蝶の写真のサムネイルを MT用フォトサムネイラー1.20 で作成してみました。右サイドメニューの Studio YAMAKO をクリックしてみてください。素晴らしい写真集がご覧になれます。

(追記:2008/3/13)サムネイルされる写真の拡張子は小文字の jpg でなければならない。ブログに写真を掲載するには Picasa2 でデジカメ写真を整理しエクスポートするのが便利であるが、拡張子が大文字の JPG となる。そのため、MTで写真ファイルをアップする前に該当するフォルダーの写真ファイルを Renamin.exe で拡張子を小文字の jpg としなければならない。ただし、この逆手をとって、サムネイルに載せたい写真だけ、小文字の jpg とする手もあるが、サーバーとエントリーのファイル名を変えねばならない。 

2006年11月25日

泉北ニュータウン私的観光地図:Google Maps API Trial_5

 Google Maps API を使って、「泉北近辺私的観光地図」を編集し、右サイドメニューの「リンク」に置いてみた。自宅以外で場所を特定できる今までのエントリーにたどり着けるようにした。このようにすると、元のエントリーで表現している画像の表示に litebox が使えたり、MP3 Flash Player も動く。
 xml ファイルを再編集するだけで新たな地点とエントリーが追加できるので簡便になった。

2006年11月17日

道東ドライブ:Google Maps API Traial_3

 エントリー<秋の網走・知床・阿寒・摩周・屈斜路湖:レンタカードライブ>では、 ZENRIN の地図をキャプチャーしたものを使った。内容を同じにして、地図を Google Maps API に変更した。地図の右サイドの地名をクリックすると該当する場所のマーカーに吹き出しが出て、その中のリンクをクリックすると写真が出るようになっている。その他、拡大・縮小、ドラッグしての移動、航空写真にするなど Google Map の機能はそのまま使える。この Google Maps API 導入には、いささかの学習を必要としたので、私のような初心者向けに学習体験を地図の下に備忘録的に記したい。

 前のエントリー<泉北近辺私的観光地図:Google Maps API Trial_2>と異なる点は、地図の右サイドに地名を並べ、それをクリックすると目的とする地点のマーカーに飛ぶようにしたことである。この API の題材は、前のエントリーでも紹介した Google Maps API Tutorial からいただいたものである。前のエントリーでは、sample のソースコードをコピペし、Google Maps API キーを自分用に変えたり、data を変更するだけで上手く導入することができた。
 今回いただいた sample (Part 3) は、 xml ファイルを使うことになっている。今回も xml ファイルをコピペしたらいいと思っていたが、そうは単純にいかなかった。コピペだけで上手くいかないとなると基礎知識が希薄であるから、どこをさわったらいいのか見当がつかない。 IE7の問題なのかなどと勘ぐったが、Firefoxでも上手くいかない。Firefox では、 以下のようなメッセージが出る。
この XML ファイルにはスタイル情報が関連づけられていないようです。以下にドキュメントツリーを表示します。

 IEでも似たようなメッセージがたびたびでる。 Ajax を良く理解していないと思い調査したが、Ajax についてのサイトはちょっと高度で敷居が高い。が、そんなに高度の問題でもないようだ。どうやら xml ファイルへの理解が少ないことが原因らしいと思われたので、基礎から学習することにした。xml を教えてくれるサイトは「たのしいXML」のような日本語のサイトがあるがもうひとつピンとこない。Google で "xml tutorial" でサーチしてみると英語の世界にに基本から教えてくれるサイトがあった。W3 Schools である。このサイトのXML Tutorial を最初から読んでいくと優しい英語で非常に分かりやすい。XML Basic の9講座あたりに、自分で作った xml ファイルをファイルの中身をコピペするのとファイル名を入れて、それぞれ validate する個所がある。ファイルの中身のコピペではエラーを起こさなかったが、ファイル名をいれると何の表示もない。Note: をみるとどうやらクロスドメインの問題らしい。ここからヒントをもらい今まで、Dreamweaver を使ってPC のC:ディレクトリーに JavaScript を置き、呼んでくる xml ファイルをレンタルサーバー上に置いていたので上手くいかなかったようだ。JavaScript を含んだHTMLファイルもサーバー上に置いたら、望む結果が得られた。JavaScript に xml ファイルをよんでくるには、同じドメインでないと駄目のようである。 目的としていることができたのでxml の学習は中断してしまったが、機会を見て続きを勉強したい。
 Google Maps API には、ルートに色を付ける方法も用意されているようなので再度挑戦してみたい。
 なお、xml ファイルのデータとして書き込む地点の経度・緯度を得るには、Google Map で望む地点をダブルクリックして、右上のメールをクリックすると送信フォームの中に数字が示されるので、それをコピペすれば楽である。正確性を期するならば、国土地理院の「ウオッ地図」で目的地点の経度・緯度が求められるが、度以下の少数部分は計算が必要である。
 Google Maps API に取り組んでから、アルツハイマーになりつつある頭脳弱体化防止には少し役立ったかもしれない。