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

情報処理技法(Javaプログラミング)I 第2回

目次
索引

アプレットの動かし方

全体の手順

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

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

  1. テキスト・エディタ(Jeditなど)を用いてプログラムを入力し、ファイル(〜.java)に保存する。
  2. javacコマンド(Javaコンパイラ)を用いてプログラムをコンパイル(バイトコードを生成)する。
  3. テキスト・エディタを用いてappletタグを入力し、ファイル(〜.html)に保存する。
  4. appletviewerコマンド(アプレット・ビューア)を用いてアプレットを表示する。
アプレットの表示までの流れ
アプレットの表示までの流れ

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

アプレットの例

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

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

入力が終わったら、授業用のフォルダの中に、ファイル名を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);
座標 (20, 40) から (60, 80) まで直線を引け。
g.drawRect(20, 40, 60, 80);
左上が (20, 40) であり、幅が60ピクセル、高さが80ピクセルである長方形の枠を描け。
g.fillRect(20, 40, 60, 80);
左上が (20, 40) であり、幅が60ピクセル、高さが80ピクセルである長方形の塗りつぶしを描け。
g.drawOval(20, 40, 60, 80);
左上が (20, 40) であり、幅が60ピクセル、高さが80ピクセルである長方形に内接する楕円の枠を描け。
g.fillOval(20, 40, 60, 80);
左上が (20, 40) であり、幅が60ピクセル、高さが80ピクセルである長方形に内接する楕円の塗りつぶしを描け。

これらを用いたプログラムの例を示します。 新しいファイルにプログラムを保存するので、 class の右の名前を変えます(4行目)。

GraphicsTest.java
/*  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ファイルは以下のとおりです。

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

このHTMLファイルをアプレット・ビューアで表示すると、以下のようになります。

長方形と楕円
長方形と楕円

このプログラムの動作は次のとおりです。

  1. 左上が(20, 10)であり、横が260ピクセル、高さが180ピクセルである長方形の塗りつぶしを描く。
  2. 左上が(30, 50)であり、横が80ピクセル、高さが40ピクセルである長方形の枠を描く。
  3. 左上が(30, 50)であり、横が80ピクセル、高さが40ピクセルである長方形に内接する楕円の枠を描く。
  4. 座標(120, 20)から(120, 180)までの直線を引く。
  5. 座標(270, 20)から(30, 180)までの直線を引く。
  6. 左上が(180, 90)であり、横が80ピクセル、高さが80ピクセルである正方形の塗りつぶしを描く。
  7. 左上が(180, 90)であり、横が80ピクセル、高さが80ピクセルである正方形に内接する円の塗りつぶしを描く。

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


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

アプレットの埋め込み

アプレットとは、ホームページの中で動く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コンテンツを有効にする」チェックボックスをオンにし、セキュリティ・レベルを「高」にして、「サイト・リストの編集」ボタンをクリックします。

Javaのセキュリティの設定(1)
Javaのセキュリティの設定(1)

すると、「例外サイト・リスト」ウィンドウが開くので、「追加」ボタンをクリックし、入力欄に「file:///」と入力し、「OK」ボタンをクリックします。

Javaのセキュリティの設定(2)
Javaのセキュリティの設定(2)

最後に、「Javaコントロール・パネル」ウィンドウの「OK」ボタンをクリックすると、自作のアプレットが動くようになります。 (アプレットを動かした後は、念のため、例外サイト・リストの「file:///」を削除してください。)

Dockの「Finder」アイコンをクリックし、「アプリケーション」をクリックし、「Firefox」アイコンをダブルクリックして、Firefoxを起動します。 メニューバーで「ファイル」→「ファイルを開く」とクリックし、「ファイルを開く」ウィンドウで、デスクトップ→「java1」→「AppletTest.html」とクリックし、「開く」ボタンをクリックしてください。 (Internet Explorerの場合は、デスクトップの「java1」フォルダを開き、「AppletTest.html」をダブルクリックします。 「ブロックされているコンテンツを許可」ボタンが表示されたら、それをクリックしてください。)

AppletTest.html
黒い長方形


アプレット AppletTest started
ブラウザのイメージ

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

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

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タグの属性

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

code=" ファイル名 " (必須)
表示したいアプレットのファイル名(〜.class)を指定します。 ここにはパス名やURLは書けません。
width=" ピクセル " (必須)
アプレットの幅をピクセル単位で指定します。
height=" ピクセル " (必須)
アプレットの高さをピクセル単位で指定します。
codebase=" URL "
アプレットのあるフォルダをURLで指定します。 省略すると、HTMLファイルのあるフォルダが指定されます。

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

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


演習2

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

グラフィックスの例(FourMoons)
グラフィックスの例(FourMoons)

操作法のヒント: この演習を行うとき、試行錯誤をするので、「ターミナル」で何度もjavacコマンドとappletviewerコマンドを入力することになります。 実は、「ターミナル」は過去の入力を記憶していて、上矢印キーで直前の入力、下矢印キーで直後の入力が表示されます。 過去と全く同じ入力をするときは、上矢印キーを何度か押してみてください。


レポート課題

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


参考文献


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

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