Google friend connectの色設定

もう一つの、リリース系サイトではGoogle Friend Connect（以下GFCで省略）を利用しています。きれいな透明感のある有料テンプレートを利用し、こちらのサイトと同様Joomla!上で動作しています。

GFCのガジェットでは、背景に''を指定した場合、透明にしてくれることになっているのですが、完全には対応していません。というか、色のかけられない部分があるのがデザイン的には良くないですね。改善を期待している部分です。

もう一方のサイトでは、テンプレートに含まれているスタイルが10種類あり、サイトのテーマにあった8種類へ変更可能にしていますが、GFCでは、通常文字色は決めうちの色を指定しますので、テーマにあうものをセットするのが大変でした。特に、明るいテーマと暗いテーマがあり、一色で両方へ合わせるのは無理というものです。

そこで、GFCのガジェットはjavascriptですから、ちょっとコードを足して、ページの設定やcssの内容を取り込んで、表示してやれば、ぴったりになると思い、昨日から勉強かねがね、チャレンジしてみました。

ガジェットによっては''の代わりにアルファー値、つまり透明度を指定してあげることで、背景を透明にすることが出来ます。通常は'#888888'の形式で色を指定するわけですが、これを'#00888888'と言うふうに、16進数8桁をしてすれば、先頭の2桁分は透明度ですので、完全に透明に出来るわけです。ところが、これで変更できるガジェットはは少ないようです。まあ、試してみる価値のある方法ですね。

コード自身は以下のようにしてみました。本体部分だけです。

if(!+"\v1") {
var defaultTextColor= document.getElementById('テキスト色を指定したcssのid').currentStyle['color'];
var defaultLinkColor= document.getElementsByTagName('a')[0].currentStyle['color'];
}
else if( getComputedStyle ) {
var defaultTextColor= getComputedStyle(document.getElementById('テキスト色を指定したcssのid'), null).getPropertyValue('color');
var defaultLinkColor= getComputedStyle(document.getElementsByTagName('a')[0], null).getPropertyValue('color');
}
var skin = {};
skin['BORDER_COLOR'] = '#888888';
skin['ENDCAP_BG_COLOR'] = '#00888888';
skin['ENDCAP_TEXT_COLOR'] = defaultTextColor;
skin['ENDCAP_LINK_COLOR'] = defaultLinkColor;
skin['ALTERNATE_BG_COLOR'] = '#00888888';
skin['CONTENT_BG_COLOR'] = '#00888888';
skin['CONTENT_LINK_COLOR'] = defaultLinkColor;
skin['CONTENT_TEXT_COLOR'] = defaultTextColor;
skin['CONTENT_SECONDARY_LINK_COLOR'] = defaultLinkColor;
skin['CONTENT_SECONDARY_TEXT_COLOR'] = defaultTextColor;
skin['CONTENT_HEADLINE_COLOR'] = '#333333';
skin['DEFAULT_COMMENT_TEXT'] = '- \u4e00\u8a00\u304a\u9858\u3044\u3057\u307e\u3059 -';
skin['HEADER_TEXT'] = '\u2605\u4e00\u3064\u3067\u5e0c\u671b\u4fa1\u683c\u5343\u5186';
skin['POSTS_PER_PAGE'] = '3';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderReviewGadget(
{ id: 'div-9147716647720201940',
site: '09287601091269382387',
'view-params':{"disableMinMax":"false","scope":"ID","docId":"publish2ndversion","startMaximized":"true"}
},
skin);

これは投票ガジェットのものですが、基本は一緒です。

最初のif分でIEを判別しています。続くelse ifでfirefoxとsafariを判別です。通常のテキスト色は、それを指定しているcssのなかで、テキスト色を指定している部分のidを指定します。例えば'#default-text { color : #88cc22; }'のような形式で定義されているなら、default-textを指定します。

cssで定義されている内容を直接document.getElementById()を利用して色の情報を参照しようとしても空文字列になるだけで、実際の内容が読めないためはまってしまいました。後になり、そういえばスクリプト等で指定したものと、html本文で定義したもの以外は、実態がないので読めないなんてことが、どこかにあったなと思い出しましたが数時間苦労した後で、うまく動いてやっと思い出しました。ｗ

idの内容が実際にページ上で何色になるかを指定するためにIEでは.currentStyle、FirefoxではｇetComputedStyleを使用し無くてはならないそうです。

...ByIDとかの場合、getAttribute('color')で読めますが、getComputedStyleの場合は、.getPropertyValue()を使用するのも忘れないようにメモしておきましょう。

リンク色は...ByTagNameで'a'、つまりアンカー分でリンクを張っている部分を取り出し、その最初の要素を[0]で選んで、表示色を評価しています。

ここら辺はcssの作りがもっと簡単になっていれば...ById()を使用して、簡単にできそうですが、高機能なため複雑なテンプレートですから、しょうがない部分もあります。

自分で最初から全部を作成したテンプレートなら、自分で後のことも考えて、プログラムしやすいように出来ますが、出来合のものを利用した場合、この手の苦労は起きるでしょう。ちなみに、どの要素がどうなって、スクリプトをどう組めば希望の文字色が取り出せるかを、Firefox上の拡張機能Firebugを利用してやりました。しかし、Firebug自身のバグで、スクリプトの評価が変化しなくなったりしまして苦労しました。Firefoxを起動し直しても不調で、結局、winXPの再起動後に試したら、なんてことはない、苦労して試した組み合わせの中に、うまく動作するものがありました。

Firebugは便利ですが、本格的に使用するとなると、注意が必要ですね。結局18時間くらいかかりました。動かせるようになるまで。ｗ