学年割電卓に新機能 GakunenWari Calculator updated

比で計算できるようになりました.
You can calculate using ratio.
https://jumpaku.github.io/GakunenWari/

以下の学年割り電卓は学年割り電卓2になりました． 旧学年割りは現在公開されていません．

Old GakunenWari Calculator is updated to GakunenWari Calculator 2. The following GakunenWari Calculator not available.

新機能 New feature

比計算機能 Calculation using ratio

今までは学年間での支払金額の差を入力すると各学年の1人当たりの支払金額が計算されていました. 今回のアップデートでは学年毎の支払金額の比からも支払金額を計算できる様になりました. これにより, 1年生の支払金額を0にしたり先輩の支払比率を極端に大きくしたりできる様になります.

You could calculate using only difference of payment amount until now. With the new feature, you can using ratio of payment amount too. You can set amount of lowest grader to 0, increase amount of highest grader.

学年割りとは? What is Gakunen-Wari?

学年割りとは学年毎に支払金額を変える割り勘です.
詳しくは以下の記事を読んで下さい.

Gakunen-Wari is a method of splitting the bill. The payment amount of a participant is often changed by his/her grade. Visit here to get more detail.

jumpaku.hatenablog.com

CSSについて About CSS

CSSでタブの位置を調整するのが大変でした. CSSは人が書くものなのかと疑うくらいめんどくさいと思いました.

CSS is too difficult. It was hard for me to set position of tabs.

愛と血の修羅場(Lovely and Bloody Suspense)

館を訪れた 私
容疑者 の 思惑

証言 と ダイイングメッセージ

浮かび上がる 真相
衝撃 の 結末

At the House.
Each of the suspects has unique faiths.
Testimonies and a Dying message are given.
The truth will out.
You'll be shocked by the last.

ダウンロード DOWNLOAD
愛と血の修羅場(サスペンス)_v1.4.zip - Google ドライブ

概要

• タイトル : 愛と血の修羅場
• 読み : あいとちのさすぺんす
• 作者 : Jumpaku
• ジャンル : 説法系推理アドベンチャ
• プレイ時間 : 30分程度
• プラットフォーム : Windows
• リリース : 2016年3月4日
• 言語 : 日本語
• 開発環境 : ウルフRPGエディタ

Detail

• Title : 愛と血の修羅場(Lovely and Bloody Suspense)
• Pronunciation : Ai to chi no suspense
• Written by : Jumpaku
• Genre : Adventure or Mystery with sermons
• How long : About 30 minutes
• Platform : Windows
• Released : March 4, 2016
• Language : Japanese
• Tool : Wolf RPG Editor

遊び方 How to play

以下からダウンロードし, 展開して下さい. Game.exeを実行すると遊べます. 詳しい操作方法は一緒に展開されるREADME.txtを読んで下さい.

Download from here, extract, and execute Game.exe. Read README.txt to see detail.

愛と血の修羅場(サスペンス)_v1.4.zip - Google ドライブ

製作

2016年の2月27日, 私は友人から「第6回ウディフェスにゲームを作って応募しよう」と誘われました. 応募期限は2月29日, 使うのはウルフRPGエディタ. 短い期限と初めてのツールに対して私は最初少し抵抗がありました. しかし簡単なゲームで良いと言われた事, 困った事があればその友人を頼れば良い事, プログラミングするよりもレイヤの高そうなツールを使う良い機会である事などを考えた結果, ゲームを作ってウディフェスに応募する事を決心しました.

マップ作りやイベントの作成と配置の仕方を教えてもらい, ゲームの内容を考え, 手直しをし, ゲームが完成しました. 完成したゲームをウディフェスに応募したのは2月28日の事でした.

しかし, 「愛と血の修羅場(サスペンス)」は非公開となってしまいました. 私は応募要項をよく読んでおらず, 作品表現の基準を満たしていなかったのです. ウディフェス実行委員からのメールにはその他にも修正すべき点がいくつもあると書かれていました. 締切までまだあと1日あったので修正すべき点についてもっと詳しくお教え下さいと返信した所, 私が対応すべき修正箇所を丁寧に説明して下さいました. 更に修正期限を3月4日までとして下さいました.

私は応募要項を熟読し直し, 修正を開始し, 細部に渡って調整し, デバッグし, 再度応募し, 遂に公開されました.

