アプレットⅠ

アプレットⅠ

ＪＶ① □ アプレット（アプレットの作成、コーディング、コンパイル、実行） □ アプレット（グラフィックス表示、文字の描画、グラフィックスの描画） □ アプレット（各種グラフィックスメソッド） 今回の課題項目 □ アプレット（アプレットの作成） □ アプレット（グラフィックス表示） □ アプレット（グラフィックスメソッド） 今回の重点項目

Java はオブジェクト指向型のプログラム言語で有る。Java では、C 言語やＰascal と謂う他のプログラム言 語同様に、数値計算やファイル操作を行なう事は勿論、絵や文字の描画、アニメーション、キーボードやマウ スでの操作等も行なう事が出来る。但し、Java の最大の特徴は、Java で作成したプログラム（アプレット） をホームページ上に置く事が出来る為、ホームページの表現能力を大きく飛躍する事が出来る点に有る。 ■ アプレットの仕組 ■ ■ アプレット（applet） アプレットとは、単独で動作する事は無く、他のアプリケーションの中に組み込まれた形で実行される 小さなプログラムを謂う。実質的には、WEB ブラウザ内に表示して実行するタイプのプログラムで有 る。Java 対応の Web ブラウザでは、アプレットを表示する為の専用タグをサポートして居り、HTML のタグを記述する丈で簡単にアプレットを呼び出す事が出来る。 アプレットは、今迄に作成したアプリケーションとは異なる構造を仕て居り、アプリケーションを其の 儘 HTML のタグから呼び出しても、アプレットと仕て動かす事は出来ない。アプレットと仕て使用す るプログラムは、アプレットと仕ての利用に必要な機能を備えて居なければ成らない。

Java には、其の為の専用クラス java.applet.Applet が用意されて居る。Applet クラスは、WEB ペー ジに埋め込まれるアプレット、又は、Java アプレットビューアで表示されるアプレットのスーパーク ラスで有り、アプレットと其の環境との間の標準インタフェースの役割を果たす。此のクラスを継承し てクラス定義をすれば、其れが自動的にアプレットと仕て認識される様に成る。 ■ アプレットのプログラム形式 アプレットのプログラムは、下記の様な形を仕て居る。但し、Applet クラスで定義されて居る下記の総 てのメソッドを記述する必要は無く、必要なメソッド丈をオーバーライドすれば良い。 import java.applet.Applet; import java.awt.*;

public class クラス名 extends Applet {

public void init() { 【 ア プ レ ッ ト の ロ ー ド 時 に 実 行 】 } public void start() { 【 ア プ レ ッ ト の 開 始 時 に 実 行 】 } public void stop() { 【 ア プ レ ッ ト の 停 止 時 に 実 行 】 } public void destroy() { 【アプレットのアンロード時に実行】 } public void paint() { 【 ア プ レ ッ ト の 表 示 で 実 行 】 } } アプレット用のソースコードは、Applet クラスの継承と仕て作成する為、ファイルの冒頭で import す る必要が有る。亦、継承なので、アプレットのクラスはextends Applet で有る事が必要で有る。更に、 アプレットのクラスは、ブラウザに依りインスタンス化されて実行される為、外部から参照可能と謂う 意味でpublic 修飾子が付けられて居る事が必要で有る。

ア

ア

プ

プ

レ

レ

ッ

ッ

ト

ト

■ アプレットの作成 ■ ■ コーディング（coding）

下記のコードを、テキストエディタで入力し、HelloWorld.java と謂うファイル名で保存する。 import java.applet.Applet;

import java.awt.Graphics;

public class HelloWorld extends Applet {

public void paint(Graphics g) { g.drawString("Hello World!", 10, 10); } } ▼ paint メソッドは、アプレットを描画する為のメソッドで有る。paint メソッドの引数では、アプレ ットの描画の対象と成るオブジェクトで有る Graphics クラスのインスタンスが渡されて来る。此 のインスタンスは描画領域、色、フォント等、描画に関する様々な情報を管理して居る。

