【Java】ボタンに画像が表示されない

Question

実現したいこと

・ボタンに画像を表示したい

前提

JavaでGUIアプリケーションを作ってみようと思い、下記リンクを参考に製作をしました。
https://original-game.com/java-janken-game-program/

次はこれに画像を追加しようと思い、まずはボタンに画像とテキストを表示するコードを追加したのですが、画像が表示されません。

ソースコードを何度見直してもどこに問題があるかわからず困っています。

下記コードの問題点を指摘頂けると幸いです。

発生している問題・エラーメッセージ

ボタンにテキストと画像を表示したいが、画像が表示されない。
テキストは表示される

該当のソースコード

package jp.hoge.fuga.foo;

（略）

public class Main {
	
	//プレイヤー側手配列
	private static String[] hands = {"グー","チョキ","パー"};
	private static ImageIcon[] buttonHands = new ImageIcon[3];
		//初期化ブロック
	{
	buttonHands[0] = new ImageIcon("../../../../../img/image1.png");
	buttonHands[1] = new ImageIcon("../../../../../img/image2.png");
	buttonHands[2] = new ImageIcon("../../../../../img/image3.png");
	}

（略）
	public static void main(String[] args) {
		//Main Window
		JFrame frame = new JFrame("じゃんけんゲーム");
		frame.setSize(900, 650);
		frame.setLocationRelativeTo(null);
		frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		frame.setResizable(false);
（略）
		//FooterPanel
		JPanel footerPanel = PanelMaker.makePanel(Color.BLACK,900,200);
		footerPanel.setLayout(new GridLayout());
		
		//ボタン生成
		for(int i=0; i<hands.length; i++) {
			JButton button = new JButton(hands[i],buttonHands[i]);
			button.setFont(new Font("Meiryo", Font.PLAIN, 24));
			button.setHorizontalTextPosition(JButton.CENTER);
			button.setVerticalTextPosition(JButton.BOTTOM);
			button.addActionListener(new ButtonActionListener());
			footerPanel.add(button);
		}
		
		frame.add(footerPanel, BorderLayout.SOUTH);
		
		frame.setVisible(true);
		
	}
（以下略）

試したこと

画像のパスに問題があるのかと思い、プロジェクトフォルダからの相対パスに変更してみましたが、解決しませんでした。

32行目を

JButton button = new JButton(buttonHands[i]);

にしたところ、ボタンには何も表示されませんでした。

ボタンのサイズに問題がある可能性も考え、footerpanelの高さを変えてみましたが、改善しませんでした。

補足情報（FW/ツールのバージョンなど）

開発環境はeclipseを使用しています。
Main.javaファイルと画像ファイルのフォルダ構造は下記の通りです。

プロジェクトフォルダ---src--jp---hoge---fuga---foo--Main.java
|
└--img---image1.png（以下image2.png及びimage3.pngも同じ）

よろしくお願いいたします。

Answer 1

パスの指定がダメなようです。
まず、パッケージのフォルダ構造は実行には関係ありません。
そして、 src フォルダは eclipse の開発環境としての構造で、実行は src フォルダのある位置つまり 「プロジェクトフォルダ」がカレントフォルダになります。
従って、(プロジェクトフォルダ)\img\image1.png を指定するなら相対パスとしては "img/image1.png" となります。

↓のようなプログラムを作って確認してみては如何でしょうか。

package jp.hoge.fuga.foo;

import java.io.File;

public class Test {
  public static void main(String[] args) {
    File file = new File("img/image1.png");
    System.out.println(file.getAbsolutePath()); //絶対パス
    System.out.println(file.exists()); //有るか無いか
  }
}

---

じゃんけんの "手" に関わるものを enum Hand に集約してみます。
クラス分けも、パネルをレフリー/コンピュータ/プレイヤーに見立ててみました。

import java.awt.*;
import java.util.Random;
import java.util.function.Consumer;

import javax.swing.*;

public class MainFrame extends JFrame {
  public static void main(String[] args) {
    SwingUtilities.invokeLater(() -> new MainFrame().setVisible(true));
  }

