イントロダクション

前回は、IF文を理解したと思います。不思議な設定は少し置いておきます。

このブログを読み進めていれば、以下のスキル(武器)を保有していると思います。

1. JavaFXのラベルコントロール
2. IF文の書き方を理解している
3. Stringクラス(文字列)の記載、コントロール
4. メソッドを作る(文字列を返却する)
5. System.out.printlnメソッド

MAPを作る

そろそろ、それっぽいものを作りたいと思います。そのために新たな武器を取得してもらいます。

ループ(FOR)文を覚える

まずは、MAPとFOR文の関係がわからないと「やる気」が出ないと思います。参考に作成したものをみてください。詳しくはこちら

下のソースは、次のような処理を行っています。

1. パネルのサイズをint型の配列で保持します。
2. 使用する画像ファイル名を変数に保持(ここではgrass_light.pngのみ使用)
3. GridPaneクラスで升目上にラベルを配置する準備
4. GridPane#add()でラベルを追加
   ※createImageLbl()メソッドはファイル名を引数にしてImageLabelを返却します。具体的には、緑色のタイル(画像ファイル)を返却します。

grid.add(createImageLbl(lightGrass), 0, 1);

と書いているのは、「0行目の１カラム目にイメージ画像をセット」という意味になります。

＜ソース＞

// パネルサイズ
int[] size = {3, 5};
String lightGrass = "grass_light.png";
String deepGrass = "grass_deep.png";
String soilBasic = "soil_basic.png";
GridPane grid = new GridPane();
grid.add(createImageLbl(lightGrass), 0, 1);
grid.add(createImageLbl(lightGrass), 0, 2);
grid.add(createImageLbl(lightGrass), 0, 3);
grid.add(createImageLbl(lightGrass), 0, 4);
grid.add(createImageLbl(deepGrass), 1, 1);
grid.add(createImageLbl(deepGrass), 1, 2);
grid.add(createImageLbl(deepGrass), 1, 3);
grid.add(createImageLbl(deepGrass), 1, 4);
grid.add(createImageLbl(soilBasic), 2, 1);
grid.add(createImageLbl(lightGrass), 2, 2);
grid.add(createImageLbl(lightGrass), 2, 3);
grid.add(createImageLbl(lightGrass), 2, 4);
grid.add(createImageLbl(lightGrass), 3, 1);
grid.add(createImageLbl(soilBasic), 3, 2);
grid.add(createImageLbl(lightGrass), 3, 3);
grid.add(createImageLbl(lightGrass), 3, 4);
vBox.getChildren().add(grid);

なにやら同じようなコードが並んでいて使用するのがとても大変です。
これでは「武器」としてイマイチです。

そこでFOR文

下の行を繰り返して、「0,1」「0,2」「0,3」...とちまちまとコーディングしました。

grid.add(createImageLbl(lightGrass), 0, 1);

こんな感じで動きますが、如何せん汎用性に欠けていてまぁ使えないわけです。

FOR文を使うとこーなる

String lightGrass = "grass_light.png";
String deepGrass = "grass_deep.png";
String soilBasic = "soil_basic.png";
GridPane grid = new GridPane();
for (int i = 0; i < 4; i++) {
    grid.add(createImageLbl(lightGrass), 0, 1);
}
vBox.getChildren().add(grid);

これで緑の部分が１行分並びます。

FOR文の書き方

for (カウンター変数の初期化；論理式; 後処理)

【具体的なコード】

for (int i = 0; i < 5; i++) {
}

①「int i = 0」がカウンター変数の初期化になります。ループする度に後処理で「i」がカウントアップされます「i++」の処理です。

②1回ループすると論理式「i < 5」で、次のループを行うかどうか判定します。

③はじめのループでは「i = 0」なので「0 < 5」＝TRUEですのでループが行われますが、「i = 5」になったら「5 < 5」＝FALSEですのでループが行われません。

雑魚キャラが現れた!

おろ？なにが足りないのでしょうか？(不思議な設定をロード中です)

とりあえず言いたいことは２０行くらいのコードが数行で片付きます。

(設定のロード完了)

たくのじ村では、ちょっと揉め事が起きていました。

「村人C」『中ボスを倒してもらうのに、こいつを渡そうと思ってたが〜のんに。。。だれら〜こんがーことやったのは？誰かなんとかしくんねぇかなぁ？』

「村人D」『俺じゃねーって！人のせいにすんなて〜』

「村人E」『いや、まずはこれをなんとしねぇば。。。あ、そこの人ちょっと頼みたい事がるんスけど。。。』

