1: はじめに

Java で GUI アプリを作るための JavaFX 21 開発環境を構築し、試しにアプリを作ってみる手順を解説します。

最終的には、ボタンをクリックするとラベルが書き換わる、単純なアプリを作成します。

1-1: 構築する環境

この記事で構築しているソフトウェアおよびそのバージョンは次のとおりです。
ただ、記事内の画像で使用しているバージョンが、異なる場合もあります。ご留意ください。

統合開発環境 IDE
- Eclipse 2023-12 (Pleiades)
- Pleiades は日本語版 Eclipse です
Eclipse 同梱の Java 21
Eclipse プラグイン
- e(fx)clipse 3.8.0
GUI ライブラリ
- JavaFX SDK 21.0.5
- 昔は JavaFX と Java が合体していたらしいのですが、今は分離しています
JavaFX 開発ツール
- Scene Builder 21
- Visual Studio などのように、GUI でアプリ開発できるツールです

1-2: 参考情報

本当は書籍などを読みながら作った方がよいと思うのですが、ほぼ自己流です。

1-2-1: 環境構築について

OpenJFX (公式) - Getting Started with JavaFX
- この記事を書き終えたあとに読みましたが、公式情報はこちらです
軽Lab - EclipseでJavaFX入門(Java17での環境構築)
- Eclipse への JavaFX SDK 関連付け（ビルドパスの設定）が分かりやすいです
Qiita doichek - eclipseでJavaFXを利用するための環境設定手順
- メモ書きのようなものですが、参考になると思います
- module-info.java を消しているので、業務アプリには向かないかも
福岡工業大学 - JavaFXのコンパイル・実行環境のインストール
- 授業で利用されてるのでしょうか
- 割と新しくて参考になります
Zenn Ushio Inoue -
- JDK と JavaFX が合体した Java をインストールすることで JavaFX SDK のインストールを省略しています
- ただ、FXML は使ってないような

1-2-2: JavaFX 全般について

軽Lab - JavaFX 入門講座
- 有用な情報が日本語でまとまってます！

2: 開発環境の構築

2-1: Eclipse (Pleiades)

まず、2024年現在の配布サイトへアクセスします。
（以前は https://mergedoc.osdn.jp/ で配布されていました）

配布サイト: https://willbrains.jp/

「Eclipse 2023」を選択します。

Eclipse は1年単位でアップデートされています。おそらく、最新版でも問題ないかと思います。

適切な項目を選択し、ファイルをダウンロードします。（1.2 GB 程度と結構大きい）

Full Edition (デフォルト)
Windows x64
Java

ダウンロードファイルは自己解凍形式です。（ちょっと怖い）
展開先が「C:\pleiades(YYYY)-(MM)」であることを確認し、解凍ボタンをクリックします。

これで Eclipse のインストール作業自体は完了です。
ただ、起動ショートカットがスタートメニューなどに表示される訳ではないので、"C:\pleiades(YYYY)-(MM)\eclipse" の中にある eclipse.exe のショートカットを適当に作成してください。

2-2: プラグイン e(fx)clipse のインストール

Eclipse をインストールしたら、起動してみましょう。
初回起動時は次のようなワークスペース設定画面が表示されます。

ワークスペースとは、プロジェクトフォルダが保存される大元のフォルダのことです。
デフォルトの「../workspace」であれば、「C:\pleiades(YYYY)-(MM)\workspace」フォルダ内に保存されます。

そのまま起動してください。

Eclipse が起動したら、メニューバーの [ヘルプ] > [Eclipse マーケットプレース] を選択します。

検索キーワードに「fx」と入力し、Enterキーを押下します。そして、検索結果の中にある「e(fx)clipse」をインストールします。

インストールはバックグラウンドで実行されますが、結構時間がかかります。
インストール中に使用条件条項への同意が求められた場合は同意し、「PGPの信頼」に関する画面が表示された場合は、項目をすべて選択状態 ☑ にして続行してください。

インストール終了後は、Eclipse の再起動が求められますので、そのまま再起動してください。

2-3: JavaFX SDK のインストール

JavaFXを開発するためには、SDK (Software Development Kit) が必要になるためインストールします。

2-3-1: 必要ファイルのダウンロードとインストール

