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

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

目次
索引

アプレット

アプレットとは

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

アプレットの廃止

アプレットは、1995年当時は、画期的な技術でした。 しかしその後、ブラウザーで動くプログラムは、Flash Playerが標準になりました。 さらに、スマートフォン(スマホ)の時代になり、スマホではアプリを利用することになり、スマホのブラウザーでFlash Playerが使えなくなりました。 このような時代の流れに従い、Javaバージョン11(2018年リリース)から、アプレットは廃止になりました。

現在、ブラウザーでプログラムを動かすには、JavaScriptを利用します。 JavaとJavaScriptは、名前は似ていますが、別物です。


フレームとキャンバス

フレームとキャンバスとは

アプレットが使える時代は、アプレットに図形を描くことで、プログラミングの練習ができました。 アプレットが使えなくなった今、アプレットの代わりに、フレームとキャンバスを利用することにします。

フレーム frame )とは、Javaにおけるウィンドウのことです。 プログラムでフレームを生成すると、画面にウィンドウが開きます。

キャンバス canvas )とは、Javaにおける描画領域のことです。 プログラムでキャンバスを生成すると、そのキャンバスに図形を描くことができます。

最後に、プログラムでフレームにキャンバスを追加すれば、図形が表示されたウィンドウになるわけです。

フレームとキャンバスのイメージ
フレームとキャンバスのイメージ

フレームとキャンバスの例

フレームとキャンバスのプログラムは、いくつかの書き方が可能です。 この授業では、できるだけ単純化したプログラムを紹介します。

まず、「メモ帳」を起動して、次のプログラムを入力してください。 そして、前回作成した授業用のフォルダー(java1)の中に、ファイル名をCanvasTest.javaとして保存してください。 ファイル名は、「 class の右の名前.java」としなくてはいけません(4行目)。 また、キャンバスの場合、 class の右の名前を、次の次の行の new の右にも書きます(6行目)。

/*  1*/ import java.awt.*;
/*  2*/ import javax.swing.*;
/*  3*/ 
/*  4*/ class CanvasTest extends Canvas {
/*  5*/     public static void main (String[] args) {
/*  6*/         Canvas c = new CanvasTest();
/*  7*/         JFrame f = new JFrame();
/*  8*/         f.setSize(316, 239);
/*  9*/         f.add(c);
/* 10*/         f.setVisible(true);
/* 11*/         f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
/* 12*/     }
/* 13*/     public void paint (Graphics g) {
/* 14*/         g.setColor(Color.black);
/* 15*/         g.fillRect(20, 40, 60, 80);
/* 16*/     }
/* 17*/ }

次に、コマンド・プロンプトを起動し、カレント・フォルダーを確認します。 授業用のフォルダー(java1)であればそのままでよいですが、ホーム・フォルダー(\)であれば、 cd Desktop\java1 と入力して、カレント・フォルダーをjava1にします。

そして、プログラム・ファイル(CanvasTest.java)があることを確認してから、javacコマンドを使ってこのプログラムをコンパイルし、バイトコード・ファイル(CanvasTest.class)が生成されることを確認してください。 最後に、javaコマンドを使って、そのプログラムを実行してください。

Z:\Desktop\java1>javac CanvasTest.java

Z:\Desktop\java1>java CanvasTest

Z:\Desktop\java1>

その結果、次のようなウィンドウが開いたら成功です。 実は、このフレームとキャンバスは、黒い長方形を描画するものでした。

- □ ×
フレームとキャンバスの例
フレームとキャンバスの例

注意: フレームとキャンバスを表示している間は、コマンド・プロンプトにコマンドを入力できません。 コマンドを入力するには、フレームとキャンバスのウィンドウを閉じてください。

もしうまくいかないようなら、CanvasTest.classが作られているか、CanvasTest.javaが正しく書けているかを確認してください。


図形の描画

単に絵を描くだけなら、ペイントなどのソフトを使ったほうが簡単です。 Javaを使って絵を描く利点の一つに、プログラムの計算結果をグラフィカルに表せることがあげられます。 今日は、絵を描くことを通じて、少しずつプログラミングになれることにします。

ここで、上記のプログラムの一部について説明します。

