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

2014年10月17日

隠居のパソコン備忘録:Youtubeをページ内で再生させるYouTube Player API を試してみる


 9月の終わりにあった和泉の国ジャズストリートで録画した Videoをブログにアップした。その時、ブログのページ内で再生できるようにしたかったが、方法が見つからず、YouTube にリンクするしかなかった。YouTube の画面はかなり noisy である。

 最近、ひょんなことで、ブログのページ内で録画を YouTube の機能を使って再生できることが分かった。私的な旅行地図などを作るときに使っている Google Maps API(Application Program Interface) と同じように、Javascript を使う。Codeを自ら作り出す能力はないから、他人様のコードのパクリである。Javascript だから少しぐらいは自分で改訂することが出来る。
 今回は、YoheiM.netYoutubeをサイト内で再生させるYoutube APIの使い方を参考にさせていただいた。

YouTube Player API で表示する動画


 上の YouTube 埋め込みプレーヤは、次のような Javascript コードで実現している。
 青太字部分は、YouTube に登録されたファイル名である。

<div id="player"></div>
<script>

    var tag = document.createElement('script');
   tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
   firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

   var player;
   function onYouTubeIframeAPIReady() {

  player = new YT.Player('player', {
    height: '390',
    width: '640',
    videoId: 'rL--g6q7zu4',
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}

function onPlayerReady(event) {
}


function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.ENDED) {
    alert('finish');
  }
}
</script>

追記(2015/10/26): Youtube の Webページヘ内で再生させるのに、上のコードでは、Internet Explorer では表示されないことが、最近になって分かった。現在では Yutube が iframe を使ったコードを提供しており、更に便利にWebページ内に埋め込むことが可能になっている。方法など詳細については、別に記録したいと思う。
 現在は、新しい埋め込みコードで、表示している。



2013年2月 3日

隠居のブログ備忘録:JQuery lightbox 2.51 をカストマイズする

 
 昨年夏に、サムネイル写真をクリックするとウインドウ中央に写真が拡大表示される Llightbox を jQuery という JavaScript のライブラリーを使用した Lightbox2.51 を導入した。
 その時、カストマイズしたのは、デフォールトでは黒である背景画面の色を緑にしたのと、写真ページを閉じるボタンを デフォールトのclose.png から、自作の closelabel.gif に変更しただけである。

 私が管理している友人の Lightbox は、prototype.js という JavaScript のライブラリーを使った旧バージョン Lightbox2.0 を使っている。背景画面に、蝶をあしらった壁紙を使っていて、これを Lightbox2.51 で使う方策が分からなかったからである。
  Lightbox2.51 のカストマイズは、【jQueryのlightBoxプラグインの使い方】【jQuery LightBox Pluginの使い方】 などに詳しい。これらのプラグインは、新たに JavaScript を付け加えてカストマイズする方法である。だが、私のやり方が悪かったのか上手く行かなかった。
 そこで、当初導入した時にいじったJavaScript lightbox.js と スタイルシート lightbox.css 再度いじって見ることにした。 私にコードが理解できるわけではないから、やりかたは ここはと思われるスクリプト ないしは CSS をいじって、FTP でサーバーにアップロードし、実際のページでの変化を観察する方法である。幸い、JavaScript と CSS の変更は、すぐにページに現れるから楽である。この結果を備忘録として記録しておきたいと思う。

  1. 自作の closelabel に置き換える。
    lightbox.js の41行目を下のように独自の画像に置き換える。
          this.fileCloseImage = 'http://n-shuhei.net/atelier/Jquery2.51/images/closelabel.gif';

  2. セットで写真を表示している場合の表示を "image"(default) から "画像"に置き換える。44行目
          this.labelImage = " 画像 "; 

  3. セットの写真の何枚目を示す、表示を例えば "1 of 8" を " 1 / 8 "に置き換える。45行目
          this.labelOf = "/";  

  4. 背景画面を単一色から、壁紙画面に変える。lightbox.ccs の7行目あたりの背景色をコメントアウトして、壁紙イメージを挿入する。
    /*  background-color: #000000; */
    background-image: url("http://n-shuhei.net/atelier/lightbox2/images/overlay_1.jpg") ; 

  5. 画像の枠(台紙)の色をかえる。lightbox.ccs の35行目あたり。デフォールトは、"white;"
       background-color: #ffffe0;

  6. 画面の"前画面" "次画面" へのボタンを独自のボタンに置き換える。lightbox.ccs の112行目、117行目あたり。 
        background: url(http://n-shuhei.net/lightbox2/images/prevlabel.gif) left 40% no-repeat;

    background: url(http://n-shuhei.net/lightbox2/images/nextlabel.gif) right 40% no-repeat;

  7. 写真の説明文字の色を変える。lightbox.ccs の145行目あたり。デフォールトは灰色。
     color: #ffffff;

 その他、細かい部分も、CSS をいじることで変えられそうだ。
サンプル画像は、次のエントリー【隠居の探鳥ウォーク:ハリエンジュ 花芽ついばむ 鷽(ウソ)4羽 】などで確認できます。

  

2012年7月29日

隠居のパソコン備忘録: Google Maps API V3 で Polyline を描く


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

 Studio YAMAKO のオーナーが、この2?3年に海外旅行した時の地図には、旅程を表す Polyline を表示している。これも、V3 になると書き換えなければならない。V2 では、XML ファイルに訪れた地点の経度・緯度を書き込んでおくと Polyline を描いてくれる sample code があったが、V3 では、そのような sample code は、ヒットしなかった。
 【Google Maps JavaScript API V3の使い方】というサイトに、【ポリラインの表示】というぺーじがあり、polyline を描くための訪問地点の経度・緯度を Javascript に直接記入する方法が紹介されていた。このサンプル・コードを参考に、先日記録した【Google Maps API JS V3 でXML ファイルを読み込む】の Javascript コードに追加してみると上手く動くことが分かった。老人の備忘録として、「トルコ周遊8日間の旅」の地図のコードを記録としておきたい。下のコードの青字部分が Polyline 表示のために追加した部分である。
 訪問地点の経度・緯度は、V2 のときに使っていた 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/JSlibrary/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: 6,
    center: new google.maps.LatLng(39.436193,29.86908),
    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("V3_maps_Turkey.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;

// Polyline 表示の追加 ここから     
    var drivePlan = [
      new google.maps.LatLng(40.010787, 26.279297),
      new google.maps.LatLng(39.317035, 26.703644),
      new google.maps.LatLng(37.947176, 27.342567),
      new google.maps.LatLng(37.914409, 29.120979),
      new google.maps.LatLng(37.882441, 32.485199),
      new google.maps.LatLng(38.376115, 34.002686),
      new google.maps.LatLng(38.533127, 34.433899),
      new google.maps.LatLng(38.627063, 34.720917),
      new google.maps.LatLng(38.772019, 35.490303),
      new google.maps.LatLng(41.013066, 28.975067),
      new google.maps.LatLng(40.010787, 26.279297)
    ];
    var drivePath = new google.maps.Polyline({
      path: drivePlan,
      strokeColor: "#FF0000",
      strokeOpacity: 1.0,
      strokeWeight: 2
    });
      drivePath.setMap(map);
// ここまで 

      });
    }

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

//]]>

</script> 
  </head> 

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

<table border="1"> <tr>
<td bgcolor="#FFFFCC" align="center" colspan="2"><font color="#000000"><strong><big>「洞窟ホテルに泊まる!トルコハイライト周遊8日間」の旅</big></strong></font></td></tr>      
<tr><td> 
    <div id="map_canvas" style="width: 800px; height: 600px"></div> 
    </td> 
    <td width = 200 valign="top" bgcolor="#ffffcc" >
左の地図は、Google Mapsの機能を持っています。拡大・縮小・移動ができます。下の地名をクリックすると該当位置に吹き出しが出ます。吹き出しの中のリンクをクリックすると詳細地図あるいは関連投稿に飛びます。<br /><br />
    <div id="side_bar"style="text-decoration: underline; color: #000000; font-size: small;"></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> 


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 にしていくつもりである。

2012年7月12日

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


 Google が提供する自分好みの地図を作成できるサービス Maps JavaScript API の バージョンUP(V2 ⇒ V3)が2009年5月に発表されている。最近になって、V2 は廃止され、V3 がリコメンドされていることを知った。プロ向けと思われる【Google Deveopers】というサイトにある【Google Maps JavaScript API V3】 のページには、次のような記載がある。
