情報処理IIIA（Javaプログラミング入門）第2回

2.1 アプレットの動かし方

2.1.1 全体の手順

アプレット （ applet ） とは、ホームページの中で動くJavaプログラムのことです。 Javaが急速に普及した理由の一つに、アプレットを使うと高機能のホームページが作成できることがあげられます。 なお、アプレットでないJavaプログラムは、Java アプリケーション （ application ） とよばれます。

アプレットを動かすまでには、次のような手順をふみます。

1. エディタ（Jeditなど）を用いてプログラムを入力し、ファイルに保存する。
2. Javaコンパイラ（javac）を用いてプログラムからバイトコードを生成する。
3. エディタを用いてappletタグを入力し、ファイルに保存する。
4. アプレット・ビューア （appletviewer）を用いてアプレットを表示する。

今回の授業でも、プログラムの中身はあまり気にせず、この手順を理解する演習を行います。

2.1.2 アプレットの例

まず、Jeditを起動して、次のプログラムを入力してください。 そして、前回作成した授業用ディレクトリ（java）の中に、ファイル名を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コマンドを使ってこのプログラムをコンパイルしてください。 ここまでの操作は、前回と同じです。

b00a001@AsiaA1:~/java% ls
BlackBox.java
b00a001@AsiaA1:~/java% javac BlackBox.java
b00a001@AsiaA1:~/java% ls
BlackBox.class   BlackBox.java
b00a001@AsiaA1:~/java%

続いて、Jeditを使って次のように appletタグ を入力します。

<applet code="BlackBox.class" width="300" height="200">
</applet>

これは、ホームページの作成に用いた言語HTMLの一部で、バイトコードのファイル名とアプレットの大きさを指定しています。

なお、Jeditのウィンドウを増やすには次のようにします。

1. DockのJeditアイコンをクリック。
2. メニュー・バーで、「ファイル」→「新規」とクリック。

入力が終わりましたら、授業用ディレクトリの中に、ファイル名をBlackBox.htmlとして保存してください。

最後に、「ターミナル」に戻り、 appletviewerコマンド でこのHTMLファイルを表示します。 ファイル名がBlackBox.htmlなので、 appletviewer BlackBox.html & と入力してください。

b00a001@AsiaA1:~/java% ls
BlackBox.class   BlackBox.html    BlackBox.java
b00a001@AsiaA1:~/java% appletviewer BlackBox.html &
b00a001@AsiaA1:~/java%

次のようなウィンドウが開いたら成功です。 実は、このアプレットは、黒い正方形を描画するものでした。 なお、このウィンドウを閉じるには、タイトル・バーの赤ボタンをクリックしてください。

アプレットビューア: BlackBox.class
アプレットが開始されました。

もしうまくいかないようでしたら、ファイルBlackBox.htmlが正しく書けているか、BlackBox.classが作られているか、BlackBox.javaが正しく書けているかを確認してください。 アプレット・ビューアでファイルを再読み込みするには、ウィンドウをクリックし、メニュー・バーで「アプレット」→「再読込み」とクリックしてください。

2.2 グラフィックスの描画

単に絵を描くだけでしたら、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*/ }

6行目は、これから黒で描画せよという意味です。 色を切り替えるには、 g.setColor(color); と書きます。 color の部分には、次のようなものが書けます。

7行目は、左上が座標 (50, 50) であり、幅が100ピクセル、高さが100ピクセルである長方形（正方形）を塗りつぶせという意味です。 ここで注意が必要なのは、 座標系 が普通の数学と異なり、左上が原点で、y軸が下を向いていることです。

長方形だけでなく、楕円（円）や直線も描けます。 以下の例を見て理解してください。

g.drawLine(10, 20, 60, 120);

座標 (10, 20) から (60, 120) に直線を引け。

g.drawRect(10, 20, 60, 120);

