カテゴリー : jQuery

新しくなったGoogle Maps API V3をjQueryと一緒に利用する

WordPress を勉強しようと購入した WordPress カスタマイズブック のサンプルを見ていたら、Google Map API のバージョンが3に上がっているのに気が付いた。

バージョン3 から API キーが必要なくなったので、これから使ってみようかと思っている人には、使い方の敷居が一段と低くなったと思う。ここで紹介するのは、jQuery と Google Maps API V3 を利用して、指定した地名の場所を表示するサンプルですが、あなたのローカル PC 上で jQuery ライブラリをダウンロードすることなく、地図を表示する JavaScript のプログラムを作る事ができるのでお楽しみに。

先ずは実際のサンプルは以下の通り。

入力ボックスに地名を入れて、ポイント表示ボタンを押してみて下さい。指定した地名があれば、そこを表示の中心になるように地図が移動します(地図が表示されていないようなら、タイトルをクリックして記事の表示へ移行してみて下さい)。

HTML ソース

<html>
<head>
<title>Enjoy with Google Map</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
	google.load("jquery", "1.3.2");
</script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&amp;region=JP"></script>
<script type="text/javascript">
$(document).ready(function() {
	$("#abtn").click(function() {
		if (marker != null) {
			marker.setVisible(false);
			delete marker;
		}
		codeAddress($("#aname").val());
	});

	var codeAddress = function(areaname) {
		if (geocoder) {
			geocoder.geocode({'address': areaname}, function(results, status) {
				if (status == google.maps.GeocoderStatus.OK) {
					map.setCenter(results[0].geometry.location);
					marker = new google.maps.Marker({
						map: map,
						position: results[0].geometry.location
					});
				} else {
					alert("Geocode was not successfull for the following reason: " + status);
				}
			});
 		}
	}

	var myOptions = {
		zoom: 8,
		mapTypeId: google.maps.MapTypeId.TERRAIN
	};
	var marker = null;
	var geocoder = new google.maps.Geocoder();
	var map = new google.maps.Map($("#map_canvas").get(0), myOptions);
	codeAddress("甲府");
});
</script>
</head>
<body>
<h1>Google Map</h1>
<div id="map_canvas" style="width:480px; height:400px;"></div>
<p><input type="text" id="aname" value="" /><input type="button" id="abtn" value="ポイント表示" /></p>
</body>
</html>

このサンプルの HTML とプログラムは上の通り。マウスカーソルを表示ソースの上に置くとアイコンボタンが現れるので、カット&ペーストを利用してテキストエディタにペーストして下さい。保存後、ブラウザで動作確認ができます。

簡単な説明

jQuery ライブラリの読込みは、Google のダウンロードサイトから 5行目~8行目のようにして読み込むことができる。Google Maps API を利用する方法は、9行目のように同じく Google サイトを利用して、ライブラリを読み出すことで行う。なお「sensor」パラメータは、V3から iPhone や Android で地図が表示できるように作られており、GPS機能を持っている携帯を利用するとき位置情報が読み出せるかどうかの指定である。ここでは普通のPC上で利用するので、false を指定。

Google のチュートリアルでは、サイトを表示したとき同時に地図を表示するように、bodyタグにonloadイベントを利用してマップを表示するためのJavaScriptプログラムを動作させるように説明されている。

ここではjQueryを利用するので、jQueryのreadyメソッドを利用して表示するようにした。readyメソッドには、ボタンがクリックされた時のイベントプログラムや、地名から位置を取得してマップを表示するメソッドも入れた。

マップは、38行目にあるように表示タイプを指定できる。普通にお目にかかるマップが「ROADMAP」、その他「SATELLITE」、「HYBRID」があり、上のプログラムの「TERRAIN」は地形図のように表示する。

