アクセス数推移をTimeplot APIで表示する方法 ノウハウ(Tips)  

こんにちは ゲスト さん | ログイン | ヘルプ | okyuu.com Feed Feed

総合トップ / ノウハウ / インターネット ノウハウ / Web API ノウハウ / アクセス数推移をTimeplot APIで表示する方法

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


本文
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を表示するようにしてしまいました。。。
ここに投稿したのでストックカフェでのカカクコムへのアクセス数が上がるような。。。

  • コメント数 (2)
  • クリップ数 (0)
  • アクセス数 (2294)

  • コメント

詳細レポートありがとうございます!
綺麗で動きもありいいですね
すみません一つ質問なのですが

google chartはひらがな以外の日本語表示が出来ないらしいんですが
そこらへん どうですか?

そういえばアシアルもチャートAPI出してましたね

こんにちは、hotohotさん。
コメントいただき恐縮です。

Google Chart APIは画像を生成する方式ですので、日本語対応についてはサーバ側の環境(フォントとか)を整備しないとできなそうですね、、、

と書いたのですが、いま調べたら、

Google Chart API で漢字を含む日本語が通るようになった

によれば、漢字に対応したようです!!

これ、いいですね。
自前でグラフライブラリを構築しようとすると案外面倒なものですから、Web APIから使えると便利ですね。(Googleなんで当面なくならないだろうという安心感がありますし)

さて、TimeplotはHTMLとJavaScriptで実現していますので、日本語表示はおそらく大丈夫だと思います。(すみません、いろいろ試したわけではないのですが、最悪UTF-8なら大丈夫ではないかと。。。)
上記例のように、UTF-8でXMLを作るようにすればイベントの表示も日本語でOKです。

JSChartはどこかで聞いたことあるとおもったら、SUNのマッシュアップコンテストでした。。。
個人ユーザなら「コミュニティ・ライセンス」で無料で使えそうですね。(多少、機能制限があるようです)

ちなみにTimeplotはBSDライセンスとのことでその辺も使いやすさの一つかと思います。

あなたの問題は解決しましたか?

okyuu.comはITエンジニアのための質問サイトです。あなたの質問に答えてくれるエンジニアがいるかもしれません。なんと回答率は89

はじめての方へ

カテゴリ

特集

okyuu.comポイント獲得を競って、話題の賞品をゲットしよう! okyuu.comポイント獲得を競って、話題の賞品をゲットしよう!
新しい評価指標「okyuu.comポイント」を多く獲得して、話題の賞品を手に入れよう!
ソフトウェアを公開するのが楽しい 岡野真也さん ソフトウェアを公開するのが楽しい 岡野真也さん
ソフトウェアを公開するのが面白くてたまらない。作っては公開というのが彼のやり方だが、若きエンジニアにとってはそれくらいがちょうどいいのかもしれない。
コンピュータは世界を広げる実験道具 西尾泰和さん コンピュータは世界を広げる実験道具 西尾泰和さん
プログラミング、サイエンス、デザイン マルチな彼にとって、コンピュータは未知の世界を広げるための道具であることに変わりはない。今後の展開が楽しみだ。
理想のOS開発に人生を賭ける 川合秀実さん 理想のOS開発に人生を賭ける 川合秀実さん
OSASK計画代表の川合さんは、人生の1秒を惜しみながら独自OSの開発にいそしむ。
「楽しむ」それが豊かなエンジニアになるコツ 坂井恵さん 「楽しむ」それが豊かなエンジニアになるコツ 坂井恵さん
日本MySQLユーザ会の副代表を務める坂井恵さん。技術の現場で会社運営に興味を持ち、独立起業の道を選んだエンジニアだ。
夢はエンジニアに強い影響を与える本を書くこと 松信嘉範さん 夢はエンジニアに強い影響を与える本を書くこと 松信嘉範さん
ソニーの情報シスから日本を代表するMySQLのコンサルタントに。彼が魅せられたオープンソースの世界とは?
お友達紹介機能をつかってポイントGET! お友達紹介機能をつかってポイントGET!
お友達を招待してみんなでokyuuポイントをGETしよう!
オープンソースの活動「すごく、いい」 前坂徹さん オープンソースの活動「すごく、いい」 前坂徹さん
オープンソースプロジェクトで活躍する若き新鋭。コミュニティ活動の感想を尋ねると「すごく、いい」と満面の笑み。
コンピュータは創造力を刺激する 奥一穂さん コンピュータは創造力を刺激する 奥一穂さん
天才エンジニアとしての国際的な評価も高い奥一穂さん。世間からのスマートだとの評価には「自分は広く浅くだから」とさらり。
25歳からプログラミング「泣きながら覚えた」 庄司嘉織さん 25歳からプログラミング「泣きながら覚えた」 庄司嘉織さん
25歳でプログラマーに転向した。いまやjava-jaを立ち上げるなど精力的なエンジニアだ。
Rails勉強会@東京は“キャスト”の気持ちで 諸橋恭介さん Rails勉強会@東京は“キャスト”の気持ちで 諸橋恭介さん
大学時代、偶然手にしたMacが諸橋さんにITエンジニアの道を開いた。
"シャイモード"機能を活用しよう! "シャイモード"機能を活用しよう!
こんな質問してもいいのかな?そんなときは"シャイモード"で投稿!
RX-7とサーバ運用の意外な共通点 並河祐貴さん RX-7とサーバ運用の意外な共通点 並河祐貴さん
Amazon EC2を巧みに使いこなすTIS/SonicGardenの並河さん。「腕一本で食べていきたい」とITエンジニアを目指した。
「ブラックボックスは不安でしょ」 ひろせまさあきさん 「ブラックボックスは不安でしょ」 ひろせまさあきさん
エンジニアが楽しくて仕方がない。オープンソースを組み合わせてシステムを作り上げるのが彼の矜持のようだ。
Perlの地位向上を胸に 牧大輔さん Perlの地位向上を胸に 牧大輔さん
endeworksの牧大輔さんは社団法人JPAを立ち上げ、Perlの企業利用を促進したいという。
偶然からCTOへ ライブドアCTO池邉智洋さん 偶然からCTOへ ライブドアCTO池邉智洋さん
池邉智洋さんはライブドアCTOの技術メンバーを先頭で率いる。「まずはやって見せることも大事」と語る。