アプリJoymp開発記録 001 メイン画面の作成と表示

この記事は約4分で読めます。
スポンサーリンク

Joymp - メイン画面

こんにちは、鈴木俊吾です。

前回の記事「Quest0002 Java製音楽アプリ「Joymp」を開発する」で、私はJavaを使ってアプリを開発するというクエストを立てました。

今回、開発するJavaアプリ「Joymp」というのは音楽再生アプリです。
これまでには作った経験が無いジャンルのプログラミングになりますね。

現状、思い描いている完成形から逆算すると…。
完成までには、それほど時間はかからないんじゃないかとは思っているのですが…。
まあでもこればっかりは実際やってみないと何とも言えませんね。
ただ、一度やると言った以上は、何としてでも完成形までは持っていきますよ!

今日は、Joympのメイン画面になる部分のデザインをしてみました。
そして、実際にウィンドウ上に表示させてみるテストをしてみましたよ。

メイン画面のデザイン

今回開発しているJavaアプリは、正確に言うとJavaFX製です。
基本的には、JavaFXで画面をデザインするときには、「SceneBuilder」というツールを使って作成します。
もちろん、私も例にならって、SceneBuilderを使って画面を設計してみました。

音楽プレイヤーということで、デザインをどうするか考えたのですが…。
音楽を聴くのに最低限必要な機能をまずは備えたいところ。
とりあえず、音楽の再生/停止/シーク/前の曲/次の曲/リピート/音量調整、くらいはできるようにしたいですね。

あまり奇抜なデザインにしても、使いにくいだけでしょうから…。
音楽プレイヤーアプリで一般的に普及していそうな、基本的なデザインを採用。
トラック名のラベル、シークバー、再生時間、各種コントロール用のアイコンを設置してみました。

そして、ひとまず暫定的にできあがったデザインが以下の画面。
まあどこにでもありそうなデザインに落ち着いてしまいましたね…。
でも、その分、操作方法については説明しなくても何となく分かるのではないでしょうか?

Joymp - メイン画面

ウィンドウ上への表示

デザインしたファイルは、「PlayerScene.fxml」として保存してあります。
これを読み込んでウィンドウ上に表示させるには「FXMLLoader」クラスを使います。

とりあえず、まずは表示テストということで…。
ひとまずFXMLLoaderクラスで読み込み、ウィンドウに設定して表示するプログラムを組んでみます。
後でコントローラーを扱えるように、コントローラーの取得も行ってみることに。

@Override
public void start(Stage stage) throws Exception {
    stage.setTitle(String.format("%s %s", Config.TITLE, Config.VERSION));

    FXMLLoader loader = new FXMLLoader(Resource.getResource("view/PlayerScene.fxml"));
    Parent root = loader.load();
    Scene scene = new Scene(root);
    stage.setScene(scene);

    playerSceneController = loader.getController();
    playerSceneController.setStage(stage);
    playerSceneController.show();
}

上記のような感じでプログラムを実行すると以下のようになります。

Joymp - メイン画面

今後の予定

今後の予定ですが…。
まずは、MP3プレイヤーの基本的な機能を持つクラスを作成するところから入ろうと思います。
この大本の部分さえできてしまえば、あとはGUIと連携させていくだけになりますからね。
できるだけ早く形にしたいなぁ…。

ひとこと

今回は、Joympのメイン画面の作成と表示テストを行ってみました。
無事に想定していたような画面表示ができましたね。

さて、これからは処理の核となる部分の実装作業にかかります。
何とも地味な部分のプログラミングになりますが…。
ここをしっかりと設計することで、後の作業が楽になります。
アップデートのことも考えて、扱いやすい構成にしておきたいですね。

コメント

  1. 鈴木俊吾様、こんにちは、ビッキーと申します。
    ご記事の執筆をお願いしたいのですが。
    よろしいでしょうか?
    詳細に関するはどうぞお気軽にご連絡してお願いいたします。

    • ビッキー さん

      コメントありがとうございます。

      記事広告の執筆依頼ということでしょうか?
      当ブログの「ストア」から詳細を確認できますので、一度チェックしていただきたく思います。
      その後、改めて依頼される際にはご購入くださいね。

タイトルとURLをコピーしました