2009-11-28

OpenSocial jQuery autoHeight 1.0.0 is available

OpenSocial jQuery autoHeight is plugin to adjust height of Gadgets automatically all the time.
http://code.google.com/p/opensocial-jquery/wiki/PluginAutoHeight

Edit the src attribute in the script tag to point to your copy of opensocial-jquery.autoHeight.js. Inside the ready event, add the autoHeight method to window object:
<script type="text/javascript" src="opensocial-jquery.js"></script>
<script type="text/javascript" src="opensocial-jquery.autoHeight.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $(window).autoHeight();
});
</script>
Featured Video



Downloads

You can download it from the featured downloads list.
http://code.google.com/p/opensocial-jquery/downloads/list

gadgets.window.adjustHeight で、確実に !? ガジェットの高さを自動調整する方法

おはようございます。なかじまんです。

Gadgets API の gadgets.window.adjustHeight を使うと、ガジェットの高さを自動調整できますが、実際のところは、画像のロードタイミングや、ブラウザごとに仕組みの異なる gadgets.rpc が影響して、期待どおりの高さに自動調整されないことが多々あります。

で、今までいろいろ試してきましたが、現在は、次のとおり、周期的に高さを自動調整して、期待する高さを保つという方法がもっとも確実であるという結論です。
setInterval(function() { gadgets.window.adjustHeight(); }, 1000);
また OpenSocial jQuery だと、次のようになります。
setInterval(function() { $(window).adjustHeight(); }, 1000);
1秒間隔で、ガジェットの高さの自動調整を試みています。gadgets.window.adjustHeight のソースコードを調べたところ、ガジェットの高さに変化のないときは、コンテナと RPC 通信せずに何もしないようになっていたので、1秒間隔くらいで gadgets.window.adjustHeight を呼び出しても、それほどコストはかかりません。

1秒間隔なので、高さが自動調整されるのがひと呼吸遅いかなという感じがあったり、頻繁に高さが変わるようなガジェットだと、ペコペコ高さが変わって見苦しいこともありますが、高さが自動調整されないという最悪の結果は回避できます。

-- 2009-11-28 追記

上記のガジェットの高さを自動調整し続ける... をプラグインとして公開しました。公式サイトからダウンロードして使ってください。

OpenSocial jQuery autoHeight 1.0.0 (opensocial-jquery.autoHeight.js)
http://code.google.com/p/opensocial-jquery/

使い方は、次のとおり opensocial-jquery.autoHeight.js をロードして、はじめに1度だけ window オブジェクトに対して autoHeight を呼び出すだけです。
<script type="text/javascript" src="opensocial-jquery.min.js"></script>
<script type="text/javascript" src="opensocial-jquery.autoHeight.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $(window).autoHeight();
});
</script>
ガジェットXMLの実例を用意しました。
http://opensocial-jquery.googlecode.com/svn/trunk/tests/opensocial-jquery.autoHeight.test.xml

ガジェットXMLを gooホームにも登録しましたので、体験してみてください。
http://sandbox.home.goo.ne.jp/gadget/N43bmJWwmt18/detail

ガジェットXMLが動作する様子を動画にしました。文章のフォントサイズを変更すると、その変化に応じて、ガジェットの高さが自動調整されることが見て分かります。

2009-11-25

OpenSocial jQuery から OpenSocial Host の外部データベースを操作する基本手順を紹介します

おはようございます。なかじまんです。

OpenSocial jQuery から OpenSocial Host の Core API を使って、OpenSocial Host の外部データベースを操作する手順とソースコードを紹介します。

OpenSocial Host の外部データベースを使うメリットは、次のとおりです。

* OpenSocial AppData とは異なり、すべてのユーザが同じデータ領域を共有できる
* OpenSocial AppData とは異なり、個々のデータに対して、パーミッションを指定できる
* OpenSocial AppData とは異なり、個々のデータに対して、データ容量の制約がない
* OpenSocial AppData とは異なり、個々のデータに対して、ワード検索できる
* 外部データベースは HeartRails によって、安全、確実にホストされ、負荷対策も期待できる(に違いない)

OpenSocial Host の外部データベースにできなこともあります。

