SocialWeb勉強会 vol.1を開催しました

1月23日に株式会社DeNAオフィスにて、SocialWeb勉強会 vol.1を開催しました。参加者は50名で、キャンセル待ちも出るほどの盛況ぶり。ソーシャルウェブの注目度の高まりを感じる勉強会となりました。

僕からのプレゼンテーションは、主催としてコミュニティの今後の方向性を示すと共に、現在の海外サービスで示されている方向性および、実際にメインプレイヤーたちがどういう形でソーシャルウェブ化に取り組んでいるかという状況を紹介しました。多くの内容は既にこのブログで紹介してきたものでしたが、いいまとめになったのではないかと思います。

スライドはSlideShareにアップしましたので、掲載しておきます。フォントが変わってしまって少々見づらい部分もあるかもしれませんが、ダウンロードもできますのでぜひご覧ください。

[slideshare id=948379&doc=socialweb-vol1-1232769487727464-3&w=425]

他にもよういちろうさんにOpenSocial導入のためのプレゼンテーション、id:ZIGOROuさんによる2009年のOpenIDの動向を紹介するプレゼンをしていただきました。詳しい内容は追ってこちらのページにアップされることと思います。ぜひチェックしてみてください。

最後に、会場を提供してくださったDeNAと、お手伝いしてくださったDeNA社員の皆様にお礼申し上げたいです。ありがとうございました。

追記：神部さんの飛び入り参加によるPaypal + OpenPNEのプレゼンについて書くのを忘れていました。僕のプレゼンの中でも触れた課金によるマネタイズにも絡む、実に興味深いお話でした。

再追記：PowerPointをPDFに変換してからSlideShareに再アップしたら、きれいに表示されるようになりました。

OpenSocial(Shindig)のサーバーアーキテクチャ

OpenSocialと関わるには

• コンテナになる


• ガジェットを開発する


• RESTを使ったクライアントサービスを作る

といった選択肢が考えられますが、そのいずれを選択するにしても、アーキテクチャについて知っておくことはとても重要です。特にガジェットを開発するに当たっては、アーキテクチャを知っていることでより開発しやすい場面が多々あります。

そこで今回は、OpenSocialに対応するコンテナのほとんどで利用されているオープンソースのリファレンス実装、Shindigのアーキテクチャについて解説したいと思います。

ガジェットとSNSの関係

iGoogle(既にShindigが利用されている)ではどうやって第三者の作ったガジェットを表示しているかご存知でしたか？実は、別ドメイン(iGoogleならgmodules.com)上にレンダリングしたガジェットを、iframe内に表示しているのです。

理由は、同ドメイン上に第三者の書いたJavaScriptを置くことは、セキュリティ上危険だからです。詳しくは以前Cajaについて解説した記事がありますので、そちらをご覧ください。

APIはどこにあるか

OpenSocialにはPeople, Group, Activity, Persistentの4つのソーシャルなAPIが用意されていますが、それぞれRESTfulによるJSON, XML, AtomPub形式と、RPCによるJSON形式が用意されています。ShindigのJavaScript APIでは、この中でもRPCによるJSON形式が使用されています。

先ほど2つのドメインについて説明しましたが、JavaScriptのAPIということはAjaxなので、当然同じドメインということで、エンドポイントはShindigのドメイン上に存在します。

ガジェット表示の流れ

基本的な構造が分かったところで、実際にガジェットを表示するまでの流れを見てみましょう。

どのガジェットを表示するのか

ガジェットを表示するためには、まずガジェットを表示したいというユーザーの意思が必要です。これはiGoogleであれば、ガジェットディレクトリから好きなガジェットを選び、自分のページを表示する、というサービス側での作業によって行われます。表示したいガジェットが分かったところで、サービス側もガジェットを表示するためのiframeを表示する必要があるため、ガジェットに関する情報を収集します。これはShindigのmetadata APIを使って行われます。

metadataの取得

metadata APIのリクエストを取得したShindigは、キャッシュを参照します。キャッシュにガジェットの情報が残っていない場合は、サービスからのリクエストに基づいてガジェットXMLを取得し、解析します。

iframeのレンダリング

ガジェットに関する情報を取得したサービスは、ガジェットを表示するためiframeをレンダリングします。これにより、iframe内にガジェットを表示するためのリクエストがブラウザからShindigに投げられます。

基本的にガジェットXMLに記述されたContentsの内容はそのまま表示されますが：

• 指定されたガジェットのfeature(tabやminimessageなど、ガジェットが持つ機能セット)のJavaScriptがHTMLに追記される。


• 設定によってはJavaScript、CSS、画像などのあらゆる外部コンテンツがShindig上にキャッシュして呼び出される。

という点は覚えておいて損はないでしょう。

これでガジェットの表示は完了です。Firebugなどを使ってAPIを試してみれば、Shindigにリクエストが飛んでいることが分かると思います。

外部サーバーを使うAPI

外部サーバーを使う際、JavaScript APIとしてgadgets.io.makeRequestが使用されます。コンテンツタイプとしてFEEDを選択すると、RSSやRDF、Atomを共通のフォーマットで返してくれたり、JSONを選択すると、データが返ってきた時点ですぐにJSONオブジェクトとして扱えるようになっています。