Graphics クラスは、Java のグラフィカルユーザインタフェース（GUI）を提供するパッケージ java.awt（Abstract Window Toolkit）で定義されて居り、Java では、殆どのグラフィック系（文 字、画像の表示）にGraphics クラスを使用する。猶、アプレット自身も、GUI コンポーネントで 有る。 ▼ 猶、文字を表示するのに drawString メソッドを使用して居る。此れは、画面に文字を描画するメ ソッドで、Graphics クラスで定義されて居る。 ■ コンパイル（compile） プログラムの記述が終了すれば、コンパイルを行う。記述等に間違いが無ければ、『クラス名.class』と 謂うファイルが作成される（上記では、HelloWorld.class）。 ■ 実行（execute） 作成したアプレットを、WEB ブラウザで実行し、表示するには、HTML ファイルで、アプレットを表 示する場所に、下記の様に、APPLET タグを使用して記述する。猶、width と height には、表示する アプレットのサイズを指定する。

<APPLET CODE="プログラム名" WIDTH="width" HEIGHT="height"></APPLET>

例として、上記のプログラムをコンパイルして作成されたHelloWorld.class の場合は、其れを表示させ たい場所に下記の様に記述する。

<APPLET CODE="HelloWorld.class" WIDTH="300" HEIGHT="200"></APPLET>

此れで、指定の場所にHelloWorld が表示される。上記の例では、横 300、縦 200 の領域をアプレット 用に確保して居る。此の領域は背景が表示されないので、背景画や背景色を設定して居る場合、其の大 きさを確認する事が出来る。猶、領域外に文字を書いても画面には表示されない。

■ グラフィック表示 ■ ■ 文字の描画 下記のコードを、テキストエディタで入力し、HelloWorld2.java と謂うファイル名で保存した後、コン パイルして、HTML ファイルから呼び出し、ブラウザで表示する。 import java.applet.Applet; import java.awt.Graphics; import java.awt.Font; import java.awt.Color;

public class HelloWorld2 extends Applet {

public void paint(Graphics g) {

g.drawString("Hello World!", 10, 10);

// TimesRoman と言うフォントの通常フォントで、大きさが１８ドットの文字を指定 g.setFont(new Font("TimesRoman", Font.PLAIN, 18));

g.drawString("Hello World!", 10, 40);

// TimesRoman と言うフォントの通常フォントで、大きさが３６ドットの文字を指定 g.setFont(new Font("TimesRoman", Font.PLAIN, 36));

g.drawString("Hello World!", 10, 70);

// イタリック体の文字を書く

g.setFont(new Font("TimesRoman", Font.ITALIC, 36)); g.drawString("Hello World!", 10, 110);

// 太文字で書く

g.setFont(new Font("TimesRoman", Font.BOLD, 36)); g.drawString("Hello World!", 10, 150);

// 色を赤に変更して文字を書く g.setColor(Color.red);

g.setFont(new Font("TimesRoman", Font.PLAIN, 36)); g.drawString("Hello World!", 10, 200); } } ▼ 此処では、Graphics クラスで定義された下記のメソッドを使用して居る。 drawString() 文字を書くメソッド setFont() 文字の大きさや書体を変えるメソッド setColor() 文字の色を変えるメソッド 亦、定数と仕て最初から用意されて居る色は、下記の１３色で有る。 black、blue、cyan、darkGray、gray、green、lightGray、magenta、orange、pink、red、white、yellow

■ グラフィックスの描画 下記のコードを、テキストエディタで入力し、Draw.java と謂うファイル名で保存した後、コンパイル して、HTML ファイルから呼び出し、ブラウザで表示する。 import java.applet.Applet; import java.awt.Graphics; import java.awt.Color; import java.awt.Font; import java.awt.Image;

