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 を変更して存続しておきます。マッシュアップのサンプルなどとして使ってください。

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 を使って、取得した緯度経度が地図の中心になるようにしています。

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 の理解が浅いところがありますので、気づくことや要望がありましたら、コメントしてください。