* OpenSocial AppData とは異なり、友達リストのソーシャルグラフが使えない

なので、OpenSocial API と OpenSocial Host の特徴をよく理解して、組み合わせて使うことになるのだろうと考えます。

ユーザの登録

はじめに OpenSocial Host のユーザ登録をしてください。
ユーザ登録は無料です。Open ID を使えば、パスワードを預ける必要はありません。



アプリケーションの登録

次に OpenSocial Host にログインして、新しいアプリケーションを登録してください。
アプリケーションの変更や削除はいつでもできますので、アプリケーション名は仮のものでも構いません。



アプリケーションを登録すると、アプリケーションキーが発行されますので、動作対象とするコンテナのアプリケーションキーを手元に控えてください。



アプリケーションの関連付け

ガジェット XML を用意して、動作対象とするコンテナにガジェット XML を登録してください。ガジェット XML は OpenSocial Host でホストしてもよいですし、自社サーバや Google AppEngine、Amazon S3 など、どこでホストしてもかまいません。

そして、次のように、ガジェット XML から /app/register を呼び出します。
このとき、前述のアプリケーションキーをパラメータとして、リクエストを署名します。
呼び出しが成功すると、OpenSocial Host とガジェット XML が関連付き、これ以降、ガジェット XML から OpenSocial Host の外部データベースが使えるようになります。
なお、関連付いた後は /app/register の呼び出しは不要です。アプリケーションの開発をはじめるとき、1度だけ呼び出してください。
// Register Application
  var url = 'http://opensocialhost.com/app/register';
  var data = { application_key: '( Your Application Key )' };
  
  $.ajax({
    type: 'post', url: url, oauth: 'signed', data: data, dataType: 'json'
  }).next(function(r) {
    if (r.hadError)
      throw r.errorCode; // call error
  }).error(function(e) {
    console.error(e+'');
  });
}}}
データの追加

/data/insert を呼び出して、データを追加できます。このとき、Key-Value 形式のデータとパーミッションをパラメータとして、リクエストを署名します。

* 既存のデータは上書きできます。ただし、パーミッションは上書きできません。パーミッションを変更するときは、データを削除した後、データを再挿入します。
* 読み込みと書き込みのパーミッションは別々です。書き込みは読み込みを兼ねません。
* パーミッションは public, private, specified を指定できます。specified のときは、カンマ区切りで、複数のユーザ ID を指定できます。
// Insert Data
  var url = 'http://opensocialhost.com/data/insert';
  var data = {
    comment: { text: 'Say Hello!', lastModified: new Date().getTime() },
    feeling: 'well',
    footprint: true
  };

  // Object を OpenSocial Host のパラメータに変換する
  // Key はそのまま、Value は JSON (String) に変換する
  var _data = {}, i = 1;
  $.each(data, function(k, v) {
    _data['key'+i] = k;
    _data['value'+i] = gadgets.json.stringify(v);
    i++; 
  });

  // 読み込みパーミッションを指定する
  //_data.read_permission = 'public'; // 誰でも(初期値)
  //_data.read_permission = 'private'; // 自分のみ
  //_data.read_permission = 'specified'; // 特定のユーザのみ
  //_data.read_permission_specified = '( User ID ),( User ID ), ...';  

  // 書き込みパーミッションを指定する  
  //_data.write_permission = 'public'; // 誰でも(初期値)
  //_data.write_permission = 'private'; // 自分のみ
  //_data.write_permission = 'specified'; // 特定のユーザのみ
  //_data.write_permission_specified = '( User ID ),( User ID ), ...';  
  
  $.ajax({
    type: 'post', url: url, oauth: 'signed', data: _data, dataType: 'json'
  }).next(function(r) {
    if (r.hadError)
      throw r.errorCode;
  }).error(function(e) {
    console.error(e+'');
  });
データの更新

