OpenLaszloアドバンスド・テクニック（6）　Page 1/4

リアルタイム株価チャート、ついに完成！

ネットエイト
十河 学
2006/9/6

次期バージョン（Legals）でFlashとAjaxの両対応を決めたオープンソース・リッチクライアント製品のOpenLaszlo。本連載では業務アプリケーションを意識したリッチクライアントの開発テクニックを紹介する。（編集部）

■はじめに

　前回お知らせしたように、OpenLaszloはv3.3.3がリリースされています。前バージョンv3.3.1からの主な変更点は、「画像の読み込みに失敗する問題の修正」「Windows XPでlzcスクリプトコンパイラーが正常に動作するように修正」「デプロイ用パッケージの代わりにデベロッパーキットが配置された場合の潜在的なセキュリティ問題を防止」の3つです。

　また、次期メジャーバージョンアップとなるOpenLaszlo LegalsのスナップショットRP2がリリースされています。こちらのバージョンではデモ用アプリケーションLzPixが1つのコードからswfとdhtmlに出力し正常に動作することを確認できます。

　いよいよ今回が本連載の最終回となります。今回は前回に引き続き、固定データをJSPから動的に取得して「ローソク足の実装」「当日株価チャートの自動リロード」といった処理を実装します。LZXの視点から見ると、データセットから外部リソースを取得する方法、データポインタの利用とメソッドのオーバーライド、デリゲートとタイマー処理といった内容になります。本稿では紙面の都合で当日株価チャートのリロードにクライアントプルを利用していますが、OpenLaszloはサーバプッシュ配信もサポートしています。

　ここで利用しているJSPはダミーデータを作成するための簡易版で、特に解説はしません。JSPの学習にはほかの記事を参照してください。もちろんXMLデータ（動的に変化する株価データ）の作成にはPHP、サーブレット、CGI、Ruby、ASP.netなど、お好きな言語を利用できます。

　実際に株価表示システムを作成する際には、JSPはデータベースなどから株価データを取得しXMLに加工します。XMLのデータ構造をしっかりと決めておくことで、LZXの変更なしにデータソースを簡単に変更することができます。OpenLaszloではバックエンドシステムと簡単に連携を行うためのコンポーネントが用意されており、MVCモデルを適用して、モデル・ビュー・コントローラを分離したアプリケーションを簡単に作成することができます。

■JSPで株価データをランダム生成

　まずはJSPで株価データをランダムに発生させるようコードを作成します。JSPファイルは新しくjspディレクトリを作成して、その中にテキストファイルstockprice.jspを作成し、リスト1のコードを記入します。

<%@ page language="java" contentType="text/xml; charset=utf-8" %> <records> <%!     private int getAverage5(int[] data){       int sum = 0;       for(int i=0;i < data.length; i++){         sum += data[i];       }       return sum / data.length;     }     private int[] pushAverage5(int[] data, int price){       int[] rtn = new int[data.length];       for(int i=0;i < data.length - 1; i++){         rtn[i] = data[i+1];       }       rtn[data.length-1] = price;       return rtn;     } %> <%   int[] average5 = {10081, 10072, 10053, 10040, 10022};   int prestart = 10000;   for(int i = 0; i < 19; i++){     int high = prestart + (int)Math.floor(Math.random() * 150);     int low = prestart - (int)Math.floor(Math.random() * 150);     int start = low + (int)Math.floor(                   Math.random() * (high - low)) + 20;     int end = low + (int)Math.floor(                   Math.random() * (high - low)) + 20;     int price = (int)((start + end) / 2);     int volume = (int)Math.floor(Math.random() * 1000 + 300);     out.println("<record date=\"" + (i + 11) + "\" price=\"" +                 price + "\" start=\"" + start + "\" high=\"" +                 high + "\" low=\"" + low + "\" end=\"" + end +                 "\" average5=\"" + getAverage5(average5) +                 "\" volume=\"" + volume + "\"/>");          prestart = start;     average5 = pushAverage5(average5, price);   } %> </records>

リスト1　株価データをランダムに発生させるJSP

　 初期値を適当な値に設定し、繰り返し処理で19日分のデータを作成しています。ここでは前日の取引値を基準に乱数で、高値、安値、始値、終値、平均値、出来高、過去5日間の平均値データを作成しています。

　リスト1のJSPファイルは、1行目の

<%@ page language="java" contentType="text/xml; charset=utf-8" %>

によって文字コードをutf-8、文書タイプをXMLに設定しています。特に日本語を扱う場合は文字化けを防ぐため、utf-8でエンコーディングする必要があります。

　ブラウザから直接JSPにアクセスして、正常にXMLデータが作成されているかテストしておきます。

1/4

INDEX
OpenLaszloアドバンスド・テクニック（6） 　リアルタイム株価チャート、ついに完成！
	Page1 はじめに JSPで株価データをランダム生成
	Page2 株価データをJSPから取得 ローソク足クラスの作成
	Page3 チャートスタイルの設定 ローソク足をチャート上に描画
	Page4 当日株価チャートの自動更新 当日株価データをjspから取得 リアルタイム株価チャートの完成

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）