あしあと帳ガジェット更新

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

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

[sourcecode language="javascript"]<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 />[/sourcecode]

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

スキンを設定

[sourcecode language="javascript"]<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 />[/sourcecode]

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

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

あしあとガジェットがSocialWeb Blogに掲載

ずいぶん前ですが、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を導入してみてくださいね。

インタビュー掲載

先日Googleの及川さん、石原さんと一緒にインタビューを受けました。

OpenSocialアプリ、開発者にとっての魅力（1/2）－＠IT

gooホームの方向性やドキュメント、OpenSocialコミュニティやShindigへのコントリビュートについてなどお話しさせて頂きました :)

ぜひご一読ください。

mixiアプリのガジェットXMLを覗き見るブックマークレット

OpenSocialといえばmixiアプリ、いやむしろmixiアプリってそういえばOpenSocial？という感じの空気をひしひしと感じてますが、皆さんいかがお過ごしでしょうか。

今日はそんなmixiアプリの中身を覗き見るブックマークレットをご紹介します。

Peep mixi Appli XML

これを読んでるであろう人に詳しい説明は不要なので、簡単に書きます。

上記リンクをブラウザのブックマークに保存してください。mixiアプリの画面を開いてそのブックマークをクリックすると、ガジェットXMLのソースページが開きます。SafariとFirefoxで動作確認済みです。

これで、ガジェットがどんな風にできているのか、気軽に覗き見ることができますね。

※そういえばgooホームもOpenSocialです。

ガジェットのレンダリング速度を向上するPreload

今回はOpenSocialでネット上にあまり情報のないPreloadについて、解説してみます。

ガジェットレンダリングの流れ

単純にRSSを表示するガジェットを例に説明します。あるコンテナSNS上でこのガジェットを表示する場合、下記のような手順を踏みます。

1. コンテナSNSのレンダリング


2. ガジェットサーバーがガジェットをレンダリング


3. ブラウザ上でガジェットのJavaScriptが初期化


4. 外部サイトのRSSを取得するためのAjaxリクエストをガジェットサーバーに送信


5. ガジェットサーバーが外部サーバーにリクエストを送信(キャッシュがあればスキップ)


6. ガジェットサーバーはレスポンスをブラウザに戻す


7. ブラウザ上でガジェットのJavaScriptがレスポンス内容を元に記事一覧をレンダリング

ざっとこんな感じになります。

OpenSocialコンテナの動きを理解していない人には若干分かりづらいかもしれません。この辺りの記事を参考にしてください。

さて、この一連の動きを効率化することで、全体の体感レンダリング速度を速くする方法があります。それが今回ご紹介するPreloadです。

ガジェットのレンダリングを高速化するPreload

Preloadは文字通り、レンダリングに先立ってロードしておいてくれる機能です。使い方は簡単で、/Module/ModulePrefs/Preload@hrefに呼び出したいURLを記述します。これで、先ほどのレンダリングの挙動が下記のように変わります。

1. コンテナSNSのレンダリング


2. ガジェットサーバーがPreloadで指定された外部サーバーにリクエストを送信(キャッシュがあればスキップ)


3. ガジェットサーバーがガジェットをレンダリング


4. ブラウザ上でガジェットがJavaScriptを初期化


5. 外部サイトのRSSを取得するためのAjaxリクエストをブラウザ上で処理


6. ブラウザ上でガジェットのJavaScriptがレスポンス内容を元に記事一覧をレンダリング

図にしてみると一目瞭然ですが、通信部分のオーバーヘッドを削減できています。こりゃ便利。

仕組みは単純で、ガジェットがプリフェッチした外部コンテンツを埋め込んだソースコードをブラウザに渡し、makeRequest時にプリフェッチした内容が存在すれば実際のAjaxリクエストを行わずに応答を返してしまう、というものです。

Preload利用時の注意点

Preloadはとても便利な反面、扱いにくい性質のものでもあります。以下を理解して、ポイントを絞って使う必要があります。

キャッシュの有効期限をコントロールできない

結構致命的なのがこれです。キャッシュの有効期限をコントロールできないと、デフォルト(24時間が多い)のキャッシュ期限が適用されます。これを回避できるケースとしては、ユーザーが任意の動作でmakeRequestを行うため、その時にキャッシュの有効期限をクリアできる場合が挙げられます。逆に言うと、RSSを表示するだけでユーザーは任意に更新できない、でも更新頻度は1時間程度、というようなガジェットには向いていません。

