goo Home just launched its Outbound OAuth support from today. Now, any gadget developers on goo Home can easily mash up external contents authorized using OAuth.

For demonstration purpose, I’ve developed a gadget, which I believe is the world’s first Twitter client on OpenSocial using OAuth, called “GadgeTweetr“. GadgeTweetr is simple, but powerful, even on comparing to other desktop Twitter clients.

Major features

• OAuth Login
• Tabs
• Show In-Reply-To
• Search
• Multi-account

OAuth Login

With support of OAuth, GadgeTweetr can let users login to Twitter without giving credentials to goo Home. Just by clicking “Login” button, a new window opens with clear indication that the browser is showing page on twitter.com, users can login to Twitter safely without worrying this is phishing.

Tabs

Using OpenSocial tabset feature, GadgeTweetr provides view of various status pages like some other Twitter clients do. Timeline, Mentions, Direct Message, Favorites, etc.

Show In-Reply-To

If the status is in-reply-to someone, GadgeTweetr shows “reply to:” beside its date. Clicking it will insert source status just blow that, so that you can drill down (up?) to the original tweet.

Search

You can search on Twitter. GadgeTweetr opens search result tab.

Multi-account

User can embed multiple copies of GadgeTweetr gadgets on goo Home’s home page with different authentications. So you have multiple Twitter accounts in one view!

Misc features

3 views

GadgeTweetr has 3 views: home, profile and canvas. Home view provides Timeline, Mentions tabs, profile view provides its owner’s timeline, canvas view provides Timeline, Mentions, Direct Message, Favorites tabs as default.

Auto link

GadgeTweetr detects @ and # and hyper link it, as well as external link. External link will open new window. @ and # opens new tab in GadgeTweetr showing respective status.

ReTweet

By clicking ReTweet button, you can tweet copy of your favorite status message with indication of ReTweet: “RT”. Of course, you can add your comment just as you do on your own tweet.

Show profile

Clicking thumbnail of a user shows profile dialog with description of the person, numbers of friends, followers, tweets.

Follow, unfollow

On profile dialog, you can even follow or unfollow the user depending on your relationship with the user.

Summary

So, this is the “GadgeTweetr”. Sorry but this gadget only works on goo Home for now, since I don’t know any other containers which supports OAuth properly designed to deploy this kind of gadget.

However, this gadget is already supporting English and is ready to serve to other containers. Although current version is just a plain Twitter client, I’m planning to implement more SOCIAL functionality as well.

Hope this helps the evolution of social web!

I’ve got a lot of feedback since SocialWeb Blog introduced my Fooprints gadget. So here’s 2 updates I made to the Footprints gadget.

Configuring number of Footprints

{ id: 'div-1231298385220',
'view-params': {
'maxDisplay': '15'
},
url:'http://gadgets.agektmr.com/Footprints/friendconnect.xml',
site: '00268510882932422418'},

The number of footprints on this gadget used to be forced to be 10. By this update, you can configure the number by adding “view-params.maxDisplay”. The number must be between 3 and 20.

Configuring the skin

var skin = {};
skin['BORDER_COLOR'] = '#cccccc';
skin['ENDCAP_BG_COLOR'] = '#e0ecff';
skin['ENDCAP_TEXT_COLOR'] = '#000000';
skin['ENDCAP_LINK_COLOR'] = '#0000cc';
skin['ALTERNATE_BG_COLOR'] = '#ffffff';
skin['CONTENT_BG_COLOR'] = '#ffffff';
skin['CONTENT_LINK_COLOR'] = '#0000cc';
skin['CONTENT_TEXT_COLOR'] = '#333333';
skin['CONTENT_SECONDARY_LINK_COLOR'] = '#7777cc';
skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#666666';
skin['CONTENT_HEADLINE_COLOR'] = '#000000';

You can now change colors of the gadget. Initial code copied from GFC site should include skin parameters. You can just change them to take effect.

BG_COLOR: Background color over all
FONT_COLOR: Font color
CONTENT_HEADLINE_COLOR: Header font color
ENDCAP_TEXT_COLOR: Footer font color
ALTERNATE_BG_COLOR: Footprint background color

Hope you enjoy this gadget even more than before!

I’ve developed Footprints gadget for Google FriendConnect in Jan 2009.

