Java道｜画像の読み込みと表示

Java道｜画像の読み込みと表示

文字だけの画面に、絵の力を加える。
画像を読み込んで表示できるようになると、JavaのGUIアプリはもっと分かりやすく、表情豊かな画面になります。

これまでのGUIアプリケーションでは、ウィンドウを表示したり、ラベルやボタンを置いたり、イベントに反応させたりしてきました。

Frame を使ってウィンドウを作る。
Label で文字を表示する。
Button を押したら表示を変える。
MouseListener でマウスの動きに反応する。

ここまで学ぶと、Javaでもかなりアプリケーションらしい画面を作れるようになります。

ただし、画面表現は文字やボタンだけではありません。

ウィンドウの中に画像を表示できるようになると、画面の雰囲気や分かりやすさが大きく変わります。

たとえば、鬼殺隊本部の修行案内盤を考えてみましょう。

文字だけで「きょうの修行イメージ」と表示されているよりも、そこに修行カードの絵や、任務記録の図、呼吸訓練を表すアイコンが表示されると、何を示している画面なのかが直感的に分かりやすくなります。

鬼滅の刃風にたとえると、これまでは本部の作戦室に、文字だけの案内札や操作札が並んでいた状態です。

そこに、修行の様子を描いたカードや、訓練場の図、隊士の任務イメージが表示されるようになると、画面は一気に生き生きします。

Javaでは、画像ファイルを読み込み、その画像をウィンドウの中に描画できます。

そのときに大切になるのが、次の要素です。

この記事では、同じフォルダに置いた training.jpg という画像ファイルを読み込み、Sample5.java のウィンドウ内に表示する流れを、鬼滅の刃風の世界観でやわらかく整理していきます。

画像を表示するとはどういうことか

GUIアプリケーションで画像を表示するというのは、単に画像ファイルを用意するだけではありません。

Javaのプログラムから画像ファイルを読み込み、その画像を画面のどこに描くのかを指定する必要があります。

流れを整理すると、次のようになります。

ここで大切なのは、画像の読み込みと表示は別の処理だという点です。

画像ファイルを読み込んだからといって、その瞬間に自動で画面に表示されるわけではありません。

読み込んだ画像を、paint メソッドの中で drawImage を使って描画することで、初めてウィンドウに表示されます。

鬼滅の刃風に言えば、修行カードを記録棚から持ってきただけでは、隊士たちには見えません。

そのカードを修行案内盤の決まった位置に貼り出すことで、はじめて画面に表示されるイメージです。

画像表示の基本は読み込みと描画に分かれる

画像表示は、大きく分けると2段階です。

この2つを分けて考えると、コードの役割が見えやすくなります。

読み込みは、主にコンストラクタの中で行います。

Toolkit tk = getToolkit();
im = tk.getImage("training.jpg");

描画は、paint メソッドの中で行います。

public void paint(Graphics g)
{
    g.drawImage(im, 115, 80, this);
}

鬼滅の刃風に言えば、コンストラクタでは修行カードを準備し、paint ではその修行カードを案内盤に描くという役割分担です。

準備する場所と、実際に描く場所が分かれていることを意識すると、画像表示のしくみがかなり理解しやすくなります。

図：画像を読み込んで表示する基本の流れ

↓クリックすると拡大表示されます。

この図が示していること

この図では、画像ファイルがウィンドウに表示されるまでの流れを表しています。

まず training.jpg という画像ファイルを用意します。

次に Toolkit を使って画像を読み込み、Image 型の変数 im に保持します。

そして paint メソッドの中で Graphics の drawImage を使い、ウィンドウの指定位置に画像を描画します。

この図から分かることは、画像表示は「画像を用意する」「読み込む」「保持する」「描画する」という段階を踏んで行われるということです。

画像を表示する例

ファイル名：Sample5.java

import java.awt.*;
import java.awt.event.*;

public class Sample5 extends Frame
{
    Image im;

    public static void main(String[] args)
    {
        Sample5 sm = new Sample5();
    }

    public Sample5()
    {
        super("鬼殺隊 修行カード表示");

        // ツールキットを取得する
        Toolkit tk = getToolkit();

        // 画像ファイルを読み込む
        im = tk.getImage("training.jpg");

        addWindowListener(new SampleWindowListener());

        setSize(420, 320);
        setVisible(true);
    }

    public void paint(Graphics g)
    {
        // 画像をウィンドウに描画する
        g.drawImage(im, 115, 80, this);

        // 補足の文字も描画する
        g.drawString("きょうの修行イメージ", 160, 60);
    }

