genisgen

故宮紫禁城筒子河（午門西側）

2008-05-21T23:31:00.001+09:00

故宮紫禁城筒子河（午門西側）, originally uploaded by genisgen.

test

2007-06-22T23:04:00.001+09:00

Google Mapsの地図検索

2007-06-17T12:48:00.000+09:00

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

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

2007-06-13T23:31:00.000+09:00

わき道の脇

2007-06-12T23:58:00.001+09:00

LightBox Q&A

2007-06-12T22:03:00.000+09:00

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より小さくなるようにすれば良い。

写真のかっこいい表示 LightBox2

2007-06-10T11:25:00.000+09:00

写真地図ブラウザで写真をどう表示するか。なかなか難しい。そこでとりあえず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からの実行例：

Google Maps カスタムアイコン

2007-06-09T23:03:00.000+09:00

好みのアイコンは使いたいもの。下のソースを見た方が早いと思うけど、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のホイール拡大縮小　スクロールしないで

2007-06-09T20:17:00.000+09:00

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にカスタムボタンを配置

2007-06-09T15:44:00.000+09:00

このマップの右上のようにカスタムボタンを配置したかったけど、なかなか良いサンプルが見つからなくて苦労した。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-06-07T22:45:00.000+09:00

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

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で疑似的に実装しても良いかも。サンプルはこんな感じ。


	本文

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

2007-06-07T22:35:00.000+09:00

昨日の分

<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>

『前の投稿』で遷移すると写真が表示されない（解決！）

2007-06-05T19:55:00.000+09:00

これまで写真の投稿は次のようにしていた。

<div id="photo527593023"></div>
<script type='text/javascript'>
 writePhotoMap("527593023");
</script>

青の数字の部分がflickrのphoto ID。この投稿のHTMLが読み込まれると、<script>内の関数writePhotoMap()が実行されて、 <div id="photoXXXXXXXXX">に写真とかが色々とjavascriptで書き込まれていくというのが、当初のもくろみ。

通常は、これで問題なく写真とかが表示される。ところが、トップ画面の一番下にある『前の投稿』で、過去記事を見ようとすると、見れない！試しに上記のwritePhotoMap()の前にalert("");とか入れても、何もポップアップされない。どうやら<script>内が実行されていないらしい。ならば、と<body>にonload="alert('');"を付け加えてみるけど、これも実行されない。

アドレスバーとか『前の投稿』のリンクを見ると、java servletにGET送信して、リダイレクト？かなんかで過去の記事を表示しているみたい。う～ん、このリダイレクトか何かは仕事でも悩まされたことがあった。そのときに探せた情報は概念的なものばかりで。tomcatとbrowserとの間での細かいやりとりの仕組みが分からなかった。ここで嫌な予感が…。

とりあえず、WEBで情報収集しようとしてみたけど、なかなか難しい。検索語はonload javascript？　なんか違う。次にbloggerのヘルプであるような気がした。Google Mapsをblogで表示したい時は同じ問題に行き当たるはず。ここで『前の投稿』をprevious postsと訳してしまった。不覚。正解はolder posts。例えば、AdWords API Blogの一番下で確認できる。

まぁ、辿り着いたのがDummies Gide to Google Blogger BetaのAdd a Google Map to your blogというページ。ここのサンプルソースに<onunload="GUnload()">>というのが<body>タグに付けてある。これが対策かと思ったけども、関数GUnload()はどこにも定義されていない。

とりあえず、unload javascriptで検索。そこで引っかかったのがMSDNのonload Eventのページ。APPLET, BODY, EMBED, FRAME, FRAMESET, IFRAME, IMG, LINK, SCRIPT, windowのオブジェクトでこのイベントは取得できるとのこと。MSのJScriptということで一抹の不安はあったけど、とりあえず、適当に<IMG>を入れて使ってみた。そしたら成功。どきどきしながらFirefoxで実行。これも上手く動いた。やったー。

あとは、<IMG>を不自然なく入れればOK。そこでカメラアイコンをチョイス。結果は以下のコード。

