Javaアプレット ( Java applet )(以下、単にアプレット)とは、ホームページの中で動くJavaプログラムのことです。 Javaが急速に普及した理由の一つに、アプレットを使うと高機能のホームページが作成できることがあげられます。 なお、アプレットでないJavaプログラムは、 Javaアプリケーション ( Java application )とよばれます。
アプレットを動かすまでには、次のような手順をふみます。
今回の授業でも、プログラムの中身はあまり気にせず、この手順を理解する演習を行います。
まず、Jeditを起動して、次のプログラムを入力してください。
そして、前回作成した授業用のフォルダ(java1)の中に、ファイル名をAppletTest.javaとして保存してください。
ファイル名は、「
class
の右の名前.java」としなくてはいけません(4行目)。
/* 1*/ import java.applet.*; /* 2*/ import java.awt.*; /* 3*/ /* 4*/ public class AppletTest extends Applet { /* 5*/ public void paint (Graphics g) { /* 6*/ g.setColor(Color.black); /* 7*/ g.fillRect(20, 40, 60, 80); /* 8*/ } /* 9*/ }
次に、「ターミナル」を起動し、カレント・ディレクトリを確認します。 授業用のフォルダ(java1)であればそのままでよいですが、ホーム・ディレクトリ(~)であれば、 cd Desktop/java1 と入力して、カレント・ディレクトリをjava1にします。
そして、プログラム・ファイル(AppletTest.java)があることを確認してから、javacコマンドを使ってこのプログラムをコンパイルし、バイトコード・ファイル(AppletTest.class)が生成されることを確認してください。 ここまでの操作は、前回と同じです。
24102a1:java1 k16x1001$ javac AppletTest.java 24102a1:java1 k16x1001$
続いて、Jeditを使って次のように appletタグ を入力します。
<applet code="AppletTest.class" width="300" height="200"> </applet>
これは、ホームページの作成に用いる言語HTMLの一部で、バイトコードのファイル名とアプレットの大きさを指定しています。
なお、Jeditのウィンドウを増やすには次のようにします。
入力が終わったら、授業用のフォルダの中に、ファイル名をAppletTest.htmlとして保存してください。
最後に、「ターミナル」に戻り、 appletviewerコマンド でこのHTMLファイルを表示します。 ファイル名がAppletTest.htmlなので、 appletviewer AppletTest.html と入力してください。 すると、 アプレット・ビューア ( applet viewer )という、アプレットを表示するソフトが起動します。
24102a1:java1 k16x1001$ appletviewer AppletTest.html 24102a1:java1 k16x1001$
もし、 AppletTest.html と入力するのが面倒なら、アイコンをドラッグ・アンド・ドロップしてください。 appletviewer とスペースを入力してから、AppletTest.htmlのアイコンを「ターミナル」にドラッグ・アンド・ドロップすると、
24102a1:java1 k16x1001$ appletviewer /home/k16x1001/Desktop/java1/AppletTest.html 24102a1:java1 k16x1001$
となります。 カレント・ディレクトリがjava1なら、 AppletTest.html と /home/k16x1001/Desktop/java1/AppletTest.html は、同じファイルを表します。
最終的に、次のようなウィンドウが開いたら成功です。 実は、このアプレットは、黒い長方形を描画するものでした。
アプレットビューア: AppletTest.class |
---|
アプレットが開始されました。 |
注意: アプレットを表示している間は、ターミナルにコマンドを入力できません。 コマンドを入力するには、アプレットのウィンドウを閉じてください。
もしうまくいかないようなら、ファイルAppletTest.htmlが正しく書けているか、AppletTest.classが作られているか、AppletTest.javaが正しく書けているかを確認してください。
単に絵を描くだけなら、gimpなどのペイント・ツールを使ったほうが簡単です。 Javaを使って絵を描く利点の一つに、プログラムの計算結果をグラフィカルに表せることがあげられます。 今日は、絵を描くことを通じて、少しずつプログラミングになれることにします。
ここで、上記のプログラムの一部について説明します。
/* 1*/ import java.applet.*; // アプレットのときに書く /* 2*/ import java.awt.*; // アプレットのときに書く /* 3*/ /* 4*/ public class AppletTest extends Applet { // アプレットのときに書く /* 5*/ public void paint (Graphics g) { // アプレットのときに書く /* 6*/ g.setColor(Color.black); // 黒に切り替える /* 7*/ g.fillRect(20, 40, 60, 80); // 長方形の塗りつぶしを描く /* 8*/ } /* 9*/ }
最初の5行は、そのまま書くものと考えてください。
ただし、4行目の
class
の右はファイル名になります。
6行目は、これから黒で描画せよという意味です。
色
を切り替えるには、
g.setColor(
色
);
と書きます。
「
色
」の部分には、次のようなものが書けます。
名前 | 色 | 例 |
---|---|---|
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行目は、左上が座標 (20, 40) であり、幅が60ピクセル、高さが80ピクセルである長方形の塗りつぶしを描けという意味です。 ここで注意が必要なのは、 座標系 が普通の数学と異なり、左上が原点で、y軸が下を向いていることです。
長方形 ( 正方形 )だけでなく、 楕円 ( 円 )や 直線 も描けます。 以下の例を見て理解してください。
g.drawLine(20, 40, 60, 80);
g.drawRect(20, 40, 60, 80);
g.fillRect(20, 40, 60, 80);
g.drawOval(20, 40, 60, 80);
g.fillOval(20, 40, 60, 80);
これらを用いたプログラムの例を示します。
新しいファイルにプログラムを保存するので、
class
の右の名前を変えます(4行目)。
/* 1*/ import java.applet.*; /* 2*/ import java.awt.*; /* 3*/ /* 4*/ public class GraphicsTest extends Applet { // ファイル GraphicsTest.java に保存 /* 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*/ }
このプログラムをjavacコマンドでコンパイルします。
HTMLファイルは以下のとおりです。
<applet code="GraphicsTest.class" width="300" height="200"> </applet>
このHTMLファイルをアプレット・ビューアで表示すると、以下のようになります。
このプログラムの動作は次のとおりです。
ここで、プログラムの順番には意味があることに注意してください。 黄色い円の後に黒い正方形を描くと、円が見えなくなってしまいます。
アプレットとは、ホームページの中で動くJavaプログラムだと説明しました。 どのようにしてホームページに埋め込むのでしょうか。 実は、アプレット・ビューアで表示してきたHTMLファイルを、ウェブ・ブラウザで開けばよいのです。
注意: 2013年4月から、アプレットのセキュリティが強化され、デジタル署名という手続きを行わないと、ウェブ・ブラウザでアプレットが動かせなくなりました。 ただし、ウェブ・ブラウザによっては、Javaのセキュリティの設定を変更することで、自作の(デジタル署名のない)アプレットを動かすことができます。 情報処理センターのMacでは、Safariでは動かせませんが、Firefoxでは動かせます。 Windowsでは、Internet ExplorerでもFirefoxでも動かせます。
上記の注意のとおり、この授業ではSafariではなくFirefoxを用います。 Javaのセキュリティの設定を変更する前に、Firefoxを起動しているなら、Firefoxを終了してください。
Dockの「システム環境設定」をクリックして「システム環境設定」ウィンドウを開き、「その他」項目の「Java」をクリックすると、「Javaコントロール・パネル」ウィンドウが開きます。 (Windowsの場合は、スタートボタン→「コントロール パネル」とクリックして「コントロール パネル」ウィンドウを開き、「プログラム」→「Java」とクリックすると、「Javaコントロール・パネル」ウィンドウが開きます。)
「Javaコントロール・パネル」ウィンドウの「セキュリティ」タブをクリックし、「ブラウザでJavaコンテンツを有効にする」チェックボックスをオンにし、セキュリティ・レベルを「高」にして、「サイト・リストの編集」ボタンをクリックします。
すると、「例外サイト・リスト」ウィンドウが開くので、「追加」ボタンをクリックし、入力欄に「file:///」と入力し、「OK」ボタンをクリックします。
最後に、「Javaコントロール・パネル」ウィンドウの「OK」ボタンをクリックすると、自作のアプレットが動くようになります。 (アプレットを動かした後は、念のため、例外サイト・リストの「file:///」を削除してください。)
Dockの「Finder」アイコンをクリックし、「アプリケーション」をクリックし、「Firefox」アイコンをダブルクリックして、Firefoxを起動します。 メニューバーで「ファイル」→「ファイルを開く」とクリックし、「ファイルを開く」ウィンドウで、デスクトップ→「java1」→「AppletTest.html」とクリックし、「開く」ボタンをクリックしてください。 (Internet Explorerの場合は、デスクトップの「java1」フォルダを開き、「AppletTest.html」をダブルクリックします。 「ブロックされているコンテンツを許可」ボタンが表示されたら、それをクリックしてください。)
AppletTest.html |
---|
|
アプレット AppletTest started |
ブラウザの背景色とアプレットの背景色が一緒なので分かりにくいのですが、アプレットが埋め込まれたホームページが表示されています。
アプレットだけのページでは、埋め込んだ気がしません。 ファイルAppletTest.htmlを編集して、他のタグも書きましょう。 確かにアプレットが埋め込まれています。
<html> <head> <title>お絵描き</title> </head> <body style="background-color: yellow;"> <h1>お絵描き</h1> <p>黒い長方形を描きました。</p> <div style="text-align: center;"> <applet code="AppletTest.class" width="300" height="200"> </applet> </div> <p>みんな見てください。</p> </body> </html>
お絵描き |
---|
お絵描き
黒い長方形を描きました。
みんな見てください。
|
アプレット AppletTest started |
ここで、文字化けした場合は、メニューバーで、「表示」→「テキストエンコーディング」→「Unicode」とクリックしてください。 (Internet Explorerの場合は、「表示」→「エンコード」→「Unicode(UTF-8)」です。)
ブラウザは、アプレットを画像(イメージ)のように取り扱います。
すなわち、アプレットを一つの(大きな)文字と見なすので、前後に改行を入れたければ、
<div>
〜
</div>
などで囲んでください。
Firefoxで再読み込みボタン(Internet Explorerの場合は更新ボタン)をクリックしても、アプレットは更新されません。 アプレットを更新するには、Firefoxをいったん終了して、再び起動してください。
なお、
<h1>
など色々なタグを追加したHTMLファイルをアプレット・ビューアで開いても、今まで通りアプレットのみが表示されます。
アプレット・ビューアは、
<applet>
などごく少数のタグ以外はすべて無視します。
ここで、
<applet>
タグの属性についてまとめます。
code="
ファイル名
"
(必須)
width="
ピクセル
"
(必須)
height="
ピクセル
"
(必須)
codebase="
URL
"
注意1. 自分で作ったアプレットを公開するためには、アプレットのファイル(〜.class)をフォルダWWWやWWW-localの中にコピーする必要があります。
注意2. codebase属性にはURLが指定できるので、公開されている他人のアプレットを自分のホームページに埋め込むことができます。 ただし、画像などと同様に、著作権などには十分配慮してください。
例を参考にして、今日説明したことを使って、グラフィックスを描画するアプレットを作成してください。
余力のある人は、グラフィックスを複雑にしてください。
ファイル名の約束(
class
の右の名前.java)に注意してください。
操作法のヒント: この演習を行うとき、試行錯誤をするので、「ターミナル」で何度もjavacコマンドとappletviewerコマンドを入力することになります。 実は、「ターミナル」は過去の入力を記憶していて、上矢印キーで直前の入力、下矢印キーで直後の入力が表示されます。 過去と全く同じ入力をするときは、上矢印キーを何度か押してみてください。
今日の演習2の答案(Javaプログラム)をメールで提出してください。 差出人は学内のメール・アドレス(学生番号@cis.twcu.ac.jp)とし、宛先はkonishi@cis.twcu.ac.jpとします。 メールの本文には、学生番号、氏名、科目名、授業日(9月30日)を明記してください。