genisgen: 6月 2007

2007年6月22日

2007年6月17日

Google Mapsの地図検索

Google Maps APIで日本の住所から緯度・経度を求める方法
 AJAX Search + Google Maps @ Google AJAX Search API Code Samples Google AJAX Search API Class Reference

2007年6月13日

2007年6月12日

LightBox Q&A

LightBoxを能動的（明示的）に実行させるには？
例えば、document.getElementById('').innerHTML="<a href=...>...</a>"とDHTMLでLightBoxの対象を作成した場合、能動的にLightBoxを実行し、この<a>タグに対し機能するようにさせなければならない。

回答：
initLightBox();で能動的に実行。

z-indexの関係で背景がすべて灰色にならない
回答：
灰色にするz-indexはlightbox.cssで確認可能。デフォルトでは、#lightboxがz-index:100（5行目）、#overlayがz-index:90（75行目）。灰色にしたい対象のz-indexをこれらのz-indexより小さくなるようにすれば良い。

2007年6月10日

写真のかっこいい表示 LightBox2

写真地図ブラウザで写真をどう表示するか。なかなか難しい。そこでとりあえずlightbox.jsという写真表示のjavascsript libraryを使ってみた。

特徴は

表示方法がカッコ良い。
実装方法もカッコ良い。しっかりしている。
表示方法が工夫されているので、画像データのロード時間が気にならない。
というか、急いで見たい気が薄れる。
さらに写真セットとすると、プリロードしてくれて、2枚目以降が表示が速い。

ホームページはLightBox2 by Lokesh Dhakar。

1.必要なもののダウンロード: LightBox2のダウンロードページより
2.画像ファイルの場所の指定: lightbox.jsとlightbox.cssに画像ファイルの場所が指定されているので、アップロードする場所を考えて修正。今回は全てhttp://genisgen.googlepages.com/直下にアップロードするので（googlepagesにはfolderを作成できず、直下にしかアップロードできない）、例えばlightbox.jsの65行目の"images/loading.gif"を "http://genisgen.googlepages.com/loading.gif"に修正。 lightbox.jsの66行目、lightbox.cssの47行目52行目53行目も同様に修正。
3.必要なもののアップロード: effects.js, prev.gif, next.gif, loading.gif, close.gif, lightbox.css, lightbox.js, blank.gif, closelabel.gif
4.リンクの設定: <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />を<head>タグ内に挿入。
bloggerの場合だと、テンプレート>HTMLの編集より。

これで準備は完了。あとは、以下のように書けば使用可能。

<script type="text/javascript"
 src="http://genisgen.googlepages.com/prototype.js>
</script>
<script type="text/javascript"
 src="http://genisgen.googlepages.com/scriptaculous.js?load=effects">
</script>
<script type="text/javascript"
 src="http://genisgen.googlepages.com/lightbox.js">
</script>
<a href="http://farm2.static.flickr.com/1001/527593023_6ff2e308bd.jpg" 
   rel="lightbox">image #1</a>

実行例：

image #1

写真セットの実行例：

image #1 image #2 image #3

問題:
ただし問題は、表示される写真にリンクを付与できないこと。表示される写真をクリックしたら、その写真のブログページに飛ぶようにしたい。まぁ、これはlightbox.jsをハックするしかないんだろう。それほど難しくはないような気がする。
と思ったけど、こんなニーズは他にも沢山あるような気がしてlightboxのホームページを見直したら、対応方法が書いてあった。危ない、危ない。いつも部下に言っている『他の人も欲しがりそうなことは、転がっているはずと考えろ』を忘れていた。恥ずかしい。

<a href="images/image-4.jpg" rel="lightbox"
title="&lt;a href=&quot;link.html&quot;&gt;my link&lt;/a&gt;">
  Image
</a>

リンクの実行例：

Image

javascriptの関数からの実行
Google Mapsで使うことを考えると、javascriptの関数から表示できるようにしなければならない。<a>オブジェクトのメソッドで出来そう。ということで Microsoft Developer NetworkのHTML and DHTML Referenceに。Objects>a>Methodsでclick()を発見。このサイトは助かる。サンプルプログラムもあるし。
だけどFirefoxではダメだって。mozilla developer centerのDOM:element.clickに書いてある。
ここでまたまた暴走。Firefoxでどうすれば良いか必死に探しちゃった。難しそうと分かって初めて気付いた。他の人も困っているはず。Lightbox forumにあたったら直ぐあった。
答えはmyLightbox.start(クリックしたいaオブジェクト)という関数を使うこと。

