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 を駆使して悩むくらいなら、このアプローチを使っちゃえという感じですね。ほんと、このアイディアは素晴らしい発見ですよ。
1 件のコメント:
opensocial.getEnvironment().getDomain()にて、コンテナのドメイン名を取得することができます。
コメントを投稿