2008-04-30

Interface elements for jQuery サイトが消えてしまった!?

Interface elements for jQuery
http://interface.eyecon.ro/

先週くらいなのですが、↑が参照できないことに気が付いたのですが、未だに復活していないようです。どのページも 404 Not Found になるので、サイトは存在するけど、コンテンツがそっくり消失しているようです。

jQuery UI のフォーラムでも同じ質問のスレッドがあるのですが、ちゃんとした理由がわからずじまいです。↓こんな感じです。

interface.eyecon.ro offline?
I don't know if it's coming back online or not, but it hasn't been supported for a very long time. Have you considered switching to jQuery UI? If there are features or plugins that jQuery UI doesn't provide, just file tickets or post to this group :-)

> Hello everyone,
> I've noticed that the website interface.eyecon.ro is offline. Does
> someone knows how this comes? And if he is comming back online?
> Thanx!
ネットで検索してみると、jQuery-interface - Vox など、同じように気が付いた人がいるみたいです。

もうこのまま復活しないのでしょうかね。ソースコード自体は手元にあるので、なんとかなるのですが、オンラインデモが見れないのが、ちょっと困っちゃいます。連絡先がわかればアーカイブ化などをお願いできそうですが、どこに記載があるだろう。

ほんの少しですが、過去にいくつかデモを作っていますので、何かの参考になればと思います。う~む。もっとデモを作って公開しておくべきでした。悔やみます。


追記です。

先ほど、ダメモトで、再開する予定があるかどうか、作者にメールしておきました。返事がもらえるといいなぁ。

Postal Search Ajax API (構築キットを含む) をアップデートしました

本日(4/30)、Postal Search Ajax API を 1.0.0 にアップデートしました。このアップデートに伴う変更点は、次のとおりです。

Postal Search Ajax API に同封している jQuery のバージョンを 1.1.2 から 1.2.3 に差し替えました。この jQuery 1.2.3 は Minified 圧縮版 を使っています。

上記と合わせて、Postal Search Ajax API 構築キット も差し替えました。必要に応じてダウンロードしてください。なお、今回はデータの差し替えはしていません。

jQuery 1.2.3 に差し替えましたが、Postal Search Ajax API のインタフェースと振る舞いに変更はありません。ですので、基本的には修正せず、そのまま利用できます。

次のブラウザで、今までどおり動作することを確認しています。
  • Firefox2 WinXP SP2
  • IE7 WinXP SP2
  • IE6 WinXP SP2
  • Opera9.2 WinXP SP2
  • Safari3.1 WinXP SP2
ただし、みなさんが使っている固有の jQuery プラグインによって、1.1.2 で動作するが、1.2.3 では動作しないといった組み合わせの不都合があるかもしれませんので、ご注意ください。

Postal Search Ajax API としては、jQuery 1.1.2 を使うことに支障はなかったのですが、最近は jQuery 1.2 以上を前提とした解説やプラグインが主流となっていますので、jQuery 1.2.3 が安定しているこの機会に差し替えることにしました。

2008-04-29

実例で小さくはじめる Dreamweaver 拡張機能の開発 (その4)

実例で小さくはじめる Dreamweaver 拡張機能の開発 (その3)
ツールバーのボタンに使う画像の話題です。ツールバーのボタンの画像ファイルは "Objects\Text\EscapeHTML.png" として保存しました。... 途中、省略 ... 今回はここまで。まだ続けます。
Dreamweaver 拡張機能の JavaScript を含む HTML ファイルと、ツールバーのボタンの画像ファイルを保存しても、まだその拡張機能は無効です。拡張機能を有効にするには "Objects\insertbar.xml" ファイルを編集して、挿入ツールバーのボタンを定義して、HTML ファイルと画像ファイルを関連付ける必要があります。

拡張機能のボタンは、挿入ツールバーの任意の位置に追加できます。ツールバーの構成は "Objects\insertbar.xml" の XML ドキュメントを編集して定義します。

今回は、挿入ツールバーの一般カテゴリの末尾に区切りとボタンを追加しました。"ここから" から "ここまで" が追加した部分です。
<category
MMString:name="insertbar/category/common"
folder="Common"
id="DW_Insertbar_Common"
>
(途中、省略)
<button
MMString:name="insertbar/tagChooser"
codeOnly="TRUE"
command="dw.showTagChooser()"
id="DW_TagChooser"
image="Common\Tag Chooser.png"
/>
<!-- ここから --/>
<separator />
<button
id="Text_EscapeHTML"
image="Text\EscapeHTML.png"
file="Text\EscapeHTML.htm"
enabled="_VIEW_CODE"
/>
<!-- ここまで --/>
</category>
category 要素はツールバー内の分類を表し、ツールバー上はタブとして表示されます。button 要素はツールバーのボタンを表します。menubutton 要素でグループ化した button 要素は、ドロップダウンリストを表します。separator 要素はその名のとおり、ツールバーの区切りを表します。

button 要素の id 属性には、他の要素を重複しない識別子を指定します。この識別子の名前付けのルールは明示されていませんが、Dreamweaver CS3 拡張ガイドの中では、フォルダ名とファイル名を連携したものを使っています。ですので、今回も同じように "Text_EscapeHTML" としました。

button 要素の image 属性には、保存しておいた画像ファイルを指定します。また、file 属性には、保存しておいた HTML ファイルを指定します。

button 要素の enabled 属性は、いつボタンを有効にするかその条件を指定します。今回は、コードビューの文字列を HTML エスケープすることが目的なので、"_VIEW_CODE" を指定して、コードビューでのみボタンが有効になるようにしました。

実例で小さくはじめる Dreamweaver 拡張機能の開発 (その2)
今回は、コードビューを開きかつフォーカスがあるときのみ、コマンドを実行するよう制限しているので、false としています。この制限については、後日説明します。デザインビューかつその最新の編集結果を対象とするなら、true とすべきでしょう。
この制限については、後日説明します。とは、このことでした。

その1からその4まで続きましたが、説明はここでおしまいです。

ここで取り上げた実例は、挿入ツールバーの拡張でしたが、Dreamweaver 拡張機能には、挿入ツールバー以外にも、紹介しきれないほど、もっと多くの拡張の仕組みがあります。私も全貌を把握できていませんが、Dreamweaver のあらゆる部分が拡張できると捉えてよいと思います。

はじめからその広大な拡張性に向き合うと、どうしてよいのか分からなくなってしまいますが、実例で体感しながら小さくはじめてみると、だんだんと雰囲気が掴めてきて、Dreamweaver CS3 拡張ガイドや API リファレンスの読みどころも見えてきたりしました。

今後も自らのために、拡張機能を活用していく機会が増えますので、その中で発見がありましたら、その都度お伝えできればと思います。

実例で小さくはじめる Dreamweaver 拡張機能の開発 (その3)