public class Draw extends Applet {

public void paint(Graphics g) { g.setColor(Color.black); // (10,10)-(10+50,10+50)を対角とする g.drawRect(10, 10, 50, 50); // 四角形を黒色で描く g.setColor(Color.red); // (70,10)-(120,60)の領域を g.fillRect(70, 10, 50, 50); // 赤で塗る g.drawLine(130, 10, 170, 60); // (130,10)-(170,60)の線を書く（色は前の設定で赤） g.setColor(Color.green); // (190,10)-(240,60)に g.drawArc(190, 10, 50, 50, 0, 360); // 内接する円(楕円)を、0 度から 360 度分描く g.setColor(Color.blue); // 角度 90 度の位置から g.fillArc(250, 10, 50, 50, 90, 180); // 180 度分(半円)を塗り潰す g.setColor(Color.lightGray); // ボタン風の塗り潰し g.fill3DRect(310, 10, 50, 50, true); // 押される前 g.fill3DRect(370, 10, 50, 50, false); // 押された後 g.setColor(new Color(127, 127, 255)); // 斯うすれば RGB で色を指定する事が出来る g.fillRoundRect(10, 90, 80, 50, 10, 10); // 角の丸い四角 g.setColor(new Color(160, 82, 45)); int xPoint[] = {150, 200, 180, 120, 100}; int yPoint[] = {90, 110, 140, 140, 110}; // (150, 90)-(200,110)-(180,140)-(120,140)-(100,110)で g.fillPolygon(xPoint, yPoint, 5); // 囲まれた領域を塗り潰す // squid.gif と言う画像ファイルを読み込み (250, 90) に表示

g.drawImage(getImage(getDocumentBase(), "squid.gif"), 250, 90, this); } } ▼ 画像ファイルは、サーバから画像を取得するメソッドと表示するメソッドの２個が必要で有るが、 取り敢えずはソースコードの様に１個の命令の様に使用する事が出来る。猶、アプレットに読み込 める画像形式はGIF と JPEG で有る。 ▼ paint メソッドは、画面の描き換えが必要な時、即ち、Java の有るサイトへアクセスした時やアイ コン化状態から元に戻した時等に、自動的に呼び出されるメソッドで有る。其の為、、態々、コード の中でpaint メソッドを呼び出す必要が無い。

■ Graphics メソッド一覧 ■ 描画用のGraphics メソッドを、下記に示す。此等のメソッドは、java.awt.Graphics パッケージで、定 義されて居る。猶、使用例中のg は、Graphics クラスのオブジェクトを示す。 setFont 書式 setFont(Font font) 解説 表示する文字のフォントをfont に切替える。 Font クラスのオブジェクト font は別で用意する必要が有る。 使用例 g.setFont(new Font("TimesRoman", Font.PLAIN, 18));

// "TimesRoman"の通常フォントで 18dot のサイズを設定する。 // 通常は上記の様に Font クラスのコンストラクタと組み合わせて使用する。 補足 Font クラスのコンストラクタの第２引数で使用出来る物は、Font.PLAIN 通常、 Font.ITALIC イタリック体、Font.BOLD 太字の３種丈で有る。 setColor 書式 setColor(Color c) 解説 表示する色をc に切替える。 Color クラスのオブジェクト c は別で用意する必要が有る。 使用例 g.setColor(Color.red); // 赤に設定する。 g.setColor(new Color(100, 130, 34)); // R = 100, G = 130, B = 34 の抹茶色。 // 既定色以外は、Color クラスのコンストラクタを使用して RGB で指定する。 補足 既 定 色 は Color.white 、 Color.lightgray 、 Color.gray 、 Color.darkGray 、

Color.black、Color.red、Color.pink、Color.orange、Color.yellow、Color.green、 Color.magenta、Color.cyan、Color.blue で有る。

drawString 書式 drawString(String str, int x, int y)

解説 x、y の位置に文字列 str を表示する。 表示するフォント、及び、色はsetFont、setColor で設定する。 使用例 g.drawString("Hello World!", 100, 100); // (100,100)の位置に Hello World!と表示する。 補足 漢字に付いては、Unicode で漢字を書けば表示する事が出来る。 但し、Unicode で記述しなくても表示出来る場合も有る。 drawLine

