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

コンピュータ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)を用いてアプレットを表示する。
アプレットの表示までの流れ
図 2.1  アプレットの表示までの流れ

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

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コマンドを使ってこのプログラムをコンパイルしてください。 ここまでの操作は、前回と同じです。

asiaa1:~ b08a001$ cd comp2b
asiaa1:~/comp2b b08a001$ ls
BlackBox.java
asiaa1:~/comp2b b08a001$ javac BlackBox.java
asiaa1:~/comp2b b08a001$ ls
BlackBox.class   BlackBox.java
asiaa1:~/comp2b b08a001$

続いて、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 & と入力してください。

asiaa1:~/comp2b b08a001$ ls
BlackBox.class   BlackBox.html    BlackBox.java
asiaa1:~/comp2b b08a001$ appletviewer BlackBox.html &
asiaa1:~/comp2b b08a001$

次のようなウィンドウが開いたら成功です。 実は、このアプレットは、黒い正方形を描画するものでした。

アプレットビューア: BlackBox.class
黒い正方形
アプレットが開始されました。
図 2.2  アプレット・ビューアのイメージ

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

もしうまくいかないようでしたら、ファイル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軸が下を向いていることです。

いくつかの点の座標
図 2.3  いくつかの点の座標

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

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);
左上が (10, 20) であり、幅が60ピクセル、高さが120ピクセルである長方形の塗りつぶしを描け。
g.drawOval(10, 20, 60, 120);
左上が (10, 20) であり、幅が60ピクセル、高さが120ピクセルである長方形に内接する楕円の枠を描け。
g.fillOval(10, 20, 60, 120);
左上が (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>
長方形と楕円
図 2.4  長方形と楕円

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


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

2.3.1 アプレットの埋め込み

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

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

  1. DockのSafariアイコンをクリック。
  2. メニューバーで、「ファイル」→「ファイルを開く...」とクリック。
  3. 「開く」ウィンドウで、ホーム→「comp2b」→ファイル名とクリック。
  4. 「開く」ボタンをクリック。
BlackBox.html
黒い正方形


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

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

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

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
図 2.6  ホームページのイメージ

ここで、文字化けした場合は、メニューバーで、「表示」→「テキストエンコーディング」→「日本語(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)に注意してください。

グラフィックスの例(RoundSquare)
図 2.7  グラフィックスの例(RoundSquare)

2.5 レポート課題

今日の演習2の答案(Javaプログラム)をメールで提出してください。 差出人は学内のメール・アドレス(b08a001@cis.twcu.ac.jpなど)とし、宛先はkonishi@cis.twcu.ac.jpとします。 メールの本文には、学生番号、氏名、科目名、授業日(4月18日)を明記してください。

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

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

2.6 参考文献


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

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