JavaFX 〜GluonAP作成に向けて〜

イントロダクション
プロジェクトサイト(Ver1.0)ができたので、Gluonでもうごかるように「目標ブレークサンプルアプリ」を作成しようと思いました。

決まっていること

Gluon Mobileでの開発行う
ベースになる技術はJavaFX

実装時の注意

JavaFXのBorderPaneを継承したクラスをメインにして実装するようにします。GluonMobileでの実装時には「BorderPane」を「View」に変更してやればOKな状態で実装するためです。ちなみにBorderPaneを継承してつくているのがGluonのViewクラスです。

早い話が

Gluonを使用しないで、作成したJavaFXアプリをGluonで実行したい場合は、BorderPaneを継承して作成したJavaFXアプリをGluonで起動するときにBorderPaneからViewを継承するように変更してやればよいということです。

そして、BorderPaneの使用方法を見るのにちょうど良いサンプルがありましたので、リンクを貼っておきます。

現状の課題(プロジェクトサイト)

Gluonでアプリを作成するのには、オープンソースプロジェクトを持っている必要があり、年に１度は更新するようにする必要があります。⇒そういう規約になっていました。

自分のプロジェクトでは目標達成アプリを起動するためにGluonAPを使用したいので。。。

目標ブレークツリーをどのように作成するか？
ブレークツリーと各タスクとの関連付け(画面遷移)をどう実装するか？

現状はこのようなところで、頭をひねる方向へ進みたいと思います。

そして、頭をひねるばかりでも時間の無駄なので、Gluonアプリの課題⇒「Gradleの扱い方、主にAndroid, iOS版のアプリを出力する方法がわからない」を解決する必要があるので、別のアプリを作成する方向で、再挑戦することにしました。

GLUON プロジェクト

EclipseにGluonプラグインをインストールして、(Eclipseの)プロジェクトを作成します。

パッケージエクスプローラーを右クリックしてGluonプロジェクトを作成
複数画面か、そうでないか選択します。FXMLはSceneBuilderを使用するときに選択します。
入力項目が何個か出てきますが、メールアドレスのみの入力でOKです。

４．プロジェクトの名前などを入力します。
gluonDojoReception
gluonDojoReceptionPackage
gluonViewName

プロジェクトの作成結果です。

Gradle Build

GLUONプラグインを使用して、プロジェクトを作成するとサンプルコードも出力されますので、それを動かしてみたいと思います。

だがエラーが。。。

gluonError
参考サイトを見てみると、『「.gradle」フォルダを再構築してやればよい』ということなのでEclipseを閉じてから、フォルダ名を「old.gradle」に変更してEclipseを起動します。

しかし、これでも治らず。。。
こちらのサイトを参考にすると下のファイルを削除してIDEを再起動するとよい」ということだったので、試すことにします。
現状はこんなところで。。。

でわでわ。。。

JavaFX関連ページ

ステップアップ関連ページ一覧

JavaFX + ND4Jで機械学習準備

オブジェクト指向関連ページ

