Google Friend Connectのコメントとメンバーガジェットのコードをまとめてみる

Google Friend Connectのガジェットのコードを複数ある場合にまとめてしまうというものです

ガジェットとかConnectの説明は省略ということで、ここでは、メンバーガジェットとコメントガジェットを同一ページに表示する場合でみていきます。

なお、以下に示す方法は、Googleが仕様を変更をおこなったときに使えなくなるかもしれません。

1. 同じ配色で２つのガジェットを表示する場合

コメントガジェットもメンバーガジェット（以下それぞれ「コメント」、「メンバー」と表記）も同じ配色の場合で説明します。

あらかじめコメントとメンバーのガジェットのコードを取得しておきます。

最初にガジェットが入るDIVを用意します（その前に、Connectの本体のスクリプトファイル（friendconnect.js）は呼び出ししてあるものとします）。

取得済みのコードのDefine the div tag where the gadget will be inserted.というコメントの次にある、id属性のついたdiv要素をそれぞれを表示したい箇所に並べておけばよいでしょう。

<div id="div-0123456789012345678" style="width:200px;border:1px solid #cccccc;"></div><div id="div-0987654321098765432" style="width:200px;border:1px solid #cccccc;"></div>

自分のやり方だと、コメントのガジェットのほうが設定（要するにコード）が多いので、コメントのほうのコードをベースにメンバーのコードを足すという方法でおこなっています。この辺はお好みですが。

次にRender the gadget into a div.というコメント以下のコードを見ていきます。

var skin = で宣言されている変数の値（例えばskin['FONT_FAMILY']　 連想配列のようですが）のうち、共通でないものを追加していきます。

メンバーがコメントに共通しないものはskin['NUMBER_ROWS'] = '4';のようですので、これをコメントのほうのコードにペーストします。

あとはgoogle.friendconnect.container.renderMembersGadget();が表示のための関数のようなのでこれもコメントのほうにペーストします。上で示した例のIDですと以下のようなコードになるでしょう。

google.friendconnect.container.renderMembersGadget(
 { id: 'div-0987654321098765432',
   site: '00000000000000000000' },
  skin);

このコードの部分は自分の場合、外部JavaScriptとして作成して呼び出すようにしてます。テンプレート等に直接書いても同じことです。

コメントとメンバーガジェットをひとまとめにしたコードは以上です。

2. 配色のことなる２つのガジェットを表示する場合

コードをまとめるという意味は薄れるのですが、Render the gadgetの部分を外部JavaScriptにすれば、このファイルの変更のみでスタイル変更が楽になるかも？程度のものです。

簡単にいうと、変数をコメントとメンバーとで変えればよいのです。

• var skin = {}, skin_2 = {};

みたいに宣言しておいて、

• skin_2['FONT_FAMILY'] = 'sans-serif';
  : : :

といった具合にに2つ目のガジェットのコードを書き換えて、google.friendconnect.container.renderMembersGadget();の第二引数にskin_2を入れると。

以上まとめますと。。

• Friend Connectのコードを取得する
• friendconnect.jsを呼び出しておく
• 表示したい箇所にdivタグを配置する
• Render the gadget into a div.以下のコードを外部ファイルとして、コメントとメンバーのコードを1つにまとめる

となります。このサイトですと、/blog/web/ 以下のページだとかaboutページだとかで確認できます。

ということで新年あけてからだいぶ経ちましたけど今年初エントリでした。そんな感じで今年もマイペースでやっていこうかなと思います。m(u.u;)m