実例で小さくはじめる Dreamweaver 拡張機能の開発 (その2)
ということでしたので、引き続き "Objects\Text\EscapeHTML.htm" として保存した拡張機能のプログラム本体を説明します。... 途中、省略 ... 今回はここまで。まだ続けます。
ツールバーのボタンに使う画像の話題です。ツールバーのボタンの画像ファイルは "Objects\Text\EscapeHTML.png" として保存しました。

Adobe が公開している Dreamweaver CS3 拡張ガイド の中では、ツールバーのボタンには GIF イメージを使うように指示がありますが、実際に試したところ、今回のように PNG イメージでも不都合なく使えるようです。

また、そのイメージのサイズは、18 × 18 を使うように指示がありますが、実際に試したところ、今回のように一般的なサイズの 16 × 16 でも不都合なく表示できました。どうやら表示するとき、18 × 18 にリサイズしてくれるようです。

↓こんな感じです。今まで使っていたアイコンなど、そのまま使えますね。



今回はここまで。まだ続けます。

実例で小さくはじめる Dreamweaver 拡張機能の開発 (その2)

実例で小さくはじめる Dreamweaver 拡張機能の開発 (その1)
このエントリはここまでです。このエントリでは、プログラムから Dreamweaver を操作して拡張する大まかな流れを伝えることを意図しています。ですので、プログラムや設定の内容は、後日、具体的に詳しく説明します。
ということでしたので、引き続き "Objects\Text\EscapeHTML.htm" として保存した拡張機能のプログラム本体を説明します。

Dreamweaver 拡張機能は、コマンドという1つの操作を最小セットとしています。そのコマンドは、1つの HTML ファイルに対応し、その HTML ファイルの中の JavaScript を使って Dreamweaver を操作します。
<html>
<head>
<title>Escape HTML</title>
<script language="javascript">

// isDOMRequired
function isDOMRequired() {
return false;
}