/data/update を呼び出して、データを更新できます。このとき、Key-Value 形式のデータをパラメータとして、リクエストを署名します。
// Update Data  
  var url = 'http://opensocialhost.com/data/update';
  var data = { feeling: 'bad', footprint: false };

  // Object を OpenSocial Host のパラメータに変換する
  // Key はそのまま、Value は JSON (String) に変換する
  var _data = {}, i = 1;
  $.each(data, function(k, v) {
    _data['key'+i] = k;
    _data['value'+i] = gadgets.json.stringify(v);
    i++; 
  });

  $.ajax({
    type: 'post', url: url, oauth: 'signed', data: _data, dataType: 'json'
  }).next(function(r) {
    if (r.hadError)
      throw r.errorCode;
  }).error(function(e) {
    console.error(e+'');
  });
データの削除

/data/delete を呼び出して、データを削除できます。このとき、Key をパラメータとして、リクエストを署名します。
// Delete Data  
  var url = 'http://opensocialhost.com/data/delete';
  var data = [ 'comment', 'feeling' ];

  // Array を OpenSocial Host のパラメータに変換する
  var _data = {};
  $.each(data, function(i, v) {
    _data['key'+(i+1)] = v; 
  });

  $.ajax({
    type: 'post', url: url, oauth: 'signed', data: _data, dataType: 'json'
  }).next(function(r) {
    if (r.hadError)
      throw r.errorCode;
  }).error(function(e) {
    console.error(e+'');
  });
データの取得

/data/select を呼び出して、データを取得できます。このとき、Key をパラメータとして、リクエストを署名します。
// Select Data  
  var url = 'http://opensocialhost.com/data/select';
  var data = [ 'comment', 'feeling', 'footprint' ];

  // Array を OpenSocial Host のパラメータに変換する
  var _data = {};
  $.each(data, function(i, v) {
    _data['key'+(i+1)] = v; 
  });

  $.ajax({
    type: 'post', url: url, oauth: 'signed', data: _data, dataType: 'json'
  }).next(function(r) {
    if (r.hadError)
      throw r.errorCode;
    
    // OpenSocial Host のレスポンスを Object に変換する
    // Key はそのまま、Value は JSON (String) から Object に戻す
    var data = {};
    $.each(r.data, function(i, v) {
      data[v.key] = gadgets.json.parse(v.value);
    });   
    return data;
  
  }).next(function(data) {
    console.info(data.comment.text);
    console.info(data.comment.lastModified);
    console.info(data.feeling);
    console.info(data.footprint);
  }).error(function(e) {
    console.error(e+'');
  });
データの検索

/data/search を呼び出して、データを検索できます。このとき、フィルタ条件、ソート条件、ページング条件をパラメータとして、リクエストを署名します。

* 指定した文字列を Key に含むデータを検索できます。部分一致のみです。
* 指定した文字列を Value に含むデータを検索できます。部分一致のみです。
* Key と Value の両方を指定したときは、上記の AND 条件になります。
* page はページ番号です。インデックスではありません。
* sort は asc, desc を指定できます。ソート順はデータの追加日時です。更新日時ではありません。
// Search Data
  var url = 'http://opensocialhost.com/data/search';
  var data = {
    key: 'feeling', value: 'well', page: 1, per_page: 10, sort: 'asc'
  };

  $.ajax({
    type: 'post', url: url, oauth: 'signed', data: data, dataType: 'json'
  }).next(function(r) {
    if (r.hadError)
      throw r.errorCode;

    // OpenSocial Host のレスポンスを Object に変換する
    // Key はそのまま、Value は JSON (String) から Object に戻す    
    $.each(r.data, function(i, v) {
      v.value = gadgets.json.parse(v.value);
    });
    return $.extend(r.data, {
      page: r.page, per_page: r.per_page, total_counts: r.total_counts
    });
  
  }).next(function(data) {
    $.each(data, function(i, v) {
      console.info(v.key, v.value);
    });
    console.info(data.page, data.per_page, data.total_counts);
  }).error(function(e) {
    console.error(e+'');
  });
データのグループ化や階層化

OpenSocial Host の外部データベースは、すべてのユーザで共有して、パーミッションでアクセス件をコントロールします。ですので、どのユーザのデータなのか、どの種類のデータなのかは、次のように Key の文字列を使って表現する必要があります。
// VIEWER ID を使って、どのユーザのデータなのかを区別する
  var key = viewer.id + '$comment';
  var data = { text: 'Say Hello!', lastModified: new Date().getTime() };
データの確認 -- 2009/11/26 追加