書式 drawLine(int x1, int y1, int x2, int y2) 解説 (x1 ,y1)から(x2, y2)に線を引く。

色はsetColor で設定する。

使用例 g.drawLine(100, 50, 130, 200);// (100, 50) - (130, 200) に線を引く drawPolygon/fillPolygon

書式 drawPolygon(int xPoints[], int yPoints[], int nPoints) fillPolygon(int xPoints[], int yPoints[], int nPoints)

解説 x 座標の配列 xPoints と y 座標の配列 yPoints で指定された点を結ぶ閉じた多角 形を描く。nPoints には、点の総数を指定する。

drawRect/fillRect 書式 drawRect(int x, int y, int width, int height)

fillRect(int x, int y, int width, int height) 解説 (x, y)に width×height の大きさの四角を描く。 fillRect は塗り潰し。 色はsetColor で設定する。 使用例 g.drawRect(50, 0, 100, 200); // (50, 0) - (50 + 100, 0 + 200) を対角線とする四角を描く。 補足 左上座標と右下座標を指定するのでは無い事に注意。 drawArc/fillArc

書式 drawArc(int x, int y, int width, int height, int startAngle int endAngle) fillArc(int x, int y, int width, int height, int startAngle, int endAngle) 解説 座標(x, y)に有る大きさ width×height の四角に内接する円弧を描く。 x の正の方向から startAngle の角度から endAngle 迄の弧を描く。 fillArc は塗り潰し。 色はsetColor で設定する。 使用例 g.drawRect(50, 0, 100, 200);// (50, 0) - (50 + 100, 0 + 200) を対角線とする四角 を描く。 g.drawArc(0, 0, 100, 100, 0, 360);// 中心(50, 50) 半径 50 の円を描く。 補足 startAngle,endAngle の単位は度。 startAngle,endAngle には負の値も使える。 draw3Drect/fill3Drect

書式 draw3DRect(int x, int y, int width, int height, boolean raised) 解説 座標(x, y)に width×height の大きさの四角を描く。

fillRect と違い、立体的な四角を描く。raised が true の時は飛び出して居る四 角、false なら凹んで居る四角に成る。色は setColor で設定する。

使用例 g.fill3DRect(50, 0, 100, 200, true);// (50, 0) - (50 + 100, 0 + 200) を対角線とす る四角を描く。

drawRoundRect/fillRoundRect

書式 drawRoundRect(int x, int y, int width, int height, int arcWidth int arcHeight) fillRoundRect(int x, int y, int width, int height, int arcWidth int arcHeight)

解説 角の丸い四角を描く。色はsetColor で設定する。

使用例 g.drawRoundRect(50, 0, 100, 200, 10, 200); drawOval/fillOval 書式 drawOval(int x, int y, int width, int height)

fillOval(int x, int y, int width, int height)

解説 座標(x, y)に有る大きさ width×height の四角に内接する円弧を描く。 fillOval は塗り潰し。

色はsetColor で設定する。

使用例 g.drawOval(0, 0, 100, 100);// 中心(50, 50) 半径 50 の円を描く。 drawPolyline

書式 drawPolyline(int xPoints[], int yPoints[], int nPoints)

解説 x 座標の配列 xPoints と y 座標の配列 yPoints で指定された点を結ぶ連続した直 線を描く。nPoints には、点の総数を指定する。

補足 始点と終点が一致しない場合は、図形は閉じない。

drawImage

書式 drawImage(Image img, int x, int y, ImageObserver observer)

解説 座標(x, y)に img で指定されたイメージを描く。observer には、イメージを描画 するプロセスを通知するオブジェクトを指定する。

補足 イメージ内の透明ピクセルは、背景に影響を及ぼさない。

猶、drawImage メソッドで指定するイメージ img は、java.applet パッケージの Applet クラスで定義 されて居るgetImage メソッドを使用して取得する。getImage メソッドの書式は、下記の通りで有る。