『組んであったFORが壊れているようで、こいつを直して頂きたいんす、いゃ自分はどーもよくわからないて。。。ギターなら弾けるんすけどね？』

今回のトラブル

上で紹介した、FOR文がうまく動いていません、本来ならば4x4のマスが並ぶはずですが、１行しか並んでいません。これをなんとか元に戻して頂きたいというわけです。

＜ヒント＞

現在は１行だけ並んでいますので、これを残り３行文を追加すればOKなのです。。。問題は「どーやるか？」です。

今回上に記載したコードはGitにコミットしてあるのでそれを直していただきたく。。。

でわでわ。。。

イントロダクション

前回は、クイズも交えて、入力コンポーネントを作成しました。

OpenCVは、画像解析用のライブラリです。輪郭の取り出しなど、いろいろできます。機械学習と連携して顔認証などにも応用されています。
以下の動画は、サンプルです。「OpenCVはこんな感じ・・・」というのがイメージできれば良いなと思いました。

OpenCvチュートリアルも詰まってきたので、基本に戻ります(笑)

<2019/02/09追記>　実装開始します。

計算処理

パソコンは大きな計算機です。なのでパソコンをコントロールするプログラムは計算処理が基本になる…と思いますが、どーですかね？

ジョークはさておきにして、今までに覚えた(理解した)事を整理します。

1. ラベルに文字を表示する
2. メソッドを呼ぶ(実装済のもの)
3. テキストフィールドを追加する
4. ラベルを追加する

こんな感じだと思います。※理解度は人によるので。。。

＜余談＞

何事も「すぐにわかる」とか「すぐ理解できる」というのは「能力」として良いものだと思いますが、それで人の優劣は決まりません。

実際に自分の場合は「なかなか理解できない」タイプの人間ですが今はプログラムを(後輩に)教えることの方が多いです。当時、一緒に学習していた、他の「すぐ理解できる」タイプの人たちは他のプログラム以外の仕事をしています。

Javaでの書き方

作成したプログラムは「myFirst Program()」と言うメソッドです。今度は、メソッドを自作します。メソッドの名前は「mySecondProgram()」です。メソッドの名前は頭文字を小文字にする「キャメルケース」と言う書き方をします。クラスは頭文字が大文字です。

これはJavaでのコーディングルール的なもので、世界の標準(Google、IBMなども採用してる)ものです。

こうすれば、一目でクラスとメソッド名の区別がつきます。ただし、変数名もキャメルケースなので、この部分は間違いやすいかも？

設計をする

プログラムの実装は、小さなサイクルで、設計〜実装〜テストを繰り返して行います。その内の、設計部分をやろうと言うわけです。

やりたい事を明確に

設計をする上でこれが凄く大事です。目的がはっきりしないと、コードもぐちゃぐちゃになります。なので、はじめの方に作成したコードは「リファクタリング」して整理しました。

<2019/02/09追記> しかし順序的にアレなんでリファクタリング前から開始します。(Gitソース)

とりあえずは、やりたい事(実現したい機能)を思い描きます。

やりたい事

今回は２つのテキストフィールドに値(数字)を入力してその計算結果をラベルに表示する。これが、やりたい事になります。

現状では入力後に計算するイベントを起こす物がないので計算ボタンを追加します。

そして、ボタンが押されたら計算処理を行い、結果をラベルに表示します。

やる事

1. 計算ボタンを追加する
2. ボタンが押されたら計算処理を行う
3. 計算結果をラベルに表示する

＜手順＞

初めに現状の画面を確認します。下のような感じです。

「計算ボタンを追加する」下のような感じです。※イベント処理も追加してます。

イベント処理

ボタンにはsetOnActionと言うメソッドがあります。こいつを使って「ボタンが押されたら」の処理を行います。

とりあえず今回はここで終わります。

イベント処理は「(ボタンが)押下されたら」「ボタンが離されたら」。。。と色々ありますが、今回の使用したイベントは「Action」です、これはまとめた言い方(実装)です。「アクションがあった時」というイベントに反応して起動するものになります。書き方は下のような感じです。

Button keisan = new Button("計算");
keisan.setOnAction(new EventHandler<ActionEvent>() { ... });

後ほど実装などについて追記します。GITソース

今回の中ボス

「中ボス」という表現をしましたが、「目玉」です。イベント処理の実装部分です。今回は工夫をしないで、ストレートにずらずらとコードを書きました。