まず、配布サイトへアクセスします。

配布サイト: https://openjfx.io/

ページを少しスクロールし、「Download」をクリックします。

ダウンロードページが開きます。（Gluon という企業が関わっている模様）

Roadmap に記載がありますが、Java と JavaFX は同じバージョン番号でアップデートされていくようです。
基本的には、LTS を選んでおけば良さそうなので、今回は 21 を選択することにしました。

Downloads より、必要なバージョン等を次のように指定し、ダウンロードします。
ちなみに2023年ごろにアクセスしたときは、古いバージョンにアクセスできなくなっていましたが、現在はできるようです。

JavaFX version : 21.0.5 (LTS)
Operating System : Windows
Architecture : x64
ファイルについて
- SDK はダウンロード必須
- jmods は、将来的に EXE ファイルダブルクリックで起動できるようにするのであれば必要
- Javadoc はリファレンス

ファイルをダウンロードしたら、永続的に置いても問題ない場所に zip ファイルを展開（解凍）します。
私は、C:\pleiades へ配置しました。

2-3-2: JavaFX ユーザライブラリの登録

配置した JavaFX SDK は、ビルド時に参照する必要があるため、前準備を行います。

Eclipse を起動し、メニューバーの [ウィンドウ] > [設定] を選択します。

設定画面の左ペインにて、[Java] > [ビルド・パス] > [ユーザー・ライブラリ] を順に選択し、[新規] ボタンを選択する。

ユーザー・ライブラリー名として、「JavaFXLibrary」などの任意の名前を設定します。

作成したユーザーライブラリを選択し、JavaFX SDKを保存したフォルダ “C:\pleiades\javafx-sdk-(バージョン)” のlibフォルダの中にあるjarファイルをすべて選択します。

ウィンドウ下部の [適用して閉じる] をクリックします。

これで JavaFX SDK の設定は完了です。

最後に、画面配置を Java 開発用に変更する設定です。
メニューバーより、 [ウィンドウ] > [パースペクティブ] > [パースペクティブを開く] > [Java] を選択します。

2-4: Scene Builder のインストール

Visual Studio のように GUI コントロールを直感的に設計できるツール Scene Builder をインストールします。

2-4-1: 必要ファイルのダウンロードとインストール

まず、配布サイトへアクセスします。

配布サイト: https://gluonhq.com/products/scene-builder/

少しスクロールして [Download Scene Builder] を探し、必要なインストーラをダウンロードします。
一応、JavaFX のバージョン (21) よりも Scene Builder のバージョン (23) が新しくても問題ないようです。

ダウンロードファイル “SceneBuilder-(バージョン).msi” をダブルクリックし、ソフトウェアの指示に従ってインストールします。

デフォルトのユーザーインストールの場合、Windows のユーザごとにインストールされ、“C:\Users(ユーザ名)\AppData\Local\SceneBuilder” へインストールされます。

2-4-2: Eclipse への関連付け

Eclipse から Scene Builder を起動できるよう関連付け設定を行います。

まず、Eclipse を起動し、メニューバーの [ウィンドウ] > [設定] を選択して設定画面を開き、画面の左ペインから [JavaFX] を選択します。

[SceneBuilder実行可能ファイル] として、インストールした SceneBuilder.exe を指定します。
ユーザーインストールしていれば、次のパスに exe ファイルが存在します。

（AppData フォルダは隠しフォルダのため注意）
C:\Users\(ユーザ名)\AppData\Local\SceneBuilder\SceneBuilder.exe

最後に、ウィンドウ下部の [適用して閉じる] を選択します。

これで、JavaFX で GUI アプリを開発する準備が完了したはずです！

3: 初めての JavaFX プロジェクト

3-1: JavaFX プロジェクトの作成

メニューバーより、 [ファイル] > [新規] > [その他] の順に選択します。（Java ではないので注意！）

[JavaFX プロジェクト] を選択し、次へ進みます。

次のようにプロジェクト設定を行います。

プロジェクト名の設定
- 任意の名前（変数に設定できる文字種のみ。日本語は使わない）
- 例: JavaFXProject1
JRE バージョンの確認
- 実行環境 JRE: JavaSE-21（確認のみ）

