美しくかけるGUIアプリのライブラリをつくった。

2021.02.10に公開

JavaScript

概要

ここ４日くらい開発していました、「Mac, Linux, Windowsそれぞれ対応の軽量ハイブリッドアプリのフレームワークっぽいもの」を紹介します。

バックエンドはRust、フロントエンドはJS/CSS/HTMLという、いわゆるハイブリッドアプリです。

コードを描くときの美しさと分かりやすさが最高品質（ライブラリ内部は改善の余地あり）
使用メモリは約40MB以下で使えます。データ関連が不要だと約20MB以下。(メモリに関してはElectron等と比べるとまだマシ)
アプリをつくるのにRustの知識は9割不要。
現状はデータのAPIだけ実装済み。今後は気が向いたらアプデする。(あきた)

デザイン

基本的にJS側でAPIを提供するのでそれを呼んでもらいます。Rustはウィンドウとデータ、HTTPの処理に使用します。SPAをちょっと進化させた感じですね。

どのくらいかわいく描けるか

どうでもいいですが最近この方の絵にハマってまして、すごいんでよかったら見てみてください。

Rust側

ちょっとかわりましてRustコードです。これでGUIをつくります。

main.rs

let config = AppConfig {
    app_title: String::from("Application Name"),
    window_width: 800,
    window_height: 800,
    window_resizable: true,
    app_debug: false,
    window_rgba: Color {
        r: 123,
        g: 213,
        b: 213,
        a: 225
    },
    window_frameless: false,
    db_path: "unko".to_string()
};
rff::launch(config, String::from(HTML));

上ではHTMLを読み込んでいますが、そのHTMLファイルのなかにすべて(CSS,JSなど)が入っています。index.htmlに全部を書いていては、時間がいくらあっても足りないので、ヘルパーを用意してます。

まずhtmlを読み込んで、htmlファイル内に{LOAD_CSS}と{LOAD_JS}と書かれている場所にそれぞれCSSとJSが組み込まれます。build.rs内にでも書いておいて、ビルド時に自動でhtmlのビルドができるようにしておくと、楽ですね。

build.rs

let html = read_to_string("./src/view/index.html").unwrap();
// フォルダごと.cssの拡張子がついてるファイルを全部読み込みます。
let css = load_css_files(["./src/view/lib/css", "./src/view/my_lib/css"].to_vec());
let js = load_js_files(["./src/view/lib/js", "./src/view/my_lib/js"].to_vec());
let contents = build_html(html, css, js);
create_file("./src/index.html", contents);

JS(じゃばすくりぷと)側

let d = new Cmd.data();
d.insert("key", "Example App");
d.select("key", function (data) {console.log(data);});
d.delete("key");

ダウンロードしたいですか？

めんどくさくてcrate登録してないのでこうやって書きましょう。
rff = {git = "https://github.com/0x79756b69/rff", branch = "main"}

さいごに

よくがんばったね！えらい！えらい！

Githubのリポジトリ置いておくのでスターしてくれたらチョコレートあげます。

あれっ。バレンタインだから、僕はもらうほうか。