    class SampleWindowListener extends WindowAdapter
    {
        public void windowClosing(WindowEvent e)
        {
            System.exit(0);
        }
    }
}

ファイル名：training.jpg

このプログラムでできること

このプログラムを実行すると、「鬼殺隊 修行カード表示」というタイトルのウィンドウが表示されます。

ウィンドウの中には、training.jpg という画像ファイルが描画されます。

さらに、画像の上には「きょうの修行イメージ」という文字も表示されます。

このプログラムで行っていることを整理すると、次のようになります。

鬼滅の刃風に言えば、鬼殺隊本部の作戦室に修行カード表示用の案内盤を設置し、training.jpg という修行カードを表示するアプリです。

案内盤の上部には「きょうの修行イメージ」という見出しも描かれ、画像が何を表しているのか分かりやすくなっています。

画像ファイルを用意する

画像を表示するには、まず画像ファイルが必要です。

今回の例では、training.jpg という画像ファイルを使います。

im = tk.getImage("training.jpg");

この training.jpg は、プログラムを実行するときに見つけられる場所に置いておく必要があります。

学習段階では、Sample5.java と同じフォルダに training.jpg を置く形が分かりやすいです。

ファイル名が少しでも違うと、画像が正しく読み込まれないことがあります。

たとえば、training.jpg と書いているのに、実際のファイル名が Training.jpg や training.jpeg になっていると、環境によっては見つけられません。

鬼滅の刃風に言えば、修行カード棚から training.jpg という札を取り出す指示を出しているのに、棚に置いてある札の名前が違っていると、正しいカードを持ってこられないということです。

Image型の変数を用意する

Sample5.java では、クラスの中に Image 型の変数 im を用意しています。

Image im;

Image は、画像データを扱うための型です。

読み込んだ画像を、この im という変数に入れておきます。

この im は、コンストラクタで画像を読み込むときにも使います。

im = tk.getImage("training.jpg");

そして、paint メソッドで描画するときにも使います。

g.drawImage(im, 115, 80, this);

つまり im は、読み込みと描画をつなぐ役割を持っています。

鬼滅の刃風に言えば、im は記録棚から取り出した修行カードを一時的に持っておくための札入れです。

読み込んだ画像を im に保持しておくことで、あとから paint の中でその画像を案内盤に描けます。

Toolkitとは何か

画像を読み込む前に、次の処理があります。

Toolkit tk = getToolkit();

Toolkit は、AWTで画面表示や画像処理などを扱うための道具箱のような存在です。

画像を読み込むときにも、この Toolkit を使います。

初心者の段階では、Toolkit を細かく難しく考えすぎなくても大丈夫です。

まずは、AWTで画像や画面まわりの機能を使うための道具箱と考えると分かりやすいです。

鬼滅の刃風に言えば、Toolkit は鬼殺隊本部の修行案内盤を操作するための共通道具箱です。

その道具箱を使って、画像カードを取り出したり、画面に関係する準備をしたりします。

getImageで画像を読み込む

実際に画像ファイルを読み込んでいるのが、次のコードです。

im = tk.getImage("training.jpg");

このコードでは、Toolkit の getImage メソッドを使って、training.jpg という画像ファイルを読み込んでいます。

読み込んだ画像は、Image 型の変数 im に代入されます。

ここで大事なのは、getImage は画像を準備する処理だという点です。

この時点では、まだ画像はウィンドウに表示されていません。

画面に表示するには、paint の中で drawImage を使う必要があります。

鬼滅の刃風に言えば、getImage は修行カードを棚から取り出して手元に置く作業です。

手元に持ってきただけでは、まだ案内盤には貼られていません。

案内盤に貼り出す作業が drawImage です。

コンストラクタで行っている準備

Sample5.java のコンストラクタでは、ウィンドウの初期設定と画像の読み込みを行っています。

public Sample5()
{
    super("鬼殺隊 修行カード表示");

    // ツールキットを取得する
    Toolkit tk = getToolkit();

    // 画像ファイルを読み込む
    im = tk.getImage("training.jpg");

    addWindowListener(new SampleWindowListener());

    setSize(420, 320);
    setVisible(true);
}

流れを整理すると、次のようになります。

コンストラクタは、修行カード表示盤を使える状態にする準備の場所です。

タイトルを付ける。
画像を読み込む。
閉じる操作を登録する。
大きさを決める。
画面に表示する。

この流れで、GUIアプリの初期設定が整います。

図：Sample5.javaで画像が表示されるまで

↓クリックすると拡大表示されます。

この図が示していること

