1. ソーシャルかぶコン2013
アプリ開発部門
取引高可視化ツール
STOCK PILLAR
加茂
聡

2. 制作の動機

取引の様子を興味を持って見てもらいたい

3. 主な対象
主に対象とする人達
まだ取引に参加していない人達
既に取引に参加している人達

4. 取引の可視化

例えばチャート図等

5. グラフィカルな可視化
 抽象化
 直感的
 見て楽しい
スマートフォン
PC

6. 以降は質疑応答時に使用予定

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

8. 抽象化のメリット

抽象化してデータを送っているため、送信し
たデータを横取りしても価値があまりない
 既存のデータ販売事業にはほぼ影響を与えない
歩み値や
取引高等
価値あるデータ
表示用の
座標データ等
無価値なデータ

9. 画面説明1(PC)

10. 画面説明2(スマートフォン)
Android
iPhone

11. どうやって見せるか

どうせならブラウザアプリ
 PCだけでなくスマホやタブレットで！
 インストールなし！

12. システムの概略
JavaScriptで描画
JavaScriptでデー
タ送信(node.js)
クライアント
Webサーバ WebSocketで
データ送受信

13. 使用ソフト、開発・制作・動作環境等(予定)

使用ソフト

クライアントサイド


サーバサイド




ソーシャルかぶコン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

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

15. 画面説明1
取引高に応じて長い
バーが付く
銘柄番号
歩み値が上がったら赤
下がったら青
同じ値段なら白
最大値
クリックした銘柄は
色を赤くして情報等
を表示する
最小値
銘柄ごとにプレート
を用意
時間