OpenLaszloアドバンスド・テクニック
OpenLaszloアドバンスド・テクニック(6) Page 4/4

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

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

当日株価チャートの自動更新

 次に当日株価チャートに取り組みます。当日株価チャートではJSPを使ってデータを取得し、タイマーを使って一定時間ごとに自動更新させることにします。ここでは単純にローカルでのテストのみを考えて、アクセスごとにランダムデータを作成してデータ値をテキストに保存しています。

 リスト4のように、stockdaily.jspという名前でJSPを作成し、jspフォルダに保存します。

<%@ page language="java" contentType="text/xml; charset=utf-8"
         import="java.io.*,java.util.*" %>

<records>
<%!
  private String filename = "stockdaily.dat";
%>

<%
  String path = application.getRealPath(filename);

  File datafile = new File(path);
  if(! datafile.exists()){
    datafile.createNewFile();
  }

  BufferedWriter bw =
    new BufferedWriter(new FileWriter(path, true)); 
  Vector d = new Vector();

  String line;
    
  BufferedReader bre =
    new BufferedReader(new FileReader(path));

  while((line = bre.readLine()) != null){
    d.addElement(line);
  }
  bre.close();

  if(d.size() < 1) {
    bw.write("10000");
    bw.newLine();
    bw.close();
  }

  int size = d.size();
  int preprice = 0;

  for(int i=0; i< size; i++){
    String nl = "<record time=\"" + (i + 9) + "\" price=\"" +
                d.elementAt(i) + "\" />";
    out.println(nl);

    preprice = Integer.parseInt(d.elementAt(i).toString());
  }
  
  int price =
    preprice + (int)Math.floor(Math.random() * 200) - 100; 
  bw.write(String.valueOf(price));
  bw.newLine();
  bw.close();

  if(6 < size)
    datafile.delete();

%>
</records>
リスト4 当日株価を発生させるJSP(stockdaily.jsp)

当日株価データをjspから取得

 stockdailyデータセットのデータソースを設定します。stockchart.lzxの12行目の<dataset name="stockdaily">から</dataset>を次のように変更します。

<dataset name="stockdaily" type="http" src="jsp/stockdaily.jsp"
         request="true" />

 次にタイマークラスLzTimerとデリゲートを利用して一定間隔でデータセットをリロードし、最新の情報を取得します。

 当日株価チャートクラスdailychart.lzxにリクエスト用メソッドrequestDataとタイマーの処理を追加します(リスト5)。タイマーはoninitイベントを利用し、コンポーネントの初期化時に追加されるようにしています。

<method name="requestData">
  stockdaily.doRequest();
  LzTimer.resetTimer(this.requestdel, 5000);
</method>

<handler name="oninit">
  this.requestdel = new LzDelegate(this, "requestData");
  LzTimer.addTimer(this.requestdel, 5000);
</handler>
リスト5 当日株価チャートクラスに処理を追加(dailychart.lzx)

 まずoninit内の処理を見てください。this.requestdelという名前でデリゲートを作成しています。デリゲートはメソッドを参照するためのもので、特にイベントの実現に使われています。LzDelegateのコンストラクタで上記のように対象オブジェクト(this)とメソッド名(requestData)を指定して作成します。

 特定のイベントが発生した場合にデリゲート先のメソッドが呼び出されるようにするには、register()メソッドを使用し次のように表記します。

this.requestdel.register( button1 , "onclick" );

 上の例ではボタンbutton1が作成されているとして、このボタンのクリックイベントによってrequestData()メソッドが呼ばれることになります。もちろん次のようにイベントは複数登録することができます。

this.requestdel.register( button1 , "onclick" );
this.requestdel.register( button2 , "onclick" );
this.requestdel.register( button3 , "onclick" );

 この例ではbutton1、button2、button3のどれがクリックされた場合でもrequestData()が呼び出されます。

 次にタイマーの設定を見ていきましょう。LzTimerクラスのaddTimer()メソッドを使用して、デリゲートとこのメソッドが何ミリ秒後に呼ばれるかを設定しています。ここではテストのため5000を設定し、5秒ごとに当日株価データが自動表示されるよう設定しました。

 requestDataメソッドでは、まずstockdailyのデータソースをリクエストするためdoRequest()をコールし、また5秒後に同じメソッドが呼ばれるようタイマーをリセットしています。

リアルタイム株価チャートの完成

 これでリアルタイム株価チャートの完成です(図3)。完成したソースコード一式は以下からダウンロードできます。

  • atit_chart_src.zip(23.4Kbytes)
    ZIPファイルを解凍すると、atit_chart_srcフォルダが表れますので、OpenLaszloサーバの適当なディレクトリにコピーしてください。
    例えば、C:\OpenLaszlo Server 3.2\Server\lps-3.2\atit_chart_srcにコピーしたら、ブラウザでhttp://localhost:8080/lps-3.2/atit_chart_src/stockchart.lzxにアクセスすると図3のアプリケーションが立ち上がります。
図3 完成したリアルタイム株価チャート・アプリケーション画面をクリックすると拡大します

 ルック&フィールの部分でまだまだ改善は必要ですが、OpenLaszloを使った株価チャートの作成は達成できたと思います。チャートコンポーネントはドキュメントの不備などからまだベータ版扱いとなっているようですが、十分に実用に堪えるコンポーネントとなっています。棒グラフ、コラムグラフ、線グラフ、円グラフが用意されており、サンプルソースが付属していますので、ぜひ利用してください。サンプルグラフの一覧はLaszloJapanのWIKIページから見ることができます。

 それではOpenLaszloを活用してアイデアを実現してください。リッチクライアントの世界はまだ始まったばかりです。(連載完)

  4/4  

 INDEX

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




HTML5 + UX フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

HTML5+UX 記事ランキング

本日 月間