設定・確認ができたら次へ進み、Java 設定画面を表示します。

タブの [ライブラリー] の中の項目にて、[モジュールパス] を選択し、[ライブラリーの追加] を選択します。

ライブラリーの追加画面にて、[ユーザーライブラリー] を選択し、作成したライブラリーにチェックを入れ、[完了] します。

モジュールパスの下にユーザライブラリーが追加されたことを確認し、次へ進みます。

JavaFX に関して、次のように設定します。

言語は "FXML" に変更
- 画面設計に使用する言語を指定する (Scene Builder を使うときは必ず FXML に変更)
- 変更し忘れたときとはプロジェクト作成をやり直した方が早い
ルートタイプは "javafx.scene.layout.AnchorPane" に変更
- BorderPane より AnchorPane の方がおそらく直感的
ファイル名とコントローラは、必要に応じて変更
- クラス名と同じ命名規則

設定項目を入力し終えたら、設定を完了します。

JavaFX プロジェクトが作成されているはずですが、Scene Builder の起動を確認しておきます。

作成プロジェクト > [src] > [application] > [Sample.fxml] を右クリックし、 [SceneBuilder
で開く] を選択し、Scene Builder が起動することを確認します。

Scene Builder を起動すると、中央に灰色の世界が広がっているはずです。

3-2: Scene Builder による画面設計

ここでは Scene Builder を使って、GUI　ウィンドウ上に「Hello JavaFX」と表示するプログラムを作成します。

3-2-1: ウィンドウサイズの指定

実は Scene Builder を開くと既に、GUI アプリのウィンドウが表示されていますが、ウィンドウサイズが 0px * 0px なので目に見えません。
そこで、ウィンドウサイズを 200 px * 200 px にします。

まず、画面左下の [ドキュメント (Document)] > [階層] の中にある AnchorPane を選択します。
そして、画面右上の [インスペクタ] > [Layout] を選択します。

ウィンドウサイズの初期サイズを "Pref Width" と "Pref Height" で設定します。
（USE_COMPUTED_SIZE -> 200）

設定すると、見えなかったウィンドウが表示されるはずです。

3-2-2: ラベルの配置

今度は "Hello, World!" と表示するラベルを配置してみましょう。

画面左上の [ライブラリ] > [コントロール (Control)] の中から「Label」を探し出し、白いウィンドウへドラッグ＆ドロップします。（検索機能もあります）

ラベルの中身を、ダブルクリックなどの操作で「Hello, World!」にします。
（画面右上の [インスペクタ] > [プロパティ (properties)] の Text で変更することもできます。）

ラベルの配置が終わったら、Scene Builder の画面を上書き保存しておきましょう。
これで、JavaFX 画面設計ファイルの Sample.fxml が上書きされているはずです。

3-3-3: JavaFX アプリの起動

Eclipseのウィンドウに戻り、パッケージ・エクスプローラーでプロジェクト名 (JavaFXProject1) を右クリックします。

コンテキストメニュー（右クリックメニュー）の中の [実行] > [Java アプリケーション] を選択します。

[Javaアプリケーションを選択] ウィンドウでは [Main] を選択します。

うまく動けば、「Hello, World!」と表示されているはずです！

3-3-4: ウィンドウサイズの修正

先ほど作成したアプリをよく見ると、ウィンドウサイズがおかしくなっていませんか？
実は、Scene Builder での設定にかかわらず、初期設定では 400 px * 400 px になってしまっています。

原因は、Main.java にあります。
作成したプロジェクト > [src] > [application] > [Main.java] をダブルクリックしてコードを表示させます。

次のようなコードかと思われますが、Scene クラスのコンストラクタに注目してください。

Main.java (初期)

package application;
	
import javafx.application.Application;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.layout.AnchorPane;
import javafx.fxml.FXMLLoader;


public class Main extends Application {
	@Override
	public void start(Stage primaryStage) {
		try {
			AnchorPane root = (AnchorPane)FXMLLoader.load(getClass().getResource("Sample.fxml"));
			Scene scene = new Scene(root,400,400);  // ★注目
			scene.getStylesheets().add(getClass().getResource("application.css").toExternalForm());
			primaryStage.setScene(scene);
			primaryStage.show();
		} catch(Exception e) {
			e.printStackTrace();
		}
	}
	