<IMG src="http://genisgen.googlepages.com/maps_camera.png" class="camera" onload="writePhotoMap('527593023');"><div id="photo527593023"></div>

写真の投稿の場合は、まずカメラアイコンを表示し、そのアイコンを呼び出す時に写真とかの記事本体の情報をその後ろにある<div>に書き込むと、理解できる。

なんか対処療法的で問題のような気もしたけど、このソースはある意味分かりやすいと思った。ソースに明示的に「いつ」（＝カメラアイコンが呼び出された時）写真とかの記事本体を書き込むのかが書かれている。いままでのソースだと、browserがソースをparseしていって<script>のところで、書き込み命令を実行していたと理解しなければいけなかったので、browserのparseという非明示的なところを意識しなければならなかった。

ということで、このソースで良しとすることにした。アイコンのお陰で、写真に関する投稿だと分かりやすくなったし。まぁ、普通にblogをみる人は、まさかこのアイコンがあって初めて記事本体が表示されるとは思わないだろうけど…。（了）

アジサイのこれから

2007-06-03T19:59:00.001+09:00

on the way to my friend' house 友達の家への道中

2007-06-03T19:30:00.000+09:00

Flickr API

2007-06-03T12:55:00.000+09:00

<input type="button" value="call" onClick="callFlickr();">
<script src="prototype.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
 function callFlickr(){
    var param={};
    // APIリクエストパラメタの設定
    param.method   = 'flickr.photos.getSizes';
    param.api_key  = '46aae73ef606fb170b318268699a991a';
    param.photo_id = '496065935';
    param.format   = 'json';
    param.jsoncallback = 'jsonFlickrApi';

    // APIリクエストURLの生成(GETメソッド)
    var url = 'http://www.flickr.com/services/rest/?'+
               obj2query( param );

    // script 要素の発行
    var script  = document.createElement( 'script' );
    script.type = 'text/javascript';
    script.src  = url;
    document.body.appendChild( script );
    document.write("FlickrAPI done.");
 }

 // オブジェクトからクエリー文字列を生成する関数
 function obj2query ( obj ) {
    var list = [];
    for( var key in obj ) {
        var k = encodeURIComponent(key);
        var v = encodeURIComponent(obj[key]);
        list[list.length] = k+'='+v;
    }
    var query = list.join( '&' );
    return query;
 }

 // Flickr検索終了後のコールバック関数
 function jsonFlickrApi ( data ) {
    alert("jsonFlickrAPI called");
    var list=data.sizes.size;
    var msize=list.find(
                function(obj,index) {
                 return obj.label == "Medium";
                }
              );
    alert(msize.source);
 }
-->
</script>

Javascript上でのオブジェクト・データベースprototype.jsとJSONで

2007-06-02T23:51:00.000+09:00

ソース：


<script src="prototype.js" type="text/javascript"></script>

<script>

//データベースの作成

 var objDB = new Array();

 objDB.push( { id: '235', value: '二百三十五' } );

 objDB.push( { id: '372', value: '三百七十二' } );

 objDB.push( { id: '102', value: '百二' } );



//データベースの内容を表示

 objDB.each(

  function( obj, index ) {

    document.write(

      "objDB["+index+"]:"

      +"obj.id="+obj.id+","

      +"obj.value="+obj.value"

      + "<BR/>"

    );

  }

 );



//データベースの内容を検索する関数

 function get( id ) {

  return

   objDB.find(

    function( obj, index ) {

      return obj.id == id;

    }

   );

 }



//データベースの検索を実行

 var resultObj = get( '372' );

 document.write("id=372のvalueは"+resultObj.value );

</script>

元ネタ：Javascriptにおける配列と連想配列 prototype.js編その1 @GreenSpace

Google Spreadsheetsをデータベースとして活用JSONでデータ取得

2007-06-02T00:29:00.000+09:00

Google Spreadsheetsでデータ作成・アクセス設定

まずは、Google Spreadsheetsでデータを作成。
例えば、次のような感じ。

