opensocial-jquery 0.3.0 JavaScript コンテナセレクタと CSS コンテナセレクタという試み

こんばんは。なかじまんです。opensocial-jquery 0.3.0 Preference と Window の強化と見直しをしました。 の続きです。

opensocial-jquery 0.3.0 では、JavaScript と CSS によるコンテナの判別という新しい仕組みを導入しました。ガジェットの JavaScript や CSS の中で、いま実行しているコンテナが iGoogle か Orkut かなどを簡単に判断できます。

そもそも OpenSocial ガジェットは、異なるコンテナにおいても、同じソースコードで実行でき、コンテナの実装に差異があったとしても、API レベルで判別できるんじゃないの？と指摘されそうですが、あえてコンテナを判別できる仕組みを導入してみました。

次のとおり、JavaScript の中で jQuery.container プロパティを参照してコンテナを判別できます。

if (jQuery.container.ig) { // iGoogle のとき }
if (jQuery.container.orkut) { // Orkut のとき }
if (jQuery.container.hi5) { // Hi5 のとき }

次のとおり、サンドボックスかどうかも判断できます。

if (jQuery.container.orkut && jQuery.container.sandbox) {
// Orkut Sandbox のとき
}

さらに HTML 要素に対して、コンテナを表すクラスを自動的に追加します。そのため、次のように、CSS の中でコンテナを判別できます。

.ig div.photo img { /* iGoogle のとき */ }
.orkut div.photo img { /* Orkut のとき */ }
.orkut.sandbox div.photo img { /* Orkut Sandbox のとき */ }
.hi5 div.photo img { /* Hi5 のとき */ }

JavaScript でコンテナ別にコードを分岐でき、CSS でコンテナ別にデザインを適用できることになります。

現在は "ig", "orkut", "hi5" のコンテナしか判別できませんが、代表的なコンテナは評価しつつ追加していきます。MySpace も追加しようと試みてはいますが、iframe@src の内容が iGoogle 仕様とはかなり異なるので、どう判断しようか思案中です。よいアイディアはないでしょうか。

CSS によるコンテナの判別という仕掛けは CSS Browser Selector のアイディアを転用したものです。デザイン畑に疎い私としては、CSS hack を駆使して悩むくらいなら、このアプローチを使っちゃえという感じですね。ほんと、このアイディアは素晴らしい発見ですよ。