[オブジェクト指向の概念1〜OracleDocのチュートリアル１〜](https://zenryokuservice.com/wp/2019/10/301. /%e3%82%aa%e3%83%96%e3%82%b8%e3%82%a7%e3%82%af%e3%83%88%e6%8c%87%e5%90%91%e3%81%ae%e6%a6%82%e5%bf%b5-%e3%80%9coracledoc%e3%81%ae%e3%83%81%e3%83%a5%e3%83%bc%e3%83%88%e3%83%aa%e3%82%a2%e3%83%ab%ef%bc%91/)
オブジェクト指向の概念2〜クラスとは〜

Eclipse Gluon Game〜じゃんけんゲームを作る３：Ver1.0完成〜

イントロダクション

とりあえずではありますが、「じゃんけんゲームVer1.0」という形で完成させます。

現状としては「アイコ」の時に動きをストップせずに(現状では「もう一度」ボタン表示して)次の「アイコでしょ」と続く仕様になっています。

これはじゃんけん的にビミョウなのでちょっと足掻いてみました。が、これには「マルチスレッド処理」をやるしかないのでVer1.0という形でこのままリリースすることにしました。

じゃんけんゲームの処理はこちらのリンクから見ることができます。ポイントとしては、アニメーション、ボタンの押下などの画面側の処理クラスと勝敗判定を行うための処理クラスに分けて実装したところです。

JankenGame.java: アプリケーションを起動する
BasicView.java: タイトル画面「スタート」ボタンからTestingViewを起動する
TestingView.java: じゃんけんゲームの実装クラス(画面側)
/util/Judgement.java: じゃんけんの勝敗判定の処理クラス

ポイントとしては以下のようになります。

1. TestingViewクラスのコンストラクタで画面の部品を作成 2. アニメーションもコンストラクタで作成している 3. 細かいラベルテキスト作成などのメソッドを各イベントから呼び出す

リリースする

「どこにリリース？」と聞かれそうなので述べますとGLUONのモバイルアプリで、GooglePlay Storeへリリースしようと考えております。料金など色々とAndroidアプリの方がやりやすかったのでこのようになりました。

その前にGLUONのオープンソース・ライセンスを取得する必要があります。

Open Source License Request

詳細は上記のサイトを見ればわかりますが、とりあえずはSNSにリンクするウェブサイトが必要なのでこれを作る方向へ進もうと思います。

ウェブサイト

Gitのプロジェクトページなどでも良いと思うのですが、色々と考えがありこのサーバーをウェブサイトにしようと思います。

Gitは、プロジェクトサイトの作成に関しても機能が充実しているようです。

基本的な扱い方も記載されてました。

[rakuten ids="rakutenkobo-ebooks:17331252"]

Eclipse Gluon Game〜じゃんけんゲームを作る〜

イントロダクション

前回までに、JavaFXによるアニメーションの作成など基本的なことをやってきました。

これで、Javaでスマホアプリを作る準備ができたので、実装してみました。

ver1.0

このレベルまで作成しました。
それは、スマホアプリでじゃんけんゲームを作ろうと思ったからです。そして、現状ではここまで作ることができました。

作成中

とりあえずは「動く」「じゃんけんをしているように見える」というところまで来たのですが、以下のような問題があります。

「じゃんけんぽん」で正常な「じゃんけん」にならない
何回かじゃんけんをしていると押下したボタンと違うて(イメージ)が表示されている
「じゃんけんぽん」の「ポン」が表示されない

ぱっと見で自分が認識している問題がこれだけあります。

リファクタリングする

これらの問題を解決するにはどうしたら良いか？これを考えて見たのですが、自分の出した答えは上記の通りです。「リファクタリング」です。そして理由は以下の通り

コードが汚いので、想定通りに動いていない原因がわかりづらい
全ての(じゃんけんの)処理を１つのファイルに記載しているので「オブジェクト指向」していない。つまり「余計なもの(処理)がたくさんある」状態
問題のあるコードと問題のないコードの切り分けが面倒
次に改修して、新しいことをやろうとするときに使えないコード
「４」と同様に拡張したり、サンプル(参考にする)コードにならないので次につながらない
例外(エラー)処理が不適切なので、デバックがしづらい→保守する人がすごく苦労する
「このまま汚いコードでリリースする」＝「汚いコードが正しい」となる ※個人でやる場合は問題ない？が企業など大きなプロジェクトでやると改修コストがものすごいことになる(コード解析、修正、テスト→修正したコードが問題なく動く動く確認をするのに人的コストが沢山必要になる)

挙げればキリがないのでここまでにしますが、まとめると「みんなが不幸になる」ということです。

みんな「不幸」になりたくないですよね(笑)、平和のために頑張りましょう！

とりあえず自己レビュー

仕事でもそうですが、人に作成したコードをレビューしてもらう前に自己レビューをやります。「本来は。。。」などと言ってレビューをやらないケースが世間にはありますが、自分の経験上、レビューした方が作業量が少なくて済むように思います。

自己レビューをする

確認ではないですが、自分流のレビュー方法です。

とりあえずコードを眺める
直感的な感想をリストアップする(感覚で良い)
コードを見て、わからない(理解できない、気に入らない)部分を理解(ピックアップ)する
変数名の意味を確かめる→変数の用途と名前がリンクしているか？
作成物(コード)の構成を見直す→プログラムの構成が複雑になっていないか？
作成物(コード)が整理されているか確認→どの処理がどこにあるかすぐにわかるか？
無駄な処理がないかどうか確認→余計な変数を使用していないか？処理(コード)を少なくすることはできないか？

上記のような部分を見直します。そして大切なことは

どのように修正するのか？ということです。理由に関しては語るに及ばずだと思います。

そんなわけでソースを眺めます。コードが420行あるのでリンクにします。部分的にコードをピックアップします。。。

問題１「コードが長い」

上記に記載したようにコードが長いので、レビューワー的に「見辛い」「見る気がなくなる」。。。などの問題が出ます。単純に「汚ねぇな。。。」って思うコードは見るのに時間がかかるから「面倒だな」と思うのでやる気が萎えます。

問題１の対策

この部分の対策としては「クラス分け」を行おうと思います。そして現状のクラス構成は以下になります。

・JankenGame.java → じゃんけんゲームを起動します。GLUONで自動生成されたクラスなので、JavaDocコメントがないですが、23行のコード

・BasicView.java → じゃんけんゲームのタイトル画面クラスです。これもGLUONで自動生成ですが、多少修正したのでコメント(JavaDocも)付きで73行のコード

・TestingView.java → じゃんけんゲームの本体部分のクラスです。今回のリファクタリング対象クラスになります。テストしながら作成したので420行のコード

そして「じゃんけんゲーム」を起動するのに必要な処理は以下の通りです。

タイトル画面の表示「BasicView.java」で行なっています。これはEclipseにインストールしたGLUONプラグインで自動生成したものを、ほぼそのまま使用しています。
タイトル画面から「スタート」ボタンを押下した時に起動する画面の表示「TestingView.java」で行なっています。以下の処理はこのクラスで実装しています。
レイアウトクラスを使用して「Top」「Mid」「Btn」「Bottom」の表示領域を作成しています(VBoxとHBox使用)
Topに「じゃんけん。。。」などの文字を表示、Midにじゃんけんの手(Image)及びアニメーションの表示、Btnに「勝負」と「もう一度」のボタン、Bottomにユーザーの手を入力するボタン「ぐー、ちょき、ぱー」を設定
「４」の各ボタンにボタン押下した時のアクション処理を実装
じゃんけんの勝敗判定処理を実装
「じゃん〜ポン」のアニメーションを実装(Timer、AnimationTimer)
アニメーション終了時の処理

とりあえずはここまでにします。

[rakuten ids="goldstar:10030213"]

イントロダクション

前回、タイトル画面を妥協した形で作成しました。

言い訳ですが、今回はGluonプラグインを使ってアプリを簡単に作れる事を証明するのが目的なので。。。うーむ、ちょっと悔しい。。。

それはさておき、タイトル画面はGradleで生成されたクラス「BasicView」をカスタムして作成しました。そして、スタートボタンを押下した後に表示する「ゲーム画面」は新たに「Viewクラス」を継承して作成しました。特に難しいことはせずに、単純に画面(View)にコンポーネントを追加する実装をしています。

実装手順

JavaFXでの実装とほぼ同じ手順になります。JavaFXでの実装の場合は「Stage」に作成したコンポーネントを登録(setScene())するのですが、Gluonでの実装はViewクラスから継承している(本当はBorderPane)setCenter()メソッドに渡すところで実装は終了します。

具体的に

＜作成したプロジェク名のクラス(JankenGame)＞

MobileApplicationクラスがGluonのフレームワーク部品になります。そして赤い字のメソッドはこのクラスのメソッドです。

この「addViewFactory」メソッドに画面名と対象クラスを渡します。

下のコードでは「HOME_VIEW」は親クラス(MobileApplication)クラスに定義してある文字列"home"です。この文字列をキーにしてBasicViewクラスを登録しているということです。

今回は、初めの画面から直接次の画面へ遷移するのでこの場所では登録していません。画面遷移の方法を変えてやるときには使える仕組みだと思います。

public class JankenGame extends MobileApplication {

    @Override
    public void init() {
        addViewFactory(HOME_VIEW, BasicView::new);
    }

    @Override
    public void postInit(Scene scene) {
        Swatch.BLUE.assignTo(scene);

        ((Stage) scene.getWindow()).getIcons().add(new Image(JankenGame.class.getResourceAsStream("/icon.png")));
    }
}

＜Viewクラス＞

public class 作成するクラス名 extends View {
   // 例としてGroupクラスにコンポーネントを追加
   Group gp = new Group();
   Button btn = new Button("Start");
   gp.getChildren().add(btn);
   ・
   ・
   ・
   cetCenter(gp);
}

上記の様な実装になります。

起動結果としてはこんな感じでできました。本当は今日中にじゃんけんゲームとして動かせるところまで実装したかったのですが、明日仕事が。。。(言い訳)風呂上がりなので集中力が。。。(言い訳)

というわけで今日はここまでで作業をやめることにしました。無理をしないことも大切なことなので。。。

※大切なのは継続的に作業を行い目的に向かっていくことだと思います。

ちょいとまとめ

今回の実装で必要になる技術は、JavaFXでのレイアウトクラス(Group, VBox, BorderPane etc...)を使ってスマホアプリの領域にうまく、レイアウトを使用してコンポーネント(ボタン、テキスト、アイコン(イメージ)など)を配置することです。

上のコードでは、ViewクラスがBorderPnaeクラスの子クラスなので、「setCenter()」などのメソッドでコンポーネントを配置しました。球体(Sphere)を１つだけ設定した時の表示結果は以下の様になります。

そして、VBox(縦のレイアウト)にHBox(横のレイアウト)を３つ登録して以下の様に領域を分けました。

タイトル部分(Ready?の文字列を表示)
画像を表示する領域
ボタンを表示する領域

こんな感じでコードを書きました。

＜実際に作成したコード＞

public TestingView() {
	double height = MobileApplication.getInstance().getScreenHeight();
	VBox gp = new VBox();
	// Rready
	Text ready = new Text();
	ready.setText("READY?");
	ready.setFont(new Font(45));
	ready.setTextAlignment(TextAlignment.CENTER);
	HBox topLine = new HBox();
	topLine.setAlignment(Pos.CENTER);
	topLine.setMinHeight(height * 0.2);
	topLine.getChildren().add(ready);
	gp.getChildren().add(topLine);

	// じゃんけんの手
	final HBox midLine = new HBox();
	midLine.setMinHeight(height * 0.34);
	final Canvas canv = new Canvas();
	midLine.getChildren().add(canv);
	gp.getChildren().add(midLine);
	// ボタン
	final GraphicsContext ctx = canv.getGraphicsContext2D();
	Button btn = new Button("バトル");
	btn.setOnAction(evt -> {
		startJanken(ctx, midLine);
	});
	HBox bottomLine = new HBox();
	bottomLine.setAlignment(Pos.CENTER);
	bottomLine.setMinHeight(height * 0.3);
	bottomLine.getChildren().add(btn);
	gp.getChildren().add(bottomLine);
	setCenter(gp);
}

実行結果

なんとかここまで来たので、今日はここらでやめることにしようと思います。

でわでわ。。。

[rakuten ids="akibamac:10732227"]

Eclipse Android〜Gluonでアプリを作る4: 普通に作る〜

イントロダクション

前回は、3Dでのじゃんけんゲームを作成しようと悪戦苦闘しました。そして諦めました。。。

3D関連の実装は理解しなくてはならないことが多いので２日では実装できそうにないと判断しました。戦略的撤退です、逃げてはいません(笑)。

実装状況

現在は簡単なタイトル文言とボタンを表示するだけの実装ができています。

シンプルイズベスト？

作成したコードと流れ

自動生成された、Mainクラスの「JankenGameクラス」から同様に生成されたクラス「BasicView」を表示したのがタイトル部分です。「じゃんけんゲーム」と上部に表示しています。

「スタートボタン」を押下したら隣の球体のみの画面に画面遷移します。

コードはいたってシンプルです。

BasicView

public class BasicView extends View {

    public BasicView() {
    	// 縦のレイアウト
    	VBox layout = new VBox(300);
    	layout.setAlignment(Pos.CENTER);
    	
    	// タイトル文言
    	layout.getChildren().add(this.getTitleNode());
    	// スタートボタン
    	Button start = new Button("スタート");
    	start.setOnAction(event -> setCenter(new TestingView()));
    	layout.getChildren().add(start);
        // 画面に登録
        Group gp = new Group(layout);
        setCenter(gp);
    }

    @Override
    protected void updateAppBar(AppBar appBar) {
//        appBar.setNavIcon(MaterialDesignIcon.MENU.button(e -> System.out.println("Menu")));
//        appBar.setTitleText("Basic View");
//        appBar.getActionItems().add(MaterialDesignIcon.SEARCH.button(e -> System.out.println("Search")));
    }

    /**
     * 画面のタイトルを作成します。
     * @return タイトル部分のノード
     */
    private HBox getTitleNode() {
    	HBox hbox = new HBox(20);
    	Text jan = new Text("じゃん");
    	this.settingFont(jan, Color.BLUE);
    	hbox.getChildren().add(jan);

    	Text ken = new Text("けん");
    	this.settingFont(ken, Color.YELLOW);
    	hbox.getChildren().add(ken);

    	Text game = new Text("ゲーム");
    	this.settingFont(game, Color.RED);
    	hbox.getChildren().add(game);
    	return hbox;
    }

    /**
     * テキストの設定を行います。
     * @param tx 表示するテキスト
     * @param color 設定する色
     */
    private void settingFont(Text tx, Color color) {
    	double width = MobileApplication.getInstance().getGlassPane().getWidth();
    	tx.setFont(new Font(width / 10));
    	tx.setFill(color);
    	tx.setStroke(Color.BLACK);
    	tx.setStrokeWidth(1.0);
    }
}

TestingView

/**
 * JavaFXでの3Dモデルの描画(作成？)、とりあえず写経する。
 * 
 * @author takunoji
 * @see https://docs.oracle.com/javase/jp/8/javafx/graphics-tutorial/overview-3d.htm#CJAHFAHJ
 */
public class TestingView extends View {
	public TestingView() {
		Sphere sp = new Sphere(30.0);
		setCenter(sp);
	}
	
}

これで、タイトル表示からゲームの起動画面まで来ました。

残すはじゃんけんゲームの実装部分になります。残すところは１１時間。。。

でわでわ。。。[rakuten ids="yamada-denki:10159121"]

決まっていること

実装時の注意

早い話が

現状の課題(プロジェクトサイト)

GLUON プロジェクト

Gradle Build

だがエラーが。。。

関連ページ一覧

Eclipse セットアップ

Git関連

JavaFX関連ページ

ステップアップ関連ページ一覧

JavaFX + ND4Jで機械学習準備

オブジェクト指向関連ページ

イントロダクション

リリースする

ウェブサイト

イントロダクション

ver1.0

作成中

リファクタリングする

とりあえず自己レビュー

自己レビューをする

問題１「コードが長い」

問題１の対策

関連ページ一覧

イントロダクション

実装手順

具体的に

ちょいとまとめ

イントロダクション

実装状況

作成したコードと流れ

BasicView

TestingView