次に、このスプレッドシートを公開する設定をする。
右のほうにある『公開』タブをクリックして『公開する』ボタンを押せば、公開されちゃう。

次に、JSONでデータを取得できるように公開の形式を設定する。

下の方にある『公開の詳細設定』リンクをクリック。

『ファイル形式：』を『ATOM』とする。これで、スプレッドシート側の設定は完了。
次に、『URLを生成』ボタンを押す。ここで生成されたURLから、このスプレッドシートのIDが分かる。この例だと『o03298909112281802961.454088638750018433/od6』。

Javascriptでデータ取得＋表示

ソース：


< div id ="result" > loading...</div>

< script type="text/javascript" >

<!--

 var html="";

 function loadJSON(json) {

   html += "<TABLE>";

   for (var i = 0; i < json.feed.entry.length; i++) {

     html += "<TR>";

     var entry = json.feed.entry[i];

     if(entry["gsx$photoid"]) {

       html += "<TD>"+entry.gsx$photoid.$t+"</TD>"

       + "<TD>"+entry.gsx$lat.$t+"</TD>"

       + "<TD>"+entry.gsx$lng.$t+"</TD>"

       + "<TD>"+entry.gsx$flickrphotohtml.$t+"</TD>";

     }

     html += "</TR>";

   }

   html += "</TABLE>";

   document.getElementById("result").innerHTML = html;

 }

-->

</script>

<script src="http://spreadsheets.google.com/feeds/list/o03298909112281802961.454088638750018433/od6/public/values?alt=json-in-script&callback=loadJSON" type="text/javascript"></script>

最後の<script src="http://..." >のところでGoogle SpreadsheetsのAPIにアクセスして『o03298909112281802961.454088638750018433/od6』のスプレッドシートのデータを取得し、引数callbackで指定された関数loadJSONを呼び出す。

実行例（お化粧付き）：

photoID	lat	lng	flickrPhotoHTML
496065935	35.5577079868245	139.724928438663	496065935_b01811832a
493652910	35.556002	139.725862	493652910_d0c7fb9409

注意点（というかハマった点）：

IEだと、<script src="http..." />ではloadJSONが呼び出されない。
Firefoxでは呼び出されるけども。<script src="http..." ></script>とすれば、IEでもFirefoxでも大丈夫。Firefoxの『ツール(T)>エラーコンソール(C)』でデバッグしてからIEで試してみたら動かなくてびっくり。
スプレッドシートでカラム名に大文字を使ってもJSONでは全て小文字に変換される。
上の例だと、スプレッドシートでは『photoID』としたけども、JSONでは『photoid』。alert(entry.toSource());に凄く助けられた。

JSON(上のソースでのentry)

({
 id       : { $t : "http://spreadsheets.google.com/feeds/list/
              o03298909112281802961.454088638750018433/
              od6/public/values/cpzh4" },
 updated  : { $t : "2007-06-02T13:40:35.085Z" },
 category : [
  {
   scheme : "http://schemas.google.com/spreadsheets/2006",
   term   : "http://schemas.google.com/spreadsheets/2006#list"
  }
 ],
 title   : { type : "text", $t : "493652910" },
 content : { type : "text", $t : "lat: 35.556002,
                                  lng: 139.725862,
                                  flickrPhotoHTML:
                                  493652910_d0c7fb9409" },
 link    : [
  {
    rel  : "self",
    type : "application/atom+xml",
    href : "http://spreadsheets.google.com/feeds/list/"
            o03298909112281802961.454088638750018433/
            od6/public/values/cpzh4"
  }
 ],
 gsx$photoid         : { $t : "493652910" },
 gsx$lat             : { $t : "35.556002" },
 gsx$lng             : { $t : "139.725862" },
 gsx$flickrphotohtml : { $t : "493652910_d0c7fb9409" }
})

Geocoding

2007-05-13T22:37:00.001+09:00

緯度　経度

a telegraph pole at night 夜の電柱

2007-05-13T21:11:00.001+09:00

grinding sludge へらしぼりの研摩かす

2007-05-13T20:35:00.001+09:00