ContentTypeを指定できない

通常makeRequestを行う場合、ContentTypeをDOM, FEED, JSON, TEXTから選択することが出来ます。特にFEEDに関しては、RSS/RDF/Atomを丸めてJsonで返してくれるため、慣れた人には便利な形式です,

しかしこの挙動は、明示的にContentTypeとしてFEEDを指定し、ガジェットサーバーが外部コンテンツを取得した際に特別な処理を行うことで実現されているため、ContentTypeを指定できないPreloadでは、これを行うことはできません。RSS等をPreloadしたい場合は、DOMを選択してパースするしかありません。

UserPrefsの内容を反映することが出来る

/Module/ModulePrefs/Preload@hrefの内容に__UP_****__といった形でUserPrefsの内容を含めることができます。これは残念ながらmixiアプリでは使えない技ですね。

[sourcecode language="javascript"][/sourcecode]

Signed Requestが使える

/Module/ModulePrefs/Preload@authzに"signed"を指定することで、署名リクエストが行えます。これの利点は、ガジェット側でビューアーのIDを指定しなくても、サーバーが署名と一緒に送ってくれるため、上記のUserPrefsのケースのように、URLを工夫する必要がない点です。

コードを変える必要はない

PreloadはガジェットXMLにメタデータを追加するだけですので、基本的にJavaScriptのコードをいじる必要はありません。もちろん、キャッシュを気にしたりするといじった方がよい場合もありますけどね。

Preloadはいくつでも指定できる

実はPreloadはいくつでも指定できます。これまでに挙げた条件をクリアしているのであれば、思い切って使ってみましょう。

まとめ

今回は存在が地味なのであまり注目されていないけど、うまく使えば非常に便利なPreload機能を紹介しました。うまいこと使いこなして、一流OpenSocialerを目指しましょう。

Google Developer Day 2009

6月9日にパシフィコ横浜にてGoogle Developer Dayが開催されました。
僕は基調講演に一瞬と、OpenSocial Panel Discussionのセッションに登壇させて頂きました。

基調講演デモ

基調講演では、先日一般ユーザー向けにも公開したgooホームのOpenSocialを使って、goo地図ガジェットとフォトビューアーガジェットがPhotomemoのガジェットに連動して動く、というソーシャルウェブ・ポータルというコンセプトを打ち出したgooホームならではのデモをお披露目しました。基調講演では言いそびれてしまったのですが、このアイディアは元々、先日行われたHackathonでディベロッパーの1チームが見せてくれたものを元にしています。

実装としては、OpenSocialに含まれるpubsubというフィーチャーを使っています。pubsubは、任意に作成されたチャンネルに対してオブジェクトをpublishすると、同じチャンネルをsubscribeしているガジェットのコールバック関数が呼ばれオブジェクトが届く、というかなり単純な仕組みです。pubsubについては、近いうちにgoo Developer's Kitchenの方にもドキュメントを追加します。

また、今回のデモを行うため、PhotomemoチームにPhotomemoガジェットとフォトビューアーガジェットを開発して頂きました。ご協力ありがとうございました。

OpenSocial Panel Discussion

もうひとつ参加させて頂いたのがPanel Discussionでした。今回は先日のデブサミでもご一緒させて頂いたリクルートの川崎さんに加え、mixiの川岸さん、そしてGoogleの及川さんとのディスカッションになりました。

内容については、OpenSocialというよりはSocialWebを広い観点で捉え、その中で現状使えるOpenSocialというピース、およびこれから広がっていくSocialWebの世界に関して。僕の中でもmixiアプリとgooホームガジェットの目指す所がまるっきり違うことに気付いたのは割と最近なので、その辺りが分かりやすく伝わるようにお話しさせて頂きました。

まとめ

Panel Discussionの場でも言いましたが、日本のSocialWebという世界観にまだまだ伸びしろがあると感じています。海外に比べると実名が好まれなかったり、最大のSNSがクローズドだったりと、海外のそれを単純に輸入できないことは十分理解していますが、必ず近いうちに求めらる技術になっていくと思います。

共感された方はぜひ、SocialWeb Japanにご参加下さい。