OpenSocial Host にログインして、外部データベースの内容を確認できます。

* 指定した文字列を Key または Value に含むデータを検索できます。
* データの Key や Value、パーミッション、作成日時など、詳しく表示できます。
* データを削除できます。



関連リンク

* OpenSocial Host Core API
* OpenSocial Host ユーザフォーラム

2009-11-19

Gadgeta GeoNotes - Building Social Mashup Container with OpenStack

おはようございます。Nobuhiro Nakajima です。

Mashup Awards 5 というマッシュアップをテーマとしたコンテストに、次の作品を応募しました。



Gadgeta GeoNotes - Building Social Mashup Container with OpenStack
http://golazo.aptanacloud.com/

Gadgeta GeoNotes は、位置情報付きのテキストを投稿し、タイムライン風に共有することで、場所や地域を軸とした人の繋がりを作り出すことを目的とした OpenSocial 対応の SNS サイトです。海外への紹介も考慮し、英語サイトにしています。



投稿したテキストから位置情報を自動抽出し、それぞれを関連付けて時系列に保存します。テキストは日本語と英語に対応し、英語なら日本に限らず、世界の国や地域の位置情報も抽出できます。

投稿したテキストに、様々なガジェットを貼り付けできます。ガジェットは位置情報を受け取り、場所や地域に応じた情報を提示できます。ガジェットは OpenSocial に対応し、プロフィールや友達リスト、アクティビティを活用して、相互作用やバイラル効果を促進できます。

Gadgeta GeoNotes は OpenStack を活用した Social Mashup Container です。オープンな仕様、オープンソース、オープンなサービスから構築しています。SNS サイトの主要な特徴を備え、ガジェットの拡張により、他サービスやコンテンツとの融合の可能性を開きます。

デモビデオ

Nobuhiro Nakajima が仮想イベントの開催告知と参加を呼びかける例です。

* イベントの開催内容のテキストを投稿し、新橋付近の位置情報を検出しています。
* 参加者との連絡のために Comments ガジェットを追加しています。
* 参加表明のために Attends ガジェットを追加しています。
* 懇親会の会場を探すために、近所のバーガジェットを追加し、新橋付近のお店をリストアップしています。



まんてん が仮想イベントに参加を表明する例です。

* Friends' Activity からイベントの開催告知を知ります。
* Comments ガジェットを使って、開催者と連絡をとっています。
* Attends ガジェットを使って、参加を表明しています。また、友達の参加状況を確認しています。
* 観光スポットを紹介するために Tokyo's Art and Design Events ガジェットを追加し、新橋付近のアートなイベントをリストアップしています。



デモガジェット

となりのチャンネー
この辺りで見かけたチャンネーを紹介します。気に入った髪型のチャンネーをクリックして投票してね。投票できるチャンネーは全国各地で合計10人までですよ。となりのチャンネーは weboo さんが開発した みんなのチャンネー のアイディアを勝手に借りたものです。ありがとうございます。


Tokyo's Art and Design Events
Tokyo Art Beat is Tokyo's bilingual art & design events guide. Offering event listings, reviews and a shop, the site is updated daily and lists more than 500 current & upcoming art events, at any moment.


近所のバー
BAR-NAVI は、サントリーが提供する日本最大級のバー検索サイトです。バーを楽しむというスタイルを提案しています。エリアやバーのタイプ、特徴、雰囲気で検索できます。自分だけの隠れ家を探したり、珍しいカクテルと出会うことができます。


OpenSocial というと、大きな受け皿としてのコンテナが存在し、その上のアプリケーションという構図で考えがちですが、Gadgeta GeoNotes によって、オリジナルのコンテンツを所有する小中規模のサイトやサービスが、自らソーシャルなマッシュアップコンテナになる(なれる)という可能性を示せたと考えています。

追記です。-- 2009/11/10

SocialWeb Japan 主催 SocialWeb Conference vol.4 〜OpenSocial Night #1〜 のライトニングトークの中で Gadgeta GeoNotes を紹介しました。そのときのスライドです。



追記です。-- 2009/11/19

Gadgeta GeoNotes のソースコードを公開しました。
http://golazo.googlecode.com/svn/branches/geonotes/