gooホームのOAuth機能公開に合わせ、TwitterのOAuthを使ったガジェット「ガジェツイ！」(英語名GadgeTweetr)をリリースしました。ガジェットながらに、そんじょそこらのTwitterクライアントよりもシンプルかつ高機能で使いやすいものに仕上がったと思いますのでご紹介します。

※ガジェツイ！のロゴフォントには「ついってる」を利用させて頂きました。

主な機能

• OAuthログイン機能
• タブ機能
• 返信元表示機能
• 検索機能
• マルチアカウントに対応

OAuthログイン機能

OAuthに対応していますので、IDとパスワードを直接gooホームに入力する必要はありません。「ログイン」ボタンクリックで、twitter.comドメインの画面が開くので、ユーザーは安心してログインすることができます。

タブ機能

タブで様々な種類のステータスを並べて表示するタイプのTwitterクライアントです。Timeline、Mentions、Direct Message、Favoritesなど、一通りの表示に対応しています。

返信元表示機能

ステータスが返信の場合は「返信元」をクリックすることで会話を辿って行くことができます。

検索機能

フリーワード検索にも対応しています。

マルチアカウントに対応

ガジェットはいくつでも追加でき、それぞれに違うアカウントを指定することができます。

その他の機能

3つのビュー

home、profile、canvasそれぞれのビューに対応しています。homeではTimelineとMentionsが、profileでは当該ユーザーのステータスが、canvasではTimeline、Mentions、Direct Message、Favoritesがそれぞれデフォルトで開きます。

自動リンク機能

外部URLはもちろん、@によるID指定、そして#によるハッシュタグの指定を検知してリンク化します。URLの場合が別ウィンドウを開きますが、@と#の場合は新しいタブを作ってステータス一覧を表示します。

ReTweet機能

気に入ったつぶやきはこのアイコンをクリックすることで、いわゆる「ReTweet」することができます。もちろん、コメントを追記することができます。

プロフィール表示機能

アイコンクリックでフォロワー数や投稿数などのプロフィール情報を表示することができます。

フォロー、アンフォロー機能

プロフィール表示からそのままフォローしたり、既にフォローしている場合はアンフォローすることができます。

まとめ

せっかくOpenSocial上に作ったTwitterクライアントということで、ならではのソーシャル機能を準備していたのですが、残念ながら今回の発表には間に合いませんでした(実装でき次第公開します)。

とはいえ、gooホームのOAuthを体験してもらうためだけに作り始めたにも関わらず、シンプルかつ高機能なものに仕上がりました。ぜひガジェツイ！をお試しください。

昨日SocialWeb Blogで紹介して頂いたあしあとガジェットですが、早速多数のフィードバックを頂いています。その中から、2点の改善を行いましたのでご紹介します。

あしあとの表示件数を設定

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

あしあとは有無を言わさず10件表示する作りになっていましたが、HTMLに埋め込むコードの中に設定値を書き込むことで、変更できるようにしました。view-paramsを追加してmaxDisplayで表示したいあしあと数を指定してください。3から20の範囲で指定することができます。

スキンを設定

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

デザインの一部として色を変更できるようにしました。GFCサイトからコピーした時点で含まれているskinの値を変更することで対応できます。実際に有効な値は下記の通り：

BG_COLOR: 全体の背景色
FONT_COLOR: フォント色
CONTENT_HEADLINE_COLOR: ヘッダ文字色
ENDCAP_TEXT_COLOR: フッタ文字色
ALTERNATE_BG_COLOR: あしあと背景色

ずいぶん前ですが、Google FriendConnect向けにあしあとガジェットというのを作りました。

知り合いとか、たまたまこのブログを見た人に細々と使って頂いていたのですが、先日FriendConnectのガジェットディレクトリーが出来たのを機に、せっかくだからと掲載してもらったのがコチラ。

で、その後Googleの方から「とても素晴らしいガジェットなので「お勧め(featured)」に加えるから、是非ブログ記事を書いて欲しい」(若干脚色)との依頼を頂き、書いたのがこちらのブログ

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

という訳で、掲載して頂きました。

実はこのガジェット、日本語にも対応していて、以前は動いていたのですが、GFCでSocial barが使えるようになった辺りから英語オンリーになっていたので、そのことについて聞いてみたところ、近々国際化対応する予定との返事を頂きました。なので「Footprints gadget」は「あしあとガジェット」として使えるようになるかもしれません。

Google FriendConnectの導入は割と簡単です。この記事を見た方は是非、ご自身のブログにあしあとガジェットとGoogle FriendConnectを導入してみてくださいね。

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

OpenSocialアプリ(ガジェット)はiframe内に表示されているのですが、iframeタグのsrc属性に含まれるURLのquery部分に、実はソースコードとなるXMLのURLが書いてあります。 で、いつもそこをコピペしてデコードしてたのですが、せっかくなのでこの機会にブックマークレットを作ってみました。 

Open Orkut Gadget XML

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

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 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.</p>');
    });

最後に、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が正式に登場するまでの暫定措置なのかどうかは未確認ですが、前提は誤っていなかったようです。