また、セキュリティ面でもいくつかの選択肢が用意されています。

• 通常のリクエスト


• Signed Request


• OAuth

通常のリクエストは、特に認証等のかかっていないAPIに対して行われるものです。Signed Requestとは、OAuth Consumer Requestを指しており、これを利用することで、外部サーバーはガジェットからのリクエストのみを扱うことができるようになります。OAuthはOAuth Coreを指しており、外部サーバーはガジェットからのリクエストであることだけでなく、誰からのリクエストなのかをセキュアなクレデンシャルで認証した上で扱うことができるようになります。

OAuthについてはこの辺りかこの辺りを参考にしてください。

ここで注意しなければならないのが、すべてShindigのproxyを介して行われるということです。先ほど書いた通り、ここでもGETリクエストには強力なキャッシュ機能が利用されるため、若干注意が必要な場合があります。キャッシュについては次回以降まとめて記事にしたいと思います。

Multilingualize your Wordpress blog with WP_Multilingual!

Been wanting to make this blog multilingual for a while, I just found a good plugin to do it.

WP_Multilingual is a multilangual plugin for Wordpress. It's not an auto-translator, you have to post in each languages but, those languages will be tied to the single entry and viewer's preferred language is automatically detected using request header. This was an ideal functionality I've been looking for.

Just one problem, Dean't FCKEditor doesn't seem to work quite well on japanese which you must install along with WP_Multilingual. ghh

Anyway, it looks ok just to internationalize. I'll look for solution about editor.

Footprint gadget for your FriendConnect

I developed FriendIntroducer as an experiment and was trying to understand how FriendConnect is different from ordinaly OpenSocial implementation. So this time, I've tried to develop a gadget which you can find FriendConnect interesting, Footprints. You know the idea if you've tried MyBlogLog before.

What is Footprints?

Footprints is a gadget to track visitor of you blog. Look at the gadget on bottom left. If you're not joined or signed in, do it to check what it does.



As you could imagine, this gadget records visitor and its time. When viewed by others, timestamp will be displayed how long ago, you've visited. Also, you can remove your own footprint if you want. The xml is located at:

http://devlab.agektmr.com/OpenSocial/FriendConnect/Footprints.xml

http://gadgets.agektmr.com/Footprints/friendconnect.xml

Feel free to take it and use it on your blog.

Google FriendConnect対応ガジェットが完成

FriendConnectのメンバーが友達を紹介し合う文章が書けるFriend Introducerというガジェットを公開しました。このブログの画面左側に表示していますので、メンバーになってくれている方はぜひ、遊んでみてください。(なっていない方はメンバーになって遊んでください！)

FriendIntroducerとは

主に3つのビューが存在します。1つはブログ上で表示されるprofileビュー。



FriendConnectメンバーの紹介文を最大5件表示します。ページングが可能で、それぞれのメンバーに書かれた紹介文がランダムで表示されます。

メンバーのサムネイル画像をクリックするとdetailビュー(OpenSocial的なビューではないですけどね)に切り替わります。(※誤解を招きそうなので修正。detailビューは僕が勝手にそう呼んでいるだけで、OpenSocial的にはprofileビューです。)



一人に対して複数の人が紹介文を書いている場合がありますので、detailビューでは、その人に関する紹介文をすべて閲覧することができます。

ガジェット上部のボタンをクリックするとcanvasビューに切り替わります。



canvasビューでは、ログインユーザーの友達の紹介文を書くことができます。友達がいない方は、同じFriendConnect上の誰かを友達に加えてください。

FriendIntroducerをブログに貼付けるには

まずはこちらでFriendConnectに登録してください。サイト登録済みの状態で・・・



Social gadgetsをクリックします。



一番下にあるCustom gadgetリンクをクリックします。



Gadget URLをhttp://devlab.agektmr.com/OpenSocial/FriendConnect/FriendIntroducer.xmlとしてください。

ガジェットの横幅を調整し、Generate CodeをクリックするとHTMLコードが出力されますので、これをブログ等に貼付けます。

所感

以前のエントリにも書きましたが、FriendConnectガジェット作成のミソは：

• OWNERはブログという仮想人格


• requestNavigateToでcanvasビューとprofileビューを行き来できる


• canvasビューのバックグラウンドは、サイト作成時に取り込んだcanvas.htmlをいじることで変更可能

といったところでしょうか。

今のところOpenSocialにコミュニティ的な考えはないのですが、FriendConnectはちょっとひねったコミュニティ的な応用、と思うと分かりやすいかもしれません。

また、FriendConnectの面白いところは、複数のSNSからインポートした友達リストをマージして利用できることです。例えば僕はorkut、Google、Plaxo、Twitterをインポートしていますが、同じブログに登録している人がこれらのSNS上で友達であれば、FriendConnect上でも友達になります。

いつかGoogleがiGoogleをSNS化する際、これらの友達リストがそのまま利用できるようになるかもしれませんね。