🎀
[制作] 美しくかけるGUIアプリのライブラリ
概要
ここ４日くらい開発していました、「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のリポジトリ置いておくのでスターしてくれたらチョコレートあげます。
あれっ。バレンタインだから、僕はもらうほうか。
Discussion