Footprints gadget used to be used by some of my friends, people who’ve happened to visit this blog. But when Google FriendConnect gadget gallery emerged, I’ve posted the gadget and they’ve accepted.

After a while, a Google guy gave me an email asking to feature it on Social Web Blog. And here’s the post.

Social Web Blog: See who’s visiting to your site with Footprints gadget

Actually, this gadget is Japanese and English compatible. Google say i18n which used to work will be back sometime. Then, you can use the gadget in Japanese too.

If you want to use this gadget, please utilize Google FriendConnect on your blog. It’s pretty easy!

OpenSocial-Japanのメーリングリストで出した小ネタを貼っておきます。

OpenSocialアプリ(ガジェット)はiframe内に表示されているのですが、iframeタグのsrc属性に含まれるURLのquery部分に、実はソースコードとなるXMLのURLが書いてあります。 このブックマークレットを使えば、ワンクリックでソースコードを開くことができます。

Open Orkut Gadget XML

↑上記をブックマークレットとして保存し、Orkutアプリを表示した状態でクリックすると、ソースコードのページが新規ウィンドウで開きます。 (複数表示されている場合は、一番上のアプリのソースコードが開きます)

※Firefoxでしか動作確認してないので、動かなかったら教えてください。

OpenSocialコンテナにもOrkut, hi5, MySpaceだけでなく、iGoogle, hyves, Netlogなどが登場してきました。

それぞれのSNSには特徴がありますが、仕様をいちいち調べたり、開発に当たって動作確認を行うのは面倒です。現在OpenSocial v0.8は登場したばかりということもあり、ほとんどがv0.7対応のものですが、v0.7への対応状況を確認できるガジェットというのがあります。

これで開発も少しは楽になるのではないでしょうか。

今日から、OpenSocial機能提供に向け、iGoogleでsandboxの利用が可能になりました。これは明白に、Google自身がソーシャルネットワークを基盤とした仕組みになっていくことを意味しています。以前Maka-Makaと呼ばれるプロジェクトが存在し、Google独自のSNSサービスが始まるという話題がありましたが、それがOpenSocialというオープンな形を取り、予想していたとはいえ、iGoogleという形で現実のものにされると、さすが、としか言いようがありません。

で、早速試してみました。

まずはサインアップ。こちらからできます。(言語設定は英語にしておかないと、サインアップしてもsandboxが利用できないようです。)

http://code.google.com/apis/igoogle/docs/anatomy.html

これが新しいiGoogleの画面。

画面左にあるのがインストールしたアプリケーション/ガジェット。これをクリックするとキャンバスビューが開きます。

画面右側にはUpdateとしてアクティビティストリーム(行動履歴)が表示されるとのことですが、まだ確認できていません。SNSですから、友達リストがあってもおかしくないのですが、sandboxでは友達なしの状態からスタートし、sandboxに登録しているユーザー同士でなければ友達になれないとのこと。どうやって友達になれるかは、まだ不明。実際のサービス時はGoogle Talk/Gmailのアドレス帳からスタートすることは容易に想像できます。

また他にも、ガジェットごとの設定項目の表示方法が変更されているようです。

で、せっかくのsandboxですから、早速以前作ったFriendIntroducerを試してみました。OpenSocialとはいえ、コンテナごとにビュー名は若干違うよね、ということで、ガジェットXMLにhomeビューを追記し、Developerガジェットから追加。

んー。友達がいないので、当然こういう表示になってしまいますが、動いていることは確認できました。やはりそこはOpenSocial。

まとめ

あくまで基盤とはいえ、Googleは本当に恐ろしい存在です。すべてのウェブサービスを飲み込めるくらい、地を這ってる。auやlivedoorのGmailしかり、Google App Engineしかり。何でもかんでもGoogleに乗っけてしまえってくらい。

そしてGoogleにはAndroidもあります。そう、携帯電話のアドレス帳もこの友達リストに接続できるようになるでしょう。そうすると、友達のブログ更新をメールで受け取ったり、そのままケータイで閲覧したりといったことがユーザーに何のストレスも与えずに可能になります。

あと足りないのはプロフィールビューでしょうか。Google MapやGoogle Groupsで部分的に実現されてはいますが、これがどういう形で結実していくか、見物です。

