お久しぶりです。tauriというものを試してみようと思います。かたりぃなです。
tauriとはweb技術を使ってデスクトップアプリを開発するフレームワーク的なやつらしいです。 https://tauri.app/
似たような話でelectronがありますが、electronはブラウザ(Chromium)を内包しているのに対し、tauriはwebviewを使うという点が違うらしいです。
どうしてtauri?
一年ほど前からUWPをひっそりと縮小していくという話がありました。SDKが変わるのはよくある話なのですが、果たしてこのまま付いていっていいのかなという疑問が自分の中で出てきました。
私はHololensのアプリを作るためにUnityとUWP(C++/CX, +DirectX)から入りましたが、C++/CXは終了しWinRTになりました。 DirectXもバージョンアップを繰り返していて、大昔にDirectX5を触ったころは固定機能パイプラインだけだったのですが、DirectX11ではシェーダーを自力で書く必要があって、楽しいながらも骨の折れる作業だった記憶があります。
そしてUWP縮小の話を見ていると、このまま趣味でMS技術を追っていくことは時間リソース的に不可能なのではと思い始めました。もっと効率のいい開発方法が欲しいわけで、最近のデスクトップアプリ開発ってどんなだろうと見てるとtauriがあがってきたわけです。
RustとJSという組み合わせも、ちょうど興味があったところです。
Rustについて色々調べてみたところ、Linuxカーネル側にも利用していくくらいに信頼ができてきています。 また、tauriの技術要素であるJavascriptに関して言えば、3Dレンダリングくらいは普通にできて、ライブラリも充実しています。 となれば、まあ趣味でやっていくぶんにはこれでいいんじゃないかなと思った次第です。
開発環境を作る
Windowsの開発環境づくりというのはいつもはVisualStudioに任せっきりだったので、実際どういう構成にするのが正解なのかよくわかりません。 たぶんマニュアル通りにやれば行けそうな気がしますが、自信ないです。
開発環境づくりで躓いて諦めるという王道パターンは踏みたくないので、慣れてる環境を拡張する方向でいきます。
幸いXWindowシステムといってGUIを転送する手段があります。 雑にいうとアプリケーション単位でのリモートデスクトップみたいなものです。
Linux上でtauriアプリを起動し、その画面をXWindowシステムでWindowsに転送してみることにします。
環境は以下の通りです。
- ホストOS : WIndows10 pro
- W-Windowサーバ : vcxsrv
- 仮想環境 : Docker Desktop for windows
- エディタ : VS-code
vcxsrv(https://sourceforge.net/projects/vcxsrv/)はあらかじめwindowsにインストール済みとします。
dockerでLinux環境を作る
作業ディレクトリを作ってVS-codeで開き、2つのファイルを作ります。 - dockker-compose.yml - docker/app.dockerfile
それぞれのファイルの中身は以下のようにします。
app.dockerfile
FROM ubuntu:latest ENV DEBIAN_FRONTEND noninteractive RUN sed -i.org -e 's|ports.ubuntu.com|jp.archive.ubuntu.com|g' /etc/apt/sources.list \ && apt-get update && apt-get install -y \ # xwindow x11-apps \ # node.js curl nodejs npm \ # TAURI libwebkit2gtk-4.0-dev build-essential wget libssl-dev libgtk-3-dev libayatana-appindicator3-dev librsvg2-dev \ && apt-get clean \ && rm -rf /var/lib/apt/lists/* # Rust install ENV RUST_HOME /usr/local/lib/rust ENV RUSTUP_HOME ${RUST_HOME}/rustup ENV CARGO_HOME ${RUST_HOME}/cargo RUN mkdir /usr/local/lib/rust && \ chmod 0755 $RUST_HOME RUN curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs > ${RUST_HOME}/rustup.sh \ && chmod +x ${RUST_HOME}/rustup.sh \ && ${RUST_HOME}/rustup.sh -y --default-toolchain nightly --no-modify-path ENV PATH $PATH:$CARGO_HOME/bin
docker-compose.yml
version: '3' services: rust: build: context: ./docker dockerfile: app.dockerfile tty: true environment: - CARGO_BUILD_TARGET_DIR=/work/rust-targetdir volumes: - ./project-dir:/work/project-dir - node_volume:/work/project-dir/node_modules - rust_volume:/rust-targetdir volumes: node_volume: driver: local rust_volume: driver: local
あとは docker-compose build
すればOKです。
中に入って作業するために、VS-codeの「Ctrl+Shift+P」から remote-container: open folder in container
で開いて作業していきます。
ここからはdockerコンテナ上での作業になります。
xwindowの動作確認
起動したらまずxwindowの動作確認をします
windows側でxwindowサーバ起動し、設定画面で以下2つを設定しておきます。
- 「Access Control=Disable」にチェック
- AccessControlすぐ下のオプションパラメータに「-nowgl」を入力
xwindowサーバ起動後、vscode上のターミナルから
export DISPLAY=<windowsPCのIP>:0.0 xeyes
を入力し、Windows上にxeyesのアプリが表示されることを確認します。
tauriの環境構築
アプリを作る前に、追加モジュールのインストールをします。
cd /work/project-dir cargo install tauri-cli npm install -g yarn
jsのフレームワーク(vueとかreactとか)がうまく入らないことがあるのでnodeを最新版にします。 このあたりのことはまだよくわかってないです。
npm install -g n n lts
tauriアプリを作る
これでやっとアプリを作れます。
cd /work/project-dir yarn create tauri-app
色々質問が出るので、お好みで。今回はfrontはreact-js, backはrustにしました。
# yarn create tauri-app yarn create v1.22.19 [1/4] Resolving packages... [2/4] Fetching packages... [3/4] Linking dependencies... [4/4] Building fresh packages... success Installed "create-tauri-app@3.1.2" with binaries: - create-tauri-app ✔ Project name · tauri-app ✔ Choose which language to use for your frontend · TypeScript / JavaScript - (pnpm, yarn, npm) ✔ Choose your package manager · yarn ✔ Choose your UI template · React - (https://reactjs.org/) ✔ Choose your UI flavor · JavaScript Please follow https://tauri.app/v1/guides/getting-started/prerequisites to install the needed prerequisites, if you haven't already. Done, now run: cd tauri-app yarn yarn tauri dev Done in 13.38s.
ビルド前にやること
このままビルドするとめっちゃ時間かかります。 node-modulesをwindows側に見せると重くなるためです。
windows側に見せない設定のディレクトリを/work/project-dir/node-modulesに用意しているので、/work/project-dir/に作成したtauriアプリのコード一式をもってきます。
cd /work/project-dir mv tauri-app/* . mv tauri-app/.* . rmdir tauri-app
やっとアプリを起動です。
cd /work/project-dir yarn yarn tauri dev
tauriアプリが起動しました。 何かしらの物が出てくるとモチベーションあがりますね。 少しづつ色々ためしていこうと思います。
コードをざっと眺めてみると、 - srcディレクトリの下がjsで作られたui - src-tauriの下がrustで書かれたバックエンド
という構成のようです。
今回のポイント
単にビルドするだけですが、工夫しておかないと重くて使い物にならないということがわかりました。 具体的には
- node_modulesはコンテナ内で閉じておく
- rustの出力先もコンテナ内で閉じておく
の2つが今回のポイントです。
なお、rustのビルド成果物の出力先を変更しているので、デバッガの設定するときなどは気をつけないといけないかもしれませんね。
感想と今後の展望
アプリの開発環境ができたので色々試してみようと思います。 - Rustのデバッグ設定をする - CライブラリをRustから利用する - Windows向けリリースパッケージを作る - JSで画面を作っていってみる などなど、試してみたいことはたくさんあります。
それでは今回はこれくらいで。