注: このページに記載されている Google Maps JavaScript API バージョン 3 は、正式な JavaScript API となりました。JavaScript API バージョン 2 は、Google の廃止ポリシーにより正式に廃止されました。アップデート、拡張された新しいバージョンに、コードを移行することをおすすめします。

さらに、Deprecated(非推奨という意味か?) と記されている V2 のページには、次の記載がある。
Note: The Google Maps JavaScript API Version 2 has been officially deprecated as of May 19, 2010. The V2 API will continue to work until May 19, 2013. We encourage you to migrate your code to version 3 of the Maps JavaScript API.

なんと来年5月には、動かなくなりそうだ。私のサイトには、V2 作成した地図を数多く掲載している。慌てて、V3 の学習を始めた。V2 に比べると大幅に変更になっている。サンプルコードをパクリして、作成してきた地図を、基本的な知識が乏しい老人が、今までのコードをバージョンアップするのは至難の技に思われる。それで、今までのコードのバージョンアップは諦めて、ネットで紹介してくれているV3 版のサンプルコードを頼りに、新しく書いて見ることにした。

 ようやくたどり着いたのが、7月10日に収載した【加賀地方旅行地図】である。この地図を例として、作成方法を備忘録として記録しておきたい。

 やりたいことは、
  1. 旅行した地域をカバーする地図を表示する。
  2. 観光した地点にマーカーを立てる。
  3. マーカーをクリックすると吹きだし(infowindow) がでる。
  4. infowindow には、撮った写真の表示や観光地点のURL へリンクを表示できるようにする。
  5. 地図の枠外に訪問地点名を表示し、クリックすると地図上の該当マーカに、infowindow が表示するようにする。
  6. できあがった地図は、私のブログ(Movable Type 4)で、エントリーとして機能するようにする。

 このような地図は、Google Maps API V2 では、できていたのであるが、V3 では初めての試みである。
 ささやかな JavaScript の知識か持たない私の技術では、これを一から作成することは困難である。Sample コードをネットで探し回したところ、【Using the Google Maps API v3】 というページに、要望にあったコード(Mike Williams' tutorial The Basics - Part 2: Adding a clickable sidebar translated to v3)を見つけることができた。Mike Williams' tutorial は、V2 の地図を作成するときにほとんど丸写しに近く参照させていただいたサイトである。残念ながら、このサイトでの V3 によるサンプルコードはない。このV2 でのコードをどなたかが、V3 に translate されたコードである。

 このサンプルコードをもとに、作成した旅行地図 のコードは、以下のとおりである。
 
<!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: Adding a clickable sidebar</title><script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<style type="text/css">
  html, body { height: 100%; } 
</style>

<script type="text/javascript"> 

//<![CDATA[

    var side_bar_html = ""; 
    var gmarkers = []; 
    var map = null;

function initialize() {
    var myOptions = {
    zoom: 10,
    center: new google.maps.LatLng(36.338359,136.446075),
    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();
   });

  var point = new google.maps.LatLng(36.056871,136.355095);
  var marker = createMarker(point,"永平寺","<a href='./travel-eiheiji.html' target='_blank'>永平寺 写真サムネイル画像</a>")

  var point = new google.maps.LatLng(36.237628,136.125712);
  var marker = createMarker(point,"東尋坊","<a href='./travel-tojinbo.html' target='_blank'>東尋坊  写真サムネイル画像</a>")

  var point = new google.maps.LatLng(36.228506,136.175559);
  var marker = createMarker(point," そば処あおき","<a href='http://fukui-shop.net/soba/208449/' target='_blank'>URL: そば処あおき</a>")

  var point = new google.maps.LatLng(36.243996,136.374664);
  var marker = createMarker(point," 山中温泉","<a href='./travel-yamanaka.html' target='_blank'>山中温泉 写真サムネイル画像</a><br /><a href='http://yoshinoyairokuen.jp/viewpoint/map_aki_fuyu.pdf' target='_blank'>PDF: 山中温泉案内図</a><br /><a href='http://www.daiwaresort.co.jp/kajikasou/' target='_blank'>URL: 河鹿荘ロイヤルホテル</a>")

  var point = new google.maps.LatLng(36.322871,136.294327);
  var marker = createMarker(point," 鴨池観察館","<a href='./travel-kamoike.html' target='_blank'>鴨池観察館 写真サムネイル画像</a><br /><a href='http://park15.wakwak.com/~kamoike/' target='_blank'>URL: 鴨池観察館</a>")

  var point = new google.maps.LatLng(36.56098,136.658249);
  var marker = createMarker(point," 金沢21世紀美術館","<a href='./travel-21seiki.html' target='_blank'>金沢21世紀美術館 写真サムネイル画像</a><br /><a href='http://ja.wikipedia.org/wiki/%E9%87%91%E6%B2%A221%E4%B8%96%E7%B4%80%E7%BE%8E%E8%A1%93%E9%A4%A8' target='_blank'>URL: 金沢21世紀美術館</a>")

  document.getElementById("side_bar").innerHTML = side_bar_html;
}
var infowindow = new google.maps.InfoWindow(
  { 
    size: new google.maps.Size(150,50)
  });

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

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);
        });

    gmarkers.push(marker);

   side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a>  ';
}
 
//]]>

</script> 

</head> 

<body style="margin:0px; padding:0px;" onload="initialize()"> 
     <table border="1"> 
      <tr> 
        <td> 
           <div id="map_canvas" style="width: 720px; height: 650px"></div> 
        </td>
      </tr><tr>   
        <td valign="top" style="width:720px; font-size:small; color: #4444ff;"><strong>観光場所:クリックすると該当場所に吹きだしがでます。</strong><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> 

<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> </script> 
 </body> 
</html> 


 このコードについて、若干補足して記録しておきたい。
  • マーカーを立てる経度・緯度の数値は、「Google マップ 地図検索」で検索した地点に出てくるマーカを右クリックすると出てくるポップアップにある「この場所について」をクリックすると 検索文字を入れるボックスに表示される。
  • infowindow の中に表示するURLや写真ページヘのリンクは、HTMLコードを書く要領で書けば良い。
  • side-bar は サンプルコードでは 地図の右枠外であるが、HTMLコードでテーブルを作成する要領で(</tr><tr> ) 行を変えれば、地図の下枠外に表示できる。


 なお、写真の表示に、ブログで使ってきた lightbox (当ブログで使っている写真表示手法)のコードを書いても、Google Maps API というJavaScript の中で、lightbox というJavaScript を使うことになり、うまく表示されない。もう少し勉強すればできるのかもしれないが、次善の策として、ワンクッションおいてサムネイル画像を表示することにした。なお、lightbox については、今回の学習中に、jQuery.js という JavaScript のライブラリーを使ったバージョンが出ていることが分かった。(従来は、prototype.js を使っていた)
jQuery 版lightbox については、稿を改めて記録したい。

 作成した地図を、MT4 のブログにエントリーするには、<iframe>をつかって次のようにブログの中に取り込めば良い。
<iframe src="http://n-shuhei.net/atelier/maps/travel-kaga.html" width="740" height="700" scrolling="NO" frameborder="0"></iframe>


 なお、ブログの右フレームに載せている地図は、Google Maps API V2 で作成しているが、ここでは、xml ファイルを使っている地図が多い。V3 でのXML との連携についても学習しなければならない。おかげで、当分痴呆にはならないだろうが。

2011年1月29日

隠居のGoogle Maps: (続)Google Maps API を使って野鳥出現地点をカスタム・マーカーでプロットする

 先にエントリーした【隠居のGoogle Maps: Picasa を使って野鳥出現地点をプロットする】の方法では、プロットする地点を追加しようとすると、そこで記録した 4. 以降のかなり厄介な作業を、一からやり直さなければならないことが分かった。これでは不便である。

 それで、もとに戻って、自由度の高い Google Maps API を応用することを再度試みることにした。右フレームにおいている【京都・滋賀・奈良近辺私的観光地図】のような方式に変えれば、XML ファイルに位置情報と写真へのリンクを追加するだけで、プロット地点を増やしていけることが分かっている。ただ、先のエントリーのように、プロット地点に立てるマーカーを鳥のアイコンにする方法が、乏しい知識ではなかなかわからなかった。マーカーを任意のものに変える方法は色々と紹介されているが、外部のXML ファイルを呼びこんでくるようなコードは紹介されていなかった。

 いろいろとトライしているうちに、どうやら使えそうにコードが、Google から紹介されているのを見つけた。このコードを応用して追加・訂正することで カスタム・マーカー ができたので、忘れないうちに記録しておくことにした。

 仕樣は【野鳥の写真サムネイル】の種別名欄に、【撮影地点地図】 というボタンを置き、これをクリックすると新しい画面が開き、小鳥のマーカーが地図上にプロットされる。このマーカーか、右フレームの地名をクリックすると、その地点で撮影した野鳥の写真が吹きだしに表示される仕組みである。
