カテゴリ

2009年新春特集

ノウハウ

Feed

ノウハウ

アクセス数推移をTimeplot APIで表示する方法

zegenvsさんのPathtraq APIを使ったアクセス数推移をGoogle Chart APIで表示する方法に触発されて、微妙に似ている事例を紹介ということで。。。


(2008/08/07 15:29)

Comments_count コメントする (2) Clips_count クリップする (0) Access_count アクセス数 (742)

本文
zegenvsさんのPathtraq APIを使ったアクセス数推移をGoogle Chart APIで表示する方法に触発されて、微妙に似ている事例を紹介ということで。。。

Timeplotをご存じでしょうか?
Flashを使ったダイナミックなグラフはよく見かけますが、TimtplotはAjaxで動くグラフ描画ツール(API)です。

ちょっと前に某サイトでこれを使ってアクセス数推移をグラフ表示する機能をつくりましたので、事例紹介ということで投稿させていただきます。

まずは、例ということで、実際の画面をご覧ください。

例)カカクコム(証券コード:2371)の注目チャート
http://stockcafe.jp/2371a

上記は株式投資サイトストックカフェにおける「カカクコム(2371)」銘柄に対するユーザのアクセス数推移をグラフ化したものです。

グラフ上でマウスを動かすと、日付とアクセス数がダイナミックに表示されます。

また、グラフ右上の「関連テーマ」や「関連ニュース」などのチェックボックスをクリックすると、対象の銘柄に関連するイベントがグラフ上に表示されます。イベントをクリックすると詳細内容がフキダシで表示されます。

このように、TimtplotはHTML+JavaScriptだけでダイナミックなグラフを実現しているのがすごいところです。

Timtplotの使い方ですが、実はそれほと難しくありません。
Getting Startedにステップ毎に書かれていますので、通常のグラフならすぐにできると思います。

今回のテーマであるアクセス数推移グラフを実現する上でのポイントは、


コピペする ブログに貼る
timeplot = Timeplot.create(document.getElementById("my-timeplot"), plotInfo);
timeplot.loadText("data.txt", ",", eventSource);
timeplots.loadXML("events.xml", eventSource2);
の様に、JavaScript側からアクセス数データ(CSV)とイベントデータ(XML)をWeb経由で読み込ませるようにし、Webサーバ側で所定の形式でデータを出力するAPIを用意しておくことです。 ストックカフェではいくつかの非公開なAPI(といっても、すぐにハックされそうですが…)を呼び出すようにしています。 たとえば、アクセス数取得APIは、
コピペする ブログに貼る
2007-12-16,7,215
2007-12-23,2,266
2007-12-30,2,338
2008-01-06,4,203
2008-01-13,6,253
のようなCSVを出力しています。 第1カラムが日付で、2カラム目以降が数値データとして利用できます。(JavaScriptで利用するカラムを指定できます) #ちなみに、注目チャートでは2カラム目はつかっていません。順位です。。。 また、イベント取得APIは、
コピペする ブログに貼る
<data xml:lang="ja" lang="ja">
<event start="Jul 26 2008 11:02:00" title="ニュース: ちょっと古いけれど紹介 (CNET Japan)" link="?m=stock&a=page_news_item&nid=57924"/>
<event start="Jul 24 2008 20:08:01" title="ニュース: カカクコムクチコミサイト「食べログ.com」、レストラン情報の編集機能を開放 (CNET Japan)" link="?m=stock&a=page_news_item&nid=56967"/>
<event start="Jul 22 2008 13:07:00" title="ニュース: いちよし経済研究所のレポートが材料視されたカカクコム(2371)は本日は利食い売りが先行する展開に (兜町ネット)" link="?m=stock&a=page_news_item&nid=55117"/>

</data>
のようなXMLを出力します。 #link属性はなくてもOKです。(リンクしなくなります) ストックカフェでは上記の例の、銘柄(企業)のアクセス数推移グラフの他にも、独自コンテンツであるテーマページへのアクセス数推移グラフ、会員のマイページへの"足跡"の推移グラフもほぼ同じ仕様で実装しています。 このようにTimeplotを使えば、ちょっとした作りこみで見栄えのよいグラフを表示することができますので、ぜひお試しください。 最後にちょっとした補足事項を。。。
  • IE(6も7も)だと動作が重いです。特に大量のイベントを追加するとかなり重いです(500イベントで数分とか)。また、イベントの色が表示されなかったりと若干制限事項があります。これは、Timeplot Limitationsに書いてあるように、Googleのexplorer canvasライブラリでcanvasタグをエミュレートしているからのようです。
  • Timeplotのサイトに「Timeplot has graduated!」と書いてあるとおり、今後はsimile-widgetsとして引き継がれるようです。いまのところ大きくAPIが変わる雰囲気ではなさそうですが。。。
  • 上記のように今後プロジェクトが移行する(?)こともあって、外部のサイト上のAPI(JavaScript)を呼び出すのが不安な場合、How to Run Timeplot Off-linの方法で自分のサイトにダウンロードして使うこともできます。(ウチもやってます)
  • オプションでのタイムゾーンの指定がまずかったのか、はたまたTimtplot(Timeline)の仕様なのか、イベントの時刻表示がGMTになってしまいました。いろいろ試したのですがうまくいかなかったので、不真面目にもTimeplotのプログラム自体を改造して安直にlocaltimeを表示するようにしてしまいました。。。
ここに投稿したのでストックカフェでのカカクコムへのアクセス数が上がるような。。。
  • Thumbnail
    by hothot ( アクセス数:1051, 投稿数:104, マイクリップ数:0 ) |投稿時間:2008/08/07 23:26
    詳細レポートありがとうございます!
    綺麗で動きもありいいですね
    すみません一つ質問なのですが
    
    google chartはひらがな以外の日本語表示が出来ないらしいんですが
    そこらへん どうですか?
    
    そういえばアシアルもチャートAPI出してましたね
    
    このコメントの獲得ポイント3点(3人の評価)
  • Thumbnail
    by _tt ( アクセス数:558, 投稿数:7, マイクリップ数:0 ) |投稿時間:2008/08/08 10:50
    こんにちは、hotohotさん。
    コメントいただき恐縮です。
    
    Google Chart APIは画像を生成する方式ですので、日本語対応についてはサーバ側の環境(フォントとか)を整備しないとできなそうですね、、、
    
    と書いたのですが、いま調べたら、
    
    Google Chart API で漢字を含む日本語が通るようになった
    
    によれば、漢字に対応したようです!!
    
    これ、いいですね。
    自前でグラフライブラリを構築しようとすると案外面倒なものですから、Web APIから使えると便利ですね。(Googleなんで当面なくならないだろうという安心感がありますし)
    
    さて、TimeplotはHTMLとJavaScriptで実現していますので、日本語表示はおそらく大丈夫だと思います。(すみません、いろいろ試したわけではないのですが、最悪UTF-8なら大丈夫ではないかと。。。)
    上記例のように、UTF-8でXMLを作るようにすればイベントの表示も日本語でOKです。
    
    JSChartはどこかで聞いたことあるとおもったら、SUNのマッシュアップコンテストでした。。。
    個人ユーザなら「コミュニティ・ライセンス」で無料で使えそうですね。(多少、機能制限があるようです)
    
    ちなみにTimeplotはBSDライセンスとのことでその辺も使いやすさの一つかと思います。
    
    このコメントの獲得ポイント1点(1人の評価)
okyuu.comとは

価格.comID(メールアドレス)

パスワード

次回から入力を省略
Okyuu_on_facebook
Okyuu_on_twitter
Okyuu_vox_com

新着記事

ノウハウ