javascriptからの実行例：

2007年6月9日

Google Maps カスタムアイコン

好みのアイコンは使いたいもの。下のソースを見た方が早いと思うけど、GIconのコンストラクタにはびっくりした。欲しいコンストラクタがまさにあった。考えてみれば、確かに欲しい人は多そう。考えられてるなぁ。

icon.iconSizeとicon.shadowSizeはそれぞれが表示される大きさ。画像の大きさと同じにすればそのままの表示だし、値を小さくすれば縮小されて表示される。icon.iconAnchorは、このアイコンが指し示す部分（上の例だとアイコン下部のとがった部分）が画像の左上から何pixelのところかを指定する。

<div id="markerMap" style="width:500px;height:200px;"></div>
<script>
  var map = new GMap2(document.getElementById("markerMap"));
  map.addControl(new GMapTypeControl(1));
  map.setCenter(new GLatLng(35.5577, 139.7249), 17);


  //黄色のアイコン
  var point = new GLatLng(35.5577, 139.7249);
  var icon = new GIcon(G_DEFAULT_ICON,
       "http://www.geocities.jp/genwasgen/img/markeryellow.png");
  var marker = new GMarker(point, icon);
  map.addOverlay(marker);

  //赤色の小さいアイコン
  var point = new GLatLng(35.5577, 139.7259);
  var icon = new GIcon();
  icon.image  = "http://labs.google.com/ridefinder/"
                  +"images/mm_20_red.png";
  icon.shadow = "http://labs.google.com/ridefinder/"
                  +"images/mm_20_shadow.png";
  icon.iconSize   = new GSize(12, 20);
  icon.shadowSize = new GSize(22, 20);
  icon.iconAnchor = new GPoint(6, 20);
  var marker = new GMarker(point, icon);
  map.addOverlay(marker);
</script>

ついでにアイコンの色々。

	http://www.google.com/intl/en_ALL/mapfiles/dd-start.png
	http://www.google.com/intl/en_ALL/mapfiles/dd-end.png
	http://www.google.com/intl/en_ALL/mapfiles/arrow.png
	http://www.google.com/intl/en_ALL/mapfiles/arrowshadow.png
	http://www.google.com/intl/en_ALL/mapfiles/dir_0.png
	http://www.google.com/intl/en_ALL/mapfiles/dir_3.png
	http://www.google.com/intl/en_ALL/mapfiles/dir_117.png
	http://www.google.com/intl/en_ALL/mapfiles/dir_walk_0.png
	http://www.google.com/intl/en_ALL/mapfiles/dir_walk_3.png
	http://www.google.com/intl/en_ALL/mapfiles/dir_walk_117.png
	http://labs.google.com/ridefinder/images/mm_20_purple.png
	http://labs.google.com/ridefinder/images/mm_20_yellow.png
	http://labs.google.com/ridefinder/images/mm_20_yellow.png
	http://labs.google.com/ridefinder/images/mm_20_blue.png
	http://labs.google.com/ridefinder/images/mm_20_white.png
	http://labs.google.com/ridefinder/images/mm_20_white.png
	http://labs.google.com/ridefinder/images/mm_20_green.png
	http://labs.google.com/ridefinder/images/mm_20_black.png
	http://labs.google.com/ridefinder/images/mm_20_orange.png
	http://labs.google.com/ridefinder/images/mm_20_gray.png
	http://labs.google.com/ridefinder/images/mm_20_brown.png
	http://labs.google.com/ridefinder/images/mm_20_shadow.png
	http://maps.google.com/mapfiles/kml/pushpin/wht-pushpin.png
	http://maps.google.com/mapfiles/kml/pushpin/red-pushpin.png
	http://maps.google.com/mapfiles/kml/pushpin/ylw-pushpin.png
	http://maps.google.com/mapfiles/kml/pushpin/grn-pushpin.png
	http://www.google.com/apis/maps/documentation/markermanager/sun.png
	http://www.google.com/apis/maps/documentation/markermanager/sun-shadow.png
	http://www.google.com/apis/maps/documentation/markermanager/rain.png
	http://www.google.com/apis/maps/documentation/markermanager/rain-shadow.png
	http://www.google.com/apis/maps/documentation/markermanager/snow.png
	http://www.google.com/apis/maps/documentation/markermanager/snow-shadow.png
	http://www.google.com/apis/maps/documentation/markermanager/storm.png
	http://www.google.com/apis/maps/documentation/markermanager/storm-shadow.png
	http://maps.google.com/help/maps/streetview/images/man_arrow-10.png
	http://www.google.com/help/hc/images/maps_human.png
	http://
	http://
	http://