そして、ここが肝心なのだが、新しい写真とその撮影地点は、XML ファイルで容易に追加することができるようにしたことである。カワラヒワの撮影地点地図を例にとって、以下、順を追って記録する。

  1. まず、XML ファイルを呼びこんで地図にマーカーを立てるもととなる html コード(Google Maps API の JavaScript が含まれている。)を用意する。このオリジナルは、Google Maps API Tutorial からいただいたもので、【道東ドライブ:Google Maps API Traial_3】のエントリーで紹介している。
    このHTML コードの中で、使用している JavaScript は、以下のようなものである。
    
    <script type="text/javascript">
        //<![CDATA[
    
        if (GBrowserIsCompatible()) {
          // this variable will collect the html which will eventualkly 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 = [];
          var htmls = [];
          var i = 0;
    
          // A function to create the marker and set up the event window
          function createMarker(point,name,html) {
            var marker = new GMarker(point);
            GEvent.addListener(marker, "click", function() {
              marker.openInfoWindowHtml(html);
            });
            // save the info we need to use later for the side_bar
            gmarkers[i] = marker;
            htmls[i] = html;
            // add a line to the side_bar html
            side_bar_html += '<a href="javascript:myclick(' + i + ')">' + name + '</a><br>';
            i++;
            return marker;
          }
    
          // This function picks up the click and opens the corresponding info window
          function myclick(i) {
            gmarkers[i].openInfoWindowHtml(htmls[i]);
          }
    
    
          // create the map
          var map = new GMap2(document.getElementById("map"));
          map.addControl(new GLargeMapControl());
          map.addControl(new GMapTypeControl());
          map.setCenter(new GLatLng( 43.745305,144.431763), 9);
    
    
          // Read the data from example.xml
          var request = GXmlHttp.create();
          request.open("GET", "http://n-shuhei.net/xxxx/xxx/trial.xml", true);
          request.onreadystatechange = function() {
            if (request.readyState == 4) {
              var xmlDoc = request.responseXML;
              // obtain the array of markers and loop through it
              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 GLatLng(lat,lng);
                var html = markers[i].getAttribute("html");
                var label = markers[i].getAttribute("label");
                // create the marker
                var marker = createMarker(point,label,html);
                map.addOverlay(marker);
              }
              // put the assembled side_bar_html contents into the side_bar div
              document.getElementById("side_bar").innerHTML = side_bar_html;
            }
          }
          request.send(null);
        }
    
        else {
          alert("Sorry, the Google Maps API is not compatible with this browser");
        }
    
        //]]>
        </script>
    

    上のコードの赤字部分を、下のコードと置き換えれば、標準マーカーを小鳥のアイコン(この場合、カワラヒワのアイコン)で表示できることが分かった。この時、用いるイメージは、必ずしも .png ファイルだけではなく .gif ファイル、.jpg ファイルでもOKである。
    
    // Create birds marker icon
           var birdIcon = new GIcon(G_DEFAULT_ICON);
           birdIcon.image = "http://n-shuhei.net/Libraly/Icon/birds/kawarahiwa.gif";
           birdIcon.iconSize = new GSize(20, 34);
                    
    // Set up our GMarkerOptions object
           markerOptions = { icon:birdIcon };
    
    // A function to create the marker and set up the event window
          function createMarker(point,name,html) {
          var marker = new GMarker(point,birdIcon);
    

  2. このコードを入れた JavaScript は以下のようになる。
    
    <script type="text/javascript">
        //<![CDATA[
    
        if (GBrowserIsCompatible()) {
    // this variable will collect the html which will eventualkly 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 = [];
        var htmls = [];
        var i = 0;
    
    // Create birds marker icon
        var birdIcon = new GIcon(G_DEFAULT_ICON);
         birdIcon.image = "http://n-shuhei.net/xxxxxxx/Icon/birds/kawarahiwa.gif";
           birdIcon.iconSize = new GSize(20, 34);
                    
    // Set up our GMarkerOptions object
           markerOptions = { icon:birdIcon };
    
    // A function to create the marker and set up the event window
        function createMarker(point,name,html) {
        var marker = new GMarker(point,birdIcon);
         GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
            });
    
    // save the info we need to use later for the side_bar
        gmarkers[i] = marker;
        htmls[i] = html;
    
    // add a line to the side_bar html
        side_bar_html += '<a href="javascript:myclick(' + i + ')">' + name + '</a><br>';
            i++;
        return marker;
          }
    
    // This function picks up the click and opens the corresponding info window
        function myclick(i) {
            gmarkers[i].openInfoWindowHtml(htmls[i]);
          }
    
    // create the map
          var map = new GMap2(document.getElementById("map"));
          map.addControl(new GLargeMapControl());
          map.addControl(new GMapTypeControl());
          map.setCenter(new GLatLng(34.48675,135.490608),14);
    
    // Read the data from example.xml
          var request = GXmlHttp.create();
          request.open("GET", "http://n-shuhei.net/atelier/xxxxx/xxxxxxxx/API_kawarahiwa.xml", true);
          request.onreadystatechange = function() {
          if (request.readyState == 4) {
          var xmlDoc = request.responseXML;
    // obtain the array of markers and loop through it
          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 GLatLng(lat,lng);
                var html = markers[i].getAttribute("html");
                var label = markers[i].getAttribute("label");
    // create the marker
                var marker = createMarker(point,label,html);
                map.addOverlay(marker);
              }
    
    // put the assembled side_bar_html contents into the side_bar div
              document.getElementById("side_bar").innerHTML = side_bar_html;
            }
          }
          request.send(null);
        }
    
        else {
          alert("Sorry, the Google Maps API is not compatible with this browser");
        }
    
        //]]>
        </script>
    

  3. 上の JavaScript で青色文字で示したのは、以下の3箇所である。
    • マーカーに使うアイコン
    • 地図の中心となる経度・緯度と地図の縮尺の大きさ
    • 呼びこんでくる XML ファイル
    この3箇所は作成する地図ごとに書き換えねばならない。
  4. 呼びこんでくる XML ファイルには、
    • マーカーを立てる位置(経度・緯度)
    • リンクする写真のサーバー内のありか
    • ラベル(地図の右フレームに表示する地名)
    をリストする必要がある。このファイルの編集には、私は XML Notepad というソフトを使っている。duplicate 機能があるので楽ちんである。
  5. マーカーを立てる経度・緯度の値は10進法でなければならない。これは、【隠居のGoogle Maps: Picasa を使って野鳥出現地点をプロットする】で記載した方法(2. および 3.)のように Picasa のウェブアルバムで行うと、アルバムにある写真をクリックすると、右フレームに10進法の経度・緯度が表示される。
     Picasa の写真プロパティで表示される EXIF では、表示は 60進法になっている。 Picasa のウェブアルバムの助けを借りるのは、そのためである。
  6. リンクする写真のありか(例えば、 http://n-shuhei.net/xxxx/xxxx/xxxxx.jpg )は、【野鳥の写真サムネイル】で、種別表示をして写真サムネイルの下に表示されているリンク先のエントリーのソースからコピーしてくる。これが、少々煩わしいが、仕方ない。なにかいい方法がないか考えてみたい。
     このようにして作成した小鳥マーカーが表示された地図のサンプルは、以下である。
     Example:
  7. 【野鳥の写真サムネイル】の種別名欄に、【撮影地点地図】 というボタンを置き、これをクリックするとこの地図が、新しい Window で開くようにするために、下のような別の JavaScript を使っている。
    // POPUP Window
    
    function open_win_kawarahiwa(){
    window.open("http://n-shuhei.net/atelier/xxxxx/xxxxxxxxx/API_kawarahiwa_m.htm","","
    menubar=no,toolbar=no,location=yes,status=yes,scrollbars=yes,resizable=yes,
    width=950,height=600,left=50,top=50"); }

    この JavaScripr ファイルを、【野鳥の写真サムネイル】の、種別表示をしているページのHTML の <head> 部分に次のように読み込み、
    <script type="text/javascript" src="http://n-shuhei.net/atelier/xxxxx/xxxxxxxxx/pup_kawarahiwa.js"></script>
    、【撮影地点地図】 というボタンをクリックすると地図が新しい window に開くように、<body> 部の適切な位置に、次のコードを置いた。
    <input type="button" value="撮影地点地図" onClick="open_win_kawarahiwa()">

  8. 作成した地図は、まだカワラヒワだけであるが、順次時間を見て増やしていきたいと思う。泉北ニュータウンのごく限られた地域ではあるが、記録としては面白いのではないかと思っている。
     カワラヒワのプロット地図

2008年8月 3日

隠居のお勉強:JavaScript(13) onerror

 梅雨明けから酷暑の日が続き、屋外での活動はほとんどできない。特に、ここ大阪堺市は全国的に見ても暑い都市で連日最高気温が35℃を超えている。老齢を自覚して、クーラーの効いた部屋で過ごすようにしている。

 幸いウェブを開いておれば退屈することはない。JavaScript の学習がおろそかになっていたので、例によって W3Schools の tutorial で再開することにした。今回は、前回に続いてエラー処理の script である。

 onerror イベントハンドラーは、エラーをキャッチしてメッセージを出す古くからの標準的な方法である。

 次はその使い方サンプルである。
<html>
<head>
<script type="text/javascript">
onerror=handleErr;
var txt="";

function handleErr(msg,url,l)
{
txt="There was an error on this page.\n\n";
txt+="Error: " + msg + "\n";
txt+="URL: " + url + "\n";
txt+="Line: " + l + "\n\n";
txt+="Click OK to continue.\n\n";
alert(txt);
return true;
}

function message()
{
adddlert("Welcome guest!");
}
</script>
</head>

<body>
<input type="button" value="View message" onclick="message()" />
</body>

</html>



上のスクリプトは、alert("Welcome guest!"); とすべきとろころが、adddlert("Welcome guest!"); となっているので、下のボタンをクリックするとスクリプトがエラーとなり、onerror イベントハンドラーが働き、エラーが表示される。



この間違ったスクリプトを訂正すると、"Welcome guest!" と本来のメッセージが表示され、エラーは表示されない。次のボタンをクリックしてみてください。



2008年7月27日

隠居のお勉強:JavaScript(12) throw

 MT のバージョンを 3.35 から 4.1 へアップグレードするのにずいぶん時間をとられて、続けていた JavaScript のお勉強がほったからしになっていた。
 過去の JavaSCript のエントリーを見直していると、 4.1 へアップグレードによってリンク切れを起こしていたり、必要なスクリプトがサーバーにアップされていなかったりしていた。それらを修復しながら復習することができた。

 W3School tutorial の続きで、今回は throw の勉強である。
  throw statement によって、例外処理ができる。前回の try....catch と一緒に使うと適切なエラー・メッセージによってプログラムを流すことができる。
 以下の例では、変数x に値を求め、x が 0 より小さかったり、10 より大きかったり、数字以外の文字がインプットされた場合に、それぞれにあったエラーを表示する。
 
<html>
<body>
<script type="text/javascript">
var x=prompt("Enter a number between 0 and 10:","");
try
{ 
if(x>10)
  {
  throw "Err1";
  }
else if(x<0)
  {
  throw "Err2";
  }
else if(isNaN(x))
  {
  throw "Err3";
  }
}
catch(er)
{
if(er=="Err1")
  {
  alert("Error! The value is too high");
  }
if(er=="Err2")
  {
  alert("Error! The value is too low");
  }
if(er=="Err3")
  {
  alert("Error! The value is not a number");
  }
}
</script>
</body>
</html>


 上の例を実行するボタンを作ってみた。Script は外部化し<head> 部で呼び出している。 

 

 ボタンをクリックしたときに、上の js を実行するためには、関数化しておかねばならない。作った関数は以下である。
// throwEx sample
function throwEx()
{
  ・
  ・
(上の青字部分)
  ・
  ・
}


これを<body> で実行するボタン(上のボタン)を置く、HTML は、次のコードである。
<input type="button" onclick="throwEx()" value="throw statement Sample" />


2008年4月28日

隠居のお勉強:JavaScript(11) try...catch

 サンデー毎日なのに結構なにやかやと時間をとられて、お勉強がすすんでいない。例によって、W3Schools の tutorial にしたがって、次のステップに進もうと思う。

 ネットでいろいろと調べてみると、try... catch という構文は、Ajaxでほぼ必須になっているらしい。私のJavaScript の勉強は、Web ページをもう少し動的にしたいという、だいそれた願望に基づいているから、Ajax に必須なら、特に力を入れて勉強したいと思う。

 try...catch の構文の文法は、次のように解釈できる。
try{エラーをキャッチしたいcodeの実行}
catch(err){エラーをキャッチしたときの処理内容}


 Script を書いていて、プログラムにバグがないかどうかを確認するときなどに使うらしい。エラーの内容を表示するようにしておくと、バグの箇所と特定するのに役に立つということである。本格的に JavaScript プログラムを書くことはまだまだ先のことであろうが、おぼえておきたい。

 W3Schools には、例示として次のようなコードが示されている。
<html>
<head>
<script type="text/javascript">
var txt=""
function message()
{
try
  {
  adddlert("Welcome guest!");
  }
catch(err)
  {
  txt="There was an error on this page.\n\n";
  txt+="Click OK to continue viewing this page,\n";
  txt+="or Cancel to return to the home page.\n\n";
  if(!confirm(txt))
    {
    document.location.href="http://www.w3schools.com/";
    }
  }
}
</script>
</head>

<body> <input type="button" value="View message" onclick="message()" /> </body>
</html>

 try ブロック部分の adddlert("Welcome guest!"); の adddlert は alert のミススペルでエラーとなるから、catch ブロックの処理を行って、confirm-box を表示させることになる。

 あまり意味はないが、テストのために上のコードを少しいじって、このエントリーに取り込んでみた。下のボタンをクリックしてみてください。 Confirm Box が出るはずです。

    
 なお、この JavaScript 部分を外部ファイル化し、テンプレートの head 部分に読み込んで使うことを試したがうまくいかなかったので、直接 head 部分に書き込んでいる。

2008年4月19日

隠居のお勉強:JavaScript(10) event

 ちょっとサボっていた W3Schools の JavaScript のお勉強を再開した。じつは順序に従って、for..in という構文の学習していたのだが、example の文法がよく理解できない。あとで学習する object のときにも出てくるようなので、スキップすることにした。 object がよく理解できていないことが原因のようなので、その学習の中で理解していくことにした。

 それで今回は、次のステップである event の勉強である。

 Web ページの全ての要素(element)は、JavaScript 関数(function) のトリガーであるイベント(event)となる。例えば、ボタン element の onClick event は、ボタンをクリックすると実行される関数を指示する場合に使用される。イベント(event)は、HTMLタグの中で定義する。

 event には次のようなものがある。
  • マウス・クリック
  • Web ページあるいはイメージのロード
  • Web ページ上のホットスポットにカーソルが乗る。
  • HTML form で input box が選択される。
  • HTML form をサブミットする。
  • 何らかのキーが叩かれる。

 event は通常、関数との組み合わせで使用される。関数は、event が発生する前には実行されない。

 例えば、 onClick event は次のように使われる。
Field1: <input type="text" id="field1" value="おはよう!!">
Field2: <input type="text" id="field2">
Click the button below to copy the content of Field1 to Field2.
<button onclick="document.getElementById('field2').value= document.getElementById('field1').value">Copy Text</button>

 このコードを実行すると次のようになる。Copy Text ボタンをクリックしてみてください。

Field1:
Field2:

Click the button below to copy the content of Field1 to Field2.


 JavaScript で認められている event の一覧を、英語であるが W3Schools から引用加工させていただいて、下のテーブルに記載した。
 詳細は、W3Schools の complete Event reference にある。それぞれの event の使い方を詳しく説明している。

   
Attribute The event occurs when...
onabort Loading of an image is interrupted
onblur An element loses focus
onchange The user changes the content of a field
onclick Mouse clicks an object
ondblclick Mouse double-clicks an object
onerror An error occurs when loading a document or an image
onfocus An element gets focus
onkeydown A keyboard key is pressed
onkeypress A keyboard key is pressed or held down
onkeyup A keyboard key is released
onload A page or an image is finished loading
onmousedown A mouse button is pressed
onmousemove The mouse is moved
onmouseout The mouse is moved off an element
onmouseover The mouse is moved over an element
onmouseup A mouse button is released
onreset The reset button is clicked
onresize A window or frame is resized
onselect Text is selected
onsubmit The submit button is clicked
onunload The user exits the page

2008年4月 7日

隠居のお勉強:JavaScript Basic (9) Break and Continue

 JavaScript の勉強が、1週間ほど空いているので再開することにした。

 W3Schools の次のレッスンは、Loop で使う break と continue である。

  • 二つの特殊なコマンド break, continue をloop の中で使うことができる。
    • break コマンドは、loop の途中である条件になれば、その loop を中止する。
    • 例を次に示す。
      <html>
      <body>
      <script type="text/javascript">
      var i=0;
      for (i=0;i<=10;i++)
      {
      if (i==3)
      {
      break;
      }
      document.write("The number is " + i);
      document.write("<br />");
      }
      </script>
      </body>
      </html>

    • 結果は次の通りになる。
      The number is 0
      The number is 1
      The number is 2

    • continue コマンドは、loop の途中である条件になる場合のみloop を実行しないが、loop は続ける。
    • 例を次に示す。
      <html>
      <body>
      <script type="text/javascript">
      var i=0
      for (i=0;i<=10;i++)
      {
      if (i==3)
      {
      continue;
      }
      document.write("The number is " + i);
      document.write("<br />");
      }
      </script>
      </body>
      </html>

    • 結果は次の通りになる。
      The number is 0
      The number is 1
      The number is 2
      The number is 4
      The number is 5
      The number is 6
      The number is 7
      The number is 8
      The number is 9
      The number is 10

 構文は理解できたが、どのような時に使われているのか分からない。

 なお、このようなエントリーを編集するときに、< や > を使う場合には、&lt; &gt; とエンコードしなければならないが、今回から HTML エンコードホームというサービスを使わせてもらうことにした。
 W3Schools などの example コードをこのページのエンコード前ボックスにコピペ(copy & paste)すれば、エンコードされた結果がエンコード後ボックスに表示されるので、これをエントリー編集画面にコピペすればよい。
 今までは、< などを一つずつ&lt; などと書き直していたのでずいぶん楽になった。
 今頃気がつくのは、老齢化現象の一つと思うが。

2008年3月31日

隠居の JavaScript :番号付きリストを降順にする。(追記)

 W3Schools JavaScript Tutorial の Loop の項まで学習して、Customaize History 履歴ページでのリスト番号を降順にする方法に使っている Expert が書いた次の JavaScript が少し理解できるようになったので、私の理解できた範囲でコメント文に記した。
<!--list descend-->
<script>
var o = document.getElementById("hoge");
//getElementById メソッドは指定ID(この場合:"hoge")のエレメント(この場合<ol>を指定する。
//"hoge"は、HTMLの<ol id="hoge"> というように指定している。
var max = o.childNodes.length;
//<ol id="hoge"> 要素内の子ノード(この場合、<li>..</li>)の数を変数 max に与える。参考:AllAbout JavaScript
for(var i = 0;i < max;i ++)
//隠居のお勉強:for loop の例
{
o.childNodes[i].value = max - i;
//子ノード<li>の i 番目に、(最大番号- i )を代入する。結果は、番号が降順になる。
}
</script> 


 なお、 Customaize History 履歴ページの番号降順設定は、上の JavaScript でInternetExplorer(IE) では上手くいっていたが、Mojilla 系の Firefox Netscape では番号が倍になり、原因が突き止められないまま放ってあった。
 今回改めて "childNodes.length" でネットサーチしてみると答えがあった。thescript.com というサイトのフォーラムによると、どうやら Mojilla 系では、 whitespace (空白スペース)をカウントの対象に入れるらしいことが分かった。
 そこで、Customaize History 履歴ページ(MovableType のインデックス・テンプレートで作成している)の編集画面で編集しやすくするために入れていた </li>....<li> の間の空白スペースを削除すると、Mojilla 系でも IE と同じように、綺麗な降順番号を表示するようになった。<li>..</li> のタグ・セット間に必ず空白スペースが入っていたので、偶然数字が倍の偶数になっていたらしい。

 この世界、学習すべきことは五万とある。死ぬまで退屈することはないだろう。

2008年3月30日

隠居のお勉強:JavaScript Basic (8) Loop

 W3Schools JavaScript Tutorial の第8回である。まだ、基礎部分を学習している。使わせてもらっている Expert が書かれた JavaScript を理解するには、まだ当分時間がかかりそうだが、少しずつ理解できる部分もでてきた。

 今回は Loop (ループ)である。ループには、For Loop While Loop がある。

  • for loop は、スクリプトを何回繰り返すかが分かる場合に使用される。
    • Example を次に示す。
      <html>
      <body>
      <script type="text/javascript">
      var i=0;
      for (i=0;i<=10;i++)
      {
      document.write("The number is " + i);
      document.write("<br />");
      }
      </script>
      </body>
      </html>
    • loop は、i=0 からスタートし、i が 10 以下の間、下のコード( document.write() )が繰り返される。i は1回繰り返されるたびに、1 付加される。結果は次のようになる。
      The number is 0
      The number is 1
      The number is 2
      The number is 3
      The number is 4
      The number is 5
      The number is 6
      The number is 7
      The number is 8
      The number is 9
      The number is 10


  • while loop は、特定の条件が true (真)である間ループする実行を求めるときに使われる。
    • Example を次に示す。
      <html>
      <body>
      <script type="text/javascript">
      var i=0;
      while (i<=10)
      {
      document.write("The number is " + i);
      document.write("<br />");
      i=i+1;
      }
      </script>
      </body>
      </html>
    • loop は、i が 10 以下の間、下のコード( document.write() )が繰り返される。結果は、for loop の場合と同じである。


  • do...while loop は、while loop の変種である。この loop は、常に code block を一度は実行する。それ以降は、特定の条件が true (真)である間実行をループする。
    • Example を次に示す。
      <html>
      <body>
      <script type="text/javascript">
      var i=0;
      do
      {
      document.write("The number is " + i);
      document.write("<br />");
      i=i+1;
      }
      while (i<0);
      </script>
      </body>
      </html>
    • 結果は、次の通りである。
      The number is 0

syntax は理解できたが、どのような場合に使われるかがよく分からない。

2008年3月28日

隠居のお勉強:JavaScript Basic (7) 関数

 全く自己満足の世界であるが、W3Schools での JavaScript Tutorial でお勉強を続けてみたい。

 今回は、[JS Functions]の項である。Function は、Example で既に使われているので、今回はおさらいである。
  • Function(関数)とは、イベントあるいは関数が呼び出されるときに実行される再使用可能なコードの集まりである。
    • おさらいのために、今回次のような学習のためのJavaScript を作成した。
    • ブログ・サーバーにおいた LinkButton.js という名前の js ファイル。
      //JavaScript Study Making Link Button
      function link_button()
      {
      var name=prompt("リンクする URL 名を入力ください。","URL");
      if (name!=null && name!="")
      {
      window.open(name);
      }
      }
    • この中で、prompt box に入力された URL を新しいウィンドウに開くという関数 link_button を設定している。
    • この関数を、ページを開いた時に呼び出すために、HTMLの <head> 部(MTのテンプレートで)においた。関数は、 <head> 部にも、 <body> 部にもおくことができるが、<head> 部におく方が賢明なようである。
    • <head> 部に関数を設定している js file を呼び出すためのHTML。<$MTBlogURL$>はMovableType のテンプレート・タグであり、私の場合、http://n-shuhei.net/blog/ を置換するタグである。
      <script type="text/javascript" src="<$MTBlogURL$>LinkButton.js"></script>
    • 呼び出した関数を実行するために、 <body> 部に関数 link_button() を実行させる次のような HTML を記述する。
      <input type="button" value="URL you want" onclick="link_button()" />

    • 右のボタンをクリックするとリンク先のURLを入力できる。  

    • 上の例は、arrgument (引数)がない場合の関数であるが、一般的には、次のような構文となる。
      function functionname(var1,var2,...,varX)
      {
      some code
      }
    • var1,var2 などは関数に取り込まれる変数または値である。 { と } は、関数の始めと終わりを示す。
    • var1,var2 などの引数がない場合にでも、関数名の後ろに () をつけなければならない。
    • 関数名は、小文字なければならない。JavaScript は大文字・小文字の区分が厳格である。


    • 関数ではまた、次のように関数から戻される値(戻り値)を特定する return statement が使われることがある。
      function prod(a,b)
      {
      x=a*b;
      return x;
      }
    • 上の関数を呼び出すときは、次のように2つのパラメータが必要である。
      product=prod(2,3);
    • 関数 prod() からの戻り値は 6 となるが、この値は product という変数で保存される。
    • 関数の中で宣言された変数は、その関数の中だけで使われるローカル変数となる。関数の外で宣言された変数は、グローバル変数と呼ばれ、宣言されたページのどの関数でも使用できる。ページが閉じられたときに消滅する。

2008年3月24日

隠居のお勉強:JavaScript Basic (6) Google Map link の confirm box を作る

 金曜の夜から、夫婦そろって風邪(?)を引いてしまった。どちらも消化器系をやられたので、一種の食中毒かもしれない。陽春の候というのに、二人揃って床に就いた。こんなことははじめてである。医者からもらった薬を服んで寝ていたら、翌朝は体調が戻った。

 引き続き、W3Schools JavaScript Tutorial で、お勉強である。今日は、[JS Popup Boxes] の項である。
  • JavaScript では、3種のポップアップ・ボックスを作成できる。  Alert: Confirm: Prompt: ボックスである。
    • Alert Box は、ページ閲覧者に確認の情報をポップアップ・ボックスに表示する。
    • Example を参考に、次のような js ファイル(名前はなんでもよいが、AlertBox_h1.js とした)を作って、ページの <head> 部においてみた。MTでは、メインページやエントリーページのテンプレートの <head> 部である。
      //JS Study: 改行付き Alert Box
      function disp_alert()
      {
      alert("Alert Box で改行するには" + '¥n' + "¥¥n¥ を使います。");
      }
       ¥は小文字である。MTやGoogle のサーチボックスや Gmail では、101/102 英語キーボードで小文字 ¥ を打つと、\ となって、小文字の ¥ は表示されない。この場合、HTMLのタグで使う、< > をエントリーで使うとき &lt; &gt; と入力するように、&yen; と入力すると小文字 ¥が表現される。なお、秀丸では小文字の ¥ が表示されるので、 js ファイル作成には問題がない。HTMLで表示されている入力部分に、小文字 ¥ を打つと、\ となるらしい。
    • ずいぶん寄り道をしたが、JavaScript での文字列の改行には、¥n を使う。HTML での < br /> と同じである。このときの ¥ をエスケープ・シーケェンスというらしい。エスケープ・シーケェンスについては、後ほど Tutorial の項目にもでてくるようだ。
    • MTテンプレートの <head> 部においた記述を次に示す。 <$MTBlogURL$> は、MT のテンプレート・タグである。
      <!-- JavaScript Study -->
      <script type="text/javascript" src="<$MTBlogURL$>AlertBox_h1.js"></script>
      

    • そして、 <body> 部に(エントリーに)次のようなHTMLを記述したとき、下のような Example が実行される。実際のブログへの応用については、まだ、思いつかない
      <input type="button" onclick="disp_alert()" value="改行つき Alert Box の例" />

    • Example:右のボタンをクリックしてみてください。
    • 今回初めて、 <head> 部で js ファイルを呼び出し、 <body> 部でそれを実行することを試みた。Expert が提供してくれている JavaScript プラグインの多くはこの方式をとっている。


  • Confirm Box は、ページ閲覧者に「OK」か「キャンセル」かの確認をとるお馴染みのポップアップ・ボックスである。
    • tutorial の Example と Tag <index> というページにある例を参考に、Alert Box のようによく利用する Google Map へのリンクボタンで確認するスクリプトを置いてみた。
    • 外部 js ファイル(名前はなんでもよいが、ConfirmBox_h2.js とした)と<head> 部(テンプレート)に記述したHTMLおよび <body> 部に(エントリーに)に記述したHTMLは次のようなものである。

    • 外部 js ファイル:別 Window に開きたかったので、tutorial にある location.href ではなしに window.open を用いた。 location.href では新しい Window に表示させる方法が分からなかった。
      //JavaScript Study Confirm Box
      function disp_confirm()
      {
      var r=confirm("Google Map を開きますか?");
      if (r==true)
        {
           window.open("http://maps.google.co.jp/","_blank");
         }
      else
        {
       window.alert('キャンセルされました'); 
        }
      }

    • <head> 部(テンプレート)に記述したHTML
      
      <script type="text/javascript" src="<$MTBlogURL$>ConfirmBox_h2.js"></script>
      

    • <body> 部に(エントリーに)に記述したHTML
      
      <input type="button" onclick="disp_confirm()" value="Google Map" />

右のボタンをクリックすると Confirm Box がでる。 
 ブログの右サイドにリンクボタンとして設置してみた。自作 JavaScript 3作目である。

  • Prompt Box は、多くの場合ページの訪問者にページに入る前に、何かの値を求めるときに使われる。
    • Example を参考に学習のために作った外部 js ファイル、<head> 部(テンプレート)に記述したHTMLおよび <body> 部に(エントリーに)記述したHTMLは次のようなものである。
    • 外部 js ファイル。名前はなんでもよいが、PromptBox_h3.js とした
      //JavaScript Study Prompt Box
      function disp_prompt()
      {
      var name=prompt("貴方のお名前を教えてください。","お名前");
      if (name!=null && name!="")
        {
          window.alert("今日は!! " + name + "さん。訪問ありがとうございます。");
        }
      }

    • <head> 部(テンプレート)に記述したHTML
      
      <script type="text/javascript" src="<$MTBlogURL$>PromptBox_h3.js"></script>
      

    • <body> 部に(エントリーに)に記述したHTML
      
      <input type="button" onclick="disp_prompt()" value="あなたのお名前は?" />
      


右のボタンをクリックしてみてください。
今のところ、どのように使うか思案しているが、まあ、隠居のお勉強の成果ということで、大目に見てください。

2008年3月21日

隠居のお勉強:JavaScript Basic (5) switch 構文を使って、本日の曜日を表示する

 前回の学習[JS If...Else] で、JavaScript を自分のブログへいささかの応用ができたので、勇気を得て続けて W3Schools JavaScript Tutorial でのお勉強である。

  • 今回は、条件式 [JS Switch] の学習。
    • 多くの選択肢から、一つの条件式を選んで実行する場合には、switch 構文を使わねばならない。
    • 以下は使用例である。
      <script type="text/javascript">
      //You will receive a different greeting based
      //on what day it is. Note that Sunday=0,
      //Monday=1, Tuesday=2, etc.
      var d=new Date();
      theDay=d.getDay();
      switch (theDay)
      {
      case 5:
        document.write("Finally Friday");
        break;
      case 6:
        document.write("Super Saturday");
        break;
      case 0:
        document.write("Sleepy Sunday");
        break;
      default:
        document.write("I'm looking forward to this weekend!");
      }
      </script>
    • break ステートメンを書くのは次の選択肢が実行されることを阻むためである。

  • これを応用して、自分のブログのタイトル下にある横長カレンダー横に、本日の曜日を表示することを試みた。横長カレンダーでは、曜日が分からない。
    • 上の example を参考に、次のような外部 js ファイルを秀丸で作成した。ファイル名は何でもいいが、TheDay.js として FFTP でブログサーバーにアップした。
      
      //今日は何曜日かを表示する js ファイル
      var d = new Date();
      theDay=d.getDay();
      switch (theDay)
      {
      case 0:
        document.write("<span id='js-text-red'><b>本日:日曜日</b></span>");
        break;
      case 1:
        document.write("<span id='js-text-grey'><b>本日:月曜</b></span>");
        break;
      case 2:
        document.write("<span id='js-text-grey'><b>本日:火曜</b></span>");
        break;
      case 3:
        document.write("<span id='js-text-grey'><b>本日:水曜</b></span>");
      break;
      case 4:
        document.write("<span id='js-text-grey'><b>本日:木曜</b></span>"); 
      break;
      case 5:
        document.write("<span id='js-text-grey'><b>本日:金曜</b></span>"); 
      break;
      case 6:
        document.write("<span id='js-text-blue'><b>本日:土曜</b></span>");
       break;
      }
      

    • スタイルシートに、次のスタイルを追加した。日曜日は、文字色を赤に、土曜日は水色にした。
      /* JS TheDay text */
      #js-text-grey { color: #408080; font-size: 10px; }
      #js-text-red { color: #ff0000; font-size: 10px; }
      #js-text-blue { color: #8888ff; font-size: 10px; }

    • MT テンプレート(メイン・エントリー)の<body> 部のカレンダー表示部分に、次のステートメントを追加した。
      <script src="http://n-shuhei.net/blog/TheDay.js"></script>
 これで、横長カレンダーの横に、本日:金曜日というように、ブログに訪問していただいた日の曜日が表示されるようになった。自作 JavaScript の2作目である。

2008年3月20日

隠居のお勉強:JavaScript Basic (4) 訪問時刻によって、挨拶文を変える。

 相変わらず、PC 前でRadio Senbokuを聴きながら、JavaScript のお勉強である。

 前回に書いたように、W3Schools JavaScript tutorial での [JS If...Else] のページにある Examples を応用して、私のブログのタイトルへ訪問時刻によって変化するお礼挨拶を表示させることにした。
 この具体例を記す前に、勉強したことを学習ノートにまとめておきたい。

  • [JS If...Else] で学んだこと。
    • デシジョンによって異なるアクションを実行する条件式を記述できる。
    • 条件式には、if statement ; if...else statement ; if...else if....else statement ; switch statement がある。
    • if statement はある特定条件が真(true) のみの場合にコードを実行する。次に例を示す。
      <script type="text/javascript">
      //Write "Lunch-time!" if the time is 11
      var d=new Date();
      var time=d.getHours();
      if (time==11) { document.write("<b>Lunch-time!</b>"); } <script><b>Lunch-time!</b>"); } <script>

    • if...else statementは、ある条件が、true の場合はあるコードを実行し、false の場合は他のコードを実行する。
      以下は事例。
      <script type="text/javascript">
      //If the time is less than 10,
      //you will get a "Good morning" greeting.
      //Otherwise you will get a "Good day" greeting.
      var d = new Date(); var time = d.getHours();
      if (time < 10) { document.write("Good morning!"); } else { document.write("Good day!"); } </script>

    • if...else if....else statement の記述によって、多くに条件の中から適切な条件に合致するコードを実行させることができる。
      下に example を示す。
      <script type="text/javascript">
      var d = new Date()
      var time = d.getHours()
      if (time<10)
      {
      document.write("<b>>Good morning</b>");
      }
      else if (time>10 && time<16)
      {
      document.write("<b>Good day</b>");
      }
      else
      {
      document.write("<b>Hello World!</b>");
      }
      </script>


 この if...else if....else statement を応用して、下のような外部 js ファイルを秀丸でエンコードを UTF8 として Greeting.js というファイル名(拡張子が js であれば名前は何でも良い)作成し、ブログサーバーに ファイル転送ソフト(FFTP) でアップした。
//ブログ・タイトルに、挨拶を表示する JSファイル
var d = new Date();
var time = d.getHours();
if (time<10)
{
document.write("<span style='color: #ffffe0'><b>おはようございます!! 早くからのご訪問ありがとうございます。</b></span>");
}
else if (time>=10 && time<18)
{
document.write("<span style='color: #ffffe0'><b>こんにちは!! いつもご訪問ありがとうございます。</b></span>");
}
else
{
document.write("<span style='color: #ffffe0'><b>今晩は!! いつもご訪問ありがとうございます。</b></span>");
}
 変数 d time の定義の仕方は、学習を進めると出てくると思うが、今のところ examples の通りに使っている。
 文字色を指定する span タグの間に入れるダブルコーテション( "---")の文字列ははシングルコーテション( '---' )でなければならない。

 この js ファイルをブログ・テンプレートのタイトル表示部分に、下の記述を挿入した。
 朝10時までに訪問していただいた方には、「おはようございます。」、10時から18時までに訪問していただいた方には、「こんにちは」、18時以降24時までの間に訪問していただいた方には、「今晩は」と表示されるはずである。
<script src="http://n-shuhei.net/blog/Greeting.js"></script> 


今まで学習したことを自分のブログのカストマイズに生かせるのはもっと学習が進んでからと思っていたが、この時点でささやかながら応用できた。お勉強の励みになるというものだ。

 

2008年3月20日

隠居のお勉強:JavaScript Basic (3)

 雨が降り続くので、今日も JavaScript の学習を W3Schools Tutorial ですることにした。いつになったら自分のブログに使えるスクリプトが記述できるか分からないが、気長にやっていこうと思う。残された人生の時間はそんなに多くないが。

  • 今日は、[JS Comparisons] から。
    • Comparison Operators(比較演算子)は、変数あるいは値を比較し真 (true) 偽 (false)を決定する論理式で使用される。
    • 比較演算子の使用例を、下の図に表示する。

    • Logical Operators(論理演算式)は、変数あるいは値の論理の真 (true) 偽 (false)を決定するときに使用される。
    • 論理演算子の使用例を、下の図に表示する。

    • JavaScript は、ある条件下において、ある変数にある値を割り当てる Conditional Operator(条件演算子)も備えている。
    • Conditional Operator(条件演算子)は次のように使用される。


  • 次に、[JS If...Else] の学習。条件式の勉強である。
 Tutorial に例示されている Examples を見ていたら、自分のブログに応用できそうだったので、外部 JS ファイルを記述してタイトル部分に使用してみるとなんとか形になった。
 詳細については、次回のエントリーに掲載したい。

2008年3月19日

隠居のお勉強:JavaScript Basic (2)

 今日は朝から春雨が強く降っている。再開をはじめたDIYは今日はお休みにして、PC 前でRadio Senbokuを聴きながらJavaScript の晩学をした。教材は、W3Shools のものである。
 
  • 今日は、まずコメントの書き方について。
    • 一行に書くときは行頭に //
    • 複数行にまたがるときは、コメントの先頭に /* コメントの終わりを */ とする。
    • もちろん、スクリプトをコメントアウトするときにも使える。
  •  これは、当然のことながらActionScript の記述でも同じである。CSS では、/* -------- */ だけのようである。
     HTMLでは、コメントは一行でも複数行でも、行中でも、コメントの先頭は <!-- で、終わりは --> である。

  • 次に、[JS Variables] の学習 
    • Variables(変数)は、情報を格納するコンテナである。
    • 変数は代数学(Algebra)の x=5, y=6,, z=x+y → z=11 と同じように、x, y, z が変数である。
    • 変数は、carname="VOLVO" のようにテキストも値として持てる。
    • 変数は、大文字・小文字を区分する。また、変数名は、文字で始まらねばならない。JavaScript そのものが大文字と小文字を区分する。

  • 次に、[JS Operators] の学習
    • Operator(演算子) には、Arithmetic operators(算術演算子)や Assignment operators(代入演算子)などがある。
    • Arithmetic operators(算術演算子)には、つぎのようなものがある。

    • Assignment operators(代入演算子)には、つぎのようなものがある。

    • +プラス)演算子は、テキストの連結にも使われる。

 JavaScript Tutorial に使われている英語は、JavaScript Language Specification を参考にさせていただいた。普通の英語辞書には載っていない。

2008年3月18日

隠居のお勉強:JavaScript Basic (1)

 ブログで少し凝ったことを実現させようとすると Web を構成している言語を少しは理解する必要がある。HTML(HyperText Markup Language), CSS(Cascading Style Sheets)についてはある程度理解できるようになり、自分のサイトへの応用に少しはいじれるようになってきた。

 だが、カスタマイズに多用している JavaScript, Adobe Flash を制御する ActionScript については、ネットや参考書などで公開されている example を真似して作っている。それでは、少し自分向けにいじりたい場合には手も足もでなくなる。
 年寄りの冷や水であるが、基本的なことを学習しようかと思い始めた。学習したことをすぐ忘れてしまうので、自分自身への記録のためにブログ上に学習ノートを作ることにした。ブログとは、その語源からして自分のためようだから。

 教材は、W3Schools の tutorial を使うことにした。英語だが平易に書いてあり、頭の硬くなった老人でもなんとかついていけそうであるが、どこまで理解できるかは自信がない。

 W3Schools の Home 左メニューの BrowserScripting から Learn JavaScript を選択すると JavaScript Tutorial が出てくる。学習の仕方は、[JS Home] → [JS Introduction] とページを繰っていくのだが、ページの上下に [previous] [next] があるので、これに従えばよい。もちろん、記述は example とかお試しページや関連ページへのハイパーリンクが設定されている。これらへリンクした後は、最初の内は元のページに戻って、 [next] ボタンで次のページに進んだ方がよさそうだ。

 Tutorial の [JS Introduction] に、
JavaScript's official name is "ECMAScript".
The standard is developed and maintained by the ECMA organisation.
ECMA-262 is the official JavaScript standard. The standard is based on JavaScript (Netscape) and JScript (Microsoft).
 とある。一方、ActionScript のWikipedia による解説では、
ActionScript(アクションスクリプト)とは、アドビシステムズ社の製品であるFlashに使用されるプログラミング言語である。ECMAScript(ECMA-262)を拡張した物である。
 とある。JavaScript の学習は、ActionScript の学習でもあるのをはじめて分かった。お恥ずかしい話である。

 [JS How to] [JS Where to] までは、いままで曲がりなりに、エキスパート達の JavaScript を使ってきたので理解できる。   [JS Where to] で Using an External JavaScript を実験するために、
// これは、外部JSファイルを使う勉強用です。
document.write("<h1>これは、タグ h1 で書いています。</h1><br />");
document.write("<h2>これは、タグ h2 で書いています。</h2>");
document.write("<p>これは、タグ p で書いています。</p>");
 というような外部JSファイルをテキスト作成ソフト秀丸で作成し、サーバーに xxx_1.js というファイルをFTPソフト(私の場合 FFTP )でアップした。ファイルを作成するとき、エンコードは UTF-8 でなければならない。秀丸は、このような機能が備わっているから便利である。

 なお、このエントリーに記述したHTMLは、次のようなものである。
<script src="http://n-shuhei.net/blog/xxx_1.js"></script>


 この外部JSをこのエントリーで実行してると、結果は次の通りとなる。JavaScript のなかに記述した HTML タグは、そのまま実行される。 直接 HTMLでエントリー編集すればできることであるが、外部JSファイルを使う学習するためである。


 これを第1回とし、今後、W3Schools の順序に従って学習したことを記していきたい。

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 に取り組んでから、アルツハイマーになりつつある頭脳弱体化防止には少し役立ったかもしれない。

2006年11月12日

泉北の紅葉:Google Maps API v2 Trial

 11月4・5日のエントリーで、 ZENRIN の地図を使ったページを掲載した。その後、地図について色々と調べてみると Google Maps を自分のサイト上に使うことへの制約がほとんどないことが分かった。以前はGoogle Map はキャプチャー・ソフトを使って一部分を切り取って使っていた(こういう使い方は違法のようである。)が、それ以上にダイナミックな使い方が許諾されている。詳細については、別のエントリーで紹介するつもりだ。
 ただ、使いこなすには JavaScript がかなり理解できないと難しいし、Ajax への理解も必要なようだ。そういうわけで、JavaScript の超初心者としてなんとか形になったのは以下のようなものである。この地図は、Google Map と同じ使い方ができる。コントロールボタンでサテライトの写真地図も見ることができるし、拡大・縮小もできる。また、地図をドラッグして動かすこともできる。すごい代物である。
 地図の下の部分は先達諸氏の作品と解説を参考に作った。チェックボックスをクリックするとその場所のマークが表示される。その場所に吹き出しを作ってその中にHTMLも書けるようだが、それは次のステップにしたい。なにしろここまでたどり着くのにアルツハイマーになりかかっている頭ではずいぶん時間がかかっている。
 参考にさせていただいたページを以下に記します。
 Greek なページ
 All About:Ajax Google Mapsを自サイトに設置する

2006年11月 3日

番号リストで番号を降順にする方法は?

 自分のWeblogを中心とするホームページに手を加えた事項を備忘録的に書き留めて、カストマイズ履歴のページをテンプレートとして作成している。カストマイズした項目のリストは新しいカストマイズが一番上にきているが、リストの番号は一番最新のものが常に1番であった。この番号はできれば最新のカストマイズが何番目のカストマイズかを示したいので、番号は降順にして1番目にしたカストマイズは1番にしたい。HTMLのコードでは、HTML4.01の仕様書でもそのような方法は記載されていないらしく、HTMLコードではどうも駄目らしい。Googleで「HTML 降順 リスト ol li」でサーチすると、人力検索?Hatena::Qustionで「HTML番号リストで番号を逆順にする方法は?」という質問があり、その回答に andi さんという方が JavaScript での解決を提示されておられる。この JavaScript をいただいて、カストマイズ履歴テンプレートに貼り付けてみると希望通りの表示になった。ただし、このJavaScriptは、</ol> の後に貼り付けると上手くいくようだ。なお、<ol> は下のScript 似合わせて <ol id=hoge> とValue属性が必要である。 ちなみに、この JavaScript は以下の通りである。
<script>
var o = document.getElementById("hoge");
var max = o.childNodes.length;
for(var i = 0;i < max;i ++){
o.childNodes[i].value = max - i;
}
</script>

続きを読む "番号リストで番号を降順にする方法は?"

2006年10月23日

TinyMCE for MT3.3 をインストール

 MT3.33-jaにしてから、今まで使用してきた BigPAPI 関連のPlugins(例えば、BigTemplateWindow など)が上手く動かないようになった。BigPAPI と Transformer との競合らしい。これを避けるために、H.Fujimoto さんの TransformerTest をインストールしてみたが効果はなかった。一番使いたかった BigTemplateWindow は、MT3.3 用のバージョンになってから BigPAPI を利用しないに設定しないと動かないから、この際 BigPAPI とはさよならすることにした。
  TinyMCE も BigPAPI が必要のない MT3.3 用がでたようなのでインストールしてみた。 インストールの方法は、公式サイトに詳しく出ている。この Plugin をダウンロードして、readme.txt を読んでみると Internet Explorer 6 では動作するが使用できない機能も多数あると書いてあるので、IE7 をインストールすることにした。インストールしてみるとIE7 のせいか、TinyMCE のせいかどちらかか分からないが動きが非常に遅い。 readme.txt のPCスペックの項には、XP P4 とともに RAM 512MB 以上とある。組み立てた時には早かった自作の PC も今や最低のラインになっているらしい。奮発して、メモリーを購入することにした。パソコンの部品店にいってみると、私の自作 PC はもはや古い型のマザーボード(P4PE)なのでそれに合うメモリーも今やほとんどないらしい。ようやくのこと、「これならいけるでしょう」という 1GB のメモリーを求めて、今までのメモリー( 256MBx2 )と入れ替えた。体感的には早くなったような気がしている。
TinyMCE01.gif TinyMCE02.gif  ←左のスクリーンショットは、左側が native なエントリー編集画面である。タグ・アイコンの左端にある WYSWYG ボタンをクリックすると右のスクリーンショットのようになり、編集はしやすくなる。ただ、IE7上ではFEPなど不安定(Firefox, Netscapeでは大丈夫)なようである。使い慣れることが必要なのかもしれないが。 




続きを読む "TinyMCE for MT3.3 をインストール"

2006年6月 5日

コメントのテキストエリア拡大など

 今まで少し長文のコメントをしたい(してもらう)ときには、テキストエリアが小さいと感じていた。いろいろと調査をすると横幅の拡大は単純にCSSを弄ることでできることが分かった。「小粋空間」さんのテンプレートで使っているstyle-site.cssの#comment-text のwidthを大きくするだけである。
 コメントするときのテキストエリアの縦方向の拡大や文字を大きくしたり小さくしたりできるTextarea ToolsというJavaScriptを見つけたので、これをインストールしてみることにした。アイコンの位置取りに少してこづったがなんとか形になった。ただし、字の大きさは入力するときのみ大きくできるだけで、投稿されたコメントは通常の表示になる。
 ついでにコメント・プレビュー画面の横幅も大きくした。
(追記:2006/6/7 6:00)現在 Textarea Toolsへはアクセスできないようです。

2006年4月 6日

Reform e-Words

 「MTでつくる最強のブログサイト」で紹介されていた関連IT用語表示(e-words)を取り入れていた。 私の友だちのような高齢者向けに、IT用語を説明するサービスのつもりだった。ただ、defaultでは用語のリストの文字が大きく、また、●のリストマークも気に入らなかった。いじれる部分はないかと e-words のスクリプト部分 embed.x で検索すると「小粋空間」さんの埋め込み e-words を使うというエントリーが見つかった。カスタマイズのカテゴリーでは収載されていなかったので気が付いていなかったのだ。早速、利用させていただいて、従来のテーブルイメージのものと切り替えた。テンプレートも折りたたみなど多くのカスタマイズも「小粋空間」さんのものを利用させていただいているので、全体のバランスがよくなり気に入っている。掲載されているコードに、文字コードutf8を指定する部分と折りたたみのJavaScriptを付加するだけで上手くいった。いつもながらに、yujiroさんに感謝です。

続きを読む "Reform e-Words"