OpenSocialアプリケーションを作る(1)では、ガジェットの仕組みと、Orkutでアカウントを取得するところまで書きました。今回は、前回紹介したアプリケーションのコードを解説します。

このアプリケーション(FriendIntroducer)は、自分が見た場合は友達の紹介文を書くことができ、他人が見た場合はその人に向けて書かれた紹介文を読むことができる、というmixiなどにもよくある簡単なアプリケーションです。JavaScriptやjQuery的にはもっと賢い実装方法があると思いますが、今回はOpenSocialのコードにフォーカスしますので、アホなコードは大目に見てください。

ガジェットXML

< ?xml version="1.0" encoding="UTF-8" ?>
<module>
<moduleprefs title="Friend Introducer" title_url="" description="Introduce your friend!" height="100">
  <require feature="opensocial-0.7" />
  <require feature="views" />
  <require feature="dynamic-height" />
 </moduleprefs>
<content type="html" view="canvas">
  < ![CDATA[
  <link href="http://devlab.agektmr.com/OpenSocial/css/FriendIntroducer.css" rel="stylesheet" type="text/css">
  <script type="text/javascript" src="http://devlab.agektmr.com/OpenSocial/js/jquery.js"></script>
  <script type="text/javascript" src="http://devlab.agektmr.com/OpenSocial/js/FriendIntroducer.js">< /script>
  </script><script type="text/javascript">
    gadgets.util.registerOnLoadHandler(FriendIntroducer.init);
  </script>
  <div id="title"></div>
  <div id="friends"></div>
  <div id="message"></div>
  ]]>
 </content>
</module>

ここでは

• ガジェットの設定
• 外部のCSSやJavaScriptを読み込み
• 初期化スクリプトの呼び出し
• 表示用DIV指定

を行っています。

<content type="html" view="profile">

Contentはhtmlタイプ、profileビューと指定しました。typeにはhtmlとurlが選択可能ですが、htmlとして内容をContentタグで囲まれた部分に記述しています。viewはOpenSocialの仕様上profile、canvasが想定されていますが、コンテナによってhomeやpreviewが存在するようです。ここでは例としてcanvasを使用しています。

また、viewを指定しない場合はdefaultビューとして扱われます。コンテナは表示場面(コンテキスト)によってビューを切り替えますが、Content内でviewを取り出してJavaScriptで処理を分ける方法もあります。

Contentの内容

Contentの内容は、基本的に通常のウェブページと同じように扱うことができ、HTMLで書くことができますが、

  <script type="text/javascript">
    gadgets.util.registerOnLoadHandler(FriendIntroducer.init);
  </script>

このようにgadgets.util.registerOnLoadHandlerを使って初期化処理を入れることができます。

このアプリケーションでは、表示テンプレートとして空のdivタグを3つ用意しています。

JavaScriptのコード

JavaScriptのソースコードはここにありますが、抜粋して紹介します。

    $('#friends').html('Requesting friends...');
    var req = opensocial.newDataRequest();
    req.add(req.newFetchPersonRequest('VIEWER'), 'viewer');
    req.add(req.newFetchPeopleRequest('VIEWER_FRIENDS'), 'friends');
    req.add(req.newFetchPersonAppDataRequest('VIEWER', 'Introduction'), 'intro');
    req.send(FriendIntroducer.onLoadViewerFriends);

最も基本的な処理となる、閲覧者、閲覧者の友達、保存したデータを取り出す処理です。

opensocial.newDataRequest()でデータリクエストオブジェクトを作り、addで3種類のリクエストを追加、最後にsendでコールバック関数を指定した上、データリクエストを送信しています。3種類のリクエストにはそれぞれ後で区別するためviewer, friends, introという名前(キー)を付けています。

   var viewer    = response.get('viewer').getData();
   var friends   = response.get('friends').getData();
   var intro     = response.get('intro').getData();

コールバック関数では、引数(response)を使って、response.get(キー名).getData()でリクエストしていたデータを取り出すことができます。

    var viewer_id = viewer.getId();
    var json = null;
    if (intro[viewer_id]) {
      if (intro[viewer_id].Introduction) {
        var json_str = gadgets.util.unescapeString(intro[viewer_id].Introduction);
        var json = eval(json_str)[0];
      }
    }

