Zenn
😽

RustとTauriでデスクトップアプリを作ってみた話

2021/12/11に公開
Rust
Tauri
tech

Loadstone への外部画像アップロードはめんどくさい

私FF14というMMOをやっております。最近は曉月のフィナーレという拡張パッケージが発売され、zenn.devのユーザーにもFF14やっている人はそこそこ多いのではないかと思います。

FF14にはLoadstoneというコミュニティサイトがあります。
当然そこには画像アップロード機能があるのですが・・・・、容量がすくないのです＿|￣|○

その為、AWS S3に画像ファイルを置き、CloudFrontをつかってWebサイトを作成して、LoadStoneにURLを読み込ませることをしています。

これがもう面倒くさい・・・。

なので、ファイル選んでS3にアップロードしたら、画像のURLを教えてくれるツールを作りたいと思いました。

具体的にはこんなのを作っています。
超絶しょぼいですがこんなもんでゆるしてください( ;∀;)

https://youtu.be/7UZY23GX9eY

別にすごいことは何もしてなく、学習用に丁度いいと思い作成しました。

使用している言語やフレームワーク

などを使っています。
TauriはRustのフレームワークですが、Electronと同様にUI部分にブラウザのテクノロジを使うことが出来ます。
WindowsではWebview2を使うのでWebview2が必須となります。

UIはブラウザに使うフレームワークがそのまま使えるので、試しにVue3に慣れているBootstrap-vueを使おうと思いましたが残念ながらvue3対応版がありませんでした。
たぶんforkなのかな？Bootstrap-vue-3というのを見つけましたのでそちらを使ってみる事にしました。

Tauri,Boostrap-vue-3はいずれも正式リリース前のバージョンのようです。
その為にアレ？とハマったことなどがありまして、そういったところも軽く書いていければと思います。

Tauriの使用感など

開発環境めんどくさい

開発始めるまで割と手順がが面倒です。WebView2をインストールしたりします。
ドキュメント通りに行えばプロジェクトの作成まではうまくいくと思います。

いざ開発でデバッグとなるとどうしていいのかがさっぱりわかりませんでした
公式ドキュメント通りに行うと

set RUST_DEBUG=1
tauri dev

とするそうです。
ただ私にはうまく動作させることが出来ませんでした。

既にどこで情報を見つけたのか覚えていないのですが、デバッグは src-tauri/tauri.conf.json の build.distDir に ../dist を設定し下記コマンドでデバッグしていました。
ソース変更するとホットリロードされます。

yarn tauri:serve

Rustとの連携

UI部分はブラウザテクノロジなので、HTMLやJavaScript、CSSなのですが、Rustで非UI部分を作ることが出来ます。
Rustで作った関数は例えば下記のような感じで呼び出します。

let files = await tauri.invoke("get_dir_files", { dir: filePath });

パラメータも名前付きで上記の用に設定すればOKです。
Serdeのシリアライズとデシリアライズを実装しておけばStructも渡すことが出来ます。

Rustの関数は

fn main() {
  tauri::Builder::default()
    .invoke_handler(tauri::generate_handler![get_dir_files])
    .run(tauri::generate_context!())
    .expect("error while running tauri application");
}

#[tauri::command]
fn get_dir_files(dir: String) -> Result<Vec<SampleData>, String> {
	～～省略～～
}

という感じでinvoke_handlerに設定します。

またイベント的なものでJavaScript ⇔ Rustのやり取りが可能なようですが今回使ったのはinvokeのみです

ダイアログ

Tauriが提供するダイアログにはファイルやディレクトリを選択したりするダイアログがあります。またwindow.alertやwindow.confirm自体を（OSの）システムのダイアログに置き換えます。

しかし困ったことにwindows.alertとwindows.confirmともに実行したら結果が返ってきません。
その先のプログラムが進行しないのです。

特にconfirmでyes or noを取りたかったのですが、ダイアログが表示されるものの結果が戻らないので意味がなく、使用する意味がないといっても過言ではないですね。

私の環境のせいなのかはわかりませんが・・・。

なお、ファイルオープンダイアログに関しては問題なく動作しております。

Bootstrap-vue-3も・・・

今回本家のBootstrap-vueがVue3に対応していなかったのでBootstrap-vue-3を使用しました。

まだまだ実装されてないところが多いようで、B-Modalが実装されてなくて結構困りました。
今回windows.alertやwindows.confirmが使い物にならないのでB-Modalでメッセージボックス的なのを作ろうとしたのですが、こちらも未実装ということで・・・。

もちろん正式リリースされていないのでこの辺はしょうがないところです。

Vue3に対応しているUI Frameworkがあまりなく、個人的にこのBootstrap Vue 3が順調に開発されて正式リリースされるのを待ちの望んでいます。

アプリケーションの配布

yarn tauri:build

することでリリースビルドが可能で、src-tauri\target\release\bundle\msiディレクトリにインストーラーまで作ってくれます。
これは実に便利(´▽｀)

最後におもったこと

当たり前ですが、リリース前なのでドキュメントの整合性なども含めってきわめて不完全で試行錯誤が必要でした。
正式リリースされたらなかなかよさそうかなと思うのですが・・・。

ただJavaScriptから呼び出せるTauriのAPIが充実してきたらJavaScriptで完結できたりしそうで、なんのためにこのFrameworkを選んだっけ？という気持ちにもなりそうです。

基本的にJavaScriptと開発して足りない部分をRustで実装するという感じになるのではないかと思います。

UIをHTMLベースに簡単にリッチな感じでつくれるのはよいですが、個人的には他のGUIライブラリも使ってみたいなという風に感じました。

Discussion