2002
0606 ver 1.00 発行バージョン
0607 ver 1.10 「別の号で扱う」と宣言を追加
0607 ver 1.11 言い回し一部訂正
0719 ver 1.12 引用URL修正
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃.&&&& **** %%%%. JavaScript&Javaで目指そう！基本情報技術者試験 ┃
┃&&&&&&******%%%%%% 執筆＆編集 斎藤末広 suehiro@he.mirai.ne.jp ┃
┃'&┃&''*┃*''%┃%' 発行 江口昌宏 jmaga@yscon.co.jp ┃
┗━┻━━┻━━┻━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
広告募集:http://www2.odn.ne.jp/~egu33/jmaga/java-maga.html
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
第１７号 2002/06/07
アプレット研究 画像の取り扱い
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
プログラムを作成する上での注意事項：
Windows98SE, SDK(JDK) 1.3.1，IE 5.5 を前提としています。
拡張子を表示するに設定してください。
------------------------------------------------------------------------
▼ アプレットでの画像の取り扱い
アプレットは，Web の機能を利用しているため，画像を簡単に扱うことができ
ます。この号では，文字列の表示と比較しながら，画像の表示のからくりを説明
しましょう。
------------------------------------------------------------------------
▼ アプレットで画像表示
次の HTML，Java のプログラムを用意します。
まずは，HTML です。
例 j17-01 j17-01.htm
http://www.yscon.co.jp/j/java/jmaga/j17/j17-01.htm
画像を表示する簡単な Java アプレットのプログラム例です。
例 j17-02 xDspGraphics.java
http://www.yscon.co.jp/j/java/jmaga/j17/xDspGraphics.java
import java.applet.Applet;
import java.awt.Graphics;
import java.awt.Image;
public class xDspGraphics extends Applet {
Image ximg;
public void init(){
ximg = getImage(getDocumentBase(),"img1.gif");
}
public void paint(Graphics xg){
xg.drawImage(ximg, 20, 10, this);
}
}
HTML の方は，アプレットを表示するときに，上下に水平線を出しています。
これは，この HTML自体の動作確認のためです。
Java の方は，img1.gif という画像を表示するだけのプログラムです。
------------------------------------------------------------------------
▼ 画像表示と文字表示の違い
文字を表示した，前回の xHelloApplet.java との違いを見てみましょう。文字
列を表示するプログラムは以下のようでした。
なお，多くのプログラム言語では，１文字の文字と，複数の文字を扱う文字列
と区別します。以下，複数の文字を列として表示するときは，文字列という用語
を使用します。
例 j15-02 xHelloApplet.java
http://www.yscon.co.jp/j/java/jmaga/j15/xHelloApplet.java
import java.applet.Applet;
import java.awt.Graphics;
public class xHelloApplet extends Applet {
public void paint(Graphics xg){
xg.drawString("Hello, World",100, 120);
}
}
大きな違いは４点あります。
1) Image クラスを import(輸入)
2) init メソッド(関数)の定義
3) 文字列の表示は，drawString ，画像の表示は，drawImage
4) 文字列を表示するときは，"Hello, World" を直接表示，画像表示の方は，
一度，インスタンス ximg に代入して間接表示。
途中，道草もしますが，順に見ていきましょう。
------------------------------------------------------------------------
▼ Image クラスを import(輸入)
例 j17-02 xDspGraphics.java
import java.applet.Applet;
import java.awt.Graphics;
import java.awt.Image; // ←注目
public class xDspGraphics extends Applet {
Image ximg;
public void init(){
ximg = getImage(getDocumentBase(),"img1.gif");
}
public void paint(Graphics xg){
xg.drawImage(ximg, 20, 10, this);
}
}
上のプログラムで，"// ←注目"のところを見て下さい。// で始まると，その
後ろがコメントになります。コメントというのは，プログラム用語で，プログラ
ムの文法上は，無視されて，メモ書いておくことができます。ですから，上のプ
ログラムはそのままコンパイルは可能です。（別の号でまた詳細に解説します）
Image クラスが Graphics クラスと同様に，java.awt から Import(輸入) され
ています。
import(輸入)元の awt は，今まで何回も登場しました。java.awt の awt は，
Abstract Windows Toolkit の省略です。GUI 関連のクラスが用意されています。
awt から import(輸入) されている Graphics クラスは，表示する行為（書く，
描くなど）をサポートし，Image クラスは，絵そのものに化けて，絵の管理をサポー
トするクラスです。awt の解説もまた，別の号で扱います。
------------------------------------------------------------------------
▼ Image クラスのインスタンス(分身)
Image クラスのところをみましょう。
例 j17-02 xDspGraphics.java
import java.applet.Applet;
import java.awt.Graphics;
import java.awt.Image;
public class xDspGraphics extends Applet {
Image ximg; // ←注目
public void init(){
ximg = getImage(getDocumentBase(),"img1.gif");
}
public void paint(Graphics xg){
xg.drawImage(ximg, 20, 10, this);
}
}
上のプログラムの"// ←注目"のところを注目してください。
Image ximg;
このように書くと，「Image クラスのインスタンス ximg を使用する」という
ことを表します。
------------------------------------------------------------------------
▼ 道草 クラス，インスタンス，オブジェクト
ここで，クラスとインスタンスを説明しましょう。
元来，クラスは，集合（グループ）を表します。運動場などで，「２年１組の
人は，鉄棒のところに集合！」と号令をかけて，集まるものが，一つのクラスで
す。そのクラスに所属している一人一人は，一般にはメンバと言われます。しか
し，オブジェクト指向の世界では，メンバと言わずに，インスタンスといいます。
オブジェクト指向でメンバーというと別の意味になり，これはまた別の号で解説
をします。
クラスの一員になるインスタンスですが，インスタンスという英語自体は，実
例という意味です。たとえば，果物というクラスを考えると，その果物に属する，
そこのリンゴ，ここのミカンというのがインスタンス（実例）です。
クラスというものを抽象的な概念と考えて，それを具体化したものとしてイン
スタンス（実例）と言っています。先の運動場に集まった２年２組のクラスの人
の例でいうと，２年２組というクラスは抽象的なもので，そこに属する一人一人
の学生がインスタンス（実例）であると考えます。
このようにクラスは，ある時は，集合全体を指し，また，ある時は，その集合
を抽象的なものとして指します。
オブジェクト指向関係の用語では，オブジェクトというと，クラスとインスタ
ンスの両方を表します。Ｊマガでは，クラス，インスタンスと区別出来るときは，
できるだけオブジェクトという用語は避けて，クラスやインスタンスという用語
を今後使っていくことにします。
抽象的なものとしてクラス，それを具体化したもとしてインスタンスととらえ
るということで，クラスを設計書，インスタンスをそれから作られ製品のイメー
ジで説明されることも多いです。また，オブジェクト指向のメリットして，現実
のものを抽象化しているので，わかりやすいという説明が多くあります。
私はこの２つの見方を良くないと考えています。
クラスとインスタンスは，設計書とそれを元にした製品という感じではなく，
両方とも体と意志を持ったものとしてとらえます。
クラスとインスタンスは，クラスが本物で，インスタンスは分身という関係で
す。例えると，分身の術を使う忍者，パーマンのコピーロボット，ヤッターマ
ンの大型ロボットの中から出てくる小型ロボット，また，妖怪や密教の菩薩や観
音様のような感じです。例えば，
Graphics xg;
は，Graphics が忍者で，xg がその分身です。また，Graphics がパーマンで，
xg が パーマンのコピーロボットのようなものです。絵を描く Graphics という
大型ロボットがおり，そこの口の中から，小型ロボットが登場して，それが筆の
格好をしているという感じを想像してもいいです。
現実の世界のものを抽象化しているからオブジェクト指向は分かりやすいという
説明に対しては，オブジェクト指向のオブジェクは，「もの」というには，あまり
にも意志を持ちすぎであると反論します。現実にあるものを抽象化したというレベ
ルではなく，さらに，その物に魂を吹き込む感じです。Graphics xg; としたとき
の xg は，人がそのペンを持って絵を描くまで，じっとしている筆ではなく，筆
の形をしたロボットで，スィッチを入れたら，勝手にどんどん描いていく感じです。
クラスは本物で，インスタンスをそれの分身というイメージでプログラムにも
どって説明を続けましょう。
------------------------------------------------------------------------
▼ init メソッド
ここで新しく登場した，init メソッド(関数)をみましょう。init は，initialize
の省略で，初期化という意味です。init の読み方は，イニシャラアイズでいいで
しょう。
例 j17-02 xDspGraphics.java
import java.applet.Applet;
import java.awt.Graphics;
import java.awt.Image;
public class xDspGraphics extends Applet {
Image ximg;
public void init(){ // ←注目
ximg = getImage(getDocumentBase(),"img1.gif");
}
public void paint(Graphics xg){
xg.drawImage(ximg, 20, 10, this);
}
}
上のプログラムの"// ←注目"のところを注目してください。
Appletクラスの中では，初期化が必要な時は，init を実行しなさいと元々，定
義されています。初期化というのは，中心となる仕事に先立って，開始時に最初に
実行される準備の仕事を指します。
Applet クラスを継承した xDspGraphics で，init メソッド(関数)を定義する
と，初期化が必要な時に，init として書いてある命令が自動的に実行されます。
------------------------------------------------------------------------
▼ getImageメソッド
では，init メソッドの中をみましょう。
public void init(){
ximg = getImage(getDocumentBase(),"img1.gif"); // ←注目
}
登場人物は，ximg です。これは，Image ximg と宣言されていました。Image
妖怪の分身 ximg です。先ほどは，Graphics は，ロボットで，なぜ，Image の方は，
妖怪かですが，深い意味はありません。この Image は，姿が変わるため，ロボッ
トより妖怪に近いです。仕事は，画像の管理ですが，姿自体がその絵になってしま
う感じです。
もう一人，登場人物がいます。この行では，明記されていませんが，このプログ
ラム自身の xDspGraphics クラスです。
ximg = getImage(getDocumentBase(),"img1.gif");
のうち，getImage() と getDocumetBase() は，xDspGraphics 自身が自ら実行
します。仕事は getImage() の () の中から先に実行されます。getDocumetBase()
メソッド(関数)は，このプログラム(xDspgraphicsクラス)が保存してある場所(
フォルダ)を教えてくれます。次に，getImage()メソッド(関数)は，教えてもらっ
たその場所（フォルダ）から，"Img1.gif" を探してひもをつけてきます。そのひ
もの先を，Image 妖怪の 分身 ximg に渡します。以後，分身 ximg は，その絵を
管理するどころか，その絵に化けます。
init()に書かれているため，これら動作を，プログラムが開始された最初でや
ります。
------------------------------------------------------------------------
▼ 表示は，paint メソッド
例 j17-02 xDspGraphics.java
import java.applet.Applet;
import java.awt.Graphics;
import java.awt.Image;
public class xDspGraphics extends Applet {
Image ximg;
public void init(){
ximg = getImage(getDocumentBase(),"img1.gif");
}
public void paint(Graphics xg){ // ←注目
xg.drawImage(ximg, 20, 10, this);
}
}
"// ←注目"のところを注目してください。
表示する必要があるなら paint を実行すると，このプログラムの親クラス
であると Applet クラスに書いてありました。よって，表示するときは，この
paint メソッド(関数)を実行します。
public void paint(Graphics xg){
xg.drawImage(ximg, 20, 10, this);
}
登場人物は，Graphics ロボットの小型ロボット xg と，Image 妖怪の分身 ximg
です。this(この方)もいます。this(この方)というのは，このプログラム自身の
こと，つまり，xDspGraphics のことです。
xg.drawImage() のように，xg. とメソッド(関数)の前についていると，その
メソッド(関数)を実行する人物を示します。xg.drawImage() は，xg が drawImage
をします。xg ロボットが絵を描くということです。どんな絵かは，ximg に聞きま
す，というか，ximg を見て，描きます。描く位置は，(20,10) の位置で，アプレッ
トの左肩から，右へ，20, 下へ，10の位置です。(ximg, 20, 10, this)の this は，
おまけみたいなもので，動作が順調にいったかどうかの報告をthis(この方)に教え
ます。
------------------------------------------------------------------------
▼ 直接方式と間接方式
ここで，文字列の表示の仕方と画像の表示の仕方を比較しましょう。
文字列の表示の例
例 j15-02 xHelloApplet.java
import java.applet.Applet;
import java.awt.Graphics;
public class xHelloApplet extends Applet {
public void paint(Graphics xg){
xg.drawString("Hello, World",100, 120);
}
}
画像の表示の例
例 j17-02 xDspGraphics.java
import java.applet.Applet;
import java.awt.Graphics;
import java.awt.Image;
public class xDspGraphics extends Applet {
Image ximg;
public void init(){
ximg = getImage(getDocumentBase(),"img1.gif");
}
public void paint(Graphics xg){ // ←注目
xg.drawImage(ximg, 20, 10, this);
}
}
文字列の表示は，xg.drawString("Hello, World",100, 120)とこの行を見ただ
け書き出す文字列が分かります。しかし，画像の表示は，xg.drawImage のところ
で，ximg を描くと書いてあるだけです。init メソッドのところで，ximg は，
img1.gif を管理していると間接的に書いています。
直接表現するか，間接的に表現するかは，文字列の表示，画像の表示自体とは
関係がありません。文字列の表示の例も，画像の表示の例のように，
例 j15-02 xHelloApplet.java を変形
import java.applet.Applet;
import java.awt.Graphics;
public class xHelloApplet extends Applet {
String xstr;
public void init(){
xstr = "Hello, World";
}
public void paint(Graphics xg){
xg.drawString(xstr, 100, 120);
}
}
のように init の中で，xstr に文字列"Hello, World"を覚えさせて，paint
でこれを表示する間接的なやりかたもできます。
逆に，画像の表示を，文字の表示のように，init を使用せず実現することも
できます。
例 j17-02 xDspGraphics.javaを変更
import java.applet.Applet;
import java.awt.Graphics;
public class xDspGraphics extends Applet {
public void paint(Graphics xg){ // ←注目
xg.drawImage(getImage(getDocumentBase(),"img1.gif"), 20, 10, this);
}
}
文字列も画像も基本的には同様な手順で表示できます。もともとの文字列表示
のサンプルプログラムのように，drawString の中で，直接表示する文字列を書い
ておく方式を，以後，直接方式ということにします。いったん，インスタンスに
代入しておいて，そのインスタンスを利用して表示する方式を，間接方式と呼ぶ
ことにしましょう。
この直接方式，間接方式は，私がここでつけた用語ですので，他で使うと意味
が通じないこともあると思います。
文字列の表示の場合，文字列"Hello, World"自体は，主記憶にありますので，
paint を数度やってもスピードは高速ですが，画像の場合は，主記憶ではなく，
磁気ディスク上にあります。インターネット上では，サーバのフォルダにあるこ
とになります。そのため，画像で直接方法を使うと，paint のたびに，フォルダ
を見に行くため，時間がかかります。画像の場合は，間接法が妥当です。
------------------------------------------------------------------------
▼ まとめ
文字列の表示も画像の表示もプログラムの基本的な組み方は，同じでした。
画像の表示の場合は，init メソッドを利用して間接法を利用していました。
画像をプログラムで覚えておくために，Image クラスを利用しました。
例 j17-02 xDspGraphics.java
import java.applet.Applet;
import java.awt.Graphics;
import java.awt.Image;
public class xDspGraphics extends Applet {
Image ximg;
public void init(){
ximg = getImage(getDocumentBase(),"img1.gif");
}
public void paint(Graphics xg){
xg.drawImage(ximg, 20, 10, this);
}
}
Applet クラスを親とする xDspGraphics クラスは，Imageクラス と Graphic
クラスのそれぞれの分身，ximg と xg に手伝ってもらいながら，絵を表示しま
した。
------------------------------------------------------------------------
▼ 次号の予定
配列
感想は，斎藤まで，suehiro@he.mirai.ne.jp
広告等のお問い合わせ：jmaga@yscon.co.jp
------------------------------------------------------------------------
▼ 誤字・脱字等の修正，プログラムの修正など，以下の場所で確認できます。
過去の修正版等
http://www.mirai.ne.jp/~suehiro/java/jmaga/
登録・削除および広告の案内
http://www2.odn.ne.jp/~egu33/jmaga/java-maga.html
------------------------------------------------------------------------
▼ 著作権について
このメールマガジンで公開しているプログラムソースは，著作権を当方スタッ
フが所有しますが，商用を含めて，再利用，改変，発表を制限しません。
本文に関しては，斎藤末広が著作権を所有します。再利用に関しては，承諾を
必要とします。
広告募集 http://www2.odn.ne.jp/~egu33/jmaga/java-maga.html
------------------------------------------------------------------------
▼アンケート（以下を返信してください）
この号のＪマガは役立ったあるいは勉強になりましたか？
該当するものだけ残してください。
5: 大いに，YES
4: YES
3: 普通
2: NO
1: 大いに，NO
その他