Google Mapsのホイール拡大縮小　スクロールしないで

Google Mapsをマウスに付いているホイールで拡大縮小できると気持ち良い。GMap2オブジェクトに対しenableScrollWheelZoomメソッドを使えば、ホイールで拡大縮小ができるようになる。だけど、ページも同時にスクロールしてしまうことが問題だった。

調べてみたけど、なかなか難しい。結局、どこかの掲示板でMapping Application & Data Entry @ Woodrow Wilson School, Princeton Universityというのを見つけた。ホイールで拡大縮小しつつ、ページスクロールしていない！掲示板では、この作者が「ホイールで拡大しようとすると一段階ではなく二段階拡大してしまう」と助けを求めていた。ソースを見れば直ぐ分かる通り、enableScrollWheelZoomで一段階拡大し、さらに自分のオリジナルコードで一段階拡大している。きちんと掲示板では誰かが指摘していたけど、まだ治っていない。不思議。

何はともあれ、エッセンスは下のソースの通り。GoogleMaps上でのホイールを回すイベントはGEvent.addDomListenerでゲットして、ウィンドウに対しては無効化しちゃう。

実装してみるとやっぱり気持ち良い！Google Maps本体でも実装しないのかな？

<div id="wheelMap" style="width:500px;height:200px;"></div>
<script>
  var map = new GMap2(document.getElementById("wheelMap"));
  map.addControl(new GMapTypeControl(1));
  map.setCenter(new GLatLng(35.5577, 139.7249), 17);

  map.enableScrollWheelZoom();  
  map.enableContinuousZoom();


  GEvent.addDomListener(document.getElementById("wheelMap"),
     "DOMMouseScroll", CancelEvent); // Firefox
  GEvent.addDomListener(document.getElementById("wheelMap"),
     "mousewheel",     CancelEvent); // IE


function CancelEvent(event)
{
  e = event;
  if (typeof e.preventDefault  == 'function') 
        e.preventDefault();
  if (typeof e.stopPropagation == 'function')
        e.stopPropagation();
  if (window.event) {
     window.event.cancelBubble = true; // for IE
     window.event.returnValue = false; // for IE
  }
}
</script>

Google Mapsにカスタムボタンを配置

このマップの右上のようにカスタムボタンを配置したかったけど、なかなか良いサンプルが見つからなくて苦労した。Custom Map Controlsにもサンプルあるけど、少し冗長に思えたので、エッセンスを踏まえて完成したのが下のソース。

<div id="testMap" style="width:500px;height:200px;"></div>

<script>
  //地図の作成と表示
  var map = new GMap2(document.getElementById("testMap"));
  map.addControl(new GMapTypeControl(1));
  map.setCenter(new GLatLng(35.5577, 139.7249), 17);

  //ボタンの作成
  pMBlink=document.createElement("img");
  pMBlink.src=
     "http://genisgen.googlepages.com/markersMap.png";
  pMBlink.style.border="0px";
  pMBlink.style.cursor="pointer";
  pMBlink.title="photoMap Browserを表示";
  GEvent.addDomListener(pMBlink, "click", function() {
    alert("Clicked!");
  });

  //ボタンの表示
  var pos = new GControlPosition(
    G_ANCHOR_TOP_RIGHT, new GSize(1,29)
  );
  pos.apply(pMBlink);
  map.getContainer().appendChild(pMBlink);
</script>

2007年6月7日

写真地図ブラウザ制作２ブラウザの角を丸く

ブラウザの角はやはり丸くしたい。

javascriptでカッコよくやる方法があったはずと、ブックマークを探してみたけど無かった。少し探すとRUZEE.ShadedBorder というのが高機能で良い感じ。サンプルもカッコイイ。しかし実装方法がカッコ悪い。挙動も少し不審。なんかソースが汚そう。このjsファイルは短いので、少し読み込んで改良しようとも考えた。けどめんどくさいので、他を探すことにした。

javascriptでsvgをしようというプロジェクトでも角を丸くすることは可能。サンプルはこんな感じ。だけど実装方法がごちゃごちゃ。しかもこのプロジェクト自体があまり動いていない感じ。なのでもう少し探してみることに。

