{"id":23187519,"url":"https://github.com/ncaq/radixconv","last_synced_at":"2025-04-05T05:12:44.770Z","repository":{"id":151198125,"uuid":"84789565","full_name":"ncaq/radixconv","owner":"ncaq","description":"GUIを用いた基数変換器","archived":false,"fork":false,"pushed_at":"2017-03-13T06:24:04.000Z","size":177,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-10T13:12:10.426Z","etag":null,"topics":["groovy","java","javafx"],"latest_commit_sha":null,"homepage":"","language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ncaq.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-03-13T06:01:36.000Z","updated_at":"2017-03-13T07:09:31.000Z","dependencies_parsed_at":null,"dependency_job_id":"6cd58f32-0a22-4aa9-ab07-ea0dfaa140c5","html_url":"https://github.com/ncaq/radixconv","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ncaq%2Fradixconv","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ncaq%2Fradixconv/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ncaq%2Fradixconv/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ncaq%2Fradixconv/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ncaq","download_url":"https://codeload.github.com/ncaq/radixconv/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247289429,"owners_count":20914464,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["groovy","java","javafx"],"created_at":"2024-12-18T10:19:39.035Z","updated_at":"2025-04-05T05:12:44.765Z","avatar_url":"https://github.com/ncaq.png","language":"Java","funding_links":[],"categories":[],"sub_categories":[],"readme":"---\ntitle: ソフトウェア開発基礎演習11回目課題 グラフィクスとユーザインターフェース (2)\ndate: 2015-07-02\n---\n\n# 問題1 GUIの設計\n\nSwingは将来的に廃止されるので,その後継のJavaFXを学習するために,JavaFXで書くことにしました.\n\nGUIの見た目を提示します.\n\n![](RadixConv-imitation.png)\n\n## マニュアル\n\n0. ボタンを押して数式を構成する\n1. Enterボタンを押して数式を評価する\n2. 上部領域に数式とその結果が表示される\n3. 数式を入力して基数ボタンを押して基数モードを切り替えると,数値がその基数に変換される\n\n## GUIの構築\n\n### FXML\n\nJavaFXでは基本的にXMLベースのFXMLファイルにUI定義を記述します.\n\nFXMLは普通Scene Editorなどのグラフィカルなツールで書くもので,手書きするのはただの苦行のようですが,ここは学習のためにあえてFXMLを手書きしました.\n\n### CSS\n\nFXMLにはCSSを適用することが出来ます.\n\n### Java\n\n読み込みと描画をするだけならJava側のプログラムはほとんど書く必要はありません.\n\n~~~java\nimport java.io.*;\nimport javafx.application.*;\nimport javafx.fxml.*;\nimport javafx.scene.*;\nimport javafx.stage.*;\n\npublic class RadixConv extends Application {\n    public static void main(final String[] args) {\n        launch(args);\n    }\n    @Override\n    public void start(final Stage stage) throws IOException {\n        stage.setScene(new Scene(FXMLLoader.load(getClass().getResource(\"RadixConv.fxml\"))));\n        stage.show();\n    }\n}\n~~~\n\n## JavaFXについての考察\n\n結論:色々問題はあるが,Swingよりは良い\n\n### FXMLは単にクラスを並べただけ\n\nしかしこのFXML,XMLベースで作成する必要があったのか大いに疑問があります.\n\nなぜなら,FXMLはVBoxやHBoxなどで,構造ではなくレイアウトを記述しています.\n\n普通,HTMLやXMLは構造を記述するもので,レイアウトを定義するものではありません.\n\nそしてFXMLもCSSが使えるので,当然FXMLではレイアウトの意味を持たせないと予想するでしょう.\n\nしかし,FXMLはパネルがレイアウトの意味を持っているものしか無く,どうも初めからレイアウトの意味を含むように作られたようなので,XML部分にレイアウトの意味を含ませないようにするのは不可能です.\n\nQMLほど見た目が離れていればあまり気になりませんが,XMLなのにレイアウトを定義するというのはETMLを見ているような気持ち悪さがあります.\n\nJavaFXはリッチインターネットアプリケーションライブラリだとか言われていますが,FXMLはWebを参考にしたとかそういうことは全く無く,FXMLは単にJavaFXのクラスを並べただけ,と考えたほうがスムーズに開発が出来ます.\n\nそれと,やはりFXMLを手で書くのはただの苦行です,誰も得しません.\nFXMLは構造化を全然行わないので手で書いても別に綺麗になったりしません.\n素直にGUIのツールを使うべきでした.\n\n### CSSが貧弱\n\nJavaFXのCSSの対応は非常に貧弱で,WebのようにCSSでレイアウトするのは無理です.\n\n具体的にどう貧弱かというと,\n\n* セレクタが貧弱, :before, :after, :nth-childなどに非対応\n* lengthが貧弱, px, pt, などしかなく, vwやvhなどに非対応,パーセントの指定がWebのようには動かない\n* プロパティが貧弱, flexboxなどもちろんなく, marginすらありません(paddingはある)\n\nCSSには一切期待しないほうが良いです.\n\n### WebView\n\nところで,JavaFXではWebViewやWebEngineを使ってHTMLを処理することができるそうで,\nそのレンダリングエンジンはWebKitだそうです.\n\nこれを使おうかと少し検討しましたが,以下の理由で今回は使いません.\n\n* 一年前の情報表現演習の総合課題でjQueryで電卓を実装したことを思い出した\n* どうせWebベースなら,JavaごとやめてElectronやQtを使いたい\n* Javaを投げ捨てるならともかく,マトモに書こうとして調べまわるのに2日かかったFXMLを投げ捨てるのは非常につらい\n\n既存のJavaソフトウェアのフロントエンドを書くが,UIは普通にHTML+CSSで書きたい,という人には良い選択肢なのではないでしょうか.\n\n# 問題2 ActionListener\n\n当たり前ですが,SwingとJavaFXではいろいろ異なるので,異なる方法で実装します.\n\nJavaFXでのアクションリスナーを書くには,複数の方法があります.\n\n0. JavaScriptが使えるので,Javaのことは忘却してJavaScriptで書く.`onAction`属性でWebのように指定できる\n1. Javaクラスにメソッドを書き,FXML側で`fx:controller`にそのJavaクラスを指定することで,`onAction`属性にそのJavaクラスのメソッドが指定できる\n2. コントローラを指定して`@FXML Label labelId`のようにフィールドを書くと,指定のIdの要素が取り出せるので,Java側で`setOnAction`する.\n\nJavaもJavaScriptも,実行前チェックがあんまり役に立たないという点において,あまり大差は無いのですが,Groovyで数式を処理する予定なので,Javaで書くことにします.\n\nFXMLをWebのように書くのは無理とは言え,やはり`onAction`属性を指定していくというのは気持ち悪いので,Java側クラスに変数をバインディングします.\n\n## 値ボタンが押されたときの機能\n\n内容を加えるラムダ式をアクションに指定する.\n\npromptText(Web的に言うとplaceholder)を設定しているので,なにか特別なことをする必要はありません.\n\n~~~java\n    @FXML\n    public void initialize(final URL location, final ResourceBundle resources) {\n        this.inserter.lookupAll(\".number\").stream().forEach(b -\u003e ((Button)b).setOnAction(evt -\u003e inputLine.appendText(((Button)b).getText())));\n    }\n~~~\n\n![](insertLine-insert.png)\n\n# 問題3 基数の変換\n\n基数関連の機能をまとめる列挙型`Radix`を定義して,変換やプレフィクス付けを行います.\n\nプレフィクスの追加や削除は正規表現で行います.\n\nJavaの正規表現は先読み後読みがあり,かなり強力です.\n\n真面目に設計するならば,｢基数付きの数｣クラスを定義するべきでしょうが,そこまでやるならばパーサを書きます.\n\n~~~java\nenum Radix {\n    Bin(0b10, \"0b\", \"((?\u003c=(^| ))0b[0-1]+)\"),\n    Oct(010,  \"0\",  \"((?\u003c=(^| ))0[0-7]+)\"),\n    Dec(10,   \"\",   \"((?\u003c=(^| ))[1-9][0-9]+)\"),\n    Hex(0x10, \"0x\", \"((?\u003c=(^| ))0x[0-9a-f]+)\");\n\n    Radix(final Integer radix, final String prefix, final String pattern) {\n        this.radix = radix;\n        this.prefix = prefix;\n        this.pattern = Pattern.compile(pattern);\n    }\n\n    public static String fmapWithRadix(final Radix fromR, final Radix toR, final String view) {\n        return Integer.toString(Integer.parseInt(removePrefix(view), fromR.radix), toR.radix);\n    }\n\n    public static String removePrefix(final String withPrefix) {\n        final Pattern p = Pattern.compile(\"^0[bx]?\");\n        return p.matcher(withPrefix).replaceAll(\"\");\n    }\n\n    public static String replaceNumber(String line, final Radix toR) {\n        for(Radix r : Radix.values()) {\n            final Matcher m = r.pattern.matcher(line);\n            final StringBuffer b = new StringBuffer();\n            while(m.find()) {\n                m.appendReplacement(b, toR.prefix + Integer.toString(Integer.parseInt(Radix.removePrefix(m.group()), r.radix), toR.radix));\n            }\n            line = m.appendTail(b).toString();\n        }\n        return line;\n    }\n    public Integer radix;\n    public String  prefix;\n    public Pattern pattern;\n}\n~~~\n\n`this.radix.selectedToggleProperty().addListener`に指定したメソッドに古い値`oldValue`と新しい値`newValue`を送ってくれるので,\nそれに従って変換しようかと思いましたが,全ての数値にリテラルプレフィクスがついているので,`newVaule`だけ見れば問題ありません.\n\n~~~java\n    @FXML\n    public void initialize(final URL location, final ResourceBundle resources) {\n        this.inserter.lookupAll(\".number\").stream().forEach(b -\u003e ((Button)b).setOnAction(evt -\u003e appendNumber(((Button)b).getText())));\n\n        this.radix.selectedToggleProperty().addListener(this::toggleRadix);\n        this.radix.selectToggle(radixDefault);\n    }\n\n    public void appendNumber(final String numberText) {\n        final String line = this.inputLine.getText();\n        if(line == null || line.equals(\"\") || line.endsWith(\" \")) {\n            this.inputLine.appendText(Radix.valueOf(((RadioButton)this.radix.getSelectedToggle()).getText()).prefix);\n        }\n        this.inputLine.appendText(numberText);\n    }\n\n    private void toggleRadix(final ObservableValue\u003c? extends Toggle\u003e obs, final Toggle oldValue, final Toggle newValue) {\n        final Radix newRadix = Radix.valueOf(((RadioButton)newValue).getText());\n        this.disableButtonFromRadix(newRadix);\n        this.inputLine.setText(Radix.replaceNumber(this.inputLine.getText(), newRadix));\n    }\n\n    private void disableButtonFromRadix(final Radix radix) {\n        final Set\u003cNode\u003e buttons = this.inserter.lookupAll(\".number\");\n        buttons.stream().forEach(b -\u003e ((Button)b).setDisable(true));\n        buttons.stream().filter(b -\u003e Integer.parseInt(((Button)b).getText(), 16) \u003c radix.radix).\n            forEach(b -\u003e ((Button)b).setDisable(false));\n    }\n~~~\n\n![](dec.png)\n\n![](hex.png)\n\n# 問題4 機能を追加する\n\nJavaとの接続が簡単なGroovyのコードを構築して**Eval**します.\n\nGroovyは関数呼び出しに括弧がいらなかったり,普通に演算子オーバーロードが出来て同値判定に`==`が使える言語なので,こういった簡易な数式評価に向いています.\nあるいはJavaScriptよりもLightWeightかもしれません.\n\nGroovyを組み込むことで,おおよそ関数電卓で行えるような計算は全て可能です.\n\n普通は`log`を計算するのに`Math.log 10`などと入力する必要があるのですが,Groovyに渡すコードに`import static java.lang.Math.*;`を追加することにより,単に`log 10`で計算できます.\n\n数式にエラーがあった場合,例外がログに出現します.\n\n別に`log`や`fact`などのボタンも追加できるんですが,ただボタンを追加するだけなので,別に技術的に面白いことはないのでやめました.\nそもそも,キーボードという優れた入力インターフェイスを持つPCで厳しいハードウェアの制限で作られた電卓のインターフェイスを再現することはあまりにも無意味で,\n`log`とか使いたい人にはキーボードで入力してもらうか,無意味なPC上の電卓を捨てて,何らかのREPLを使ったほうが幸せになれるでしょう.\n私のオススメは任意の底のlogを計算する`logBase`関数があるHaskellのREPL,ghciです.\n\n![](eval.png)\n\n# 問題5 JARファイルの作成\n\nEclipseは自動化が難しいので,ターミナルでjarを作成します.\n\nGroovyのjarファイルを実行時に読み込む必要があるので,まずマニフェストファイルを作成します.\n\nコンパイルして`jar`コマンドでjarアーカイブを作成します.\n\n実行時には,`groovy.jar`も同じディレクトリに置く必要があります.\n\n少なくとも端末室のPCでは検証しました.\n\nOne-Jarなどを使えばjarに同梱出来るようですが,それをやるならちゃんとmavenなどの設定をする必要があるでしょうし,私はこういったツールが好きではなく,同梱するのではなくパッケージ管理システムが依存関係を解決するべきだと考えています.\n\n何でもかんでも同梱して,まともに依存関係を書かないとビルドが非常に困難になるからです.\nこういった悪習が広まった結果,Java関係のソフトウェアはやたらとビルドが難しいことを私は実感しています.\nそもそもgroovyを自分でビルドするのが不可能でした.\n\n# 問題6 オブジェクト指向およびマルチスレッドプログラミング\n\n## オブジェクト指向(バズワード)\n\nオブジェクト指向という言葉はあまりにも乱用され,その定義は誰にもわからなくなってしまいましたが,少なくとも｢**オブジェクト**｣が｢状態を持っている｣ことは確かです.\n\n## メモリ共有は時代遅れ\n\nもはや｢メモリ共有｣によるマルチスレッドプログラミングは時代遅れです.\n\nメモリ(変数)を安全に共有することは,常人には不可能です.\n\n### メソッドは単なる関数\n\n**メソッド**は問題を解決しません.\nSimula系のオブジェクト指向言語において,メソッドは関数です.\n**インスタンス**は変数です.\n複数のスレッドで,同じ変数を同時に読み書きすれば,悲劇が起きることは簡単に予想できます.\n\n### ロックの手動管理には無理がある\n\n**ロック**は問題を解決しません.全ての変数のアクセスに対して,｢この変数は共有されるか?｣とチェックして,デッドロックが生じないように,適切に**排他**制御をするなんてことは,現実的には不可能です.\n標準C言語でメモリリークを防ぐぐらい不可能です.\n\n### プロセス間通信を使えばメモリは共有されないが\n\nプロセス間通信は問題を解決しません.プロセスは重いので大量に動かすと,パフォーマンスの問題が生じます.\n求められているのは,プロセスの性質を持つ軽量なスレッドです.\n\n## メッセージパッシングを使うべき\n\nこれからは,デフォルトのメモリ共有をやめて,本当の**メッセージ**パッジングを行うべきです.\n\nここで言うメッセージは,Simula系オブジェクト指向言語で言うメッセージ(単なる関数呼び出し)とは関係ありません.\nErlangの文脈でのメッセージです.\n\n### Javaとメモリ共有とオブジェクト指向\n\nJava標準ライブラリでは,`java.util.concurrent`パッケージの`ConcurrentHashMap`や`ConcurrentLinkedDeque`などを使うことで,擬似的にメッセージパッシングが実現できますが,Javaの変数は**スレッド**間で共有されており,それを誰が所有しているかを処理系が知ることは出来ません.\n\n変数の共有を避けるために,Javaでメッセージを受け取る**クラス**は,メッセージを受け取る｢メールボックス｣以外に,状態を表現するフィールドを持たないことが推奨されます.\n\n状態を持たないクラスとは,要するにただの関数のことです.\n\nJavaでのオブジェクト指向はマルチスレッドプログラミングに向いていません.\n\nオブジェクト指向でマルチスレッドプログラミングをするならば,変数がデフォルトでスレッドローカルな言語を使うべきです.\n\n## 補足\n\n**mainメソッド**は使いどころがなかったので書けませんでした.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fncaq%2Fradixconv","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fncaq%2Fradixconv","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fncaq%2Fradixconv/lists"}