Google Gearsが8ヶ月ぶりにアップデートされ、0.2になりました。
数々のバグフィックスがされているようです。

今回はgoogle gearsを調査しているときに見つけた、Project Drawを紹介します。


その前にGoogle Gearsの目的を再度整理してみました。以下の２つがあると思います。

• Webアプリのオフライン対応
• 通信量が多く、重いWebアプリを軽量化

前者は、Webアプリはオフラインでは使えないという弱点を克服できます。都内ではFONやlivedoor wirelessが普及しているとはいえ、通勤途中や顧客社内などではネットワークにつながらない（or つなげさせてもらえない）場所が多くあります。Gearsはブラウザのプラグインとしてインストールでき、Gearsに対応しているwebアプリケーションはオフラインでも閲覧することができます。

後者はAjaxを多用したものに有効だと思います。非同期で投げられる多くのリクエストをGearsがProxyとしてキャッシュさせておき、ユーザーが明示的にアクション（投稿や保存）指示したときにだけ、Webアプリと通信させるといったことが可能です。


実際ZOHOのZOHO Sheetは、Google Gearsのオンライン／オフラインを切り替えたときに、かなり動作速度が早くなることが分かりました。

さて、本題のProject Drowの紹介に戻ります。
これは簡単にいうと、VisioのWebアプリ版（Gears対応）です。
こちらから試すことができます。


画面はこんな感じです。


左側のプルダウンから、サンプルのシェイプを切り替えることができます。

• 基本図形
• フローチャート
• 矢印、吹き出し
• ネットワーク
• Windows UI
• Mac UI
• フロアレイアウト
• オフィスレイアウト
• キッチン&バス
• 家具
• 回路図

ネットワークシェイプの例:


ドラッグ&ドロップでもっさり感はありますが、フローチャートとか作るのには良いかもです。
しかし残念なことに、日本語はNGでした。


現在Google Gearsが正式サポートしているのはIE,とFirefoxのみ。Gears対応Webkitが開発されているようなので、Safari正式対応ももう少しだと思われます。今後も要注目のテクノロジーです。

今回は、Google Open Social ネタで行きたいと思います。

Google CodeのOpen Socialページには、賛同している企業が続々と公開され、それに関するニュースも頻繁に見るようになりました。

個人的にはmixi以外の日本企業が無いからなのか、あるいは実際にサービスとして存在しているものが無いせいなのか、いまいち全体像というかメリットが実感できておりません。
そこで今回は、具体的にどのようなことができるのか調査してみました。

Google Open Social とは、各SNSが持つのデータを外部に提供することを目的としたAPIの仕様をまとめたものです。

• プロフィール情報
• 友達情報
• 活動情報

また、Google Open Socialの利用方法は、以下の２つがあります。

• 上記情報をOpen Socialに準拠したAPIを介し、データを提供する側（コンテナ）
• APIからデータを取得し、サービスを作る側（デベロッパ）

今回はデベロッパの立場から、orkutが提供するAPIを使ったチュートリアルをやってみました。
ざっくりとした手順は、以下のようになります。

1. orkutに登録
2. orkutのテスト環境(sandbox)に登録
3. sandbox上で友達関係を構築する
4. GGEにてOpen Socialガジェットを作成する
5. sandbox上のマイページに、ガジェットを追加する

1.orkutに登録

orkutは招待制ではないので、登録はこちらから簡単に行えます。（Googleアカウントが必要です。）

2. sandboxに登録

現時点では、APIはsandbox上でしか提供されていないので、こちらから利用する為の申請を行わなければなりません。僕の場合、承認されるまでに1日かかりました。。

3. 友達情報を取得するAPIを利用するため、sandbox上で友達関係を構築する。

こちらのフォーラムで、友達募集中のイケメン達がいっぱいいるので、Friend登録しまくります。
実際に登録依頼をしてみましたが、遠い外国の人たちが多いためか、いまだ承認してくれた人はいません。悲しい。。だれか友達になってください。

4. ガジェット作成

orkut上で動作するガジェットは、Googleガジェットと同一の仕様で動きます。よって、前回のエントリと同様に、GGE上でXMLを記述していく形になります。
先述のようにまだ友達がいないので、とりあえず自分の情報を出力するAPIだけを用いることにしました。

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
 <ModulePrefs title="My Data">
   <Require feature="opensocial-0.6"/>
 </ModulePrefs>
 <Content type="html">
 <![CDATA[
 <script type="text/javascript">
  function getData() {
    document.getElementById('message').innerHTML = 'Requesting my data...';
    var req = opensocial.newDataRequest();
    req.add(req.newFetchPersonRequest('OWNER'), 'owner');
    req.send(showMyData);
  };
  function showMyData(dataResponse) {
    var owner = dataResponse.get('owner').getData();
    var html = 'My name is ' + owner.getDisplayName();
    document.getElementById('message').innerHTML = html;
  };
  gadgets.util.registerOnLoadHandler(getData);
  </script>
  <div id="message"> </div>
 
  ]]>
  </Content>