公開後, 大変嬉しい事に「愛と血の修羅場(サスペンス)」の感想メールを頂きました. また実況動画でプレイされているのを見ました. 楽しそうにプレイされていて良かったです. 作った甲斐がありました.

私は前にプログラミングサークル内でRPGを作るプロジェクトに参加していましたが, 1からプログラミングするのはとても難しく, 挫折しました. 既存のジャンルのゲームはプログラミングするよりもレイヤの高い所で楽に開発できる事を実感しました. ゲーム作りにはウルフRPGエディタはもちろん, Unityやティラノビルダーなどのツールを積極的に使っていくべきだと思いました.

Development story

On February 27, 2016, a my friend said me "let's make a game and participate in Wodifes." Wodifes is a game festival. There are many games developed with Wolf RPG Editor. Wolf RPG Editor is a tool to develop Role-Playing-Game. The deadline was February 29, 2016, and that was the first time for me to use Wolf RPG Editor. That was why I hesitated to make a game. However, I decided to create a game. The reasons are as follows.

• He said that the game to develop may be simple.
• Even if I am in trouble, I can rely on him.
• That was a chance to use a higher-layer tool to develop game.

He taught me how to use the tool and I understood. I thought and write detail story of the game with Wolf RPG Editor. With his support, I completed making the game. It was named "愛と血の修羅場(Lovely and Bloody Suspense)" on February 28.

The game was sent to Wodifes immediately, but it wasn't accepted. The game I sent didn't satisfied the standards of expression of works because I hadn't read application requirements carefully. The e-mail from Wodifes executive committee also said that I have to fix many things. Thinking of the deadline, I asked Wodifes executive committee what I should fix. Wodifes executive committee taught me detail of revision points diligently. Furthermore, Wodifes executive committee extended the time limit until March 4, 2016. I won't forget the feelings of gratitude.

After that, I read application requirements carefully, began fixing, debugged, and applied for Wodifes again. At last, "愛と血の修羅場(Lovely and Bloody Suspense)" was accepted and presented to the public.

I got an e-mail from a person who played the game. It told me his/her impression. Furthermore, I found a game commentary video on Youtube. In the video game player looked excited. These made me happy. Thank you very much!

I had tried programming to develop a RPG game before but it was very difficult, at the end, I gave up. I think that game developing tools like Wolf RPG Editor, Unity, or Tyrano Builder are higher-layer than programming. We should use these tools more because they help us to develop games.

ヴァージョン Version

• v1.4 : README.txtとエネミィ画像を変更. Changed README.txt and enemy graphic
• v1.3 : 誤字を修正 The typo was corrected
• v1.2 : ウディフェスに再提出する前にサイズを軽量化 Lightening the data size before to resent to Wodifes
• v1.1 : ウディフェスに再提出する為に大幅に修正 Improved to resent to Wodifes
• v1.0 : 最初の完成品 Initial product

リンク Links

• ダウンロード Download : 愛と血の修羅場(サスペンス)_v1.4.zip - Google ドライブ
• 実況動画 Youtube : 第6回ウディフェス作品 Live! 実況プレイ#09 作品No.25 No.27 No.29 No.30 - YouTube
• 実況動作 Youtube : 【フリゲ第6弾】愛と血の修羅場【説法ゲー】 - YouTube
• ウディフェス Wodifes : https://hinezumi.net/wodifes/
• ウルフRPGエディタ Wolf RPG Editor : WOLF RPGエディター公式サイト 【RPG作成フリーソフト】

Jumpaku 2016-04-14 00:24 読者になる

広告を非表示にする

コメントを書く

• もっと読む

JavaFX 0 Prepare JavaFX with NetBeans

はじめに Introduction

私は環境構築が嫌いです. できるだけ簡単にJavaFXと日本語のNetBeansを準備してみました. この文章は2016年10月03日に更新しました.

I hate environment construction. Then, I prepared JavaFX and NetBeans. It was very easy.
This description was updated on October 03, 2016.

手順