getImage(URL url, String name) // 記述例：getImage(getDocumentBase(), "squid.gif") url ：イメージのベース位置を示す絶対 URL（アプレットが存在する URL）

name ：イメージの位置（引数 url との相対位置で指定する→ファイル名）

亦、getImage メソッドで指定する url は、java.applet パッケージの Applet クラスで定義されて居る getDocumentBase メソッドを使用して取得する。此のメソッドには、引数は無く、当該アプレットが 組み込まれて居るドキュメント（HTML ファイル）の URL を戻り値に返す。

■ パラメータの設定 ■ ■ パラメータ（parameter）とは Java では、UNIX のコマンドのコマンド引数の様に、パラメータを指定する事に依り、プログラムを 制御する事が出来る。パラメータの指定は、パラメータ１＝値１、パラメータ２＝値２、…と謂う様に 変数に値を代入してから、アプレットを呼び出すイメージで有る。 ■ パラメータ設定の方法 パラメータの設定は、HTML で、アプレットを呼び出す時に行う。通常、何もパラメータを設定しない 時は、アプレットの呼び出しは、前述した様に、下記の様に記述する。

<APPLET CODE="プログラム名" WIDTH="width" HEIGHT="height"></APPLET> width ：アプレットを表示する領域の幅

height ：アプレットを表示する領域の高さ

プログラム名.class を『パラメータ１＝値１、パラメータ２＝値２』と謂う２個のパラメータを指定し て呼び出す場合、下記の様にHTML を記述する。

<APPLET CODE="プログラム名.class" WIDTH="width" HEIGHT="height"> <PARAM NAME="パラメータ１" VALUE＝"値１">

<PARAM NAME="パラメータ２" VALUE＝"値２"> </APPLET> 猶、パラメータは、必要な丈、幾つでも指定する事が出来る。 ■ パラメータ制御の出来るアプレットの作成 パラメータの値を取得するメソッドは、getParameter メソッドで有る。getParameter メソッドは、 java.applet パッケージの Applet クラスで定義されて居り、書式は、下記の通りで有る。 変数１ = getParameter ( "パラメータ１" ); 上記の様に記述すると、HTML で指定された『パラメータ１の中身（＝値１）』が『変数１』に代入さ れる（此の時、パラメータの名前は、大文字と小文字は区別されるので注意が必要で有る）。 亦、getParameter メソッドで取得される値は文字列で有る。若し、数字をパラメータに設定したい場 合は、文字列を数字に変換する必要が有る。文字列の数値変換には、int 型の場合は、java.lang パッケ ージのInteger クラスで定義されて居る parseInt メソッドを使用する。 i= Integer.parseInt("123"); 上記の様に記述すると、変数 i に整数 123 が代入される。猶、勿論、パラメータのデータ型に応じて Long や Float や Double 等のクラスのメソッドを使用して、文字列を数値に変換する。

下記のコードを、テキストエディタで入力し、HelloWorld3.java と謂うファイル名で保存した後、コン パイルして、実行する。

パラメータMessage で表示する文字列を、パラメータ Color で描画色を、パラメータ Location で x 座標を指

定する事が出来る。猶、パラメータを指定しない場合は、夫々れの規定値が使用される。亦、パラメータColor で指定出来る色は、赤、青、緑、黄色の４色で、各々、Red、Blue、Green、Yellow と、文字列定数で指定す る。 import java.applet.Applet; import java.awt.Graphics; import java.awt.Font; import java.awt.Color;