自分がコード・レビューをすると、言いたいことが「まぁまぁ」あります。そのうちの１つは「コードが汚い！」ということです。

中ボスの正体

1. コードが汚いので綺麗で見やすいコードにしたい。
2. テキストフィールドに「数字」以外は入っている時に「Hello World」の部分にエラーメッセージを表示しているが、チェックを入れるようにしたい。
3. 足し算しかできないので他の計算もしたい。

村人Aの話

「たくのじ村」に住んでいる村人Aの話です。(そういう設定(笑))

『上にあげたような問題(中ボス)がいてほとほと困っておりますこって。だっけなんとかやっつけてもらえねぇでしょうか？奴はGITにコミットされてるすけ〜PULLなりダウンロードするなりして、やっつけておくんなせぇ』

こちらが問題のソースです。

でわでわ。。。

＜＜＜　前回　次回　＞＞＞

イントロダクション

前回、ようやく画面切り替えを実装できました。長かったような短かったような。。。しかし、これで終わりではなく、むしろ始まる感じです (笑)

とりあえず、今回は自分の作業時間の都合があり、リファクタリングのみで終わります。

リファクタリングの内容

今回は、Eclipseで比較します。。。

1. ＜プロジェクト・エクスプローラーで右クリック→チーム→ヒストリー＞でコミット履歴を表示する
2. ＜現在のソースと比較したいリビジョン(コミットした時の番号)を選択して右クリック＞
3. 現在のソースと比較をクリックする

https://www.youtube.com/watch?v=_9syqIs6-5o&feature=youtu.be

Gitでのソース比較です。

＜修正後のソース＞

package jp.zenryoku.fx;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.Map;

import javafx.application.Application;
import javafx.event.EventHandler;
import javafx.geometry.Pos;
import javafx.concurrent.Worker.State;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
import javafx.scene.input.KeyEvent;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Pane;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.VBox;
import javafx.scene.text.Font;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebView;
import javafx.stage.Stage;
import jp.zenryoku.fx.pane.JavaBasicPane;
import jp.zenryoku.fx.pane.WebLoaderPane;

/**
 * JavaFXでのハローワールド〜OpenCVなどの
 * 作成したアプリをテストするための、スタンドアロンアプリ。
 * 
 * @author takunoji
 * 2019/01/23
 */
public class RootFxMain2 extends Application {
    /** 画面の縦幅 */
    private static final double VIEW_HEIGHT = 500.0;
    /** 画面の横幅 */
    private static final double VIEW_WIDTH = 500.0;
    /** コントロールボタンのリスト */
    private ArrayList<Button> buttonList;
    /** startメソッドから引っ越ししてフィールド変数にします */
    private BorderPane baseLayout;

    /**
     * 親クラスのメソッドをオーバーライドする。
     * 画面を作成したり、ペインを作成したり、色々。。。
     * 
     * @see javafx.application.Application#start(javafx.stage.Stage)
     */
    @Override
    public void start(Stage primaryStage) throws Exception {
        // JavaBasic画面用のコントロールボタンを作成する
        this.cretateControllButtonList();

        // 画面部分とコントロールボタン部分にレイアウト(表示領域を分ける)
        baseLayout = new BorderPane();

        // Stageの設定
        primaryStage.setHeight(VIEW_HEIGHT);
        primaryStage.setWidth(VIEW_WIDTH);

        // このクラスにあるメソッドなので名前だけで呼び出せる
        baseLayout.setCenter(JavaBasicPane.getInstance());
        // このクラスのメソッドであることを明示的に示すのに「this」を使用する
        baseLayout.setBottom(this.createFooterPanel());
        // 土台になるレイアウト(ペイン)をステージに追加する
        primaryStage.setScene(new Scene(baseLayout, VIEW_WIDTH, VIEW_HEIGHT));
        primaryStage.show();
    }

    /**
     * 画面のフッター部分にコントロール用のボタンを配置する。
     * 
     * @return Pane レイアウトコンテナ
     */
    private Pane createFooterPanel() {
        HBox hBox = new HBox(buttonList.size());
        for(Button ctlBtn : buttonList) {
            hBox.getChildren().add(ctlBtn);
        }
        return hBox;
    }

