LoginSignup
6
9

More than 5 years have passed since last update.

JavaFX でカップラーメンタイマーを作る

Last updated at Posted at 2016-05-01

概要

以前投稿した「JavaFX でストップウォッチを作る」のコメントで @shiracamus さんからカップラーメンタイマーのリクエストを受けましたので、作ってみました。

必要な機能

  1. 3分、4分、5分のボタン
  2. 押すとカウントダウンが始まる
  3. 0でチャルメラ
  4. 音が鳴らない人のためにポップアップウィンドウ表示
  5. 停止ボタン

スクリーンショット

スクリーンショット (23).png

起動直後です。クローズボタンだけ赤くしました。

スクリーンショット (24).png

大きな数字のボタンを押すとタイマーにセットされます。いずれも分単位です。

スクリーンショット (26).png

3-5分しかできないのはカップラーメンの多様性にそぐわないので、好きな時間を分単位で入力できるTextFieldを用意してあります。10分どん兵衛 (リンク先は NAVERまとめ の記事です) を試したい方もこれで安心ですね。

スクリーンショット (27).png

▶のボタンを押すとカウントダウンが始まります。カウントダウン中は■ボタンに変化し、このボタンを押せば一時中断が可能です。

スクリーンショット (21).png
0になると音声とダイアログで通知します。なお、音声ファイルはWindowsのデフォルトを使用しています。音声ファイルが存在しない場合はダイアログだけ表示されます。

注意

Dialog を使用しているため、Java SE 8u40以前の環境では動作しません。

実装

jp.toastkid.gui.jfx.noodle_timer パッケージにすべてのクラスを置いてあります。各クラスのポイントを説明します。

Main.java

Application をスタートさせるクラスです。

Windows の場合、 JavaFX のタスクアイコンは下記のやり方で設定可能です。

タスクアイコン設定
final Image image = new Image(getClass().getClassLoader().getResourceAsStream(PATH_TO_ICON));
stage.getIcons().add(image);

Controller.java

UIからの入力に対し操作を実行するクラスです。

Notifier.java

通知を実行するクラスです。具体的にはダイアログの表示と音声ファイルの再生を実施します。下記の通り、 Builder を使って初期化します。

Notifierの初期化
notifier = new Notifier.Builder().setPathToWav(Resource.PATH_TO_WAV)
                .setTitle("時間です!")
                .setMessage("ラーメンができました!!!!!")
                .build();

アイコン差し替え

ダイアログはアイコンを差し替えてみました。

画像の用意
final Image image = new Image(getClass().getClassLoader().getResourceAsStream("ramen.png"));
ウィンドウアイコンの差し替え
final Stage stage = (Stage) alert.getDialogPane().getScene().getWindow();
stage.getIcons().add(image);
Alertのアイコン差し替え
alert.setGraphic(new ImageView(image));

Stopwatch.java

カウントダウンタイマーを拡張で実装しました。

コールバック設定機能

Start/ Stop 時にボタンの表示変更をしたかったので、コールバックを設定できるようにしてあります。

Controllerクラスから下記の通り設定してあります。

timer.setOnStart( ()  -> {ctrl.setText("■");});
timer.setOnStop(  ()  -> {ctrl.setText("▶");});

自作の Control に独自の property を追加

コンストラクタの引数に NamedArg アノテーションを追加します。
この場合、 FXML で additional という属性名を指定してやることで値を設定できます。

コンストラクタに追加
public Stopwatch(@NamedArg("isCountDown") final boolean isCountDown) {
FXML
<Stopwatch fx:id="timer" prefHeight="400.0" prefWidth="525.0" isCountDown="true" />

NumberTextField.java

数値だけを受け付ける機能は TextField を拡張して用意しました。 replaceText と replaceSelection メソッドを Override し、validate というバリデーションメソッドを通して残った値を入力値とするものです。これを応用すれば、逆に文字列だけを受け付ける TextField 等も作れます。

    @Override
    public void replaceText(final int start, final int end, final String text) {
        if (validate(text)){
            super.replaceText(start, end, text);
        }
    }

    @Override
    public void replaceSelection(final String text) {
        if (validate(text)) {
            super.replaceSelection(text);
        }
    }

    private boolean validate(final String text) {
        return text.matches("[0-9]*");
    }

Resource.java

アイコンと音声ファイルの置き場所を定数で保持しているクラスです。

改良点

  1. JFoenix を使って Material Design 化
  2. 秒単位でのタイマー設定
  3. チャルメラ音ほか任意の効果音を設定可能にする
  4. 残り時間に合わせて色を変える
  5. デザイン修正

ソースコード

GitHub Repository

参考

  1. Property “style” does not exist or is read-only
  2. How do you set the icon of a Dialog control Java FX/Java 8
  3. JavaFX Dialogs (official)
  4. What is the recommended way to make a numeric TextField in JavaFX?
6
9
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
9