ひまわり証券株式会社様（1）Adobe Flex開発事例：ひまわり証券株式会社様（1）

見やすさ・使い勝手にこだわったチャートアプリケーション

先物＆オプションWEBは、株価指数先物取引・株価指数オプション取引の取引システムです。ユーザーの使い勝手を考慮したユーザーインターフェースを実現するためにRIA（リッチインターネットアプリケーション）技術を採用しています。ユーザーが使用しているPC環境に依存しせず、簡単かつスピーディーに取引を始めることができます。
クラスメソッドは、ひまわり証券様の開発チームと共に、Flex2を用いたユーザーインターフェースの開発、リアルタイム時価情報配信の仕組みづくり、バックエンドシステムとの連携、３Dチャートコンポーネントの開発などを担当しました。

背景・目的

HTMLに替わり分かりやすく注文できるシステムへ

2006年7月、大阪証券取引所において日経225miniがスタートしました。日経225は、日経平均株価を対象にした株価指数先物取引です。日経225miniは、誰もが知っている分かりやすい指数と、売買単位が今までの10分の１で始められる商品ですので、初めての投資家の方でも参加しやすく、使い方に慣れていない方でも分かりやすく注文できるシステムの登場が求められていました。
また、既存の投資家の方からも旧システムに対する要望も多く上がってきており、新システムを開発することになりました。使い勝手を考える過程において、旧システムからの既存ユーザー向けのインターフェースと、スピーディにお取引頂くためのインターフェース等、利用部門のニーズに合わせて画面の設計をする必要がありました。
また、それぞれのニーズに合わせてインターフェースを作成することで、一般のお客様を始め利用部門からの要求を実現する必要がありました。過去のシステムでは、HTMLベースということもあり、画面遷移数が多かったり、必須入力項目が分かりづらかったりと、使い勝手に関する要望も多かったので、新システムでは特に使い勝手にこだわり、特殊注文の追加要望や、リアルタイム時価情報表示をより早く正確に、画面の切替えがしやすいレイアウトなどが考慮されました。
また、顧客数・注文数の増加によりシステム負荷が増大し、注文確定の遅延が起こらないように設計し、クライアント側に一部の処理を任せることによって、負荷を分散させるようにしました。リッチなユーザーインターフェースを実現する技術を採用するにあたり、Flex2が最終候補となりました。
以下には、ユーザーインターフェース技術を決定するまでに検討された項目です。

プロジェクト参画の背景

日本語の情報が少ないFlex2の活用力/開発力を評価

2005年12月、Flex2でのシステム開発を検討されているとご相談を頂き、技術調査がスタートしました。
クラスメソッドでは、Flex1.5、 Flash、Javaを用いたシステム開発を幾つか経験しておりましたが、Flex2はα版が米国で公開された直後であり、日本語の情報がゼロからのスタートでした。
まずは、新システムでの要求を満たせるかプロトタイピングを行い、早期に技術的なリスクの洗い出しを行ないました。次に、RIA開発における開発標準作成（ロギング処理や、パッケージ名、例外時の動作、セッション情報保持、イベント操作、画面切り替え、ドキュメント化など）のお手伝いさせていただきました。
RIA開発において、標準コンポーネントを利用した開発とカスタムコンポーネントを用いた開発では工数がかなり違います。
そこで、できるだけ標準コンポーネントを用いた実装にするために、エクセルで作成した画面定義書から詳細動作の確認を行ないました。
これにより、どうしてもカスタム化が必要な部分を切り分けました。
ひまわり証券様では、過去にFlashとColdFusionを用いた開発をご経験されており、スムーズに進めることができました。
サーバーサイド技術においては、クラスメソッドにて多くの開発実績があるSeasar2を用いることにより、飛躍的に生産性を上げることができ、開発の後半ではユーザーインターフェースに注力することができました。
また、証券取引所から配信されるキューデータを再現するシュミレーターを作成することにより、実データが配信されない時間帯でもテストができるように工夫しました。

成果

使い勝手の良いシステムで取引数が2倍以上に

当初のスケジュールどおり、Flex2を用いた日本初の取引システムをリリースすることができました。
新システムのリリース後、以前と比べて取引数は2倍以上になっているそうです。
このことからも、使い勝手の良いシステムが利用者に与える影響は高いと確信しております。
今回採用した最新技術であるFlex2以外にも、アプリケーションサーバーにはTomcat、Seasar2コンテナによるビジネスロジックの管理、S2DaoによるDBアクセスの抽象化、S2Unitによるテストの自動化、ActiveMQによるキューデータの配信、Threadによるマルチスレッド処理、IIS6.0による大量アクセス対応など、多くの新しい技術用いてシステムを構築することができました。

クラスメソッドからのメッセージ

Flex2を研究/活用したことで大きなノウハウを蓄積

本プロジェクトは、2005年の12月からFlex2のα版を使った技術調査を開始し、モックアップを繰り返しながら技術的リスクの洗い出しや、利用者の要求を満たすユーザーインターフェースのモック作成、高いパフォーマンスを出す仕組みづくりなど、約１年間チャレンジをし続けることで開発チーム一同大きく成長することができました。
特に、Flex2の発売前から実プロジェクトで触ることができ、発売前にノウハウが溜まったことは言うまでもありません。
RIA開発は見た目のキレイさに比べて、開発自体は泥臭くなりがちです。
開発方法論や開発標準が整備されずに見切り発車でスタートしてしまうと、後からアーキテクチャーが破綻して大きな後戻りが発生してしまいます。
しかし、C/Sシステムのリプレースに代表されるように、今までのシステムの使い勝手を維持しつつWEB対応のシステムを構築するのにRIAは良い選択だと考えています。
クラスメソッドでは、Flex2を用いたRIA開発はユーザーのインターフェース要件を満たすひとつの技術として捉え、バックシステムからフロントまでシステム全体を考えてアーキテクチャーの設計・実装すべきだと考えています。
システムの利用者及びメンテナンス担当者にとって、使い勝手の良いシステム構築を目指しています。

お客様の声

今回のプロジェクトでは利用部門の要求をまとめ、ユーザー・インタフェースの設計や機能要件等を担当しました。ユーザー・インタフェースについては自社で開発する部分とクラスメソッド様にお願いする部分があり、資料を（細かい仕様も含め）エクセルで作成し、それをもとに各々の開発部門に渡し認識を詰めていきました。
ユーザー・インタフェースの作成においてはクラスメソッド様のお力添えが大きかったと今でも思います。
”リッチクライアント”の取引システムなので、どれだけ画面数・クリック数を減らし、使い勝手を向上できるかが課題でした。
こうした要求は、様々な工夫をこらし、試行錯誤を繰り返していくうえで実現することができました。
（クイックトレードの直接発注・シミュレーションの3Dペイオフダイアグラム等）
※ユーザー・インタフェースの作成は自社・クラスメソッド様ともにスパイラル型で行いました。

また、注文画面（板画面等の参照系も含む）は、ユーザーがもっとも利用するコンテンツであり、一番のこだわりを持ったところでもあります。
クラスメソッド様はそうした細かい要求にも応え、ひまわり証券が想定していた以上の成果を収めていただきました。
その結果、現在では顧客数・注文数ともに順調に推移しております。
今後はアドビシステムズから発表される新たなランタイム“Apollo”をベースに追加機能等をクラスメソッド様とともに開発していきたいと考えています。

ひまわり証券株式会社 証券企画部アーキテクト
濱中 郁和 様