1. ここから (https://www.oracle.com/technetwork/java/javase/downloads/index.html) 最新のJavaとNetBeansをダウンロードしてインストールする.

2. ここから (https://gluonhq.com/labs/scene-builder/) をダウンロードしてインストールする.

3. NetBeansで ツール --> オプション と開いて, Java --> JavaFX の ScenBuilderホーム に先ほどインストールしたScene Builderのパスを指定する.

Process

1. Download latest from https://www.oracle.com/technetwork/java/javase/downloads/index.html and install latest Java and NetBeans.

2. Download from https://www.oracle.com/technetwork/java/javafxscenebuilder-1x-archive-2199384.html) and install Scene Builder.

3. Set the path of Scene Builder on NetBeans Tool --> Option --> Java --> JavaFX --> SceneBuilder home, input the path of Scene Builder.

JavaFX 2 Scene graph and Node

はじめに Introduction

この記事では以下の記事で作成したウェブブラウザを改造します. そしてこの改造を通してJavaFXでGUIを構成する方法, 特にシーングラフについて解説します.

I modified the web browser that was made on my article as follows. With making a web browser, I am going to explain how to set up JavaFX GUI elements, and what is scene graph.

jumpaku.hatenablog.com

作業 Works

1. JavaFXのJREを含んだ新規プロジェクトを作成する
   Create new project contains JavaFX JRE.
2. WebBrowserクラスを作成し以下のソースコードを記述する
   Create WebBrowser class and write source code as follows.
3. 実行すると簡単なブラウザが起動される
   Run application and you can use simple web browser.

ソースコード Source code

package jumpaku.webbrowser;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.VBox;
import javafx.scene.web.*;
import javafx.stage.Stage;

public final class WebBrowser extends Application {
    
    public static void main(String[] args) {
        launch(args);
    }

    private WebEngine engine = null;
    
    @Override
    public void start(Stage primaryStage) {
        WebView view = new WebView();
        engine = view.getEngine();
        
        TextField input = new TextField("https://www.google.co.jp/");
        
        engine.load(input.getText());
        
        Button go = new Button("Go");
        go.setOnMouseClicked(e -> engine.load(input.getText()));
        
        Button next = new Button("Next");
        next.setOnMouseClicked(e -> goHistory(1));
        
        Button prev = new Button("Prev");
        prev.setOnMouseClicked(e -> goHistory(-1));
        
        primaryStage.setScene(
                new Scene(
                        new VBox(
                                new ToolBar(
                                        prev, next, input, go),
                                view)));
        primaryStage.show();
    }
    
    private void goHistory(int offset){
        WebHistory history = engine.getHistory();
        int size = history.getEntries().size();
        int dist = history.getCurrentIndex() + offset;
        
        if(0 <= dist && dist < size){
            history.go(offset);
        }
    }
}

説明 Explanation

シーングラフ

JavaFXのGUIを構成する部品をノードと呼びます. 特に子ノードを持てるノードをブランチ, 子ノードを持てないノードをリーフと呼びます. JavaFXのGUIの構造は木構造となっており, これをシーングラフと呼びます. シーングラフのルートは親ノードを持ちません. ルート以外のノードは1個の親ノードと0個以上の子ノードを持ちます. ノードはNodeクラスで表されます. NodeクラスはGUI部品の大きさや位置, イベントハンドラ, 変換, ID, CSSスタイルなどを設定する事ができます. 今回使用したVBox, ToolBar, Button, TextField, WebViewを含む全てのGUI部品はNodeクラスのサブクラスです.

JavaFXではプロパティがサポートされています. プロパティとは値の変更を自動的に反映する仕組みです. Nodeクラスにも多くのプロパティがあります. 今回はプロパティについては説明しません.

WebBrowserクラス

WebBrowserクラスはApplicationクラスを継承しています. startメソッドをオーバーライドし, GUI部品の作成とシーングラフの組み立てをします.

startメソッドではまずWebViewオブジェクトを生成し, そのウェブエンジンをprivateフィールドengineで保持します.

次にTextFieldオブジェクトを生成します. この時コンストラクタで初期テキストとしてGoogleのURLを設定します.

それからアプリケーション起動時にGoogleが開かれる様にGoogleのページをロードします.

そして前のページに戻るprevボタン, 次のページに進むnextボタン, 入力されたurlを開くgoボタンをそれぞれ生成します. それぞれのボタンにはコンストラクタでボタンのラベルに表示される文字列を設定します. またButtonクラスのsetOnMouseClickedメソッドでボタンがクリックされた時に実行されるイベントハンドラを設定します. ここではイベントハンドラにラムダ式を利用しています.

そうして作成したGUI部品, ノードからシーングラフを組み立てます. VBoxオブジェクトがルートとなり, その子ノードにToolBarオブジェクトとviewを保持します. VBoxクラスは子ノードを縦に並べてレイアウトします. ToolBarオブジェクトはprev, next, input, goを子ノードとして保持します. Sceneオブジェクトを生成し, primaryStageに設定します. Sceneオブジェクトにはコンストラクタにルートを渡してシーングラフを設定します.

最後にprimaryStageのshowメソッドでウィンドウを表示します.

WebBrowserクラスはプライベートなフィールドengineを持ちます. engineはstartメソッドで初期化され, goHistoryメソッドで使用されます. goHistoryメソッドは引数のoffset分だけ閲覧履歴を移動します.

Scene Graph

GUI element of JavaFX is called node. Branch is a node that can not have any child nodes. Leaf is a node that can have some child nodes. Scene graph is a tree structure of nodes. Root of a scene graph has no parent node. Node but root has a parent and 0 or more children. Nodes are represented by Node class. You can control bounds, position, event handler, transformation, id, and CSS style of GUI elements with Node class. GUI elements includes VBox, ToolBar, TextField, and WebView class that are used in this WebBrowser are subclass of Node class.

JavaFX supports properties. Properties helps us to listen changes of values. Node class has many properties of that state. I'm sorry, this article does not explain JavaFX properties.

WebBrowser class

WebBrowser class inherits Application class. In overridden start method, GUI elements and a scene graph are constructed. In start method, first, WebView object constructed, web engine of that is set to a private field engine.

Next, TextField object is constructed with initial text string.

Google page is loaded to open google at start of the application.

Then, prev button to go previous page, next button to go next page, and go button to load input URL are constructed. Constructor of Button class sets text of label of the button with given string. Lambda expression given, setOnMouseClicked method is called to set event handler that is handled when mouse is clicked on the button.

After that, scene graph is made of these GUI elements, nodes. VBox object is the root that has 2 children Toolbar object and view. VBox class layouts children vertically. ToolBar object has 4 children pre, next, input, and go. Scene object is constructed with root of scene graph to set to that. The Scene object is set to primaryStage.

Finally, show method of primaryStage is called to show a window.

A field of WebBrowser class, engine is initialized in start method and used in goHistory method. goHistory method moves current page in web history by offset.

まとめ Summary

• GUI部品はNodeクラスのサブクラス
  GUI elements are subclass of Node class.
• シーングラフは木構造
  Scene graph is tree structure.

JavaFX 1 Application class

はじめに Introduction

この記事ではブラウザの作成を通して, JavaFXの土台となるクラスについて解説します. javafx.WebViewというクラスを使うとWebページのロードや表示をとても簡単に行うことができます. 自分を含めたJavaFX入門者の理解に繋がれば幸いです.

Developing a simple web browser, I am going to explain JavaFX classes. It is easy to load and display a web page and make a simple web browser with JavaFX. I am glad if this article makes beginners includes me understand JavaFX.

準備と実行 Preparation and Run

準備 Preparation

JavaFXの環境構築は次の記事に書いてあります.
The following is how to prepare JavaFX. https://jumpaku.hatenablog.com/entry/2015/09/21/170800jumpaku.hatenablog.com

作業 Works

1. JavaFXのJREを含んだ新規プロジェクトを作成する
   Create new project which contains JavaFX JRE.
2. WebBrowserクラスを作成し以下のソースコードを記述する
   Create WebBrowser class and write source code as follows.
3. 実行するとgoogleのページが表示される
   Run application and google page is displayed.

ソースコード Source code

package jumpaku.webbrowser;

import javafx.application.Application;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.web.WebView;

public class WebBrowser extends Application {
    @Override
    public void start(Stage primaryStage) {
        try {
            WebView webView = new WebView();
            webView.getEngine().load("https://www.google.co.jp/");
            Scene scene = new Scene(webView);
            primaryStage.setScene(scene);
            primaryStage.show();
        } catch(Exception e) {
            e.printStackTrace();
        }
    }

    public static void main(String... args) {
        Application.launch(WebBrowser.class, args);
    }
}

解説 Explanation

JavaFXのアプリケーションはApplicationクラスを継承して作成します. 今回はApplicationクラスを継承してWebBrowserクラスを作成しました.

Extending Application class, JavaFX application is written. I made WebBrowser class extending Application class.

Applicationクラスの継承

Applicationクラスには主に次の4つメソッドがあります.

1. launch アプリケーションの起動
2. init 初期化処理
3. start エントリポイント
4. stop 終了処理

launchメソッドを呼び出すとアプリケーションが起動します. launchメソッドは1度だけ呼び出す事ができ, 第一引数は次の様にApplicationクラスを継承したクラスでなければいけません.

Application.launch(Class<? extends Application>　appClass, String... args);

また次の様に引数を1つだけにする事も出来ますがその場合Applicationのサブクラスのメソッド内でしか呼び出せません.

Application.launch(String... args);

アプリケーションが起動されるとまずinitメソッドが呼び出されます. initメソッドをオーバーライドする事で初期化処理を実装する事ができます.

次にstartメソッドが呼び出されます. startメソッドはエントリポイントであり, initメソッドの後に開始準備が整ったら呼び出さます.

Platform.exitメソッドを呼び出すかウィンドウが閉じられるとアプリケーションが終了します. この時にstopメソッドが呼び出されます. stopメソッドをオーバーライドする事で終了処理を実装する事ができます. System.exitメソッドでもアプリケーションを終了する事ができますがその場合stopメソッドは呼び出されません. initメソッドとstopメソッドはオーバーライドしない場合は何もしません.

WebBrowserクラスの解説

Applicationクラスを継承する時はstartメソッドをオーバーライドする必要があります. 今回のWebBrowserクラスではstartメソッドでGUI部品の組み立てを行っています. startメソッドに渡されたprimaryStageはプラットフォームによって生成されたものです. StageクラスはGUI部品の配置の土台となるクラスで, ウィンドウの管理をします.

まずWebViewというGUI部品を生成してgoogleのページをロードしました. WebViewクラスはウェブエンジンを管理しその内容を表示します. 次にこのWebViewオブジェクトをSceneオブジェクトに保持させます. Sceneクラスは全てのGUI部品を保持するクラスで, シーングラフというGUI部品同士の構造を管理します. そしてこのSceneオブジェクトをprimaryStageにセットします. Stageオブジェクトのshowメソッドを呼び出す事でウィンドウを表示します.

mainメソッド内ではlaunchメソッドを呼び出してアプリケーションを起動しています.

Extend Application class

Application class has important 4 methods.

1. launch - Run application
2. init - Initialize application
3. start - Entry point
4. stop - Finalize application

When launch method is called, the application runs. You can call launch method only once. First argument must be extending Application class as follows.

Application.launch(Class<? extends Application>　appClass, String... args);

You can call this method with one argument as follows. Then, launch method must be called from method of a sub class extending Application class.

Application.launch(String... args);

When you run an application, first, init method is called. You can implement initialization overriding init method.

After init method, if application is ready, start method is called. It is the entry point.

When Platform.exit is called or the last window is closed, application is ended. At that time, stop method is called. You can implement finalization overriding stop method. You can end application using System.exit but stop is not called. Without overriding, init method and stop method do nothing.

Implement WebBrowser class

When you extend Application class, you must override start method. start method of WebBrowser class constructs GUI parts. Given primaryStage in start method is created by platform. Stage class is a foundation of arrangement of GUI parts and manages window.

First, I generated a WebView object which is a GUI parts and load google page. WebView class manages a web engine and displays contents of that. Next, creating Scene object, I set WebView object to that. Scene class contains GUI parts manages scene graph which is structure of GUI parts. Then, I set Scene object to primaryState. After that, I displayed a window calling primaryStage.show

In main method, calling launch, I run the application.

まとめ Summary

• startメソッドをオーバーライドしてApplicationクラスを継承
  Override start method to extend Application class.
• Aplication.launchで起動
  Call Aplication.launch method to launch the application.
• Stageクラスはウィンドウの土台
  Stage class is foundation of window.
• Sceneクラスはシーングラフの親玉
  Scene class is boss of scene graph.
• WebViewは便利
  WebView class is convenient.

次回 Next

もう少し立派なWebブラウザを作ります. Develop more useful web browser.

jumpaku.hatenablog.com