集中と分散 スマートフォンとクラウド連携の

アプリ開発と分業の実際

カブドットコム証券

社長付 IT戦略担当

谷口有近 / たにぐちありちか

@arichika / Facebook・Google+ 実名で

※本公演および資料についての免責、商標、ライセンスについては最後のページをご覧下さい。

本日のセッション概要

セッション概要/アプリの概要 KC/10m.

スマフォ×クラウドにおけるUXとは？

クラウサービス特有のUX的解 2FC/30m.

Azureにハイトランザクションをたたき込む！の事例

金融系アプリにみるUXの重要度と 分業最適化への期待 KC/20m.

2

ちょっとだけ 本題に入る

その前に

3

ユーザー企業の 時代認識

技術動向10年 （あれ、RIAの話…は？）

4

w95OSR2

CSS1 CSS2

w7 wVista w2k wXP

技術的バズワードの変遷

| ’96 | ’97 | ’98 | ’99 | ’00 | ’01 | ’02 | ’03 | ’04 | ’05 | ’06 | ’07 | ’08 | ’09 | ’10 | ’11 |

IE6 IE7 IE8 IE9

N6 N7 N8

IE5

NC4.5 FF1 FF3 FF4-7

GC1 GC2-8- GC14

IE3

NN3

CSS2.1,3

Gecko

mixi

Salesforce

GOOG

twitter

Facebook SaaS

Cloud(us) Cloud(jp)

Android

米)ｱﾙｺﾞ台頭

欧)ｸﾞﾘｯﾄﾞﾌﾞｰﾑ

日)ｱﾙｺﾞ話題

日)東証新シス

L.B. ショック ライブドアショック

米)NMS施行

- - - - - - - いざなみ景気（第14循環） - - - - - -- -

Mac OS X

Dynamic HTML Ajax(JS+XML)

jQuery

Hadoop

日)株式委託手数料自由化

日)B.B.元年

日)金商法・PTS

SQL Slammer/Blaster HTML5 Draft HTML4.01

w98 IE4

米)ｲﾝｽﾃｨﾈｯﾄ 米)代替市場ATS

<AMZN

米)NYSE Linux

GREE

DeNAﾓﾊﾞｵｸ DeNA

月刊アスキー廃刊

WP7

WP7.5

BlackBerry BlackBerryJP

iTunes iPhone iPad

Nimda LOVE LETTER

.NET1.0 .N2.0 .N3.0 .N3.5 .N4.0

<HotJava

ITバブル崩壊

Azure

Cloud Foundry

Heroku

Web2.0

G.AppEng.

MS独禁法NSDAQ急落

VMware WS VMware ESX VMware GSX → Server

Connectix Virtual PC → MS Hyper-V

Cisco UCS

L2広域/SDN

‘88 メインフレームPR/SM

NK225

NASDAQ

^DJI BigData

ePUB

マッシュアップ

5

技術を概念で整理してみる

独自仕様 vs.業界標準 機能拡張 → 標準仕様化

WebAPI 疎結合

UI → UX 高度化・高速化

既存体験/業務のWeb化

新しい事を Webで

CGM SNS

音楽・書籍 物理所在の流通ﾈｯﾄ化

音楽データ 流通ﾈｯﾄ化

書籍データ 流通ﾈｯﾄ化

家族PC/会社PC 個人/ノートPC モバイル体験 携帯→スマホ

タブレット

マルチ デバイス

汎用機 → PCサーバ

パッケージ SaaS/ASP

IaaS

IA仮想化 エミュレート → hypervisor

Grid・IA分散高度化

ルール変更 自由化

客層変化 個人投資家

競争力変化 スピード/規模

PaaS

汎用機的IA 自作IA

物理回帰

情勢把握 監視強化

6

7

時代認識の共有：別の切り口…

法人/家族毎 個人毎

計画通り 造る

未体験を 創る

+速く創る 速く辞める

百貨店的 コンビニ的 通販的

要求コスト/単価

要求規模

機械化の模索 品揃え(≒個性)の模索 個性を創造

共有的

物流革命 情報革命 モノ→情報 権利革命

デバイス毎

数値を見る 統計を見る 相関を見る

8

9

10

金融を支える技術の米日比較

| ’96 | ’97 | ’98 | ’99 | ’00 | ’01 | ’02 | ’03 | ’04 | ’05 | ’06 | ’07 | ’08 | ’09 | ’10 | ’11 |

Cloud(us) Cloud(jp)

米)ｱﾙｺﾞ台頭

欧)ｸﾞﾘｯﾄﾞﾌﾞｰﾑ

日)ｱﾙｺﾞ話題

日)東証新シス 米)NMS施行