  MainFrame() {
    super("じゃんけんゲーム");
    setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    setResizable(false);

    RefereePanel refereePanel = new RefereePanel();
    add(refereePanel, BorderLayout.NORTH);

    ComputerPanel computerPanel = new ComputerPanel();
    add(computerPanel, BorderLayout.CENTER);

    add(new PlayerPanel(playerHand ->
      refereePanel.finish(playerHand, computerPanel.getHand())
    ), BorderLayout.SOUTH);

    pack();
    setLocationRelativeTo(null);
  }

  private static enum Hand {
    グー("image1.png"), チョキ("image2.png"), パー("image3.png");

    String imagefile;
    Hand(String imagefile) {
      this.imagefile = imagefile;
    }
    /**
     * 勝敗
     * @param other 相手
     * @return 0=引き分け, 1=負け, 2=勝ち
     */
    int judge(Hand other) {
      return (ordinal() - other.ordinal() + 3) % 3;
    }
  }

  private static class RefereePanel extends JPanel {
    private static final String[] TEXTS = { "あいこかよ！", "お前の負けかよ！", "お前の勝ちかよ！" };
    private JLabel label;
    RefereePanel() {
      super(new BorderLayout());
      setBackground(Color.BLACK);
      setSize(640, 50);
      setPreferredSize(getSize());

      add(label = new MyLabel("「さあ、じゃんけんで勝負だ！」", 24, Color.WHITE));
    }
    void finish(Hand playerHand, Hand computerHand) {
      label.setText(TEXTS[playerHand.judge(computerHand)]);
    }
  }

  private static class ComputerPanel extends JPanel {
    private Random random = new Random();
    private JLabel label;
    ComputerPanel() {
      super(new BorderLayout());
      setBackground(Color.WHITE);
      setSize(640, 380);
      setPreferredSize(getSize());

      add(label = new MyLabel("じゃんけん……", 54, Color.BLACK));
    }
    Hand getHand() {
      Hand computerHand = Hand.values()[random.nextInt(3)];
      label.setText(computerHand.toString());
      return computerHand;
    }
  }

  private static class PlayerPanel extends JPanel {
    PlayerPanel(Consumer<Hand> referee) {
      super(new GridLayout());
      setBackground(Color.BLACK);
      setSize(640, 50);
      setPreferredSize(getSize());

      for(Hand hand : Hand.values()) {
        JButton button = new JButton(hand.toString(), new ImageIcon("img/" + hand.imagefile));
        button.setFont(new Font("ＭＳ ゴシック", Font.PLAIN, 24));
        button.addActionListener(v -> referee.accept(hand));
        add(button);
      }
    }
  }

