6月 27 2009

Footprints gadget updated

Published by Eiji under FriendConnect, Google

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

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'},

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

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';

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

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!

Comments add to hatena hatena.comment (0) add to del.icio.us (0) add to livedoor.clip (0) add to Yahoo!Bookmark (0) Total: 0

6月 26 2009

Footprints gadget featured on SocialWeb Blog

Published by Eiji under FriendConnect, Google

For non-Japanese readers, since WP_Multilingual is not working right now, you may no be able to see English version of this blog. Sorry for inconvenience. For this post, I wrote both Japanese and English.

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

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

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

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.

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

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

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

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

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

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

Comments add to hatena hatena.comment (0) add to del.icio.us (0) add to livedoor.clip (0) add to Yahoo!Bookmark (0) Total: 0

6月 20 2009

インタビュー掲載

Published by Eiji under OpenSocial

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

OpenSocialアプリ、開発者にとっての魅力(1/2)-@IT

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

ぜひご一読ください。

Comments add to hatena hatena.comment (0) add to del.icio.us (0) add to livedoor.clip (0) add to Yahoo!Bookmark (0) Total: 0

6月 17 2009

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

Published by Eiji under OpenSocial

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

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

Peep mixi Appli XML

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

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

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

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

Comments add to hatena hatena.comment (10) add to del.icio.us (0) add to livedoor.clip (1) add to Yahoo!Bookmark (1) Total: 12

6月 17 2009

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

Published by Eiji under OpenSocial

今回は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アプリでは使えない技ですね。

<Preload href="http://example.com/example.php?id=__UP_userpref__" />

Signed Requestが使える

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

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

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

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

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

まとめ

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

Comments add to hatena hatena.comment (6) add to del.icio.us (0) add to livedoor.clip (0) add to Yahoo!Bookmark (0) Total: 6

Next »