日)株式委託手数料自由化 日)金商法・PTS

米)ｲﾝｽﾃｨﾈｯﾄ 米)代替市場ATS 米)NYSE Linux

Hadoop

BigData

11

12

金融業界の 時代認識

堅いと噂の金融業界どうよ （RIA…）

13

14

15

16

17

（実は先端の）国内金融をサマる

元来、銀行さんは勘定系の共同利用が主体

今でいう ”クラウド” に実は近い。メインフレーム/IAの違いとも。

勘定系については Wikipedia が良く纏まってる http://ja.wikipedia.org/wiki/%E5%8B%98%E5%AE%9A%E7%B3%BB%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0

SIer と 大手銀行 が作成した馬鹿高いシステムを複数の地銀が共同利用する事でエコシステムを形成

“証券システム” も同様

NRI「THE STAR」/ DIR「SONAR」等

中小証券各社はいくつかのシステムにぶら下がる

18

国内金融の変化 金融システムの自製化

UNISYSオープン勘定系

Windows 2003 + COBOL の Bank Vision

セブン銀行の Bank Start も同様

参考：UNISYS技評 28-1 通巻96

カブドットコム証券 取引システム・勘定系

取引 Windows NT / 勘定系 Solaris で開業

オープン基盤で自社構築 → Windows が 99%

新生銀行勘定系、ATM等

Windows 2000 で勘定系を構築

SBI証券発注システム

Linux ベースでNRIと再構築

19

20

全部じゃないですよ さすがに

21

マイクロソフト+カブドットコム

検索すればモリモリと事例が出て来ます！

22

谷口 有近 / たにぐち ありちか / @arichika

2000年 ホットリンク社 勤務

2001年 カブドットコム証券 入社

インフラ基盤の改善、構築に主に従事

2005年 マイクロソフトMVP （だったw）

Infrastructure Architect → 消滅した！

2006年 課長代理→ 2007年 課長職 へ

運用面、基盤面を中心に現場職と管理職に従事

2009年 ITプロフェッショナルエバンジェリスト

開発と運用の垣根を越えた最適化や情報提供、広報活動

2011年 社長付IT戦略担当 <= いまココ

部門を超えて、R&Dの側面でIT業界の動向を調査

新規案件のFSやシステム部に寄らない開発等

23

24

で 本 題

25

今 ”当社” に足りないもの

変化に追従 できる開発運用体制 それはつまり ”フレームワーク” と ”インフラ”

“クラウドコンピューティング” のコア技術の理解

スケールアウト前提ミドルウェアで、開発生産性の向上と運用の標準化がどうしても必須

お客様の 想像を超える“アイデア” お客さまの体験が豊かになるにつれて、競合他社製品の使い勝手、品質だけでなく、別の世界の経験（iPhoneアプリ/FX）と比較 され始めている

UX設計視点の開発力が勝負に

26

27

Azure と Windows Phone 7

Microsoft Azure 基盤が目指してる世界 ＝エンタープライズで使える “PaaS クラウド”

“開発生産から運用までのライフサイクル”で最適化

Windows DNA の事実上の直系

構築ノウハウって結構な勢いで違うらしい

Windows Phone 7.5 が目指してる世界 iPhoneとは違う ”新しい” 体験にチャレンジ

アプリベースからオブジェクト/ステートベースへ

＝情報の表現を変える事で誰にでも優しく

Windows 8 へのフィードバックも期待

28

時代背景を再確認

金融情報系にも 変化の胎動 株式の世界は “深く“ のアプローチが優勢だった

アローヘッド・アルゴで ”知覚” で拾えない時代

データ量と描画速度の問題を超えられるか

新しい UXを支える技術 背景 Apple, Google, Twitter, facebook (←UIは未だにタコだがAPIとデバイスの相性を再確認), etc.

高速応答前提のモデル・基盤設計

Zapping 向きの大量高速な情報表示も現実的に

29

【再掲】技術を概念で整理してみる

独自仕様 vs.業界標準 機能拡張 → 標準仕様化

WebAPI 疎結合

UI → UX 高度化・高速化

既存体験/業務のWeb化

新しい事を Webで

CGM SNS

音楽・書籍 物理所在の流通ﾈｯﾄ化

音楽データ 流通ﾈｯﾄ化

書籍データ 流通ﾈｯﾄ化

家族PC/会社PC 個人/ノートPC モバイル体験 携帯→スマホ

タブレット

マルチ デバイス

汎用機 → PCサーバ

パッケージ SaaS/ASP

IaaS

IA仮想化 エミュレート → hypervisor

Grid・IA分散高度化

ルール変更 自由化

客層変化 個人投資家

競争力変化 スピード/規模

PaaS