  private static class MyLabel extends JLabel {
    MyLabel(String str, int size, Color color) {
      super(str);
      setForeground(color);
      setFont(new Font("ＭＳ ゴシック", Font.PLAIN, size));
      setHorizontalAlignment(JLabel.CENTER);
      setVerticalAlignment(JLabel.CENTER);
    }
  }
}

Comments

[TN8001]

「初期化ブロック」も原因です。
Mainクラスのインスタンスを作っていないので実行されません。
[Java static初期化ブロックと初期化ブロック | ITSakura](https://itsakura.com/java_block)

handsと同様に普通に初期化すればいいでしょう（「static初期化ブロック」にしてもいいでしょうが^^;

private static ImageIcon[] buttonHands = {
new ImageIcon("img/image1.png"),
new ImageIcon("img/image2.png"),
new ImageIcon("img/image3.png"),
};

[Kob83]

お二方の指摘通りに修正したところ、解決しました！ありがとうございます。
最初は普通に初期化しようとしていたのですが、今思うと配列なのに,ではなく;で区切るアホなことをしてエラーが出たので、何も考えず初期化ブロックにしてしまっていました。

今回指摘を受けて改めてコードを見直していたところ、クラスの最初のほうで記述しているbuttonHandsはボタンに画像を配置する以外では使用しないので、mainメソッド内で記述した方が良いような気がしてきました。
この場合、この場合、どちらの方が望ましいのでしょうか。

[jimbe]

buttonHands は hands とセットですので、私なら グーチョキパーと各画像ファイル名で1つとなる enum にして、ついでに判定ロジックも組み込みます。
(回答にコード追加)

[Kob83]

ありがとうございます。
enumはまだ勉強中でしたが、このように使うのですね。
勉強してから改めて取り組んでみたいと思います。

[jimbe]

enum は class のちょっと特別な書き方・使い方というだけで、 enum Hand も普通のクラスで書けます。
トランプのスートや麻雀牌の種類のような「有限で増減せず同時に使うモノの集まりで、それぞれに何か(表示順とか)関係があるもの」を表すのに適切かと思います。
まぁ100とか1000とかあまりに数が多いのをグーチョキパーみたいに全部書くのは大変で間違えやすいですので、その場合は別のテを使った方が良いでしょうね。

[Kob83]

ありがとうございます。
修正されたコードを眺めていてふと思ったのですが、列挙子（でいいんですよね？）が「 グー("image1.png")」のような書き方になっていますが、素人からすると「GU("グー", "image1.png")」のほうが適切に感じてしまいます。前者の方が何か利点があるのでしょうか。

＞「有限で増減せず同時に使うモノの集まりで、それぞれに何か(表示順とか)関係があるもの」を表すのに適切かと思います。

ということは、Javaの作例でよく配列で格納しているデータは結構enumに置き換え可能そうですね。

＞「有限で増減せず同時に使うモノの集まりで、それぞれに何か(表示順とか)関係があるもの」を表すのに適切かと思います。

プログラミング自体初学者なのであまり詳しくないのですが、そういう場合は別途データベースを作って読み込ませる、などのほうが良いのでしょうか……

[jimbe]

>「 グー("image1.png")」のような書き方になっていますが、素人からすると「GU("グー", "image1.png")」のほうが適切に感じてしまいます

"適切" の基準は何でしょうか。(責めているのでは無くて単なる質問です。)
言ってしまえば今回は私はどちらでも良いと思います。
enum は toString() がそのオブジェクト自身の名前を返すことになっていますので、 Hand.グー.toString() は "グー" を返しますから、間接的に利用されます。対して GU("グー", " image.png") と定義する場合、 "GU" は何にも利用されません。
また、将来国際化するとかいう類なら、"GU" というのも適当かどうかわかりません("Rock"/"Scissors"/"Paper"となるかもしれません)し、 toString() メソッドは override 可能ですから必要なら "GU" に変えて toString() で "グー" を返したり、設定ファイルを作って最初に読ませることも可能です。(そしてその場合でも Hand クラス以外に修正はありません。そのほうが案件としては重要です。)

Hand に必要なのは "グー" か "GU" かでは無く、じゃんけんのテを 3 つ定義し、表示用文字列と画像ファイル名が得られ、各テ間の勝敗の判定が出来る事としましたので、"グー" か "GU" かはどちらでも…なのです。(後付けですけど^^; )

もし「一般的なのか」という問いでしたら、ネットや書籍のコードを見る限りクラスやメソッド、フィールド/変数、オブジェクト名等に日本語を使うのは少ないかもしれません。
でも個人的には、日本人が書いた日本人向けのサンプルコードで "これくらい" は話のネタとしても面白いのではという感じです。
そもそも(?) 英語圏の人が「if(Hand.toString().equals("Rock")) ～」というコードを見たら、それは日本人が「もし手を文字列にしたのが "石"(グー) と同じだったら」と書いてあるように見えるのと同じはずで、英語圏の人には自然言語的に読める(ようにする)のに日本語圏の人には読めるようにしてはダメということは無いでしょう。(確信犯?)

>別途データベースを作って読み込ませる、などのほうが良いのでしょうか

「案件に因ります」というのが大前提です。
この質問のコード規模・機能・将来の想定(これは私の想像ですが)ならそもそもデータベースどころか設定ファイルを使うのも必要性がありませんから、コードで完結するように書きました。
もし国際化やローカルルールの取り込みやオンライン化までも見据えたポーカーゲームだったら、役をデータベース化してその中に全ての情報を入れることになるかもしれませんね。