色々な方法があるらしい。角丸に関するあれこれ @ WWW watchにまとまっている。Goggleでrounded divで検索しても結構色々出てくる。

色々見ていくとjavascriptで実現するのは、あまりカッコよくないように思えてきた。特にRounded Corners with CSS and JavaScript @ sitepointを読んでCSS＋画像でやることに決めた。

ただ、この方法の問題は丸い角の画像の準備。しかしcorner shopが必要な画像を自動生成してくれる！このページで、"Box Background"が角を丸くしたい領域の色。"Page Background"がその領域の背景色。"Corner Radius"が丸い角の半径。"Transparent"が透明にしたい対象。これらのパラメータを設定し、後は"Create Graphics"ボタンを押すだけ。この画像を使って角が丸いボックスを表示するためのCSSとHTMLも自動生成してくれる。

ただ、ここで新たな問題が。この自動生成されるCSSとHTMLは背景が透明な場合に対応していない。色々と試してみたけれども、この方法だと無理そう。ということで、自分でtableを使って、素直に作ってみることにした。結果は、以下の通り。

<style typte="text/css">
table.rounded {
 width  : 98%;
 height : 98%;
}
td.Rnw {
 background : url(nw.gif);
 height : 20px; width : 20px;
}
td.Rn {
 background : #000;
 height : 20px;
 line-height : 1em;
}
td.Rne  {
 background: url(ne.gif);
 height : 20px; width : 20px;
}
td.Rmw, td.Rme {
 background : #000;
}
td.Rm  {
 height : 100%;
}
div.Rcontent {
 background : #333;
 color : #fff;
 height : 100%;
}
td.Rsw {
 background : url(sw.gif);
 height : 20px; width : 20px;
}
td.Rs {
 background : #000;
 height : 20px;
 line-height : 1em;
}
td.Rse  {
 background : url(se.gif);
 height : 20px; width : 20px;
}
</style>
<body style="background:#ddd">
<table class="rounded" cellpadding=0 cellspacing=0>
<tr><td class="Rnw"/><td class="Rn"> </td><td class="Rne"></tr>
<tr><td class="Rmw"/><td class="Rm"><div class="Rcontent">
本文
</div>
</td><td class="Rme"/></tr>
<tr><td class="Rsw"/><td class="Rs"> </td><td class="Rse"></tr>
</table>
</body>

ここで苦労したのは「ウィンドウサイズを変更したら、ブラウザのサイズも変更される」ようにすること。<td>のwidthを98%-20pxみたいに指定できれば、分かりやすくシンプルなCSS+HTMLになるとは思うのだけれども。javasriptで疑似的に実装しても良いかも。サンプルはこんな感じ。


	本文

写真地図ブラウザ制作１ブラウザの表示

昨日の分

<SCRIPT>
function scrolled(st){
 document.getElementById("box").style.top=
      10+(document.body.scrollTop || 
          document.documentElement.scrollTop);
 document.getElementById("box").style.left=
      10+("document.body.scrollLeft || 
          document.documentElement.scrollLeft);
 document.getElementById("box").style.display="block";
}
</SCRIPT>
<BODY onclick=scrolled(this.scrollTop)>
<div id="box" 
   style="width:100px; height:100px;
          background:#000;
          position:absolute; left:10px; top:10px;
          display:none;">
</div>
<div 
   style="width:2000px; height:2000px;
          background:#ddd;">
</div>
</BODY>

登録: 投稿 (Atom)

genisgen

2007年6月22日

test

2007年6月17日

Google Mapsの地図検索

2007年6月13日

夜のコインパーキングのくるまどめ

2007年6月12日

わき道の脇

LightBox Q&A

2007年6月10日

写真のかっこいい表示 LightBox2

2007年6月9日

Google Maps カスタムアイコン

Google Mapsのホイール拡大縮小　スクロールしないで

Google Mapsにカスタムボタンを配置

2007年6月7日

写真地図ブラウザ制作２ブラウザの角を丸く

写真地図ブラウザ制作１ブラウザの表示

photoMap Browser™

photoBlog Maker™

自己紹介

カテゴリ

ブログアーカイブ

2007年6月22日

2007年6月17日

2007年6月13日

2007年6月12日

2007年6月10日

2007年6月9日

2007年6月7日

photoMap Browser™

photoBlog Maker™

自己紹介

カテゴリ

ブログ アーカイブ

ブログアーカイブ