汎用機的IA 自作IA

物理回帰

情勢把握 監視強化

30

31

32

33

慣れないと複雑な市場の ”モデル”

QUICK

Reuter

TSE

OSE

高値時刻(HHMMSS) 安値 安値時刻(HHMM) 安値時刻(HHMMSS) 売買高 売買高時刻 最良売気配 最良買気配 最良売気配数量 最良買気配数量 最良売気配数量 前日終値 前日終値時刻 当日建玉残高 計算用現値 計算用現値時刻 現値前値比較 騰落率 出来高 日通し売買代金 時価総額 配当利回り １株配当 インプライドボラティリティ

株価収益率 純資産倍率 株主資本利益率 決算月日 貸株金利(年率) 非危険利子率 売買高加重平均価格 日通し売買代金 単元株数 銘柄コード 銘柄略称 銘柄略称（英語） 取引所コード 所属部 IV デルタ SQ日 残存日数 売気配・価格 売気配・時刻(HHMMSS) 買気配・価格 買気配・時刻(HHMMSS) … ほんの一例 発注が関係すると、 もともっと大変になる

それぞれ、更新頻度,更新タイミングは、意味とソースに応じて変わる

モデル整合性 誤認勧誘 システム障害 事務処理ミス 法令違反

免責事項はあるが 考慮する事多し。

34

35

36

KANNA AND KAPPA

ユーザービリティ提案への挑戦

システムライフサイクル改善への挑戦

37

Two Projects “kanna”, “kappa”

Scalable Application Platform based on “Microsoft Windows Azure”

Windows Phone 7 Application

Codename “kanna”

Application Platform

Codename “kappa”

On-Premises DataCenter

38

kanna Project

Why “kanna” （カンナ）？

10月（神無月）はプロジェクト山場（だったはず）

私の誕生月でもあったりする

kanna の挑戦

株価情報系アプリに ありがちな既存UIに ×

まだ見ぬUXにチャレンジ

UI/UX Lab チャンネル としての役割を担って欲しい

39

メトロUIが提供する体験 とは？ 機能や対象に注目していたこれまでの ”アイコン”から脱却 、対象物のステートを表現し、情報への到達を簡略化。→ People Hub のように、ザッピング感を強く表現する

アプリを使う=機能を使う から、情報をクロールする先に機能がある、という順序の変更

この発想は金融商品と相性が良いはず ユーザーは金融商品のアクティビティ（値動き）やステート（価値）に興味がある。売買機能やニュース表示機能に直接興味があるわけではない

快適に情報をクロールする事への挑戦

kanna Concepts

40

kappa Project

Why “kappa” （カッパ）？

Kabu.com Application “Powerful Platform” on Azure で KAPPA …

ギリシャ語10番目で超ひも理論的で大変すてき

kappa の挑戦

App Fabric を全力利用し金融 PaaS の限界を見る

PaaS の構築運用ノウハウを理解する

ハイトランザクションにチャレンジ

株式のリアルタイム（に近い）フィードをクラウドで提供って、まだ聞いた事がない

41

クラウド～オンプレ連携を情報系から パフォーマンスならオンプレHPC / 可用性ならクラウドAzure という区切りは、ごちゃ混ぜになる事確実

情報系という PaaS クラウドと相性が良い領域で、PaaS のシステム構築ノウハウの獲得に積極的にチャレンジ

クラウド経由のMVC/MVVMのノウハウ 守るべき部分は技術を使って高速化や高可用性にチャレンジし、モバイルデバイス向けのデータセット（=View）をいかに高速に扱う事が可能かを、金融クオリティで整理していく

快適なUXを実現するデータ提供基盤への挑戦

kappa Concepts

42

MVC-MVVM by Cloud-base REST API

MVCの図： http://msdn.microsoft.com/ja-jp/asp.net/ff191275 より引用

MVVMの図： http://blogs.msdn.com/b/erwinvandervalk/archive/2009/08/14/the-difference-between-model-view-viewmodel-and-other-separated-presentation-patterns.aspx より引用

REST/JSON API

43

44

45

Azureにハイトランをたたき込む

え、それまじで？（目標10分のネタ事例）

46

日本のお客さま、大変に拘る

チャートには拘ります皆さま！

ローソク足の幅、間隔、フレーム、

色は変えてもいいけど拘りは強い

0点の位置とか

描画のZ軸とか

数字の位置とか

転換点の判定とか

マウスの判定とか

同じでないと ご納得 いただけない

47

クラウドに持ってくだけなら簡単…だよね？

オンプレミス、実はかなりのチューニング

物理的な経路、WindowsのTCP/IPスタック等

経由する機器を減らすとか普通にやる

もうマジでガチガチにやります

