2008
Google Social Graph API サンプルの解析 – その1
自分でサイトやBlogを構築して運営している人には興味深いと思われるシステム「Google Social Graph」について調査したメモです。
Google Social Graphはmixi等が提供するサービスに頼らず、独自サイト間でSNSを構築するAPIです。ブログ同士の関係等（片思いとか両思いとかｗ)を表せるものだと思います、たぶん。まだじっくり見ていないのでどこまでできるかわからないけど。大元の仕組みにはどうやらOpenIDの提唱者の人が関わっているとか。OpenIDではシングルサインオンは実現できるがソーシャルな部分(横のつながり?)を表現できないのでこれはその部分を補完するものですね。
ここを見て誰かがWordPress用プラグインとか作ってくれることを期待してます。時間がなくて自分には無理だと思うので(おぃ
実際のところ「その1」とか言っておきながら、いつまで続くかわからないけど・・・
現在公開されているサンプルは3つあります。
・Site Connectivity
指定されたドメイン（URL?入力できる形式は別途要調査)と関係あるページを表示するものみたいです。
・My Connections
指定されたドメインと関係あるサイトとの関係(縁の種類、友達とか兄弟とか)を一覧表示するものです。
・Parameter Playground
パラメータを切り替えて取得する情報を制御するもののようです。
とりあえずAPI Documentだけだと訳がわからないので、デモを解析してみる。最初は「Site Connectivity 」から。
まずは動作を確認してみます。テキストエリアにサンプルサイトのドメイン(kevinmarks.comかbradfitz.com）を入れて「submit」ボタンを押してみましょう。リロードした後に下の方にずらずらとなんか出てくると思います。自サイトやらflickerやらtwitterやらなにやらから取得した入力したサイトと関係のあるサイトがずらずら出力されます。試しに自分のサイトを入れてみたけど、結果はほぼ空っぽ(当たり前)、「your site」だけ表示された。そんなの言われなくてもわかるよ・・・
では、動作を見てみます。
解析するに当たってデモをローカルに保存していろいろ試しています。環境はFireFoxです。どうやらサーバー処理は必要ないようなのでローカルに保存して解析。保存の時はソースを表示して保存しました。こうすると相対パスが維持できるのでローカルのみで動作確認できます。(APIへのアクセスは避けられないけど)
「ページを保存」の方で保存するとソース中のURLが絶対パスになって、ボタン押した瞬間に本来のDemoサイトに言ってしまうので注意。
まずは動作の起点になる処理について、ソースの最後の方の以下の部分が動作の基点になります。
グローバルスクリプトなので読み込まれた瞬間に実行されます。なので最後の方に書いているある。
var args = getArgs();
if (args.q) {
document.getElementById('q').innerHTML = args.q;
var cbscript = document.createElement("script");
cleanq = args.q.replace(spaceRegex,',');
cbscript.src='http://socialgraph.apis.google.com/lookup?q='+cleanq +'&fme=1&edi=1&edo=1&callback=ShowLinks';
cbscript.type = 'text/javascript';
document.body.appendChild(cbscript);
}
APIはURL「http://socialgraph.apis.google.com/」に、命令の種類とパラメータを指定して呼び出すことで結果を取得するみたいです。この場合は「lookup」命令にパラメータ「q」他を渡しています。その際「q」にはクリーンナップ(※1)した情報を渡しています。「q」以外のその他のパラメータについては後ほど調査します。(※2)
ちなみに一番最初に呼び出されたときはパラメータ「ｑ」がないので何も実行されませんが、テキストにURLを記述して「submit」ボタンを押すと自分自身にパラメータ「q」を追加して再呼び出し(GET呼び出し)していますのでそのとき実行されます。アドレスバーの部分をみるとボタンを押したあとはパラメータ「ｑ」が追加されているのがわかります。
以下処理の簡単な説明
var args = getArgs();
if (args.q) {
「getArgs()」は自分自身のURL(window.location)を解析して、パラメータを構造体(?)として戻すものですね。
たとえばURLが「http://www.esample.com/lockup?x=a&y=b」だとすると、「args.x」=「a」、「args.y」=「b」、「args.z」=なし(undefinedかな?)になります。最初は「args.q」はないけどボタンを押した後は「args.q」があるので処理が実行されるということですね。
document.getElementById('q').innerHTML = args.q;
この部分は単にテキストエリアにパラメータ「ｑ」の値をセットして再表示しているだけです。特に深い意味はないですね。
var cbscript = document.createElement("script");
cleanq = args.q.replace(spaceRegex,',');
cbscript.src='http://socialgraph.apis.google.com/lookup?q='+cleanq+'&fme=1&edi=1&edo=1&callback=ShowLinks';
cbscript.type = 'text/javascript';
document.body.appendChild(cbscript);
ここは肝心のAPIの呼び出し部分です。動的に「script」タグを作成しています。以下のようなHTMLタグを「body」タグの最後に追加（append)するという処理です。「%DOMAIN%」の部分は入力したドメインに置き換えられます。
実際のところURLが固定なら以下の記述を直接HTML中に書いてもよさそうですね。その場合、出力先の領域(divタグ領域等)とコールバック用の関数は事前に定義済みの必要がありますが。実は表示だけならブログパーツ化も割りと容易?
<script type="text/javascript"
src="http://socialgraph.apis.google.com/lookup?q=%DOMAIN%&fme=1&edi=1&edo=1&callback=ShowLinks"></script>
これにより、ページが読み込まれたときに「callback」に渡したJavascrit関数「ShowLinks」が呼び出されるようです。結果は引数に渡されます。というわけで以下の部分が呼ばれるということですね。
function ShowLinks(graph) {
foundnodes = graph["nodes"];
// 中略
document.getElementById('results').innerHTML =html.join('');
}
API自体はパラメータ「callback」に渡されたjavascriptを結果を引数にして呼ぶテキスト(いわゆるjsファイル相当の出力)を吐き出しているだけです。
以下のURLをアドレスバーに打つとAPIの結果が目に見える形で取得できます。単純に文字列を引数に関数を呼んでいるだけですね。結果はどうやらJSON形式のようです。
http://socialgraph.apis.google.com/lookup?q=kevinmarks.com&fme=1&edi=1&edo=1&callback=ShowLinks
●まとめ
・「Google Social Graph API」はURL「http://socialgraph.apis.google.com/」に命令と引数を渡して実行する。(他の形式もあるかもしれない、ドキュメントをみるかぎりでは今のところlockup命令のみのようですが)
・結果は引数「callback」に指定されたJacascript関数の引数（JSON形式）として渡される
(他にもJSON形式の文字列のみをそのまま取得することも可能)
●その他疑問点/今後の調査項目
・結果にはどんな情報が含まれるのか?
・APIはサイト間の関係をどのように取得しているのか?最低限、サイト同士のリンクくらいは必要なのかな。
・フォローの仕組みはあるのか?いちいちリンクを貼ることでしかフォローできないのであればちょっとがっかり。
自動化できる元ネタくらいは提供されていて欲しいですね。
・今回はテキストエリアにドメインを入れたが、ドメインをユーザー同士で共有している場合はどうするのか?普通にURLを打てばよい?
・XFNとは?FoaFとは?
とりあえず、今回はここまで。次回は取得結果と「ShowLinks」関数の処理を解析してみます。なるべく近いうちに。
※1
URLのパラメータとして使えない文字列をどうにかしています。入力をそのまま渡すと不正なURLになってしまいますしね。ここではスペースをカンマに置き換えているようです。
※2
API Documentを見ればすぐわかると思うが面倒なのであとで調査。ちょっと調べた感じではどの関係(Edge Types=縁の種類)の情報を取得するかの制御みたいですね。
それとパラメータ「pretty」に「1」を指定すれば「callback」を指定しなくてもよく、結果もJSON形式の文字列としてのみ返ってくるようです。この形式だとAjaxのHttpRequestで文字列として結果を取得し操作することもできますね。(別に関数名がついていても文字列操作で排除するのは簡単ですが・・・)