</Module>

太文字部分がOpen Social APIになります。上記ソースをGGEに保存し、保存先のURIをコピーします。

5. sandbox上のマイページにガジェットを登録する

このページに行き、先ほど保存したガジェットのURIを張りつけ、登録します。


登録できたようです。きちんとAPIから戻り値がかえってきました。


今回は友達がいなく、友達情報を取得するAPIを利用できませんでしたが、APIリファレンスを見る限り、様々な情報を取得できるようです。

しかし残念なことに、僕が見る限りではorkutのsandbox上できちんと動いているガジェットが存在してませんでした。僕のようにチュートリアルのコードをコピペしたものや、Javascriptエラーが起きているもの、利用しているAPIのバージョンが異なってエラーになっているものなどです。皆さん結構四苦八苦されているようです。。

現時点での最新のAPIバージョンは0.7になっており、今後も機能追加やブラッシュアップされることが予想されます。APIを用いてどのようなサービスができるか想像すると楽しいですね。

皆さんはブラウザのスタートページを何にしていますか？　
私は以前MyYahoo!を使っていましたが、最近はiGoogleを利用しています。
iGoogleは「ガジェット」と呼ばれるブラウザ上で動作するミニアプリケーションをWebページ上に配置し、自分好みのページに仕立て上げることができます。

また、作成したガジェットは、以下のように簡単にブログに貼付けることができます。
今回はそのガジェットの作り方を書いていきます。


まずは環境を整えましょう。

iGoogle上に、GGE（Google Gadget Editor）と呼ばれるガジェット開発用ガジェットを登録します。

ここのページ下部の、「To add GGE to your iGoogle page, click here:」下部のボタンを押せば完了です。


おおお、追加されました。ただし、iGoogle上のガジェットは領域が狭いので好みに応じて使い分けましょう。

追加されたGGEを見ると、Hello Worldサンプルコードが登録されています。Previewタブをクリックするときちんと表示されるのが分かりますね。

Editorタブに戻ってソースを見ると、シンプルなXMLで記述されています。基本は下記のCDATA部分に処理を記述していきます。

<Content type="html"><![CDATA[
** ここにHTMLとCSSとJavascriptを記述する **
]]></Content>

では簡単なガジェットを作ってみましょう。自分のはてなブックマークの最新5件を表示することにします。

下記のソースをeditor部分にコピペしてみてください。
ソース中の*****部分はご自分のものにするのをお忘れなく。

<?xml version="1.0" encoding="UTF-8"?>
<Module>
    <ModulePrefs
     title="マイハテブ"
     author="***** 自分の名前 *****"
     author_email="***** メールアドレス *****" />
    <Content type="html">
        <![CDATA[
        <style> #content_div { font-size: 90%;  margin: 5px; background-color: #FFFFBF;} </style>
        <div id=content_div></div>
        <script type="text/javascript">
            // _IG_で始まる関数がGoogleガジェットAPIです。
            _IG_FetchFeedAsJSON("***** ここに自分のはてブRSS *****",
                    function(feed) {
                        if (feed == null){
                            alert("There is no data.");
                        return;
                    }
                    // タイトル部分
                    var html = "<div><b>マイハテブ</b></div>";
                    // ブックマークリストを作成
                    if (feed.Entry) {
                        html += '<ul>';
                        for (var i = 0; i < feed.Entry.length; i++) {
                            html += '<li><a href="' + feed.Entry[i].Link + '" target="_blank">'
                                   + feed.Entry[i].Title + '</a></li>';
                        }
                        html += "</ul>";
                    }
                    _gel("content_div").innerHTML = html;
            // ブックマーク取得件数
            }, 5);
        </script>
        ]]>
    </Content>
</Module>

Editorに貼付けたら、Previewタブで確認してみましょう。はてなブックマークのRSSから、最新の5件取得されたと思います。うまく取得できない場合は、はてなブックマーク側で、公開設定が「パブリック」になっているかご確認ください。


では、このガジェットをiGoogleに登録してみましょう。

まずはFileプルダウン＞Save asをクリックして、名前を付けて保存します。


次に、Fileプルダウン＞Publish をクリックし、ダイアログから「Add to my iGoogle page」をクリック。


次の画面で「Googleに追加」をクリック。

追加されましたね！（見栄えはよろしくないですが）


思ったより簡単に作ることができました（かなり端折ってますが）。まだGoogleガジェットAPIのほんの一部しか使ってないので、もっと複雑な処理やUIを作ることができそうです。また、作成したガジェットは自分のブログにも簡単に貼付けることができます。

次は、このガジェットでGoogle Open Social APIを使ってみたいと思います。