top ≫ Java教室 ≫ 画像を表示する更新: 2019.06.05 (367d)

画像を表示する

アプレットを動かす＜＜

＞＞たくさんの画像を並べる

画像を準備しよう！ †

画像を表示させる為には，当然，画像が必要になりますねぇ！！！

プログラムでよく使うのはgifやjpegなどなので，gif画像かjpg画像を作りましょう！！
gif画像の特徴：

256色までしか色を扱えない。
写真の保存には向かない
比較的小さいファイルサイズで保存できる

jpeg画像の特徴：

非可逆圧縮(圧縮したら元に戻らない)方式で，非常に高い圧縮率でデータを圧縮し保存する。
Webページ上に表示する画像などの主要な形式

この2つの他にも，色々な保存形式がありますがこれから先，gifをかjpg画像使っていきます。

プログラムで画像を読み込む †

まず，必要なファイルは，

htmlファイル
javaファイル
classファイル
画像ファイル

になります。

「アプレットを動かす」で使用したファイルを使って説明していきます。

htmlファイルの中身

<html>
<body>
<applet code= "sample.class" width="100" height="200">
</applet>
</body>
</html>

ここでわからないのは3行目ですよね。(htmlの知識は既にあるものとしています)

<applet code= "sample.class" width="100" height="200">

この部分では，「sample.java」じゃなくて、javacでコンパイルしてできる「sample.class」の方を指定します。(コンパイルのしかたがわからない方はこちら)
「width=""」と「height=""」でJavaアプレットが実行されるウィンドウ領域の指定を行ないます。
- width：幅の指定
- height：高さの指定
実行がうまく動かないときはこのhtmlファイルとsample.classが同じフォルダにあるか確認してみてください。

javaファイルの中身

import java.applet.Applet;
import java.awt.Graphics;
import java.awt.Image;
import java.applet.*;
import java.awt.*;

public class sample extends Applet
{
    Image img[] = new Image[1];
    
    public void init()          // 画像の読み込み
    {
        img[0] = getImage(getDocumentBase(), "sample.gif");
    }
    
    public void paint(Graphics g) // 画像表示
    {
        g.drawImage( img[0],1,1, this );
    }
}

これは，何かのサンプルをいじって作ったものです。
私にも全部はわかりません(￣∇￣*)ゞｴﾍﾍ
まぁ，こう書けばいいんだろう！っという感じですねぇ

表示させたい画像を指定しているところは

img[0] = getImage(getDocumentBase(), "sample.gif");

の行です。
sample.gifの代わりに、自分で作ってみた他の画像も試してみてください！

うまく表示されない場合は、sample.javaとsample.gifのファイルが同じフォルダに入っているか確認

画像の表示は

g.drawImage( img[0],1,1, this );

の行でされています。
drawImageの引数の説明を以下に示しておきます。

引数	意味	ここでの例
1	画像オブジェクトの名前	img[0]
2	表示する位置のx座標	1
3	表示する位置のx座標	1
4	イメージオブザーバ（謎）	this

はて？？？
１～３までは何とかわかりましたけど，4がわかんないですねぇ(ﾉ_･､)ｼｸｼｸ
ということで，iくらげさんに質問して聞いてみました！！
iくらげさんからお返事ついたぁ～～♪

再描画（ブラウザのウィンドウを移動したり、大きさを直したり、他のアプリが前に来たあとでまたブラウザが前に出る、など）が起きる時に、それをうまく扱うためのしくみかな。
Javaアプレットでは、基本的にいつもthisとしておけばいいらしい。

By iくらげ

ほぉ。
なるほど。
理解できたようなできないような・・・orz
でもまぁ，基本的にはthisにしておけばいいって覚えればいいんだすね！！
ふむふむ___φ(ﾟｰﾟ*)ﾌﾑﾌﾑ___φ(｡_｡*)ｶｷｶｷ

ここでは画像オブジェクトがimg[0]となっているんですが、画像を1つしか使わない場合には[0]を省いてimgだけでもいいらしいですヽ(　￣д￣;)ﾉ
ちょっとだけ書く量が減りますね。あと，エラー発生確率も低くなりますね！ほんのちょびっとですが。。

img[0] = getImage(getDocumentBase(), "sample.gif");
 ↓ ↓
img = getImage(getDocumentBase(), "sample.gif");

g.drawImage( img[0],1,1, this );
 ↓ ↓
g.drawImage( img,1,1, this );

となっていいんですねぇ！
へぇ～。

単にHTMLで画像ファイルを表示するのと、アプレットとの違いは？ †

アプレットだと

画像を右クリックで保存できなくなります
時間によって絵を変えたり、いろいろな処理ができます
最初にJavaが起動するまで、表示にちょっと時間がかかります

画像をたくさん表示する †

突然ですが，私はパズルが好きです。
ということで，画像表示もできるようになったことだし，javaプログラミングの練習として，「15パズル」を作ろうと思います！！！！
15パズルとは，4×4マス中でピコピコ数字を順番に並べるやつですよ！あれですよ！！
今はわからなくても，見ればわかるはずです！
頑張って作っていこぅｴｲｴｲ (ι´Д｀)ﾉｵｰ!!

まずは画像を表示しなければ始まりませんね。
よぉし。
画像一枚表示するのはsample.javaを使えばいいんだから，これをまたいじって，複数画像を表示させるぞ！

まずは，15個の画像ファイル（1から15まで書いてある画像）を作りましょう！私はphotoshopで作りました。
　こんな感じで。

複数の画像を表示するプログラムの例

import java.applet.Applet;
import java.awt.Graphics;
import java.awt.Image;
import java.applet.*;
import java.awt.*;

public class puzzle extends Applet
{
    Image img[] = new Image[4]; //sampleでは[1]でしたが，画像が4枚なので，[4]。
    　　　　　　　　　　　　　　　　　//↑ここは書き直し忘れやすいので注意！
    public void init()		// 画像の読み込み
    {
	img[0] = getImage(getDocumentBase(), "1.gif");
	img[1] = getImage(getDocumentBase(), "2.gif");
	img[2] = getImage(getDocumentBase(), "3.gif");
	img[3] = getImage(getDocumentBase(), "4.gif");
    }
    
    public void paint(Graphics g) // 画像表示
    {
	g.drawImage( img[0],0,0, this ); 
	g.drawImage( img[1],50,0, this );  //x軸を変えて画像が
	g.drawImage( img[2],100,0, this ); //重ならないようにする。
	g.drawImage( img[3],150,0, this );
    }
}

実行結果