introは、このアプリケーションを使ってコンテナのデータ保存領域に予め保存しておいた内容、つまり「以前保存した友達の紹介文」です。

    $('#title').html('<p>Friends of '+viewer.getDisplayName()+':</p>');
    var html = '';
    if (friends.size() == 0) {
      $('#message').html("<p>You don't have any friends yet!</p>");
    }

友達が誰もいない場合を考慮して、メッセージを表示しています。

    friends.each(function(person) {
      var t = FriendIntroducer.template.friend_list_canvas;
      t = t.replace('##thumbnail_url##', person.getField(opensocial.Person.Field.THUMBNAIL_URL));
      t = t.replace('##profile_url##',   person.getField(opensocial.Person.Field.PROFILE_URL));
      t = t.replace('##display_name##',  person.getDisplayName());
      t = t.replace('##input_id##',      'input_'+person.getId());
      if (json) {
        t = t.replace('##intro_text##',  json[person.getId()] ? json[person.getId()] : '');
      } else {
        t = t.replace('##intro_text##', '');
      }
      html += t;
    });
    $('#friends').html('<ul>'+html+'</ul>');

OpenSocialでは配列をなめる、いわゆるiterationも仕様に含まれていて、eachを使うことができます。ここでは、友達のリストをループして、友達の名前やサムネイル画像、保存されていた紹介文をHTMLテンプレートに埋め込んでいきます。

ここまでで、友達の紹介文を書き込むことができるcanvasページの表示することができました。次に、友達の紹介文をユーザーが書き込んだものと想定し、投稿して保存するところまでを解説します。

データの保存

OpenSocialはコンテナにデータ保存領域を持っており、アプリケーションがデータを保存することができます。これはパーシステントデータ(Persistant data)や、アプリケーションデータ(AppData)と呼ばれています。アプリケーションデータはバージョン0.7ではエスケープした文字列のみサポートしています(次のバージョンではJSONそのものの保存も可能になるようです)。

    var list = $('#friends ul li');
    var intro = "{result:[{";
    for (var i=0; i < list.length; i++) {
      var textarea = list[i].lastChild.lastChild;
      var uid = textarea.id.substring(6);
      var intro_text = textarea.value.replace("'", "\'");;
      intro += "'"+uid+"':'"+intro_text+"'";
      intro += (list.length-1)==i ? "" : ",";
    };
    intro += '}]};';
    var req = opensocial.newDataRequest();
    intro = gadgets.util.escapeString(intro);

この処理は、ユーザーが友達の紹介文を書き終わって「投稿ボタン」を押すことでトリガーされるものです。DOMを辿って各友達のユーザーIDと紹介文の内容を取得する、普通のJavaScriptです。取得した内容はJSONの文字列になるよう連結し、エスケープすることで、アプリケーションデータとして保存が可能になります。

    req.add(req.newUpdatePersonAppDataRequest('VIEWER', 'Introduction', intro));
    req.send(function() {
      $('#message').html('<p>Your introduction has been submitted.');
    });

最後に、JSON形式になった文字列をデータリクエストオブジェクトに追加して送信して、完了です。

まとめ

解説というよりはソースコード並べただけみたいな記事になってしまいましたが、OpenSocialアプリケーションのほとんどがJavaScriptでできてしまうということは、分かったかと思います。次回は外部サーバーとの連携を行うmakeRequestに触れたいと思います。

OrkutとMySpaceで自作アプリを動かしてみたので、そのレポートです。

まだ仕様が固まっていないのでグレーな部分も多いのですが、OpenSocialはGoogleGadgetと相性が良いらしく、OrkutもMySpaceも、hi5もGoogleGadget前提となっています。というわけで、今回はGoogleGadgetの基本的な作り方とOrkutへのアプリケーション追加方法の解説です。

ガジェットとは何か

GoogleGadgetはiGoogleで動くJavaScriptとHTMLで記述された簡単なアプリケーションです。JavaScriptとHTMLはXML上に埋め込み、設定内容もXMLに記述します。

< ?xml version="1.0" encoding="UTF-8" ?>
<module>
 <moduleprefs title="Blah Blah Gadget"
  description="Gadget Example"
  author_email="***@***.com"
 >
 </moduleprefs>
 <content type="html">