クラウドでも同品質確保ってねぇ…無理…

48

クラウディアさん、ちょっと遠恋やわぁ…

60～100ms の TCP遅延

Window Sizre 次第で10Mbps～100Mbps

ちなみに東証～うちの間は100Mbpsで、

3msの情報配信を上場3600銘柄でやる

細切れパケットで…

UDP？ 専用線ならねぇ…

しかも http か…

アップロード無料で よかったねホント…

http://www.microsoft.com/japan/presspass/detail.aspx?newsid=4076 より引用

49

Azure Storage Queue

kappa / kanna Infrastructures

On-premises. Multi Devices.

Web role

Reader

Web role

Reader

Worker role

Updater

Worker role

Updater.

Azure Storage Table

Generate resources by Real-time feeds.

WCF API

App Fabric Cache

REST REST

REST full API

REST full API

REST

50

51

52

Azure 側実装苦労話

開発者が天才変人なので F# 選んだw

関数型最高！らしい でも確かにいい（Mかも）

画像生成速度を確保するための設計

当初はあらかじめ大量の画像を生成しようとしてた

実装してみたらコードでの単体生成がかなり速くアドホック生成に変更 もともとのコードも F# で画像生成

オンプレ認証情報のキャッシュに AppFabric Cache を利用

当初（意図的に）生成画像のキャッシュ用（メモリ上のデータプールの意図）として AppFabric Cache を使おうとしたがライフサイクル管理で不適切 → 結局オンプレ認証ハッシュの一時保存として

53

Azure 側実装苦労話

オンプレ→Azure への非同期アップロード

パフォーマンス目標に達しない試験結果

日本だと業務データでのハイトランザクションへのチャレンジが出てこず、MS さんとも MTG 実施しまくり

Entity Group Transactions (EGT) トランザクション で 500件のデータを一括でアップロード

複数型のフィールド・データを持つオブジェクトを複数配列として ProtoBuf でバイナリ化しキュー送信

Azureで取り出し戻してオブジェクトを処理、EGTで500entity を一括 Upsert

結果、CPU 負荷激増したが目標達成

単発データ＋ Async.Prallel とかも試した（別の機会）

データのバランスで性能が結構かわる

まぁ結局インフラの事理解してないとダメだったね w

54

クラウドのデザインパターン

とにかく極力非同期でやんなさい

昨日のOSは今日のOSと違うと思え

起動してきたら初期化コマンド無しで動くべき

コマンドを投げるノード間通信も、データのやりとりも、とにかくTableなりQueueなりで非同期化

通信（ソケット）も切れるもの だから http という

Azure データ投入はとにかく並列化意識

データをオンプレミス側でバッファし、まとめて投入する仕組みで改善出来る

ストレージアカウントを追加して対応することも出来る

オンプレミスの処理概念→大規模分散へシフト

55

56

【再掲】技術を概念で整理してみる

独自仕様 vs.業界標準 機能拡張 → 標準仕様化

WebAPI 疎結合

UI → UX 高度化・高速化

既存体験/業務のWeb化

新しい事を Webで

CGM SNS

音楽・書籍 物理所在の流通ﾈｯﾄ化

音楽データ 流通ﾈｯﾄ化

書籍データ 流通ﾈｯﾄ化

家族PC/会社PC 個人/ノートPC モバイル体験 携帯→スマホ

タブレット

マルチ デバイス

汎用機 → PCサーバ

パッケージ SaaS/ASP

IaaS

IA仮想化 エミュレート → hypervisor

Grid・IA分散高度化

ルール変更 自由化

客層変化 個人投資家

競争力変化 スピード/規模

PaaS

汎用機的IA 自作IA

物理回帰

情勢把握 監視強化

57

58

59

60

付録

ライセンス 本資料は、各項にて特段の捕捉が無い限り、CC-BY 2.1 JP ライセンスによって許諾されています。ライセンスの内容を知りたい方は http://creativecommons.org/licenses/by/2.1/jp/ でご確認ください。 資料中の引用文献・引用資料については、上記対象外です。

商標 カブドットコム証券株式会社の登録商標または商標についての情報は ”知的財産権に関する情報” http://kabu.com/company/disclosure/ip_report.asp をご覧ください。 その他、記載されている会社名、製品名は、各社の登録商標または商標です。

免責 本公演は事例紹介としての情報提供のみを目的としており、特定の金融商品等について好意的否定的を問わずその価値判断について、情報提供者の見解を述べるものではありません。 情報の内容につきましては万全を期しておりますが、その内容を保証するものではありません。万一この情報に基づいて被ったいかなる損害についても、情報提供者は一切の責任を負いかねます。

61

Thank you.

62