opensocial-jquery 0.2.0 view の操作をサポートしました

こんばんは。なかじまんです。opensocial-jquery 0.2.0 をリリースしました。

opensocial-jquery 0.2.0 では、次のとおり、view の操作を追加しました。

現在の view 名を取得できます。view 名は "profile", "home", "canvas", "preview" などの文字列です。

var name = jQuery.view();
// console.log(name) => "home"

現在のコンテナで使用できる view 名を配列として取得できます。

var names = jQuery.views();
// console.log(names) => ["home", "canvas"]

view 名を指定して、view を切り替えることができます。

jQuery.view("canvas");

view を切り替えるとき、パラメータを引き渡すことができます。

jQuery.view("canvas", { name: "nakajiman" } );

そのパラメータは ready イベントの引数として取得できます。

jQuery(function($, data) {
// console.log(data) => { name: "nakajiman" }
}

jQuery(document).ready(function($, data) {
// console.log(data) => { name: "nakajiman" }
}

view の切り替えとパラメータの引渡しの実例を用意しました。

http://opensocial-jquery.googlecode.com/svn/tags/0.2.0/samples/picasa.xml

jQuery.getJSON を使って Picasa Web Albums から新着の写真を取得し、リスト表示しています。このときの view は "profile" です。



写真をクリックすると、jQuery.view を使って "canvas" view に切り替えます。そして、クリックした写真を拡大して表示します。このとき、切り替えた view でどの写真をクリックしたか判別できるように、jQuery.view のパラメータとして、写真の URL を引き渡しています。



上のスクリーンショットは Orkut sandbox のものですが、iGoogle sandbox でも動作します。 以前は動作していたと思うのですが、Orkut sandbox で jQuery(window).title (gadgets.window.setTitle) を呼び出すとエラーが発生するようになっています。あれれ。

Picasa ウェブアルバムの画像から The geo microformat を生成できるようにしました

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

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

以前に Picasa ウェブアルバムの画像から位置情報を取得する方法を調べました。いずれどこかで使ってみようと考えていましたが、ちょうど時間ができたので、The geo microformat 生成ツール を改良し、Picasa ウェブアルバムの画像から位置情報を取得し、その位置情報から The geo microformat を生成できるようにしました。

http://picasaweb.google.co.jp/picasateam/CambridgeUK/photo#5114585391693704978 といった Picasa ウェブアルバムの URL を入力し、目的地を検索するボタンをクリックすると、次のように、その画像から位置情報を取得できるようにしました。



続けて The geo microformat を生成するボタンをクリックすると、HTML コードが生成されるのは、今までどおりです。

次のように、Picasa ウェブアルバムから生成した The geo microformat は、Picasa のアイコンから判断できるようにしてあります。



なお、今回は picasaweb.google.co.jp の URL からなる画像からのみ、位置情報を取得するようにしてあります。picasaweb.google.com など、多くの別名があるのですが、その品揃えが把握できていないというのが理由です。

また、http://lh5.ggpht.com/picasateam/RvqoUMVOLxI/AAAAAAAAQQk/rOLsH7RnldQ/s288/DSC_0027.JPG といった画像(サムネイルを含む)の URL からも位置情報が取得したいところなのですが、この URL から Picasa ウェブアルバム もしくは Picasa Web Albums Data API の URL に変換できないため、今のところ実現の見込みはありません。

Picasa ウェブアルバムと Picasa Web Albums Data API のリソース仕様(URL パターン)が明示されていないか調べたのですが、まだ見つけるに至っていません。もうしばらくアンテナをハッてみて発見できないようなら、Picasa チームのフォーラムで質問することも考えます。

このエントリで使った画像は、Picasa チームの公開アルバムの画像です。位置情報が付いた画像がいくつかありますので、参考になるでしょう。

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 マップに何か効果を与えるとった流れになるんでしょうね。作り手のアイディア次第ってところですね。