2013年5月18日土曜日

[Blogger] Blogger の概要ページのチャート

Blogger の概要ページで表示されるページビューのチャート。
前から微妙に気になっていたのだがどうやって作っているのだろう・・・
調べてみた。

チャートの描画

Chrome のデベロッパーツールで探ってみると、このチャートを描いている部分は、 

<div>
<img class="gwt-Image" 
     style="width: 460px; height: 200px;" 
     src="//chart.googleapis.com/chart?chf=bg,s,FFFFFF00&amp;chxl=1:|2013%2F03%2F02|2013%2F03%2F04|2013%2F03%2F06|2013%2F03%2F08|%E4%BB%8A%E6%97%A5&amp;chxp=0,100,200|1,0,25,50,75,100&amp;chxr=0,0,200&amp;chxs=0,676767,11.5,0,t,676767|1,6AA9E6,12,0,l,676767&amp;chxt=y,x&amp;chs=460x200&amp;cht=lc&amp;chco=6AA9E6&amp;chd=s:TbocnghD&amp;chls=3&amp;chm=B,6AA9E664,0,0,0|h,E7E7E7,0,0.5,1,-1|h,AAAAAA,0,0,1,1|h,AAAAAA,0,1,1,1|V,E7E7E7,0,0,1,-1|V,E7E7E7,0,2,1,-1|V,E7E7E7,0,4,1,-1|V,E7E7E7,0,6,1,-1|V,E7E7E7,0,8,1,-1" 
     border="0" 
     alt="Blogger ページ ビューのグラフ" 
     usemap="#__gwt_chart_map1">
  <map name="__gwt_chart_map1" id="__gwt_chart_map1">
     <area shape="RECT" coords="2,189,64,198" href="#">
     <area shape="RECT" coords="105,189,167,198" href="#">
     <area shape="RECT" coords="209,189,271,198" href="#">
     <area shape="RECT" coords="312,189,374,198" href="#">
     <area shape="RECT" coords="435,189,459,198" href="#">
     <area shape="RECT" coords="9,92,27,101" href="#">
     <area shape="RECT" coords="9,1,27,10" href="#">
     <area shape="POLY" coords="31,129,90,105,149,66,208,102,267,68,326,90,385,86,445,177,449,181,389,90,330,94,271,72,212,106,153,70,94,109,35,133" href="#">
  </map>
</div>
となっている。

イメージマップになっていて、チャートイメージは、「chart.googleapis.com/chart」で作成している。

パラメータを渡すといろいろなチャートを作成してイメージで返してくれるサービスのようだ。
だが「... has been officially deprecated」。Image Charts は すでに decrecated になっている。
ということらしい。
チャート作成には、Google Chart Tools があり、そちらを使えということのようだ。

インタラクティブにチャートを作成できるアプリケーションとして Google Image Chart Editor がある。 Lifehacker に簡単な紹介記事があった。

今度使ってみよう。


Overview データの取得

チャート作成はデータを与えてチャートを描画するだけなので、データは別のところで取得している。
Blogger のページは Script だらけで読解困難なのだが、デベロッパーツールの Network ビューで見ると、 

Request URL:http://www.blogger.com/blogger_rpc?blogID=XXXXXXXXX
Request Method:POST
...
Content-Type:application/json; charset=UTF-8
....
blogID:...
Request Payload
{"method":"getOverview","params":{"1":{"1":3}},"xsrf":"......"}
このリクエストに対してこのようなレスポンスが返ってきている(改行は適宜入れてある）。 

{"result":[null,[null,0,
["99","36","34","75","80","196","81","75","30","34","119","90","84","100","74","54","59","77","97","105","135","110","61","87","130","91","129","104","109","14"]
,[null,"14","109","2569","9010"]

,[[null,"ツェラーの公式：曜日を計算する",null,"http://xawa99.blogspot.com/2012/11/Zellers-Congruence.html","2012/11/05","ページビュー","258"]
.....
,[null,"[Scala] JSON の扱い",null,"http://xawa99.blogspot.com/2012/10/Scala-JSON.html","2012/10/14","ページビュー","32"]
]

,[[null,"カテゴリー別記事一覧",null,"http://xawa99.blogspot.com/p/blog-page_1.html","2012/08/01","ページビュー","5"]
,[null,"リンク集",null,"http://xawa99.blogspot.com/p/blog-page.html","2012/09/30","ページビュー","3"]
]

,[[null,"ツェラーの公式",null,null,null,null,"11"]
.....
,[null,"bluetooth イヤホン　android　切り替え",null,null,null,null,"1"]
]
,[[null,"www.google.co.jp",null,"http://www.google.co.jp",null,null,"1540"]
.....
,[null,"blog.goo.ne.jp",null,"http://blog.goo.ne.jp",null,null,"5"]
]
,[[null,"https://www.google.co.jp/",null,"https://www.google.co.jp/",null,null,"668"]
.....
]
,[[null,"日本","JP",null,null,null,"2348"]
.....
,[null,"ウクライナ","UA",null,null,null,"2"]
]
,[[null,"Chrome",null,null,null,null,"1091"]
.....
]
,[[null,"Windows",null,null,null,null,"1730"]
.....
,[null,"Android 4.0.4",null,null,null,null,"2"]
]
]
.....

日ごとのページビュー、累積ページビュー、記事毎やstaticページごとのページ数、国別ページビュー、OS別ページビューといった、 Blogger と統計概要ページに表示される情報が入っている。

http://www.blogger.com/blogger_rpc に JSON形式のデータ（ 上の例では「
{"method":"getOverview","params":{"1":{"1":3}},"xsrf":"......"}
」） をポストするとこのような結果が返ってくるらしい。

Blogger には、 Google Blogger API というものがある。

Blogger に対して記事を投稿したり記事の内容を取得したりする API 群なのだが、 Blogger のページで使っているものとは呼び出し方が違うし、 Overview のような統計情報を取得するような機能は見つからなかった。

Blogger で使っているような、blogger_rpc による呼び出しは非公開の機能なのだろうか・・・



投稿者 時刻:
ラベル: ,

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)