	public static void main(String[] args) {
		launch(args);
	}
}

new Scene(root, 400, 400) の第2引数と第3引数は、起動時のウィンドウサイズ指定になっており、こちらが優先となっています。
そこで、第2、第3引数を削除します。（なくても動きます）

Main.java (変更後)

Scene scene = new Scene(root);  // ★変更後

変更すると、Scene Builder でのウィンドウサイズ指定が適用されているはずです。
うまく動いた方はおめでとうございます。

3-4: ボタンイベント処理

最後に、ボタンをクリックしたらラベルの表示を変更するアプリを作ってみましょう。

3-4-1: Eclipse コントローラクラスの記述

クリックイベントなどの処理は、コントローラクラス (SampleController.java) へ記述することになっています。
コントローラクラスに、使用するボタンとラベルの定義を記述しましょう。

まず、Eclipse の画面にて、コントローラクラスのファイルをダブルクリックします。
（作成したプロジェクト名 > [src] > [application] > [SampleController.java] をダブルクリック）

最初は、次のようになにも記述されていません。

コントローラクラス (初期)

package application;
public class SampleController {
}

次のようにコードを書き換えます。

コントローラクラス (初期)

package application;

import javafx.fxml.FXML;
import javafx.scene.control.Button;
import javafx.scene.control.Label;

public class SampleController {
	@FXML private Button button;
	@FXML private Label label;

 	@FXML
	private void onButtonClicked(ActionEvent e) {
		// ボタンクリック時の処理
  		label.setText("Hello, JavaFX World!");
	}
}

Eclipse を使い慣れていない方は、次のように作業しましょう。

まず、public class Samplecontroller {} の中身を記述します。

public class SampleController {
	@FXML private Button button;
	@FXML private Label label;

 	@FXML
	private void onButtonClicked(ActionEvent e) {
		// ボタンクリック時の処理
  		label.setText("Hello, JavaFX World!");
	}
}

記述後、上書き保存をすると、いくつかのインポート宣言は自動で解決されますが、されないものもあります。

Button クラスなどの解決されていない部分にマウスを乗せると、次のような表示がでます。

今回は JavaFX による GUI 開発なので、必ず javafx から始まる項目を選択して、自動入力しましょう。
たまに java.awt. から始まる項目が上にサジェストされますが、選択すると クラスが違うので動かなくなります。

コードを記述したら、上書き保存しておきます。

3-4-2: Scene Builder で画面設計

Scene Builder の画面に戻ったら、ボタンを追加しておきます。

3-4-3: コントローラクラスと画面設計の関連付け

現在、コントローラクラスには、次のような @FXML アノテーションのついたフィールド・メソッドが用意されています。

button フィールド (Button クラス)
label フィールド (Label クラス)
onButtonClicked メソッド

Scene Builder による画面設計と関連付けることによって、アプリが動作するように設定します。
JavaFX では、関連付けに用いる ID が「fx:id」と呼ばれています。（ただの id もありますが CSS 装飾用）

まずは、ボタンに fx:id を設定してみましょう。
Scene Builder の画面左下にて [ドキュメント] > [階層] で [Button] を選択し、画面右上の [Properties] > [Code] を開きます。

そして fx:id の項目で "button" を選択します。（コンボボックスとなっており、クラスが上書き保存されていれば選択できるはず）

同様の手順で、ラベルの fx:id の "label" を選択してください。

最後に、"button" を選択し直し、"On Action" の項目で "onButtonClicked" を選択します。

Scene Builder の画面で上書き保存したら、完了です！

3-4-4: アプリの動作確認

Eclipse のウィンドウに戻り、アプリを起動してみてください。
ボタンクリックに反応して、ラベルが書き換えられていれば成功です。

うまく書き換わらない場合は、fx:id とコントローラクラスの名前が同じかどうかや、Scene Builder や Eclipse で上書き保存できているかどうかを確認してみてください。

4: 最後に

もしも Eclipse プロジェクトで作成した JavaFX アプリを、Java が存在しない Windows PC で動かしたいときは、次の記事を参考に EXE ファイル化してみてください。