.....
 </content>
</module>

XMLはこんな感じ。Contentの中にJavaScriptとHTMLを記述することで、その内容がiGoogle上やMySpace等のOpenSocialアプリケーションとして表示されます。

ガジェットはJavaScriptを許可していることから、XSSなどの脆弱性を回避するため、iframeを使って別ドメインで動作するようになっています(iGoogleの場合、gmodules.com)。Contentの属性であるtypeを”html”から”url”に変更し、hrefでURL指定すると、iframe内に自分の管理するサーバーを表示することも可能です。

GoogleGadget自体の仕様は掘り下げるとキリがないのでこの辺りで。詳細はリファレンスをご覧ください。

OrkutのSandboxアカウントを取得する

OrkutはGoogle直結ということもあり、OpenSocialの仕様が最も早く反映されるようです。そのOrkutのOpenSocial実験環境はSandboxと呼ばれ、通常のOrkutアカウントを拡張したSandboxアカウントを取得することで、利用可能となります。

アカウントを取得するにはコチラから申請を行ってください。申請が受理されるまでには数日を要するようです。

OrkutにOpenSocialアプリを追加する

無事アカウントの取得ができたら、実際にアプリケーションを試すことができるようになります。ちなみに、どこかのサーバーにGoogleGadgetのXMLファイルを置いておく必要がありますので、Geocitiesでも何でもいいはずですので、ファイルをアップできるところを用意しておきましょう。

Sandboxにログインするとこんな感じ。一見通常のログイン画面と変わりませが、一点だけ：

画面左にアプリケーションを追加するリンクがあります。クリックすると・・・

URLでXMLファイルを指定してアプリケーションを追加することが出来ます。(ちなみにアプリケーションディレクトリはいつもほとんどアプリがありません)

ここでは、僕の作ったアプリケーションで試してみましょう。URLに下記を入力します：

http://devlab.agektmr.com/OpenSocial/FriendIntroducer.xml

「アプリケーションを追加」ボタンを押すと、次の画面に遷移します。

ここでも「アプリケーションを追加」ボタンを押すことで、アプリケーションの追加が完了します。

こんな感じの画面が表示されたら成功。Orkut上に友達がいない方は、僕のアカウントに友達申請してくれてもOKです。

ひとまず、第一回はここまで。

先日のGoogleディベロッパー交流会でShindigのphp版が公開されていることを知り、試してみました。

Shindigをチェックアウトする

> svn co http://svn.apache.org/repos/asf/incubator/shindig/trunk .

Shindigのソースがチェックアウトされます。(今回試したリビジョンは637739)

> ln -s ~/Development/Shindig/php/gadgets /Library/WebServer/Documents/gadgets

これでローカルホスト上で見れるはず。ブラウザに下記のURLを入力します。

http://localhost/gadgets/ifr?url=http://www.labpixies.com/campaigns/todo/todo.xml

見れません、、、

httpd.confを修正

どうやら、Mac OS X(Leopard)のhttpd.confのデフォルト 設定が邪魔している模様。

/etc/apache2/httpd.conf

を書き換えます。/etc/httpd/httpd.confではないことに注意。(Tigerはこれだった)

<Directory "/Library/WebServer/Documents">

内の

AllowOverride None

を

AllowOverride All

に変更します。これでいけるはず。。。

できた！これで、色々いじれますよ・・・

前提：Google Gadgetでurlタイプを指定した場合、iframe内にはリモートサーバーの内容がそのまま表示されるため、Ajaxで友達情報等を取得しようとすると、ドメイン超えが必要となり、プロキシ経由でサーバー間通信となりRESTful APIがないと役に立たない

どうやらOrkutでは、Content Type=’url’を許可していない模様。

MYSQL database connection using PHP for my gadget ? – Orkut Developer Forum | Google グループ

Content Type=’url’を指定すると404が返るらしい。 404が返ること自体はバグとのことですが、Content Type=’url’が動くようになったところで、ドメインを超えてOpenSocialを利用するにはプロキシを介したRESTful APIによるアクセスが必須であることは確認できました。これがRESTful APIが正式に登場するまでの暫定措置なのかどうかは未確認ですが、前提は誤っていなかったようです。