/*  1*/ import java.awt.*; // キャンバスのときに書く
/*  2*/ import javax.swing.*; // キャンバスのときに書く
/*  3*/ 
/*  4*/ class CanvasTest extends Canvas { // キャンバスのときに書く
/*  5*/     public static void main (String[] args) { // キャンバスのときに書く
/*  6*/         Canvas c = new CanvasTest(); // キャンバスのときに書く
/*  7*/         JFrame f = new JFrame(); // キャンバスのときに書く
/*  8*/         f.setSize(316, 239); // キャンバスのときに書く
/*  9*/         f.add(c); // キャンバスのときに書く
/* 10*/         f.setVisible(true); // キャンバスのときに書く
/* 11*/         f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); // キャンバスのときに書く
/* 12*/     } // キャンバスのときに書く
/* 13*/     public void paint (Graphics g) { // キャンバスのときに書く
/* 14*/         g.setColor(Color.black); // 黒に切り替える
/* 15*/         g.fillRect(20, 40, 60, 80); // 長方形の塗りつぶしを描く
/* 16*/     }
/* 17*/ }

最初の13行は、そのまま書くものと考えてください。 ただし、4行目の class の右と、6行目の new の右はファイル名です。 また、8行目の f.setSize( , 高さ ); は、タイトルバーや枠を含めた、ウィンドウの大きさ(幅と高さ)を指定します。 ウィンドウの大きさは、キャンバスの大きさより、少し大きめにしてください。 Windows 10の場合、幅を16ピクセル、高さを39ピクセル足すと、キャンバスがちょうど収まります。

14行目は、これから黒で描画せよという意味です。 を切り替えるには、 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 黄色

15行目は、左上が座標 (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行目)。 また、その名前を、次の次の行の new の右にも書きます(6行目)。

FigureTest.java
/*  1*/ import java.awt.*;
/*  2*/ import javax.swing.*;
/*  3*/ 
/*  4*/ class FigureTest extends Canvas { // ファイル FigureTest.java に保存
/*  5*/     public static void main (String[] args) {
/*  6*/         Canvas c = new FigureTest(); // ファイル名に合わせる
/*  7*/         JFrame f = new JFrame();
/*  8*/         f.setSize(316, 239); // ウィンドウの大きさ
/*  9*/         f.add(c);
/* 10*/         f.setVisible(true);
/* 11*/         f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
/* 12*/     }
/* 13*/     public void paint (Graphics g) {
/* 14*/         g.setColor(Color.white); // 白い
/* 15*/         g.fillRect(20, 10, 260, 180); // 大きな長方形の塗りつぶし
/* 16*/         g.setColor(Color.blue); // 青い
/* 17*/         g.drawRect(30, 50, 80, 40); // 長方形の枠
/* 18*/         g.setColor(Color.black); // 黒い
/* 19*/         g.drawOval(30, 50, 80, 40); // 楕円の枠と
/* 20*/         g.drawLine(120, 20, 120, 180); // 縦の直線と
/* 21*/         g.drawLine(270, 20, 30, 180); // 斜めの直線と
/* 22*/         g.fillRect(180, 90, 80, 80); // 正方形の塗りつぶし
/* 23*/         g.setColor(Color.yellow); // 黄色い
/* 24*/         g.fillOval(180, 90, 80, 80); // 円の塗りつぶし
/* 25*/     }
/* 26*/ }

このプログラムをjavacコマンドでコンパイルし、javaコマンドで実行します。

Z:\Desktop\java1>javac FigureTest.java

Z:\Desktop\java1>java FigureTest

Z:\Desktop\java1>

すると、以下のようなフレームとキャンバスが表示されます。

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

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

  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ピクセルである正方形に内接する円の塗りつぶしを描く。

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


演習2

例を参考にして、今日説明したことを使って、図形が描かれたフレームとキャンバスを作成してください。 余力のある人は、図形を複雑にしてください。 ファイル名の約束( class の右の名前.java)に注意してください。 また、 class の右の名前を、次の次の行の new の右にも書いてください。

図形の例(FireBalls)
図形の例(FireBalls)

レポート課題

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


参考文献


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

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