public class HelloWorld3 extends Applet {

String message = null; // パラメータ変数 String colorName = null; // パラメータ変数 String location = null; // パラメータ変数 Color textColor; // 色を表す変数 int xLocation; // 位置を表す変数

// 此の関数はアプレットが最初に画面に現れた時に、１回丈自動で呼ばれる。 public void init()

{

message = getParameter("Message"); // パラメータ Message の値が代入される if (message == null) // パラメータが無い時の処理

message = "Hello World!";

colorName = getParameter("Color"); // パラメータ Color の値が代入される if (colorName == null) // パラメータが無い時の処理

textColor = Color.black;

else if (colorName.equals("Red")) // 文字列の比較は斯う記述する

textColor = Color.red; // 但し colorName が null の時はエラーが発生 else if (colorName.equals("Blue")) textColor = Color.blue; else if (colorName.equals("Green")) textColor = Color.green; else if (colorName.equals("Yellow")) textColor = Color.yellow; else textColor = Color.black; // 定義外の色を指定した時用 location = getParameter("Location"); if (location != null) xLocation = Integer.parseInt(location); // 文字列を数値に変更 else xLocation = 10; }

public void paint(Graphics g) {

g.setFont(new Font("TimesRoman", Font.PLAIN, 36)); g.setColor(textColor); // 色の設定 g.drawString(message, xLocation, 40);

} }

■ 文字列の描画 ■

下記のコードを、テキストエディタで入力し、DrawString.java と謂うファイル名で保存した後、コン パイルして、HTML ファイルから呼び出し、ブラウザで表示する。

import java.applet.*; import java.awt.*;

public class DrawString extends Applet {

Font textFont;

String message="King of Squid"; String fontname="TimesRoman"; Color textcolor; Color bgcolor; Image g2; Graphics OffG; int ms_width; int h_size; int font_size=20; public void init() {

Dimension d = size();

g2 = createImage( d.width, d.height); OffG = g2.getGraphics();

textFont = new Font( fontname, Font.PLAIN, font_size ); textcolor = Color.red;

bgcolor = Color.black;

ms_width = getFontMetrics( textFont ).stringWidth( message); h_size = (int)(((d.height-font_size) /2)+ font_size -5);

}

public void paint( Graphics g ) {

OffG.setColor( bgcolor );

OffG.fillRect( 0, 0, size().width, size().height); OffG.setFont( textFont );

OffG.setColor( textcolor );

OffG.drawString( message, (size().width-ms_width)/2, h_size ); g.drawImage( g2, 0, 0, null);

}

public void update( Graphics g ) { paint(g); } }

演

演

習

習

▼ Dimension d = size( );

HTML から受け取るアプレットの画面サイズを取得する。

▼ g2 = createImage( d.width, d.height);

OffG = g2.getGraphics( );

描画画面と仮想描画画面を生成する。仮想画面に描画した後、其れを描画画面にコピーする方法を 採れば、文字を動かした時等に発生するチラツキを無くす事が出来る。

▼ ms_width = getFontMetrics( textFont ).stringWidth( message);

フォントに依り文字幅が違う為、此の様に文字列の幅を計算する。但し、此の方法は文字幅を個別 に計算して居る訳では無い

▼ h_size = (int)(((d.height-font_size) /2)+ font_size -5);

文字列のy 軸位置の算出する。

▼ g.drawImage( g2, 0, 0, null);

仮想画面から、アプレットの描画画面にコピーする。

▼ public void update( Graphics g )

Window が隠れたり、サイズが変更された時に此のメソッドが呼び出される。 ■ 自動的に呼び出されるメソッド ■ ■ init メソッド init メソッドは、アプレットが読み込まれた時に１度丈、自動的に呼び出される。其の為、此処で、 パラメータの読み込みや変数の初期化等を行う事が多い。 ■ paint メソッド paint メソッドは、画面の描き換えが必要な時（Java の有るサイトへアクセスした時やアイコン化 して居たのを元に戻した時等）に、自動的に呼び出される。画像を描く命令をpaint メソッドの中 に記述する丈で、プログラムでpaint メソッドを呼び出す必要は無い。其の為、メソッド名を他の 名前に変えて仕舞う事は出来ない。 ■ repaint メソッド

repaint メソッドは、最初 update メソッドを探しに行き、update メソッドが見付かれば update メソッドを、見付からなければ画面をクリアしてから、paint メソッドを呼び出す（此の説明は正 確では無いが、此の様な動作を行うと考えると良い）。