アプレット ( applet ) とは、ホームページの中で動くJavaプログラムのことです。 Javaが急速に普及した理由の一つに、アプレットを使うと高機能のホームページが作成できることがあげられます。 なお、アプレットでないJavaプログラムは、Java アプリケーション ( application ) とよばれます。
アプレットを動かすまでには、次のような手順をふみます。
今回の授業でも、プログラムの中身はあまり気にせず、この手順を理解する演習を行います。
まず、Jeditを起動して、次のプログラムを入力してください。
そして、前回作成した授業用ディレクトリcomp2bの中に、ファイル名をBlackBox.javaとして保存してください。
ファイル名は、「
class
の右の名前.java」としなくてはいけません(4行目)。
/* 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コマンドを使ってこのプログラムをコンパイルしてください。 ここまでの操作は、前回と同じです。
b04a001@AsiaA1:~% cd comp2b b04a001@AsiaA1:~/comp2b% ls BlackBox.java b04a001@AsiaA1:~/comp2b% javac BlackBox.java b04a001@AsiaA1:~/comp2b% ls BlackBox.class BlackBox.java b04a001@AsiaA1:~/comp2b%
続いて、Jeditを使って次のように appletタグ を入力します。
<applet code="BlackBox.class" width="300" height="200"> </applet>
これは、ホームページの作成に用いた言語HTMLの一部で、バイトコードのファイル名とアプレットの大きさを指定しています。
なお、Jeditのウィンドウを増やすには次のようにします。
入力が終わりましたら、授業用ディレクトリの中に、ファイル名をBlackBox.htmlとして保存してください。
最後に、「ターミナル」に戻り、 appletviewerコマンド でこのHTMLファイルを表示します。 ファイル名がBlackBox.htmlなので、 appletviewer BlackBox.html & と入力してください。
b04a001@AsiaA1:~/comp2b% ls BlackBox.class BlackBox.html BlackBox.java b04a001@AsiaA1:~/comp2b% appletviewer BlackBox.html & b04a001@AsiaA1:~/comp2b%
次のようなウィンドウが開いたら成功です。 実は、このアプレットは、黒い正方形を描画するものでした。
アプレットビューア: BlackBox.class |
---|
アプレットが開始されました。 |
このウィンドウを閉じるには、タイトルバーの赤ボタンをクリックしてください。
もしうまくいかないようでしたら、ファイルBlackBox.htmlが正しく書けているか、BlackBox.classが作られているか、BlackBox.javaが正しく書けているかを確認してください。 アプレット・ビューアでファイルを再読み込みするには、ウィンドウをクリックし、メニュー・バーで「アプレット」→「再読込み」とクリックしてください。 (情報処理センターのアプレット・ビューアではうまくいきません。 アプレット・ビューアをいったん閉じて、再び起動してください。)
単に絵を描くだけでしたら、gimpなどのペイント・ツールを使ったほうが簡単です。 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*/ }
最初の5行は、そのまま書くものと考えてください。
ただし、4行目の
class
の右はファイル名になります。
6行目は、これから黒で描画せよという意味です。
色を切り替えるには、
g.setColor(
color);
と書きます。
color
の部分には、次のようなものが書けます。
名前 | 色 | 例 |
---|---|---|
Color.black |
黒 | ■ |
Color.blue |
青 | ■ |
Color.cyan |
水色 | ■ |
Color.darkGray |
暗い灰色 | ■ |
Color.gray |
灰色 | ■ |
Color.green |
緑 | ■ |
Color.lightGray |
銀色 | ■ |
Color.magenta |
マゼンタ | ■ |
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
の右の名前を変えます(4行目)。
/* 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ファイルを、ウェブ・ブラウザで開けばよいのです。
この授業では、ウェブ・ブラウザとしてSafariを用います。 SafariでHTMLファイルを開くには、次のようにします。
BlackBox.html |
---|
アプレット BlackBox started |
ブラウザの背景色とアプレットの背景色が一緒なので分かりにくいのですが、アプレットが埋め込まれたホームページが表示されています。
アプレットだけのページでは、埋め込んだ気がしません。 ファイルBlackBox.htmlを編集して、他のタグも書きましょう。 確かにアプレットが埋め込まれています。
<html> <head> <title>お絵描き</title> </head> <body style="background-color: yellow"> <h1>お絵描き</h1> <p>黒い正方形を描きました。</p> <div style="text-align: center"> <applet code="BlackBox.class" width="300" height="200"> </applet> </div> <p>みんな見てください。</p> </body> </html>
お絵描き |
---|
お絵描き 黒い正方形を描きました。 みんな見てください。 |
アプレット BlackBox started |
ここで、文字化けした場合は、メニューバーで、「表示」→「テキストエンコーディング」→「日本語(Shift JIS)」とクリックしてください。
ブラウザは、アプレットを画像(イメージ)のように取り扱います。
すなわち、アプレットを一つの(大きな)文字と見なしますので、前後に改行を入れたければ、
<div>
〜
</div>
などで囲んでください。
Safariで再読み込みボタンをクリックしても、アプレットは更新されません。 アプレットを更新するには、Safariをいったん閉じて、再び起動してください。
なお、
<h1>
など色々なタグを追加したHTMLファイルをアプレット・ビューアで開いても、今まで通りアプレットのみが表示されます。
アプレット・ビューアは、
<applet>
などごく少数のタグ以外はすべて無視します。
ここで、
<applet>
タグの属性についてまとめます。
code="
filename"
(必須)width="
pixel"
(必須)height="
pixel"
(必須)codebase="
url"
注意1. 自分で作ったアプレットを公開するためには、バイトコード・ファイルをディレクトリWWWやWWW-localの中にコピーする必要があります。
注意2.
codebase
属性にはURLが指定できますので、公開されている他人のアプレットを自分のホームページに埋め込むことができます。
ただし、イメージと同様に、著作権などには十分配慮してください。
例を参考にして、今日説明したことを使って、グラフィックスを描画するアプレットを作成してください。
余力のある人は、グラフィックスを複雑にしてください。
ファイル名の約束(
class
の右の名前.java)に注意してください。
今日の演習2の答案(Javaプログラム)をメールで提出してください。 差出人は学内のメール・アドレス(b04a001@twcu.ac.jpなど)とし、宛先はkonishi@twcu.ac.jpとします。 メールの本文には、学生番号、氏名、科目名、授業日(4月20日)を明記してください。
なお、メールの本文にプログラムを挿入するには次のようにします。