この図では、Sample5.java の処理がどのように進み、画像がウィンドウに表示されるのかを表しています。

main で Sample5 オブジェクトを作ると、コンストラクタが呼ばれます。

コンストラクタでは、Toolkit を取得し、getImage で training.jpg を読み込み、Image 型の変数 im に保持します。

その後、ウィンドウが表示され、描画が必要になると paint が呼ばれます。

paint の中では、drawString で文字を描き、drawImage で画像を描画します。

この図から分かることは、画像表示では、コンストラクタで画像を準備し、paint の中で実際に描画するという役割分担があることです。

paintメソッドの役割

画像を実際に画面へ表示するために使うのが paint メソッドです。

public void paint(Graphics g)
{
    // 画像をウィンドウに描画する
    g.drawImage(im, 115, 80, this);

    // 補足の文字も描画する
    g.drawString("きょうの修行イメージ", 160, 60);
}

paint は、ウィンドウの内容を描画するときに呼ばれる特別なメソッドです。

GUIでは、画面に表示したい文字や画像や図形を、この paint の中に書きます。

ここで大切なのは、paint を自分で直接呼ぶのではなく、AWTが必要なタイミングで呼び出すということです。

たとえば、ウィンドウが表示されたときや、再描画が必要になったときに paint が呼ばれます。

鬼滅の刃風に言えば、paint は修行案内盤が「画面を描き直す必要がある」と判断したときに、記録係がカードや文字を描き直す場所です。

なぜpaintの中で描くのか

画像表示を学び始めると、次のように思うかもしれません。

コンストラクタで画像を読み込んでいるなら、そのまま表示すればよいのではないか。

しかし、JavaのGUIでは、画面に見えるものは描画タイミングに合わせて描く必要があります。

そのため、画像や文字の描画は paint の中に書きます。

画像を読み込む
  ↓
Image im に保持する
  ↓
画面表示が必要になる
  ↓
paint(Graphics g) が呼ばれる
  ↓
drawImage で画像を描く

↓クリックすると拡大表示されます。

コンストラクタは準備の場所です。

paint は表示の場所です。

鬼滅の刃風に言えば、コンストラクタは修行カードを棚から出して準備する係です。

paint は、そのカードを案内盤に実際に貼り出す係です。

準備と表示を分けて考えることが、画像表示の大切なポイントです。

drawImageで画像を描画する

画像を描画している中心のコードは、次の1行です。

g.drawImage(im, 115, 80, this);

このコードは、Image 型の変数 im に入っている画像を、ウィンドウの指定した位置に描画します。

初心者の段階では、まず次のように理解すると十分です。

drawImageは、指定した画像を、指定した座標に表示するためのメソッド。

今回の場合、画像はウィンドウの左上から横に 115、縦に 80 の位置へ描かれます。

座標の数字を変えれば、画像の表示位置も変わります。

たとえば、もっと左上に表示したいなら、次のようにできます。

g.drawImage(im, 20, 50, this);

鬼滅の刃風に言えば、drawImage の座標は、修行カードを案内盤のどこに貼るかを決める位置指定です。

drawStringで文字を描く

今回のサンプルでは、画像だけでなく文字も描いています。

g.drawString("きょうの修行イメージ", 160, 60);

drawString は、Graphics を使って文字列をウィンドウ内に描くメソッドです。

この文字は、画像の上に置く見出しのような役割を持っています。

画像だけを表示してもよいですが、説明文字があると、画像が何を表しているのかが分かりやすくなります。

鬼滅の刃風に言えば、修行カードの上に「きょうの修行イメージ」という見出し札を掲げている状態です。

GUIでは、画像と文字を組み合わせることで、より伝わりやすい画面を作れます。

Graphicsクラスとは何か

paint メソッドの引数にある Graphics g は、画面に何かを描くための道具です。

public void paint(Graphics g)

Graphics を使うと、画像だけでなく、文字、線、四角形、円、多角形などを描くことができます。

鬼滅の刃風にたとえると、Graphics は修行案内盤に文字や絵や図形を書き込むための万能筆です。

Graphics は、ウィンドウの中に「何を、どこに、どんな見た目で描くか」を決めるために使います。

Graphicsクラスの主なメソッド

Graphics には、さまざまな描画用メソッドがあります。

よく使うものを整理すると、次のようになります。

鬼滅の刃風の修行案内盤で考えると、次のように使えます。

このように、Graphics を使えるようになると、画像表示だけでなく、画面の中にさまざまな図解や説明を描けるようになります。

画像と文字を組み合わせる

Sample5.java では、画像と文字を同じ paint の中で描いています。

