Open Laszloを使って作るリッチクライアント（2）
Open Laszloで日本語を表示してみよう


 浅野守
2005/4/28
本連載ではオープンソースのリッチクライアント製品として最近急速に注目を集めつつある「Laszlo」を解説している。Laszloはサーバサイドで生成したコンテンツをFlashとしてクライアントのWebブラウザに配信するもので、Macromedia社のFlexと非常によく似たアーキテクチャを採用。前回「オープンソースのリッチクライアントを使おう」の記事でインストールができた読者はさっそく日本語化してみよう。

■9 日本語でハローワールド

　「Reset」ボタンをクリックしてソースコードをオリジナルに戻します。次に、「Hello World」を「ハローワールド」と変更して日本語を入力し「Update」ボタンをクリックします。しかしLaszloアプリケーション の結果は文字化けしてしまいます。

　ロードマップによれば、Laszloプレゼンテーションサーバは3.0b1からUnicodeを扱えるようになっており、日本語に対応しています。LaszloExplorerも以下のようにJSPファイルを変更するだけで、Unicodeを扱えるようになります。

  • C:\Program Files\Laszlo Presentation Server 3.0b2\Server
    \lps-3.0b2\Laszlo-explorer\ source.jspをエディタで開きます。

  • 先頭XMLコメント行の次（「<%@ page import="Java.util.ArrayList,」行の手前）に以下の1行を追加します（各「」内は1行）。
    「<%@ page contentType="text/html; charset=UTF-8" %>」

  • 「String src = request.getParameter("src");」行の手前に以下の1行を追加します（各「」内は1行）。
    「request.setCharacterEncoding("UTF-8");」

  • 「BufferedWriter writer = new BufferedWriter(new FileWriter(tempFile));」行をコメントアウトし以下の3行を追加します（各「」内は1行）。
    「FileOutputStream fos = new FileOutputStream(tempFilePath);」
    「OutputStreamWriter osw = new OutputStreamWriter(fos, "UTF-8");」
    「BufferedWriter writer = new BufferedWriter(osw);」

  • 「response.addHeader("Content-Type","application/octet-strem");」行をコメントアウトして以下の1行を追加します（各「」内は1行）。
    「response.setContentType("application/octet-stream; charset=UTF-8");」

  • 「File file = new File(temp?tempFilePath:application.getRealPath(src));」と「BufferedReader reader = new BufferedReader(new FileReader(file));」の2行をコメントアウトして以下の3行を追加します（各「」内は1行）。
    「FileInputStream fis = new FileInputStream(temp?tempFilePath:application.getRealPath(src));」
    「InputStreamReader isr = new InputStreamReader(fis, "UTF-8");」
    「BufferedReader reader = new BufferedReader(isr);」


　修正が終わったら「Reset」ボタンをクリックしてソースコードをオリジナルに戻します。次に、「Hello World」を「ハローワールド」と変更して日本語を入力し「Update」ボタンをクリックします。これで「ハローワールド」が表示されるはずです（画面1）。

画面1　日本語が表示できた

　「Laszloin 10 Minutes」では、「Hello World」から始まってLaszloアプリケーションの機能を一通り説明しているので、ぜひ試してください。

■ Laszloプログラミングアーキテクチャー
　・ 開発ツール

　Laszloプレゼンテーションサーバ3.0b2向けの開発環境としては、テキストエディタかXMLエディタを使用します。また、後述するEclipseベースのIDE環境については、IBM社より提供されており、これを用いることも可能です。

　コーディングしたソースファイルを「C:\Program Files\Laszlo Presentation Server 3.0b2\Server\lps-3.0b2\my-apps」に保存するとその実行結果を http://localhost:8080/lps-3.0b2/my-apps/ソースファイルで確認することができます。

　試しに上記のソースコードを、メモ帳などのテキストエディタにコピー＆ペーストして、文字コードをUTF-8にし、test.lzx というファイル名保存してください。

　ブラウザでhttp://localhost:8080/lps-3.0b2/my-apps/test.lzxにアクセスするとアプリケーションの実行結果が表示されるはずです。

　・ LZX

　LZXはLaszloアプリケーションを記述するXMLとJavaScriptをベースとしたオブジェクト指向の言語です。

　LZXの組み込みオブジェクト、メソッド、プロパティやクラスは、XMLエレメントとして記述され（緑色部分）、処理ロジックはJavaScriptを使用して記述されます（黄色部分）。

<canvas width="200">
    <button onclick="vw.toggleSize()" text="Toggle Size" />
    <view id="vw" y="30" width="100" height="200" bgcolor="blue" >
       <method name="toggleSize">
         if ( width == 100 ) {
           this.setWidth(200); this.setHeight(100); }
         else {
           this.setWidth(100); this.setHeight(200); }
      </method>
    </view>
</canvas>

　・ イベント処理

　LZXでは、イベントのコールバックルーチンをmethodエレメントで記述できます（黄色部分）
＜リスト1＞

<canvas width="200">
    <!-- setWidth メソッドは onwidth イベントを発生させる。-->
    <button onclick="vw.setWidth(200)"
         text="Expand Width" />

    <view id="vw" bgcolor="blue"
            y="30" width="100" height="100" >

       <!-- width が変更されると onwidth イベントが発生する -->
       <!-- onwidth のイベントハンドラーを定義する-->
       <method event="onwidth" >
           this.setBGcolor(0xFF0000)
       </method>
      
    </view>
</canvas>


　ここまでで日本語表示ができただろうか。次回からは、Lazsloのコンポーネントやデータバイニング、さらにはEclipseを使用した開発までを追いたい。最終的には、Laszloを使ってAmazonのWebサービスのフロントエンドの作成までを行う予定だ。





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

注目のテーマ

HTML5＋UX 記事ランキング

本日 月間
＠IT