// objectTag
function objectTag() {
var dom = dw.getDocumentDOM();

selection = dom.source.getSelection();
if (selection[0] == selection[1])
return;

var text = dom.source.getText(selection[0], selection[1]);
text = text.replace(/&/g, '&amp;');
text = text.replace(/</g, '&lt;');
text = text.replace(/>/g, '&gt;');
text = text.replace(/"/g, '&quot;');
text = text.replace(/'/g, '&#39;');

return text;
}

</script>
</head>
<body></body>
</html>
title 要素は、ツールバーのボタンのツールチップとして使われます。



isDOMRequired 関数は、ツールバーのボタンをクリックする前に、コードビューとデザインビューを同期するかどうかを指示するものです。編集中のコードをデザインに反映してからコマンドを実行するときは true を、反映しないときは false を返します。

今回は、コードビューを開きかつフォーカスがあるときのみ、コマンドを実行するよう制限しているので、false としています。この制限については、後日説明します。デザインビューかつその最新の編集結果を対象とするなら、true とすべきでしょう。

objectTag 関数は、ツールバーのボタンをクリックすると呼び出されます。そして、この関数から文字列を返すと、その文字列がコードビューに挿入されます。このとき、コードビューで文字列を選択しているときは、その文字列が戻り値の文字列で置換されます。文字列を選択していないときは、カーソルの位置に戻り値の文字列が挿入されます。

今回は、dom.source.getSelection 関数を使って、コードビューで選択している文字列の位置を取得し、dom.source.getText 関数を使って、その文字列を取得しています。そして、その文字列を HTML エスケープして objectTag 関数の戻り値にしています。

例外として、dom.source.getSelection 関数で取得した開始位置と終了位置が同じ(つまり、文字列が選択されていない)ときは、objectTag 関数の戻り値を省略しています。objectTag 関数の戻り値を省略すると、キャンセルとして扱われます。

拡張機能のプログラム本体の説明はおしまいです。ちょっとだけ、拡張機能のイメージを掴むためのヒントを紹介しておきます。

上の JavaScript のコードは、次のようにして、外部ファイルに追い出すこともできます。
<script language="javascript" src="EscapeHTML.js"></script>
上の HTML ファイルは、何の役割も果たしていないように見えますが、拡張機能で UI を表現するときに使います。HTML フォームを記述して、ダイアログボックスとして使ったりできます。

今回はここまで。まだ続けます。

2008-04-27

Googleを支える技術を読んで Google App Engine に備える!?

Googleを支える技術 巨大システムの内側の世界

Googleを支える技術 巨大システムの内側の世界』をちょうど 3時間くらいで読み終えました。

この本は、誰を対象として、どのような目的で読んだらよいのか? という視点から、どう紹介してよいのか悩ましい印象です。読み物といえば読み物だし、解説書ともいえるし、技術書ともいえなくもない。また、一般のビジネス書として括ってもよい気がする。

この本ですが、販売の直後は、入手しにくい状況が続きました。もともと数が少なかったのかもしれませんが、勝手な憶測としては、多くの人が、Google の中身ってどうなってるの? ということに関心があったんじゃないでしょうかね。少なくとも、私はそういう関心から、この本の手にとりました。

わたしが注目したのは「第3章 Googleの分散ストレージ」と「第4章 Googleの分散データ処理」です。というのは、これらの機能や仕組みは、ちょっと前にリリースされた Google App Engine を構成するサービスや技術のベースになっているに違いないからです。

具体的なキーワードをあげると、Google File System、Bigtable、Chubby、MapReduce、Sawzall といった仕組みが紹介されています。これらのキーワードは、Google App Engine のニュースや解説の中で(一部かな?)見かけたことがあるものです。

ですので、この本は、単なる Google の中身の仕組みの紹介でしかない、ともいえますが、Google App Engine といったように、Google のサービスをより活用しよう、活用していこうとする人が、そのイメージを掴むための導入本という位置付けもあるんじゃないかな。

ひとつだけ注意点があります。この本は Google の中の人が、Google について書いた本ではありません。Google のエンジニアやその関係者が発表した論文やブログなどを情報源として、その情報源をまとめあげたものです。

事実を確認したい人は Google に入社して(もしくは Hack して?)確認してください、ということでしょうね。

実例で小さくはじめる Dreamweaver 拡張機能の開発 (その1)

Dreamweaver を使っていると、こんなことやあんなことができたら便利なのに、と思うことがよくあります。そのいくつかは Adobe やネット上で公開されている Dreamweaver 拡張機能をインストールして解決できるのでしょうが、その目的とするところが特定の用途だったりすると、必要とする拡張機能が見つからないこともあります。

Dreamweaver は Dreamweaver 自身を拡張する様々な方法が備わっています。その中の拡張機能という仕組みを使うと、プログラムから Dreamweaver を操作して、自らの目的に適うように Dreamweaver を拡張することができます。

ということは、前々から知ってはいたのですが、Adobe が公開している Dreamweaver CS3 拡張ガイドAPI リファレンス をざっと読んでも、要点が掴みにくかったり、具体的な振る舞いまで言及していなかったり、なんかこう入り口の壁が高い印象があって、取り組むのを敬遠していました。また、ネットで探しても、まとまった情報が少なかったのも、その敬遠の理由のひとつです。

新しいことをはじめるときは、どうしても苦しさが伴うのですが、どうしても実現したい機能が出てきたので、この機会に取り組むことにしました。その取り組みの中で、知ったことをいくつか紹介します。

まずお伝えしたいのは、小さなものであれば、思ってたよりも簡単に作れますということです。知らない、分からないというのが、行動の重石になっているのでしょうね。そこで、みなさんの中にも重石があって、その重石をいくらか軽くできないかという想いから、小さな実例を使って、プログラムから Dreamweaver を操作して拡張する方法をまとめてみました。(ごめんなさい。前置きが長すぎましたね。)

ツールバーに新しいボタンを追加(赤丸の部分です)して、



コードビューでテキストを選択して、そのツールバーのボタンをクリックすると、



選択したテキストを HTML エスケープする、という実例を用意しました。



はじめに、次のとおり、拡張機能のファイル群を格納するフォルダを作成します。今回は "Text" という名前のフォルダにしました。なお、"Objects" 親フォルダは、既存のフォルダです。
C:\Documents and Settings\<user>\Application Data\Adobe\
Dreamweaver 9\Configuration\objects\Text
続けて、次の HTML ファイルを用意します。その HTML ファイルは、"Objects\Text\EscapeHTML.htm" として、前述の "Text" フォルダに保存します。
<html>
<head>
<title>Escape HTML</title>
<script language="javascript">

// isDOMRequired
function isDOMRequired() {
return false;
}

// objectTag
function objectTag() {
var dom = dw.getDocumentDOM();

selection = dom.source.getSelection();
if (selection[0] == selection[1])
return;

var text = dom.source.getText(selection[0], selection[1]);
text = text.replace(/&/g, '&amp;');
text = text.replace(/</g, '&lt;');
text = text.replace(/>/g, '&gt;');
text = text.replace(/"/g, '&quot;');
text = text.replace(/'/g, '&#39;');

return text;
}

</script>
</head>
<body></body>
</html>
続けて、ツールバーのボタンの画像ファイルを用意します。その画像ファイルは、"Objects\Text\EscapeHTML.png" として保存しました。

続けて、次のとおり、"Objects\insertbar.xml" ファイルを編集します。"ここから" から "ここまで" の separator と button 要素を追加しました。このファイルは、後で元に戻せるように、バックアップしておくのが無難です。
<category
MMString:name="insertbar/category/common"
folder="Common"
id="DW_Insertbar_Common"
>
(途中、省略)
<button
MMString:name="insertbar/tagChooser"
codeOnly="TRUE"
command="dw.showTagChooser()"
id="DW_TagChooser"
image="Common\Tag Chooser.png"
/>
<!-- ここから --/>
<separator />
<button
id="Text_EscapeHTML"
image="Text\EscapeHTML.png"
file="Text\EscapeHTML.htm"
enabled="_VIEW_CODE"
/>
<!-- ここまで --/>
</category>
これで準備はおしまいです。

最後に、これらのファイルを Dreamweaver にロードして、実際に使えるようにします。

次のように、挿入バーのドロップダウンリストを Ctrl キーを押下しながら選択し、そのリストから拡張機能のリロードをクリックします。



すると、ツールバーに新しいツールバーが追加されます。そして、そのボタンをクリックすると、選択したテキストが HTML エスケープされます。このとき、間違いがあると、エラーとその理由を示すメッセージボックスが表示されるので、見直してください。

このエントリはここまでです。このエントリでは、プログラムから Dreamweaver を操作して拡張する大まかな流れを伝えることを意図しています。ですので、プログラムや設定の内容は、後日、具体的に詳しく説明します。

2008-04-25

Safariの変更を追跡する

以前にSafariの特徴的な振る舞いについて記事を書いたのですが、状況が変わったようです。最近、Win版Safariの3.1.1が配布されたのをきっかけに次の二点について再確認を行ったところ、他の主要ブラウザに合せる形で修正されていました。

 1.組み込みオブジェクトの文字列表現が"[function]"となる
 2.未定義値が設定された配列インデックスはfor inやhasOwnProperty()関数で無いものとして扱われる

っで、どのバージョンで修正されたのか知りたかったので1について調べてみました。
まずSafariのJavaScript実装である、KJSを管理しているTracを眺めて、Changeset 29817のfunction_object.cpp(r29817)で修正されていることを見つけました(多分これだと思います…)。

http://trac.webkit.org/projects/webkit/changeset/29817

次にWikipediaにSafariのバージョンとビルド番号の対応表を参考に、Tracのタグを眺めたところWin版Safariはr29817を3.1から3.1.1へのバージョンアップで取り込んでいるようで、最新の3.1.1から振る舞いが変わるようです(Tracには五千番台のビルド番号もあるのですがこれはMac版かな…)。

http://ja.wikipedia.org/wiki/Safari

こういった追跡は他のプロジェクトのChangeLogやコミットコメントを眺める事になるので、書き方など色々と勉強になります。

2008-04-24

Picasa Web Albums Data API を使って画像のジオタグを取得する

YouTube フィードのジオタグには2とおりの表現がある?
YouTube Data API を使って、動画の位置情報であるジオタグを取得しようと調べたのですが、そのジオタグは、フィードの中で 2とおりの表現があるようです。1つはタグ(フィードでいうカテゴリ)を使った方法で、もう1つは GeoRSS を使った方法です。
YouTube 動画の位置情報に続いて、ついでに Picasa 画像の位置情報であるジオタグを取得する方法を調べてみました。

Picasa や YouTube のフィードは、Google Data API の上で成り立っているので、YouTube と同じく Picasa のフィードも、画像が位置情報を持つときは、GeoRSS を使ってその位置情報を表現します。

↓こんな感じです。まったく同じですね。プロトコルやフォーマットが同じ、しかもオープンな仕様なので素晴らしい。新しく学習するストレスがなく大助かりです。
<entry>
<georss:where>
<gml:Point>
<gml:pos>10.309514999389648 123.90380859375</gml:pos>
</gml:Point>
</georss:where>
</entry>
で、JavaScript から Picasa Web Albums Data API を使って、その位置情報を取得してみました。↓こんな感じです。

API の URL が違うことを除けば、YouTube Data API とほぼ同じコードになります。繰り返しになりますが、それって素晴らしい。
// http://picasaweb.google.co.jp/<user>/<album>/photo#<photoid>
var picasa = c.match(/^http:\/\/picasaweb\.google\.co\.jp\/([^\/]+)\/([^\/]+)\/photo#([0-9]+)$/);
if (picasa) {

// http://code.google.com/apis/picasaweb/
var url = 'http://picasaweb.google.co.jp/data/entry/base/user'
+ '/' + picasa[1]
+ '/album/' + picasa[2]
+ '/photoid/' + picasa[3]
+ '?callback={fn}'
+ '&alt=json-in-script';

$(document).jsonp(url, function(json) {
var georss = json
.entry
.georss$where;
if (georss) {
georss = georss
.gml$Point
.gml$pos
.$t
.split(/\s+/);

var point = new GLatLng(georss[0], georss[1]);
});
}
Picasa ウェブアルバムの画像の URL から Picasa Web Albums Data API の URL を組み立ててフィードを取得し、その中の GeoRSS から位置情報である緯度と経度を取得しています。

Picasa Web Albums Data API を使って画像を特定するには、ユーザ名、アルバム名(またはアルバムID)、画像IDが必要です。Picasa ウェブアルバムの URL からは、ユーザ名、アルバム名、画像ID が取得できるので、その情報を使ってフィードの URL を組み立てています。

後は JSONP (json-in-script) を使って、フィードを JSON 形式で取得し、その中から GeoRSS を探すだけです。そして GeoRSS が存在すれば、緯度と経度を取得するといった具合です。

この緯度と経度を使って、Google マップに何か効果を与えるとった流れになるんでしょうね。作り手のアイディア次第ってところですね。

jTemplates の基本的かつ限定的な使い方とパラメータの意味

jTemplates は、テンプレートから HTML を生成するためのテンプレートエンジンです。jTemplates は jQuery プラグインという形式で提供されています。

その jTemplates ですが、使えそうな雰囲気を漂わせてはいるのですが、リファレンスや実例の説明が不足していて、具体的にどう使えばよいのか?とか、ここの引数はどういう意味なの?とか、必要とすることが解決できないので、入り口でつまづいてしまいます。

そこで、限られた範囲になりますが、実例に基づいて、基本的な使い方とパラメータの意味をまとめ?てみました。

jTemplates を使ってテンプレートから HTML の貼り付けコードを作成する
使い方は見てのとおりです。createTemplate メソッドを使って、テンプレートの文字列から Template を生成します。そして、get メソッドを使って、その Template にパラメータを適用し、HTML の文字列を取得するという流れです。get(data, param, element) メソッドの 3つの引数は、次のように使います。
ネットを調べてみましたが、jTemplates を詳しく解説している日本語ページは少ないようです。その少ない中でも、次のエントリが参考になりました。注目に値します。

livedoor Developers Blog:jTemplatesでHTMLを書くときに知っておきたい8つのこと
以下、私がjTemplatesを触ることにより知り得た『jTemplatesでHTMLを書くときに知っておきたい8つのこと』について言及していきたいと思います。
今後、jTemplates をさらに深く使っていこうという予定はありませんが、何か知ることがあれば、そのときまた紹介します。

YouTube フィードのジオタグには2とおりの表現がある?

YouTube Data API を使って、動画の位置情報であるジオタグを取得しようと調べたのですが、そのジオタグは、フィードの中で 2とおりの表現があるようです。1つはタグ(フィードでいうカテゴリ)を使った方法で、もう1つは GeoRSS を使った方法です。

タグを使って、位置情報を表現したフィードは、次のとおりです。"geotagged" というタグが目印になっていて、"geo:lat=" と "geo:lon=" というタグで緯度と経度を表現しています。

この方法で、動画に位置情報を付与しようとした経緯を調べてみたのですが、何も分かりませんでした。が、Youtube サイトから "geotagged" で検索すると、それなりの件数がヒットします。ざっと目を通してみた範囲では、それなりの位置情報が付与されています。
<entry>
<category
scheme="http://gdata.youtube.com/schemas/2007/keywords.cat"
term="geotagged" />
<category
scheme="http://gdata.youtube.com/schemas/2007/keywords.cat"
term="geo:lon=139.684548" />
<category
scheme="http://gdata.youtube.com/schemas/2007/keywords.cat"
term="geo:lat=35.706569" />
</entry>
GeoRSS を使って、位置情報を表現したフィードは、次のとおりです。この表現は Youtube Data API のリファレンスにも記載がありますので、公式なものです。

また GeoRSS が付与された動作の再生ページを開くと、その "統計 & 情報" の "収録日 & 場所" に Google マップが表示されますので、単なるメタデータだけでなく、サービスの一環として統合されていることがわかります。
<entry>
<georss:where>
<gml:Point>
<gml:pos>10.309514999389648 123.90380859375</gml:pos>
</gml:Point>
</georss:where>
</entry>
「Google Earth」、ジオタグ付きYouTubeビデオをサポート:ニュース - CNET Japan
同オプションは、2007年6月中旬にソフトローンチされたが、今回のリリースまでは実際にはそれを使用しても何も起こらなかった。うれしいことに、アップロードしたクリップの「date and map options」設定により、自分の古いビデオに地図上の位置を加えることができる。
という時期から逆算し、動画をアップロードするときと、アップロードした後も位置情報を編集できるということなので、現在そして今後は、2つ目の GeoRSS を使って位置情報を取得するのが正解ということになりますね。

1つ目のタグを使った方法は、公式な仕様なんでしょうか(だった?)。それとも自主的なルールがあったのでしょうか。謎が残りますね。う~ん。

2008-04-22

ホワイトボードをより活用するための役立つグッズ

Six Apart の会議室は壁一面がホワイトボードになっている!?
それに比べて、次の写真のとおり、私の使っているホワイトボードは小さくて狭いですね。このサイズだと、自由気ままに思いついたことをどんどん記入していく用途には不向きなんですよね。
ちょうどよい機会ですので、私が使っているホワイトボードをより活用するための役立つグッズを紹介します。

ホワイトボードと同じようにマーカーで記入して、イレーザーで消せるマグネットシートです。ハサミやカッターで、好みのサイズや形に切り抜いて、ホワイトボードにペタペタ貼り付けて使います。カラーのバリエーションがうまく使えます。



インクジェットプリンタで、印刷できるマグネットシートです。ちょっとした図形やダイアグラムを印字して、切り抜いて使ったりします。なんでも印刷できる特性を使えば、もっと応用の幅があると思うのですが、まだそこまで使い切れていません。アイディアがあれば教えてください。



マグネットでホワイトボードに貼りつくイレーザーです。消したらそのまま貼り付ければよいので、置き場を気にすることがありません。小さなストレスや不便で、思考が途切れるのを防いでくれます。



ホワイトボード用のスプレー式の液体クリーナーです。しばらく消さずに残しておくと、乾燥してイレーザーでは消えなくなってしまいますが、このスプレーを一吹きすると簡単に消せます。



ここまで紹介したのは、すべて 株式会社MagX(マグエックス) の商品です。細かいところですが、いい仕事してますね。

最後に。気になっていますが、試していない商品を紹介します。静電気の力を使って貼り付けるホワイトボード(いやホワイトペーパーといえば)いいのでしょうか。クルクル丸めて持ち運べるとのことなので、ホワイトボードが用意できないシーンを考慮しているようですね。



きっと探せばもっと便利なグッズがいろいろあるんでしょうね。何かいいのあったら紹介してください。

The geo microformat 生成ツールをアップデートしました

The geo microformat 生成ツール をアップデートして、新バージョンを公開しましたので、その主な改良点や変更点をお伝えします。

旧バージョンでは、Google マップをスクロールして、その中央を目的地の位置として扱っていましたが、新バージョンでは、矢印のアイコン(マーカー)をドラッグして、目的地の位置を指定できるようにしました。これで、ビミョウな位置の調整ができ、かつ直感的になったという印象があります。↓こんな感じです。



旧バージョンでは、検索ボックスに入力したテキストを The geo microformat のテキストとして扱っていましたが、新バージョンでは、そのテキストを、噴出し風のウィンドウの中で再編集できるようにしました。これで、目的地を表す適切なテキストを指定できますね。↓こんな感じです。



旧バージョンでは、The geo microformat を生成したらそれきりでしたが、新バージョンでは、その過去に生成した The geo microformat の一覧を見れるようにしました。小さな Google マップをタイル状に並べて表現しています。↓こんな感じです。



また、そのタイル状の Google マップをクリックすると、その位置の The geo microformat を再生成するようにもしています。

ジオタグ付きの画像の URL を指定して生成した The geo microformat は、Google マップと画像を一定間隔で交互に表示するようにしました。flickr のアイコンが目印です。↓こんな感じです。



新バージョンは、サーバサイドのプログラムを使っていますが、旧バージョンは JavaScript のみで作成しています。100% JavaScript という特質が何かに役立つかもしれませんので、旧バージョン は、公開先の URL を変更して存続しておきます。マッシュアップのサンプルなどとして使ってください。

2008-04-21

Six Apart の会議室は壁一面がホワイトボードになっている!?

シックス・アパートが住職を採用?--公開面接を実施:ニュース - CNET Japan

このニュースの内容自体も興味深いのですが、それとは別に、次のとおり、Six Apart の会議室の壁一面がホワイトボードになっている、とうい紹介と写真にひかれてしまったのです。
会議室の壁一面がホワイトボードになっていて、このように文字や図がどこにでも書けるようになっているのだ。複雑な話が広がった場合も、同時に複数の人が書く場合にも困らない。


それに比べて、次の写真のとおり、私の使っているホワイトボードは小さくて狭いですね。このサイズだと、自由気ままに思いついたことをどんどん記入していく用途には不向きなんですよね。



気がついたこと、やらなきゃいけないこと、調べなきゃならないこと、それを忘れないように書きとめておくことが、今の主な用途になっています。

ホワイトボードを使うようになって、些細なことを記憶しなくて済み、気持ちも楽になりましたし、また、色分けしたマグネットシートを使って、優先度を視覚化することで、自らの注意をコントロールできることも発見でき、物忘れが減りとても役立っています。

ホワイトボードの良さは、身近な目に届く場所に置くことで、否応なしに目に入ってくるのと、思い立ったらすぐに記入できるところでしょうか。それが壁一面にできるなんて、本当にうらやましいです。

壁一面とまでは無理でも、ドア一面くらいのホワイトボードが使えるくらいの環境は整えたいところ。これはなんとか実現しよう。

input要素を操作すると "このコマンドはサポートされていません" エラーになることがある

次のように JavaScript/jQuery を使って HTML フォームを動的に生成しようとすると、IE6 だと "このコマンドはサポートされていません" というエラーが発生します。
var form = $('<form />')
.addClass('editor');

$('<input />')
.addClass('small')
.attr('type', 'button')
.attr('value', 'OK')
.click(function() {
})
.appendTo(form);
Microsoft サイトから該当する技術情報が見当たらなかったのですが、どうやら input 要素の type 属性を変更しようとすると、このエラーになるようです。上記の JavaScript でいうと、type 属性に botton を指定する箇所が該当します。

ですので、HTML フォームを動的に生成するときは、DOM 操作ではなく、次のように innerHTML の仕組みを使って input 要素を生成する必要がありそうです。
var form = $('<form />')
.addClass('editor');

$('<input type="button" />')
.addClass('small')
.attr('value', 'OK')
.click(function() {
})
.appendTo(form);
ちょっと解せない感じは残りますが、この JavaScript は、他のブラウザでも期待どおり動作しています。

2008-04-16

サブルーチン末尾の括弧ありなしで振る舞いが変わるなんて知らなかったよ

次のような、よくある Perl のサブルーチンがあったとします。
sub foo {
my ($x) = @_;
print $x;
}
次のように、このサブルーチンを括弧ありで呼び出すのと、
&foo();
括弧なしで呼び出すのとで、その振る舞いが変わるなんて知らなかったよ。
&foo;
前者の括弧ありは、見たまま引数なしの振る舞いをします。が、後者の括弧なしは、引数なしにはなりません。なんと、現在の @_ を引き継ぐではないですか。

この振る舞いの違いに気がつかず、30分ほど悩んでしまいました。そこで『プログラミング Perl』を読んでみると、そのようにサブルーチンが解説されていました。先に仕様を確認すべきだった。

こういうコンテキストに依存することが Perl のやっかいさなんだけど、知ってしまうとこれが自然な感じがしてくるのが興味深いところですね。この振る舞いも今は違和感がありますが、その背景や役立つケースを知ると、また気分が変わって多用しはじめたりするのですね。

2008-04-12

CGI.pm でパラメータではないクエリ文字はキーワードリストになる

次の "新宿 渋谷" の例のように、Perl の CGI.pm で、パラメータ名と値という組み合わせではないクエリ文字列が指定されたとき、
# 新宿 渋谷
http://example.com/foo.cgi?%E6%96%B0%E5%AE%BF+%E6%B8%8B%E8%B0%B7
そのクエリ文字列を取得するとき、次の2とおりの方法があります。
$cgi->keywords;
もしくは、
$cgi->param('keywords');
です。

両サブルーチンともクエリ文字列を1つ以上の空白(\s+)で区切った配列を返します。CGI.pm ではこの配列をキーワードリストと呼んでいます。

違いもあります。後者はコンテキストに依存した振る舞いをします。リストを要求しているときは配列、スカラーを要求するときは配列の先頭要素を返します。

2008-04-09

ジオタギングのためのアイコン The Geotag Icon Project

フィードアイコンと同じように、次のようなピンをイメージしたジオタギングのための標準アイコンがあります。



次のサイトから様々な大きさとファイル形式のアイコンがダウンロードできます。また、このアイコンを使うためのガイドラインとその実例を解説しています。

The Geotag Icon Project
http://www.geotagicons.com/

私が見ている範囲では、このアイコンに出会ったことはありませんが、標準アイコンという取り組みということで、一足先に使えるところでは、使っていくことにします。

2008-04-06

PlaceEngine API のメッセージをハンドリングするヒント

PlaceEngine API を使って現在地の The geo microformat を生成できるようにしました
先週公開した The geo microformat 生成ツール に PlaceEngine API を使って、現在地を取得できる機能を追加しました。これにより、PlaceEngine をインストールした環境があれば、現在地を取得ボタンをクリックすることで、無線 LAN (Wi-Fi) の電波から現在位置を取得して、今いるその位置の HTML を生成できます。
PlaceEngine API の使い方とリファレンスは、PlaceEngine API JavaScript ライブラリ にまとまっているのですが、その中の実例がオーソドックスな使い方を紹介したものだけです。そのため、応用して PlaceEngine が通知するメッセージをハンドリングしたくなったとき、どうすればよいのか、読み取りにくい印象がありました。

そこで、PlaceEngine API を組み込んだ The geo microformat 生成ツール を題材にして、PlaceEngine が通知するメッセージをハンドリングするヒントをお伝えします。

次の HTML は、題材のツールから PlaceEngine に関する HTML を抜粋したものです。

id="status" の要素に PlaceEngine が通知するメッセージを表示することを意図しています。
<input type="image" id="post" alt="位置を教える" src="wide_bt2.png" />
<input type="image" id="get" alt="現在地を取得" src="wide_bt1.png" />
<a href="http://www.placeengine.com">
<img alt="PlaceEngine" src="logo_wh.gif" />
</a><br />
<span id="status">
<a href="http://www.placeengine.com/show/install">PlaceEngine をインストールする</a>
と、無線 LAN (Wi-Fi) の電波から、現在位置を取得できるようになります。
</span>
次の JavaScript は、題材のツールから PlaceEngine に関する JavaScript を抜粋したものです。

PlaceEngine インスタンスを生成しています。idstatus オプションにメッセージの出力先とする要素の id を指定すると、その要素にメッセージが自動的に表示されます。ですが、ここでは、メッセージを表示せずに独自にハンドリングしたいため、idstatus オプションを指定していません。
  // PEngine
engine = new PEngine({
//idstatus: 'placeengine-status',
appkey: 'apikey',
onFindClient オプションにコールバック関数を指定すると、PlaceEngine が見つかったとき、この関数が実行されます。ここでは、PlaceEngine が見つかったとき、既存のメッセージを消去しています。
    // onFindClient
onFindClient: function() {
$('#status').empty();
},
onGetLocation オプションにコールバック関数を指定すると、現在地が見つかったとき、この関数が実行されます。ここでは、現在地が見つかったとき、その住所を入力ボックスに設定し、その現在位置まで Google マップをスクロールさせています。また、現在地が見つからないとき(エラーを含む)、そのメッセージを表示しています。
    // onGetLocation
onGetLocation: function(x, y, r, info) {
if (r > 0) {
c.val(info.addr);
map.panTo(new GLatLng(y, x));
} else {
$('#status').text(info.msg);
}
},
onMessage オプションにコールバック関数を指定すると、PlaceEngine がメッセージを通知するたび、この関数が実行されます。ここでは、無用なメッセージを表示しなようにするため、空の関数を指定しています。なお、onMessage オプションを省略しても同様の効果があります。
    // onMessage
onMessage: function(message) {
}
});
PlaceEngine の存在を確認しています。PlaceEngine が存在するとき、前述の onFindClient が非同期で実行されます。
  engine.pingClient();
位置を教えるボタンをクリックしたときのコードです。現在の位置を表す Google マップのインスタンスを指定しています。
  $('#post').click(function() {
engine.registerLocation(map);
return false;
});
現在地を取得ボタンをクリックしたときのコードです。現在地が取得できたとき、できないとき(またはエラーが発生したとき)、前述の onGetLocation が非同期で実行されます。
  $('#get').click(function() {
engine.getLocation();
return false;
});
ダラダラと長い説明になりましたが、以上でおしまいです。PlaceEngine API のメッセージを独自にハンドリングしようとするときのヒントになればと期待します。

PlaceEngine API を使って現在地の The geo microformat を生成できるようにしました

The geo microformat 生成ツールを公開しました
郵便番号、住所、場所、または画像の URL を入力すると、自動的に位置情報を取得します。そして、その結果から、ブログやホームページに貼り付けるための HTML を生成します。
先週公開した The geo microformat 生成ツール に PlaceEngine API を使って、現在地を取得できる機能を追加しました。

これにより、PlaceEngine をインストールした環境があれば、現在地を取得ボタンをクリックすることで、無線 LAN (Wi-Fi) の電波から現在位置を取得して、今いるその位置の HTML を生成できます。



PlaceEngine とは?
PlaceEngine は、Wi-Fi機器を使って簡単に現在位置を推定し、周辺の関連情報を提供しやすくするサービスです。 Wi-Fiを装備している機器であれば、GPSを搭載していなくても簡単に現在の位置を取得することができます。アクセスポイントからの電測情報を用いますので、屋内や地下街のように、GPSが機能しない場所でも位置を求めることが可能です。
PlaceEngine 対応のサイトを使うときは、あらかじめ PlaceEngine クライアントソフトをインストール しておく必要があります。PlaceEngine クライアントソフトに対応したプラットフォームは、次のとおりです。
  • Windows Vista
  • Windows XP
  • Windows Mobile (機種条件あり)
  • MacOS X 10.4
PlaceEngine クライアントソフトは、ブラウザ固有のプラグインではなく JavaScript の仕組みを応用した PlaceEngine API という形で実現しているため、その仕組みを満たすブラウザであれば、どのようなブラウザでも動作することになりそうです。が、あくまでも想像です。

実際に試した範囲だと、次のブラウザで動作しました。
  • Windows XP Firefox2
  • Windows XP Firefox3 beta
  • Windows XP IE6
  • Windows XP IE7
  • Windows XP Opera9
  • Windows XP Safari3
また、PlaceEngine は、上記の PC プラットフォームに加えて、次のような、目的性の高いデバイスに組み込んだ使い方も広がっているよう(きそう)です。iPod touch の Safari から使えるようになれば、PlaceEngine 対応のサイトがグンと増えるんじゃないかという予感がします。ただ、無線 LAN (Wi-Fi) の電波を使うという新しい仕組みからくるプライバシーに関する話題もあるようです。ざっとネットで調べた範囲だと、次のエントリが話題の中心になっているように見えました。

高木浩光@自宅の日記 - PlaceEngineのプライバシー懸念を考える

このような懸案を抱えていることを理解しつつも、既存のリソースをうまく活用したアプローチに感心するところがあるし、これが広がりを見せると、どんなサービスが生まれてくるかの期待が大きいので、(絶対に問題ないという自信はありませんが)今のところは積極的に使ってみようという結論です。

2008-04-05

住所に空白を含むとき GClientGeocoder の結果が不安定になる謎とその仮対処

The geo microformat 生成ツールを公開しました
住所を入力したときは、GoogleMaps API のジオコーダを使って、住所から緯度経度を検索して、その結果から HTML を生成します。
先週公開した The geo microformat 生成ツール ですが、空白文字を含む住所で検索したとき、期待どおり Google マップが移動してくれないことがありました。

"新宿区 歌舞伎町" という同じ住所で検索しているにも関わらず、移動したりしなかったりします。ですが、"新宿区歌舞伎町" のように空白なしの住所にすると、毎回ちゃんと移動します。なんでだろう。謎ですね。

それなりの原因が分からないのが気持ち悪いですが、Google Maps API のジオコーダを解析することもできないので、

住所を指定して GClientGeocoder を実行している部分を、
geocoder.getLatLng(c, function(point) {
if (point)
map.panTo(point);
});
次のように、住所の文字列から空白(全角を含む)を除去してから、GClientGeocoder を実行するように仮対処しました。
geocoder.getLatLng(c.replace(/[\u3000\s]+/g, ''),
function(point) {
if (point)
map.panTo(point);
}
);
ちなみに GClientGeocoder は、全角空白を空白として解釈してくれるようです。なので、この謎さえ解決すれば、ソースコード上では、空白(全角を含む)を意識しなくてよいはずなのですが・・・。

decodeURIComponent はプラス文字をデコードしない

decodeURIComponent はプラス文字をデコードしない というのをすぐに忘れてしまい、何度も何度も同じバグを作り込んでしまうのです。なので、エントリとして言語化して、ちゃんと記憶に定着させようといったところです。

次のコードを実行しても、プラス文字がデコードされず "新宿区+歌舞伎町" のままとなります。
// 新宿区+歌舞伎町
var query = '%E6%96%B0%E5%AE%BF%E5%8C%BA+%E6%AD%8C%E8%88%9E%E4%BC%8E%E7%94%BA';
alert(decodeURIComponent(query));
ですので、次のように、プラス文字を %20 に置換してからデコードするようにします。
// 新宿区+歌舞伎町
var query = '%E6%96%B0%E5%AE%BF%E5%8C%BA+%E6%AD%8C%E8%88%9E%E4%BC%8E%E7%94%BA';
alert(decodeURIComponent(query.replace(/\+/g, '%20')));
ただし、この対応の良し悪しは見解が分かれるところですので、この曖昧?な対応が気になるなら、(結局どうすればよいのかさらに迷ってしまうかもしれませんが)ネットでの解説などを読んでみてください。

少し話題がそれますが、String.replace で、複数マッチして繰り返し置換したいときは、スラッシュ表記の正規表現を使って g (グローバルマッチ) を指定するしかないと思い込んでいましたが、

次のように、第3引数に g (グローバルマッチ) を指定しても Firefox では同じ振る舞いになる とのことです。
// 新宿区+歌舞伎町
var query = '%E6%96%B0%E5%AE%BF%E5%8C%BA+%E6%AD%8C%E8%88%9E%E4%BC%8E%E7%94%BA';
alert(decodeURIComponent(query.replace('+', '%20', 'g')));
知らなかったなぁ。(雑学)

ブラウザによって .innerHTML の結果が異なるので jTemplates に置き換えました

The geo microformat 生成ツールを公開しました
郵便番号、住所、場所、または画像の URL を入力すると、自動的に位置情報を取得します。そして、その結果から、ブログやホームページに貼り付けるための HTML を生成します。
先週公開した The geo microformat 生成ツール ですが、ブラウザによって生成する HTML にかなりの差が出てしまっていました。

IE6 だと、次のような HTML を生成していました。要素名が大文字で、属性値のダブルクオートがありません。
<SPAN class=geo>
<SPAN class=latitude>35.695204</SPAN>,
<SPAN class=longitude>139.701969</SPAN>
</SPAN>
Opera9 だと、次のような HTML を生成していました。要素名が大文字で、閉じ要素がありません。
<SPAN class="geo">
<SPAN class="latitude">35.689718,
<SPAN class="longitude">139.691699
このようなブラウザによる違いが出てしまったのは、Element.innerHTML (jQuery.fn.html) を使って HTML を取得していたのが原因でした。ソースコードを書くのを簡略化しようとサボったのがよくなかった。ちょっと反省です。

ブラウザによる Element.innerHTML の違いを吸収するのは現実的ではないので、HTML の文字列を自前で組み立てるようにしました。ただ、すべて自前で組み立てると XSS などの心配があるため、次のように、jTemplates プラグイン を使って、テンプレートから HTML を生成するようにしています。
var template = 
'<span class="geo">' +
'<span class="latitude">{$T.y}</span>, ' +
'<span class="longitude">{$T.x}</span>' +
'</span>';
return $.createTemplate(template)
.get({label: label, x: x, y: y }, {}, window);
そして、jTemplates プラグインを使って生成した HTML の文字列を、次のように、そのまま表示するようにしました。
$('.tabs-preview', tabs)
.html(geo);

$('.tabs-html', tabs)
.val(geo)
.focus(function() {
$(this).later(function() {
this.select();
}); // Safari
});
この対応で、The geo microformat 生成ツールをどのブラウザから 使っても、同じ HTML が生成されるようになりました。また、生成する HTML は XHTML に準ずるようにしました。

The geo microformat 生成ツールを公開しました
The abbr design pattern は、abbr タグを使います。IE6 は abbr タグに対応していないため、期待どおりの HTML が生成されず表示もできませんので、注意してください。
という不都合もありましたが、今回の対応で、自前で組み立てた HTML の文字列を Element.innerHTML (jQuery.fn.html) するようにしたため、abbr タグが無視されるようになり、見た目だけは表示されるようになりました。

そうそう。先ほど、"ブラウザによる Element.innerHTML の違いを吸収するのは現実的ではない" と書きましたが、この問題を解決しようとする jQuery プラグイン を見つけました。が、試してはいません。IE をターゲットとしているようです。

2008-04-04

Dreamweaver Microformats Extensions はどんなもので何ができるのか

Dreamweaver Microformats Extensions という Microformats を生成する Dreamweaver の拡張機能がツールとしてよく紹介されているのですが、実際にどんなもので、どんなことができるのか、あまり説明がないので、この機会にまとめてみました。

この拡張機能をインストールすると、Dreamweaver のツールバーに Microformats タブが追加されます。そして、そのツールバーのボタンをクリックすると、ダイアログが表示され、ダイアログの項目を入力して OK ボタンをクリックすると、Microformats が生成されるといったものです。

次のページに、ダイアログのスクリーンキャプチャと、生成された Microformats をまとめてみました。

Dreamweaver Microformats Extensions - with Microformats

2008-04-03

Microformats をどう使うかにもフォーカスしている『Microformats: Empowering Your Markup for Web 2.0』

Microformats wiki は、リファレンスとしての要素が強く、具体的にどう使ってよいのかが弱かったり、見つけにくいという印象があります。また、たくさんの情報が集まっていますが、その情報が多すぎて、必要な情報を見つけにくく、見落としてしまう実感があります。

Microformats: Empowering Your Markup for Web 2.0』という洋書は、前述の欠点を補ってくれるものですので、その内容を簡単に紹介します。

Microformats: Empowering Your Markup for Web 2.0

まず、著者である John Allsopp のサイト です。Microformats の直接的な関係者ではないのでしょうかね。John Allsopp と Microformats との関係は把握できていません。

この本で扱っているフォーマットは、次のとおりです。
  • rel-license
  • rel-tag
  • rel-nofollow
  • VoteLinks
  • XFN
  • geo
  • adr
  • hCard
  • hCalendar
  • hReview
  • hAtom
フォーマットの仕様も解説していますが、それに加えて、どういった使い方ができるのか(するのか)を実例を交えて説明しています。その説明は、単なるマークアップに留まらず、CSS によるスタイリングまで含んでいます。

また、そのフォーマットに関連するツールや実装しているサービスの紹介もあるので、(仕様への準拠や使い方の良し悪しは除いて)具体的にイメージしながら Microformats を実感できます。

ケーススタディがあり、実際のサービスでどのように Microformats を使っているか、その解説があります。扱っているサービスは、次のとおりです。
  • Cord'd
  • Yahoo
付録も重宝します。

Microformats Specification Reference は、各フォーマットの仕様がコンパクトにまとまっています。わたしは記憶に定着していない範囲がたくさんある状況なので、すぐに引き出せるようにまとまっているのは助かります。また、各フォーマットの実例、関連するツールやサービスも一緒にまとまっています。

People, Tools, Services, and Publishers は、この本で紹介したものも含む様々な情報源をリストアップしているので、こんなところで、こんなフォーマットを使っているのかとか、わたしの関心領域と重なる部分はどんなところかとか、違った形での発見があります。さらに詳しく調査してみようというときに役立ちそうです。

Flickr API を使って、画像に付与された緯度経度を取得する方法

The geo microformat 生成ツールを公開しました
画像の URL を入力したときは、Flickr API を使って、画像に付与された緯度経度を取得して、その結果から HTML を生成します。ですので、指定できる URL は、Flickr の画像、かつ緯度経度(geoタグ)が付与された画像に限ります。
Flickr API を使って、画像に付与された緯度経度を取得する方法を紹介します。

そのソースコードは、次のとおりです。jQuery と jQuery JSONP プラグイン を使っています。
  var test = c.match(/^http:\/\/farm[0-9]+\.static\.flickr\.com\/[0-9]+\/([0-9]+)_/);
if (test) {
var url = 'http://api.flickr.com/services/rest/?jsoncallback={fn}&' +
$.param({
method: 'flickr.photos.geo.getLocation',
api_key: '(API Key)',
photo_id: test[1],
format: 'json'
});
$(document).jsonp(url, function(json) {
if (json.photo)
map.panTo(new GLatLng(
json.photo.location.latitude,
json.photo.location.longitude
));
});
}
はじめに、画像の URL から 画像 ID を切り出して取得する必要があります。画像の URL パターン は決まりがありますので、その決まりの正規表現を使って、画像 ID を取得しています。

次に、その画像 ID を指定して、Flickr API の flickr.photos.geo.getLocation メソッドを実行します。このとき format に JSON 形式を指定して、さらに jsoncallback にコールバック関数の名前を指定しています。なお、コールバック関数の名前は、jQuery JSONP プラグインが内部で自動的に払い出します。

指定した画像 ID の画像があり、かつその画像に緯度経度が付与されているときは、flickr.photos.geo.getLocation メソッドの実行結果に photo オブジェクトが含まれます。そして、その photo オブジェクトは location オブジェクトを含むので、そのプロパティから緯度経度を取得します。

最後に、Google Maps API を使って、取得した緯度経度が地図の中心になるようにしています。

2008-04-02

The geo microformat 生成ツールを公開しました

The geo microformat の作成を手助けする The geo microformat 生成ツール を公開しました。

郵便番号、住所、場所、または画像の URL を入力すると、自動的に位置情報を取得します。そして、その結果から、ブログやホームページに貼り付けるための HTML を生成します。



例: 160-0021

郵便番号を入力したときは、Postal Search Ajax API を使って、郵便番号から緯度経度を検索して、その結果から HTML を生成します。

例: 新宿区 歌舞伎町

住所を入力したときは、GoogleMaps API のジオコーダを使って、住所から緯度経度を検索して、その結果から HTML を生成します。

例: 新宿コマ劇場

場所を入力したときも同上です。

例: ↓クリック


画像の URL を入力したときは、Flickr API を使って、画像に付与された緯度経度を取得して、その結果から HTML を生成します。ですので、指定できる URL は、Flickr の画像、かつ緯度経度(geoタグ)が付与された画像に限ります。

上記の例のリンクのとおり、本ツールは、外部パラメータも受け取りますので、他のページやツールからリンクして活用することもできます。

本ツールは、The abbr design pattern と The class design pattern を使って、2通りの The geo microformat の HTML を生成します。また、リンクなしと Google マップのリンクありの 2通りの HTML を生成します。

The abbr design pattern は、abbr タグを使います。IE6 は abbr タグに対応していないため、期待どおりの HTML が生成されず表示もできませんので、注意してください。

本ツールが生成した geo microformat が妥当かどうかは、Firefox Operator (Addon) が検出することをもって OK としています。

どのような条件から、どのような HTML を生成するのが有益なのか、まったく実感がありません。Microformats の理解が浅いところがありますので、気づくことや要望がありましたら、コメントしてください。

The hCard format を使って連絡先の情報を埋め込んでみました

Postal Search APIs & Solutions サイトのフッタに The hCard format を使って連絡先の情報を埋め込んでみました。

hcard を埋め込む前の HTML は、次のとおりでした。
<div id="footer">
Copyright&copy; 2007 <a href="http://www.lrlab.to/">LEARNING RESOURCE LAB</a> and
the <a href="http://postal-search-apis-and-solutions.blogspot.com/">Postal Search APIs &amp; Solutions team</a>.
</div>
そして、hcard を埋め込んだ HTML は、次のとおりです。ここでは fn, org, url を使っています。
<div id="footer">
<span class="vcard">
Copyright&copy; 2007 <a class="fn org url" href="http://www.lrlab.to/">LEARNING RESOURCE LAB</a> and
the <a class="url" href="http://postal-search-apis-and-solutions.blogspot.com/">Postal Search APIs &amp; Solutions team</a>.
</span>
</div>
このページを Firefox で表示して、Operator の連絡先から書き出した vcard は、次のとおりです。
BEGIN:VCARD
PRODID:-//kaply.com//Operator 0.8//EN
SOURCE:http://developmentor.lrlab.to/postal/
NAME:Postal Search APIs & Solutions
VERSION:3.0
N:;;;;
ORG;CHARSET=UTF-8:LEARNING RESOURCE LAB
FN;CHARSET=UTF-8:LEARNING RESOURCE LAB
UID:
URL:http://www.lrlab.to/
URL:http://postal-search-apis-and-solutions.blogspot.com/
END:VCARD