42行目で、マップを「div id=”map_canvas”」領域に表示するため、google.maps.Map オブジェクトの初期化で「document.getElementById(“map_canvas”)」の戻り値をパラメータとして渡すように、チュートリアルでは説明されている。ここでは jQuery を利用するので、$(“#”) のオブジェクトから getElementById() のオブジェクトと同じ内容を取り出す方法はないかと調べたところ、以下にあったのでその方法を利用した。
jquery で getElementByID() と同等のオブジェクトを取得するには

WordPress プラグイン作成の参考書

jQueryによる電卓機能付きテンキーパッド

工場現場でPCを利用する場合、キーボードを叩いたりマウスを操作するような、そんなオフィッスでの使い方はNGである。マンマシンインターフェースを考えるなら、液晶ディスプレイ上でタッチパネルを利用したり、バーコードやRFIDなどを使ったシステムが良い。

0507ET1602本体となるPCであるが、最近ASUSから安価なタッチスクリーン液晶PCが出てきたので、いよいよ本格的に工場に新しいシステムを導入しよう、という意欲が湧いてきた。

ところで、日本の花形産業だと思っていた製造業も、ご存知の通り、今や3Kのみならず低賃金となってしまった。そんな中でIT化やIT利用を考えるなら、今やオープンソースの活用は欠かすことができない。

と言うことで、今後現場でブラウザを利用したシステムを開発するための技術的な要素として、JavaScriptを利用してタッチスクリーンから情報を入力するためのテンキーバッドを作ってみた。折角なので、電卓機能も追加した。

また、キートップの画像は、各画像を1つにまとめてCSSで切り分けて利用する方法を行なってみた。

C AC / *
7 8 9 -
4 5 6 +
1 2 3 Ent
0 . =

jQueryでAjax、はじめの一歩

次のサンプルは、画像共有サイトFlickrの「Public photos」フィードサービスを利用して、こちらから指定したタグに関連するデータを受け取り、渡されたデータから「media」で指定された画像を表示する例である。「鉄は熱いうちに打て」ということで、jQueryをもう少し突っ込んで利用してみる。

使い方は、カテゴリを選択してから「読込む」ボタンを押せば、「次へ」で次の画像を読み込んで表示する。何が出るか分からないので、心の準備はしておいて下さい。責任は一切持ちません(^_^;)。



この例の元ネタは、jQueryのAPIリファレンスでAjaxのgetJSONの項である。FlickrのAPIは、Flicker ServicesのFeedsページでPublic photosに説明がある。フィードデータのJSONフォーマットは、「NEW」の印が付いているので最近サポートされるようになったのかな?

以下が、この例のソースプログラムである。表現を短くするために、if文などカッコで囲まないで1行で書いたり、利用しない引数を書いたりするのは自分はあまり好きではないが、ソースが読み易くなるならそれもいいか…。

<script type="text/javascript">
  var flcd = new Array();
  var cno = -1;

  function dispImage() {
    $("#flcs").empty();
    for (var j = 0; j < 2; j++) {
      $("#flcs").append("<img src=\"" + flcd[cno + j].media.m + "\" />");
    }
  }

  $(document).ready(function() {
    $("select").change(function() {
      $("#seltag").attr("value", $(this).attr("value"));
    });
    $("#getimg").click(function() {
      $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=" + $("#seltag").attr("value") + "&tagmode=and&format=json&jsoncallback=?", function(data) {
        flcd = data.items;
        dispImage(cno=0);
        $("#next").removeAttr("disabled");
        $("#prev").removeAttr("disabled");
      });
    });
    $("#next").click(function() {
      if (cno < flcd.length - 2) dispImage(++cno);
    });
    $("#prev").click(function() {
      if (0 < cno) dispImage(--cno);
    });
  });
</script>

JavaScriptでは、セキュリティ上読み出されたサイト以外のサイト(クロスドメイン)には、接続できないようになっている。そのため、 WebAPIサービスを利用する場合、自サイトに他サイトのWebAPIサービスからデータを取ってくるCGIを用意し、JavaScriptでその CGIを利用して読み込んだりする。

一方この例はJSONPと呼ばれる方法で、JavaScriptのソースはクロスドメインでもアクセスできることから、WebAPIサービスのデータを受け取るJavaScriptのコールバック関数を用意して呼び出すことで、コールバック関数とそれに配列データを加えて戻す方法を利用したものである。どこの説明にも、悪意あるコードを含めることが可能なので、利用する際は注意するように、と書かれているので念のため。

理屈はよく分からないけど、これならサーバーサイドのCGIを利用しなくても、Web2.0プログラムができるかも知れないですね(自分には無理っぽいですが orz)。

jQuery imgのロールオーバー

JavaScriptがサクサク使えるようにならないので、何かいいものはないかと探したところ、jQueryが目に留まった。Prototypeよりもコードが小さく、記述も独特な書き方でコンパクトに表現できる。何か、メジャーなライブラリになる予感。今のうちに、使えるようになろう、っと(^o^)/。

って、直ぐには使えるようにならない(T_T)。カテゴリに「プログラミング」を設けているので、理解が進んだ(少しだけど)ものを記事にしておこう。お題は、タイトルの通り。CSSを利用する方法もあるが、メニューなど個別に指定するのは大変である。そこでこれですよ。

「class=”roll”」が指定された<img>要素の画像にマウスカーソルが移動したら、画像を切り替えるプログラムである。画 像ファイルを切り替えなければならないので、ロールオーバーするファイル名は「menu_ov.gif」のように、元のファイル名に「_ov」を加えた名 前とする。以下サンプルです。
bo-21

bo-27
画像がきれいだったので、Vegaさんからお借りした。プログラムは次の通り。

<script type="text/javascript">
$(document).ready(function() {
	$("img.roll").hover(function() {
		$(this).attr("src", function() {
			return this.src.substring(0, this.src.lastIndexOf(".")) + "_ov" + this.src.substring(this.src.lastIndexOf("."));
		});
	}, function() {
		$(this).attr("src", function() {
			return this.src.substring(0, this.src.search(/_ov\./)) + this.src.substring(this.src.lastIndexOf("."));
		});
	});
});
</script>