| Applet Viewer: BlackBox |
|---|
| Applet |
 |
| Applet started. |
アプレットとは、ホームページの中で動くJavaプログラムのことです。 Javaが急速に普及した理由の一つに、アプレットを使うと高機能のホームページが作成できることがあげられます。 なお、アプレットでないJavaプログラムは、スタンドアローン・アプリケーションとよばれます。
アプレットを動かすまでには、次のような手順をふみます。
今回の授業でも、プログラムの中身はあまり気にせず、この手順を理解する演習を行います。
まず、xemacsなどのエディタを起動して、次のプログラムを入力してください。
そして、前回作成した、この授業用のディレクトリ（java）の中に、ファイル名を BlackBox.java として保存してください。
ファイル名は、プログラム中の class の右にある名前（4行目）.java としなくてはいけません。
1: import java.applet.*; 2: import java.awt.*; 3: 4: public class BlackBox extends Applet { 5: public void paint(Graphics g) { 6: g.setColor(Color.black); 7: g.fillRect(50, 50, 100, 100); 8: } 9: }
次に、端末エミュレータを起動し、javacコマンドを使ってこのプログラムをコンパイルしてください。 ここまでの操作は、前回と同じです。
b00a001@Ampere:~% cd java b00a001@Ampere:~/java% ls BlackBox.java b00a001@Ampere:~/java% javac BlackBox.java b00a001@Ampere:~/java% ls BlackBox.class BlackBox.java b00a001@Ampere:~/java%
続いて、エディタを使って、次のタグを入力してください。 そして、この授業用のディレクトリの中に、ファイル名を BlackBox.html として保存してください。 これは、ホームページの作成に用いた言語HTMLの一部で、バイトコードのファイル名とアプレットの大きさを指定しています。
<applet code="BlackBox.class" width="300" height="200"> </applet>
端末エミュレータに戻り、appletviewerコマンドでこのHTMLファイルを表示してください。 ファイル名が BlackBox.html なので、appletviewer BlackBox.html & と入力します。
b00a001@Ampere:~/java% ls BlackBox.class BlackBox.html BlackBox.java b00a001@Ampere:~/java% appletviewer BlackBox.html & b00a001@Ampere:~/java%
次のようなウィンドウが開いたら成功です。 実は、このアプレットは、黒い正方形を描画するものでした。 なお、このウィンドウを閉じるには、AppletメニューのQuitを選択してください。
| Applet Viewer: BlackBox |
|---|
| Applet |
|
| Applet started. |
もしうまくいかないようでしたら、ファイル BlackBox.html が正しく書けているか、BlackBox.class が作られているか、BlackBox.java が正しく書けているかを確認してください。 アプレット・ビューアでファイルを再読み込みするには、AppletメニューのReloadを選択してください。
単に絵を描くだけでしたら、xpaintなどのお絵描きソフトを使ったほうが簡単です。 Javaを使って絵を描く利点の一つに、プログラムの計算結果をグラフィカルに表せることがあげられます。 今日は、絵を描くことを通じて、少しずつプログラミングになれることにします。
ここで、上記のプログラムの一部について説明します。
1: import java.applet.*; 2: import java.awt.*; 3: 4: public class BlackBox extends Applet { 5: public void paint(Graphics g) { 6: g.setColor(Color.black); 7: g.fillRect(50, 50, 100, 100); 8: } 9: }
6行目は、これから黒で描画せよという意味です。
色を切り替えるには、g.setColor(color); と書きます。
color の部分には、次のようなものが書けます。
Color.black,Color.blue,Color.cyan,Color.darkGray,Color.gray,Color.green,Color.lightGray,Color.magenda,Color.orange,Color.pink,Color.red,Color.white,Color.yellow
7行目は、左上が座標 (50, 50) であり、幅が100ピクセル、高さが100ピクセルである長方形（正方形）を塗りつぶせという意味です。 ここで注意が必要なのは、座標系が普通の数学と異なり、左上が原点で、y軸が下を向いていることです。
長方形だけでなく、楕円（円）や直線も描けます。 以下の例を見て理解してください。
g.drawLine(10, 20, 60, 120);g.drawRect(10, 20, 60, 120);g.fillRect(10, 20, 60, 120);g.drawOval(10, 20, 60, 120);g.fillOval(10, 20, 60, 120);
これらを用いたプログラムの例を示します。
新しいファイルにプログラムを保存しますので、class の右の名前は変えますが、他の部分はそのままです。
1: import java.applet.*; 2: import java.awt.*; 3: 4: public class RectAndOval extends Applet { 5: public void paint(Graphics g) { 6: g.setColor(Color.white); 7: g.fillRect(20, 10, 260, 180); 8: g.setColor(Color.blue); 9: g.drawRect(30, 50, 80, 40); 10: g.setColor(Color.black); 11: g.drawOval(30, 50, 80, 40); 12: g.drawLine(120, 20, 120, 180); 13: g.drawLine(270, 20, 30, 180); 14: g.fillRect(180, 90, 80, 80); 15: g.setColor(Color.yellow); 16: g.fillOval(180, 90, 80, 80); 17: } 18: }
<applet code="RectAndOval.class" width="300" height="200"> </applet>
ここで、プログラムの順番には意味があることに注意してください。 黄色い円の後に黒い正方形を描くと、円が見えなくなってしまいます。
アプレットとは、ホームページの中で動くJavaプログラムだと説明しました。 どのようにしてホームページに埋め込むのでしょうか。 実は、アプレット・ビューアで表示してきたHTMLファイルを、WWWブラウザで開けばよいのです。 Netscapeを起動し、ローカル・ファイル BlackBox.html を開いてください。 （「場所」入力欄に file:/home/b00a/b00a001/java/BlackBox.html などと入力しても開けます。）
| Netscape: |
|---|
| File Edit View Go Window Help |
|
| Applet BlackBox running |
ブラウザの背景色とアプレットの背景色が一緒なので分かりにくいのですが、アプレットが埋め込まれたホームページが表示されています。
アプレットだけのページでは、埋め込んだような気がしません。 ファイル BlackBox.html を編集して、他のタグも書きましょう。 確かにアプレットが埋め込まれています。
<html> <head> <title>Drawing</title> </head> <body style="background-color: white"> <h1>お絵描き</h1> <p>黒い正方形を描きました。</p> <div style="text-align: center"> <applet code="BlackBox.class" width="300" height="200"> </applet> </div> <p>みんな見てください。</p> </body> </html>
| Netscape: Drawing |
|---|
| File Edit View Go Window Help |
|
お絵描き 黒い正方形を描きました。
みんな見てください。 |
| Applet BlackBox running |
ブラウザは、アプレットを画像のように取り扱います。
すなわち、一つの（大きな）文字と見なしますので、前後の文と独立させたければ、<div>〜</div> などで囲んでください。
なお、<h1> など色々なタグが入ったHTMLファイルをアプレット・ビューアで開いても、今まで通りアプレットのみが表示されます。
アプレット・ビューアは、<applet> などごく少数のタグ以外はすべて無視します。
ここで、<applet> タグの属性についてまとめます。
code="filename"（必須）width="pixel"（必須）height="pixel"（必須）codebase="uri"注意1. 自分で作ったアプレットを公開するためには、ファイル（〜.class）をディレクトリ WWW の中にコピーする必要があります。
注意2. codebase 属性にはURL/URIが指定できますので、公開されている他人のアプレットを自分のホームページに埋め込むことができます。
ただし、画像と同様に、著作権には十分配慮してください。
例を参考にして、今日説明したことを使って、ある程度複雑なグラフィックスを描画するアプレットを作成してください。
ファイル名の約束（class の右の名前 .java）を忘れないようにしてください。
今日の演習2にしたがってJavaプログラムを作成し、konishi@twcu.ac.jpあてにメールでそのプログラムを提出してください。 xemacsの「ファイル挿入」機能を使って、ファイル（〜.java）の内容をメールに追加するとよいでしょう。 メールには、学生番号、氏名、科目名、授業の日付けを明記してください。