礒山　賢司

今回のサンプル・プログラムのダウンロードはこちら

　前回は，iアプリのメイン・クラスである「IApplicationクラス」について解説しました。今回のテーマはもう少し実践的な内容で，操作するユーザーとの接点でもある「描画」について解説していきたいと思います。

　iアプリでは，「高レベル描画」と「低レベル描画」という，2種類の描画手段を提供しています。それぞれの違いについて簡単に言うと，高レベル描画は，iアプリのJava環境があらかじめ提供する描画用コンポーネント（ソフトウエア部品）を使って，UI（ユーザー・インタフェース）を作成する描画手段です。開発者が携帯電話の描画の仕組みを知らなくても，コンポーネントを使うだけで簡単に画面を作成できるのが特徴です。

　一方の低レベル描画は，「イメージの描画」「ドットの描画」など，グラフィック描画機能を多用するアプリケーション，例えばゲームなどを作成するときに用いる描画手段です。高レベル描画では実現できないような細かいグラフィックの描画が可能ですが，使いこなすためには携帯電話の描画の仕組みを知らなくてはならないため，高レベル描画よりも難しいプログラミングが必要となります。

●高レベル描画

　まずは，高レベル描画について解説しましょう。iアプリでは，「Button」「ImageLabel」「Label」「ListBox」「TextBox」「Ticker」「VisualPresenter」の7つのUIコンポーネントを用意しています。それぞれのコンポーネントの機能については，表1を参照してください。

クラス機能
LabelPanel上に1行のテキストを表示する
ImageLabelPanel上に画像を表示する
Buttonボタンを表現するコンポーネントで，ユーザー操作を受け付けるためのインタフェースInterractableを実装している
ListBox各種選択リストを表現するためのコンポーネントで，ユーザー操作を受け付けるためのインタフェースInterractableを実装している
TextBox入力フィールドを表現するためのコンポーネントで，ユーザー操作を受け付けるためのインタフェースInterractableを実装している
Tickerスクロールする文字列をPanel上に表示する
VisualPresenter動画像を再生するためのコンポーネントで，MediaPresenterを実装している
表1●iアプリJavaで提供されているUIコンポーネント

　これらのUIコンポーネントをPanelクラスというコンポーネントの上に配置し，GUIを形成します。Panelクラスのように，ほかの部品を配置する土台となるクラスを「コンテナ・クラス」と言います。

●Panelクラス

　iアプリを開発する時にいつも頭を悩ますのが，「どのようにコンポーネントを配置するか」ということです。

　iアプリのJava環境では「レイアウト・マネジャ」という機能により，配置するコンポーネントの大きさ（Labelクラスなどを使う場合は，そこに表示される内容の長さも考慮する）に合わせ，画面の左上から順次横並びに自動的にコンポーネントが配置されます。画面の横幅で収まらない大きさの場合は，次のコンポーネントは配置できる1行下の位置に配置される。このレイアウト・マネジャを使ってプログラミングしたのがリスト2です。1行目に表示されている「List2」は「タイトル」と呼び，Panelクラスが持つレイアウトの要素の一つです。

　一方，

setLayoutManager( null );

のように，レイアウト・マネジャを無効にして，setLocationで個々のコンポーネントの座標を指定することで，アプリケーション開発者がPanel上に配置するコンポーネントを決定することもできます。リスト3は，そのサンプルです。リスト2と比較してみてください。

　ちなみに，レイアウト・マネジャを無効化して，コンポーネントを再配置しなければどうなるでしょう。リスト4で作成したプログラムで試してみてください。

　レイアウト・マネジャは便利なコンポーネントですが，落とし穴もあります。それは，携帯端末機ごとに画面のサイズなどが異なっているため，コンポーネントの配置も機種ごとに異なってしまう，ということです。このことも考慮しておかなければなりません。

●Dialogクラス

図1●Windowsのダイアログ
　Panel以外にも，高レベル描画を利用するコンポーネントがあります。それがDialogクラスです。Windowsのアプリケーションでもおなじみの，ユーザーに警告や注意を示したり，何かを選択させる時に使用するウィンドウです（図1[拡大表示]）。

　Dialogクラスが表示できるボタンの形態や，ダイアログの種類については表2を参照してください。

形態エラー・ダイアログDIALOG_ERROR
情報ダイアログDIALOG_INFO
警告ダイアログDIALOG_WARNING
2つボタンDIALOG_YESNO
3つボタンDIALOG_YESNOCANCEL
ボタン・タイプOKボタンDIALOG_OK
キャンセル・ボタンDIALOG_CANCEL
NOボタンDIALOG_NO
YESボタンDIALOG_YES
表2●Dialogクラスの機能
　リスト5は，アプリケーション・クラスであるIApplicationクラスから、直接Dialogクラスのインスタンスを生成しています。普通は，このような使い方はすることはないのですが，説明を簡略化するためにあえてこのようなサンプルを作成してみました。

●低レベル描画

　低レベル描画では，Canvasクラスを使って描画をします。Canvasクラスは，絵をかく「キャンバス」と同じように，描画するための画面領域を提供します。1つのCanvasが1つの画面に相当します。Canvasクラスは，必ずpaint( )メソッドを使い，paint( )メソッドに渡すGraphicsオブジェクトを利用して，Canvasに描画します。

　リスト6は，Canvasオブジェクトを利用してイメージ（GIF形式）や，テキストを描画するサンプルです。このプログラムでは，実装の自由度を持たせるため，イメージを取得するためにリソース・アクセスを利用していますが，この辺りの内容については次回以降で解説しますので，今は「このようなことができるのだ」程度に覚えておいてください。

●CanvasクラスとGraphicsクラス

　Canvasクラスにはpaint( )メソッドが不可欠です。paint( )メソッドに渡されるGraphicsオブジェクト（Graphicsクラスのインスタンス）を利用して，Canvasに描画するからです。

　これらのクラスを利用することで，ドット単位の塗りつぶしはもちろんのこと，イメージ・文字の描画が自由自在にできます。また，コンポーネントを使った描画よりも動作も軽くなります。また、次回で解説する「イベント」と組み合わせて利用することにより，簡単にゲームなどが作成できます。

　例えば、次回に解説する「イベント」と組み合わせることで，「キーを押すとイメージがスクロールする（「２」が上，「８」が下，「４」が左，「６」が右）」といったサンプル（リスト7）が作成できます。

　iアプリでの描画は，PC上で稼働するJavaアプリケーションと比べて多くの部分で機能が削減されていますが，必要最小限の機能はそろっていると言えます。PCのJavaアプリケーションでは，基本的にInternet ExplorerとNetscapeの2つのWebブラウザでの描画を考えれば事足りますが，携帯電話の場合は，次々と登場してくる機種の表示領域に合わせてカスタマイズする必要があり，この辺りが開発者の頭を悩ます種になります。

　アプリケーションは多くの場合，ボタンを押すなどのユーザーのアクションを受け，何らかの応答をしなければなりません。次回は，その時に必要となる「イベント」について解説します。