    /**
     * コントロールボタンを作成する。
     * 
     */
    private void cretateControllButtonList() {
        // デザインパターン：シングルトンの実装
        if (buttonList == null) {
            buttonList = new ArrayList<Button>();
        }
        Button viewChangeBtn = new Button("画面切り替え");
        viewChangeBtn.setOnAction(event -> {
            baseLayout.getChildren().remove(0);
            baseLayout.setCenter(WebLoaderPane.getInstance());
        });
        buttonList.add(viewChangeBtn);
        Button closeBtn = new Button("閉じる");
        buttonList.add(closeBtn);
    }
    /**
     * メインメソッド
     * @param args プログラム引数
     */
    public static void main(String[] args) {
        // 親クラスのメソッドを呼び出す、これは上のstart()を呼び出す。
        launch();
    }

    /**
     * JavaFX版のハローワールド実装用のメソッドになります。
     * @return 画面に出力する文字列
     */
    public String myFirstProgram() {
        // この「hyoji = ""」を「"hyoji = "Hello World"」と修正してください。
        String hyoji = "Hello World";
        long num = 12345678901L;
        float shosu = 123.09876543f;
        return hyoji;
    }
}

前バージョンのソースに比べて、画面ペインの作成メソッドが全て無くなっています。実質２つのメソッドですが。。。

どこに引っ越したかというと、「JavaBasicPain」「WebLoaderPane」クラスに引越ししました。

各クラスはシンプルにコンストラクタ(private)とインスタンス(getInstance)を取得するメソッドが実装してあります。

＜JavaBasicPane＞

/**
 * Copyright (c) 2012-present Lightweight Java Game Library All rights reserved.
 * 
 * Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
 * Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
 * Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
 * Neither the name Lightweight Java Game Library nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
 */
package jp.zenryoku.fx.pane;

import javafx.geometry.Pos;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Pane;
import javafx.scene.layout.VBox;
import javafx.scene.text.Font;

/**
 * JavaBasic用の画面クラス。
 * Paneクラスを継承して、画面の表示部分を作成します。
 * 
 * @author takunoji
 * 2019/01/28
 */
public class JavaBasicPane extends Pane {
    /** このクラスのインスタンス */
    private static JavaBasicPane instance;

    /**
     * コンストラクタ。
     * デフォルト設定でのJavaBasic画面を作成します。
     */
    private JavaBasicPane() {
        // 暗黙的に起動される親クラスのコンストラクタ
        super();
        // レイアウトたて
        VBox vBox = new VBox(5);
        // レイアウト横
        HBox hBox = new HBox(8);
        // ラベルの設定
        Label label = new Label();
        // ハローワールドを出力する
        label.setText("Hello World");
        label.setFont(new Font("RobotRegular", 24));
        vBox.getChildren().add(label);

        // １個目の数値、テキストフィールド
        TextField text1 = new TextField();
        text1.setPrefColumnCount(3);
        text1.setAlignment(Pos.BASELINE_CENTER);
        hBox.getChildren().add(text1);
        // 計算式のラベル
        Label ope = new Label("+");
        hBox.getChildren().add(ope);

        // ２個目の数値、テキストフィールド
        TextField text2 = new TextField();
        text1.setPrefColumnCount(3);
        text1.setAlignment(Pos.BASELINE_CENTER);
        hBox.getChildren().add(text2);

        // 縦のレイアウトに追加する
        vBox.getChildren().add(hBox);

        // 子供(中身)のペインを追加
        this.getChildren().add(vBox);
    }

    /** 
     * インスタンを取得する。
     * このクラスのインスタンスは、必ず１つなので「static」をつけて良い。
     * @return JavaBasicPane
     */
    public static JavaBasicPane getInstance() {
        if (instance == null) {
            instance = new JavaBasicPane();
        }
        return instance;
    }
}

インスタンスを取得するメソッドは自分が気に入っている、実装方法です。

シングルトン・パターン

public static JavaBasicPane getInstance() {
　　　 if (instance == null) {
      instance = new JavaBasicPane();
  }
return instance;
}

このクラスのインスタンスが既にあるのならば、フィールドにあるインスタンスを返すメソッドになっています。つまりコンストラクタは一回しか通らない。。。

そして、フィールド変数には自分自身(JavaBasicPane)のインスタンスが格納できるようになっています。

こうすると、インスタンスが沢山できて余計なメモリを食わないで済みます。

ちなみに、ウェブサーバーにログインするときはインスタンスが１つだと複数人でログインした時に、どのインスタンスがどのユーザーかわからないので、インスタンスが複数になるようにクラスを作ります。したのはサンプルです。

public class LoginClass {
   // ユーザー名
   private String userName;
   // 性別
   private int sex;
   /* ログイン処理メソッド */
   public login() {
     // ログイン用の処理
   }
}

＜＜＜　前回　おまけ　＞＞＞