1. ソーシャルかぶコン2013
アプリアイデア企画部門応募作品
可視化ツール
詰め合わせ
応募者：pingineer

2. 作品の目的
今まで株式市場に縁がなかった人達に株式市
場をアピールする
 株式市場は動いているんだということを実感
してもらう

 無味乾燥としたチャート図や株価等ではなく、
株式市場に全く馴染みがない人達にとっても直
感的に把握が可能な見て楽しいアプリケーショ
ンとして、株式市場での取引を可視化する。

3. 応募テーマとの確認

株式市場や上場企業の魅力を投資未経験の方々へ発
信する作品


株式市場が生活の一部に感じられるような生活者目
線の作品


投資未経験な方々にも見て動きを楽しめる作品とする。
馴染みのある企業名が流れていく等して、株式市場の動
きは生活にも関わっているのだということを直感的に理
解できる作品とする。
既存の株式投資アプリケーションの枠に収まらない
ような斬新な切り口の作品

既存のチャート図などではなくダイナミックな動きのあ
る可視化を行い魅せる作品とする。

4. 想定される使用シーン等
Webサイト上で公開し、いつでも誰でも見れ
るようにする
 巨大なスクリーンで展示

画像はソーシャルかぶコン2013のSlideShareから拝借
http://www.slideshare.net/kabucontse/how-tover20-17126418

5. 使用ソフト、開発・制作・動作環境等(予定)

使用ソフト

クライアントサイド


サーバサイド




ソーシャルかぶコン2013提供データ(歩値データ)
東証上場銘柄一覧(http://www.tse.or.jp/market/data/listed_companies/)
開発環境・制作環境

ノートPC（クライアント）


Windows8(chrome、Teraterm)
さくらインターネットVPS（サーバ）


perl
node.js
使用データ


Three.js
Linux(vi、sed、awk、perl)
動作環境

html5に対応したブラウザ(IE10、Firefox、chrome、safariで動作確認)



PC(Windows、MacOSX、Linux)
iOS(iPhoneで動作確認)
Android

6. 可視化案1
(アプリ開発に応募したSTOCK STARの棒版)
銘柄番号によって横軸の座標
が決まり、時間の経過ともに
奥から手前に流れていく
銘柄番号
時間
取引高
歩み値によって色を変える
取引高の大きいと高くなる

7. 可視化案2
バーが表示される場所は
・銘柄番号で横軸の座標
・歩み値で縦軸の座標
がより決まる
取引高
取引高の大きいと高くなる
バーの色は歩み値が
・高くなる：赤
・低くなる：緑
・同じ：黒
銘柄番号
歩み値
取引が成立するとバーが生える
バーは時間とともに縮小していく

8. 可視化案3
取引があると玉が落ちてくる
13:15
表示している取引時
間が成立した時間
ボールの色は歩み値が
・上がったら赤
・下がったら緑
・横ばいで白
取引高でサイズを変える
物理エンジンを使用し、落下して
きた玉が衝突すると弾かれて動く
ように摩擦係数等を調整しておく
ある1銘柄について表示
取引の累積数が多くなってくると
ゴロゴロと動きが出て面白くなっ
てくると予想(処理は重くなる)

9. 可視化案4
上がったら赤
下がったら黒
取引高によって太さを変
える
終値側
歩
み
値
始値側

10. 可視化案5
• バーは取引高の累計を表す
• ボール
• 取引高に応じて大きさを変える
• 歩み値に応じて色を変える
かば子先生がスティックを振るとボールが出る
ボールは銘柄の本社所在地へ飛んでいく
目的地についたらバーを高くする
画像はそれぞれ以下から拝借しました
日本地図：wikipedia
かば子先生：アプリ開発部門のスライドショー