左上が (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>

ここで、プログラムの順番には意味があることに注意してください。 黄色い円の後に黒い正方形を描くと、円が見えなくなってしまいます。

2.3 ホームページへの埋め込み

2.3.1 アプレットの埋め込み

アプレットとは、ホームページの中で動くJavaプログラムだと説明しました。 どのようにしてホームページに埋め込むのでしょうか。 実は、アプレット・ビューアで表示してきたHTMLファイルを、WWWブラウザで開けばよいのです。

この授業では、アプレットの埋め込みではSafariを使います。 Safariは、将来、MacOS Xの標準となる予定のWWWブラウザです。 （センターのInternet Explorerではうまくいきません。）

Safariの使い方は以下の通りです。

1. DockのFinderアイコンをクリック。
2. アプリケーション・ボタンをクリック。
3. Safariアイコンをダブル・クリック。

Safariを終了するには次のようにします。

1. タイトル・バーの赤ボタンをクリック。
2. メニュー・バーで、「Safari」→「Safariを終了」とクリック。

SafariでHTMLファイルを開くには次のようにします。

1. ウィンドウをクリック。
2. メニュー・バーで、「ファイル」→「ファイルを開く...」とクリック。
3. 「場所:」メニューの下で、授業用フォルダの名前（java）をクリックし、ファイル名をクリック。
4. 「開く」ボタンをクリック。

BlackBox.html
アプレット BlackBox started

ブラウザの背景色とアプレットの背景色が一緒なので分かりにくいのですが、アプレットが埋め込まれたホームページが表示されています。

アプレットだけのページでは、埋め込んだような気がしません。 ファイルBlackBox.htmlを編集して、他のタグも書きましょう。 確かにアプレットが埋め込まれています。

<html>
<head>
<title>Drawing</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>

Drawing
お絵描き 黒い正方形を描きました。 みんな見てください。
アプレット BlackBox started

ブラウザは、アプレットをイメージのように取り扱います。 すなわち、一つの（大きな）文字と見なしますので、前後の文と独立させたければ、 <div> 〜 </div> などで囲んでください。 Safariでアプレットを再読み込みするには、いったんSafariを終了し、再びSafariを起動してください。

なお、 <h1> など色々なタグが入ったHTMLファイルをアプレット・ビューアで開いても、今まで通りアプレットのみが表示されます。 アプレット・ビューアは、 <applet> などごく少数のタグ以外はすべて無視します。

2.3.2 appletタグの属性

ここで、 <applet> タグの属性についてまとめます。

code="filename"（必須）

実行したいアプレットのファイル名（〜.class）を指定します。 ここにはパス名やURLは書けません。

width="pixel"（必須）

アプレットの幅をピクセル単位で指定します。

height="pixel"（必須）

アプレットの高さをピクセル単位で指定します。

codebase="url"

アプレットのあるディレクトリをURLで指定します。 省略しますと、HTMLファイルのあるディレクトリが指定されます。

注意1. 自分で作ったアプレットを公開するためには、〜.classファイルをディレクトリWWWやWWW-localの中にコピーする必要があります。

注意2. codebase 属性にはURLが指定できますので、公開されている他人のアプレットを自分のホームページに埋め込むことができます。 ただし、イメージと同様に、著作権などには十分配慮してください。

2.4 演習2

例を参考にして、今日説明したことを使って、ある程度複雑なグラフィックスを描画するアプレットを作成してください。 ファイル名の約束（ class の右の名前.java）に注意してください。

2.5 レポート課題

今日の演習2に従ってJavaプログラムを作成し、そのプログラムをkonishi@twcu.ac.jpあてにメールで提出してください。 メールには、学生番号、氏名、科目名、授業日（10/2）を明記してください。 プログラムをメールの本文に追加するには次のようにします。

1. プログラムのウィンドウをクリック。
2. メニュー・バーで、「編集」→「すべてを選択」とクリック。
3. メニュー・バーで、「編集」→「コピー」とクリック。
4. 作成中のメールのウィンドウをクリック。
5. メニュー・バーで、「編集」→「ペースト」とクリック。