[小西ホームページ]   [目次・索引]   [前の授業]   [次の授業]

コンピュータIIB(Javaプログラミング入門)第2回

目次 索引
2.1 アプレットの動かし方
2.1.1 全体の手順
2.1.2 アプレットの例
2.2 グラフィックスの描画
2.3 ホームページへの埋め込み
2.3.1 アプレットの埋め込み
2.3.2 appletタグの属性
2.4 演習2
2.5 レポート課題
2.6 参考文献
appletviewerコマンド  appletタグ  drawLineメソッド  drawOvalメソッド  drawRectメソッド  fillOvalメソッド  fillRectメソッド  setColorメソッド  アプリケーション  アプレット  アプレット・ビューア  色の名前  座標系 

2.1 アプレットの動かし方

2.1.1 全体の手順

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

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

  1. エディタ(Jeditなど)を用いてプログラムを入力し、ファイルに保存する。
  2. Javaコンパイラ(javac)を用いてプログラムからバイトコードを生成する。
  3. エディタを用いてappletタグを入力し、ファイルに保存する。
  4. アプレット・ビューア (appletviewer)を用いてアプレットを表示する。
+-----+
|impor|    プログラム・ファイル
|impor|    filename.java
|     |
+-----+
   |       コンパイル・コマンド
   |       javac filename.java
   V
+-----+
|?????|    バイトコード・ファイル
|?????|    filename.class
|?????|
+-----+
   |        +-----+
   |        |<appl|    HTML ファイル
   |        |</app|    filename.html
   |        |     |
   |        +-----+
   |           |
   +-----+-----+
         |       実行コマンド
         |       appletviewer filename.html &
         V
  +-------------+
  |+-----------+|
  ||+----+     || アプレットの表示
  ||| [] |     ||
  ||+----+     ||
  |+-----------+|
  +-------------+

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

2.1.2 アプレットの例

まず、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:~/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のウィンドウを増やすには次のようにします。

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

入力が終わりましたら、授業用ディレクトリの中に、ファイル名を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
A black box
アプレットが開始されました。
図 2.1  アプレット・ビューアのイメージ

このウィンドウを閉じるには、タイトルバーの赤ボタンをクリックしてください。

もしうまくいかないようでしたら、ファイル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*/ }

最初の5行は、そのまま書くものと考えてください。 ただし、4行目の class の右はファイル名になります。

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

表 2.1  色の名前
名前
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軸が下を向いていることです。

Coordinates of some points
図 2.2  いくつかの点の座標

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

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行目)。

RectAndOval.java
/*  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*/ }
RectAndOval.html
<applet code="RectAndOval.class" width="300" height="200">
</applet>
Rectangles and ovals
図 2.3  長方形と楕円

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


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

2.3.1 アプレットの埋め込み

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

この授業では、ウェブ・ブラウザとしてSafariを用います。 SafariでHTMLファイルを開くには、次のようにします。

  1. DockのSafariアイコンをクリック。
  2. メニューバーで、「ファイル」→「ファイルを開く...」とクリック。
  3. 「開く」ウィンドウで、ホーム→授業用フォルダの名前(comp2b)→ファイル名とクリック。
  4. 「開く」ボタンをクリック。
BlackBox.html
A black box


アプレット BlackBox started
図 2.4  ブラウザのイメージ

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

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

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
お絵描き

黒い正方形を描きました。

A black box

みんな見てください。


アプレット BlackBox started
図 2.5  ホームページのイメージ

ここで、文字化けした場合は、メニューバーで、「表示」→「テキストエンコーディング」→「日本語(Shift JIS)」とクリックしてください。

ブラウザは、アプレットをイメージのように取り扱います。 すなわち、アプレットを一つの(大きな)文字と見なしますので、前後の文と独立させたければ、 <div></div> などで囲んでください。

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)に注意してください。

A smiling face
図 2.6  グラフィックスの例(SmilingFace)

2.5 レポート課題

今日の演習2の答案(Javaプログラム)をメールで提出してください。 メールの送信には学内のコンピュータ(メール・サーバ)を用い、送信先はkonishi@twcu.ac.jpとします。 メールの本文には、学生番号、氏名、科目名、授業日(4月15日)を明記してください。

なお、メールの本文にプログラムを挿入するには次のようにします。

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

2.6 参考文献


[小西ホームページ]   [目次・索引]   [前の授業]   [次の授業]

2005年4月15日更新
小西 善二郎 <konishi@twcu.ac.jp>
Copyright (C) 2005 Zenjiro Konishi. All rights reserved.