public void paint(Graphics g)
{
    g.drawImage(im, 115, 80, this);
    g.drawString("きょうの修行イメージ", 160, 60);
}

このように、Graphics を使えば、画像だけでなく文字も同じ画面に描けます。

画像だけを表示すると、見た目は分かりやすくなります。

そこに文字を加えると、その画像が何を意味しているのかをさらに伝えやすくなります。

鬼滅の刃風に言えば、修行カードを案内盤に貼るだけでなく、その上に「きょうの修行イメージ」という見出し札を付けることで、隊士が内容を理解しやすくなります。

図：Graphicsで画像・文字・図形を描く

↓クリックすると拡大表示されます。

この図が示していること

この図では、Graphics がウィンドウに描画するための中心的な道具であることを表しています。

Graphics を使うことで、画像、文字、線、四角形、楕円などを描けます。

Sample5.java では、drawString で文字を描き、drawImage で training.jpg を描画しています。

この図から分かることは、Graphics を使うと、画像表示だけでなく、文字や図形を組み合わせた画面作りができるということです。

画像表示で気をつけたいこと

画像を扱うときは、いくつか気をつけたい点があります。

特に、画像が表示されないときは、まずファイル名と置き場所を確認するとよいです。

im = tk.getImage("training.jpg");

このコードなら、training.jpg という名前の画像を探します。

画像ファイルが別のフォルダにある場合や、名前が違う場合は、うまく表示できない可能性があります。

鬼滅の刃風に言えば、修行カードを表示したいのに、カード棚の場所や札の名前が違っていると、記録係が正しいカードを持ってこられない状態です。

座標で表示位置を決める

drawImage や drawString では、表示位置を数字で指定します。

g.drawImage(im, 115, 80, this);
g.drawString("きょうの修行イメージ", 160, 60);

ここで使っている 115、80、160、60 は、ウィンドウ内での位置を表します。

基本的には、横方向の値を大きくすると右へ移動します。

縦方向の値を大きくすると下へ移動します。

鬼滅の刃風に言えば、座標は修行案内盤のどの場所にカードや文字を貼るかを決める位置指定です。

画像表示の流れをコードで整理する

画像を表示するための流れを、コードの役割で整理しておきます。

この流れが分かると、画像表示のコードを見たときに、どこで読み込み、どこで表示しているのかが分かりやすくなります。

特に大切なのは、次の対応です。

ウィンドウを閉じる処理

Sample5.java でも、これまでと同じように、ウィンドウを閉じたときにアプリケーションを終了する処理があります。

addWindowListener(new SampleWindowListener());

内部クラス SampleWindowListener では、WindowAdapter を継承しています。

class SampleWindowListener extends WindowAdapter
{
    public void windowClosing(WindowEvent e)
    {
        System.exit(0);
    }
}

この処理の流れは、次の通りです。

鬼滅の刃風に言えば、修行カード表示盤の停止札が押されたときに、本部の支援隊士が装置を安全に止める仕組みです。

GUIアプリでは、画面を表示するだけでなく、閉じる操作に対応することも大切です。

画像・文字・図形を組み合わせる楽しさ

今回のテーマは画像の読み込みと表示ですが、Graphics を使うと画像だけでなく、文字や図形も同じ画面に描けます。

たとえば、修行案内画面なら、次のような組み合わせができます。

鬼滅の刃風の画面にすると、次のような表現が考えられます。

このように、画像を表示できるようになると、GUIアプリの表現力が大きく広がります。

文字だけでは伝えにくい内容も、画像や図形を組み合わせることで直感的に伝えられます。

はじめて画像表示を学ぶときの見方

画像表示のコードは、最初は少し特別に見えるかもしれません。

しかし、役割で分けるとかなり整理しやすくなります。

この見方に慣れると、画像表示のコードを読むときに迷いにくくなります。

鬼滅の刃風に整理すると、次のようになります。

画像の読み込みと表示で大切な要素

今回の内容で大切な要素を整理すると、次の通りです。

画像表示で一番大切なのは、読み込みと描画を分けて考えることです。

getImage で画像を読み込む。
Image 型の変数に保持する。
paint の中で drawImage を使って表示する。

この流れが分かると、JavaのGUIは文字や部品だけでなく、画像も使って表現できるようになります。

鬼滅の刃風に言えば、鬼殺隊本部の修行案内盤に、文字の案内札だけでなく、修行カードの絵も表示できるようになった状態です。

画面の中に画像が加わることで、アプリケーションはさらに分かりやすく、見て楽しいものになっていきます。