9
Help us understand the problem. What are the problem?

posted at

updated at

Rust によるデスクトップアプリケーション開発環境構築 with Tauri

この記事について

2022年06月16日、クロスプラットフォーム対応のアプリケーションフレームワーク「Tauri」から、初の安定版となる v1.0 がリリースされました。以前から注目していたフレームワークだったので、この機会に開発環境の構築手順を整理しておこう!ということで記事にしました。

Tauri とは?

Electron の代替を目指して開発が進められている、クロスプラットフォームの GUI フレームワークです。Electron と比べて「バイナリサイズが小さい」「処理が速い」といった特徴があります。
現時点ではデスクトップアプリのみがサポートされていますが、今後はモバイルアプリへの対応も予定されているそうです。

公式サイト より抜粋
Tauri is a toolkit that helps developers make applications for the major desktop platforms - using virtually any frontend framework in existence. The core is built with Rust, and the CLI leverages Node.js making Tauri a genuinely polyglot approach to creating and maintaining great apps.

日本語訳 by @slangsoft
Tauri は、現存するほぼ全てのフロントエンドフレームワークを使用し、主要なデスクトッププラットフォーム用のアプリケーション開発を支援する、開発者向けツールキットです。コアは Rust で構築され、CLI は Node.js を活用することで、優れたアプリケーションを作成・維持するための純粋なポリグロットアプローチとなっています。

パッケージマネージャーについて

この記事では Chocolatey というパッケージマネージャーを使って必要なソフトウェアのインストールを行っていきます。
PowerShell を管理者として起動し、以下のコマンドを実行するだけで導入できます。是非この機会に導入してみてください。

Windows PowerShell
Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))

事前準備

VSCode の拡張機能インストール

下記の拡張機能をインストールしておきましょう。

  • rust-analyzer
    VSCode に Rust のサポートを提供します。rust-lang.rust を置き換えるものとして推奨されています。
  • CodeLLDB
    次世代の高機能デバッガーです。Linux / MacOS / Windows をサポートしており、リモートデバッグにも対応しています。

Information
Ubuntu への LLDB 導入でお困りですか?
詳細な手順を以下の記事で解説していますので、ぜひ参考にしてください。

必要なソフトウェアのインストール

ここでは以下のソフトウェアを一気にインストールします。

  • Git
    Rust プロジェクトでは既定で Git が使用されるため必要。
    敢えて Git を使用しない構成にもできますが、この記事では触れません。
  • Node.js
    Tauri & yarn の導入に使用します。
  • Visual C++ build tools
    Rust のコンパイラが含まれています。
  • .NET SDK
    VSCode でデバッグ実行する際に必要。

PowerShell を管理者として起動し、以下のコマンドを実行します。ビルドツールのインストールに少し時間がかかるので、完了までコーヒー ( または紅茶 ) でも飲みながらノンビリと待ちましょう。
インストール中に「~には含まれていません」といったメッセージが出ますが、スルーで大丈夫みたいです。

Windows PowerShell
choco install git nodejs visualstudio2022-workload-vctools dotnet-sdk -y

Rust のインストール

PowerShell を管理者として起動し、以下のコマンドを実行します。

Windows PowerShell
choco install rustup.install -y

rustup のインストール時に設定された環境変数を PowerShell に読み込ませます。

Windows PowerShell
$env:Path = [System.Environment]::GetEnvironmentVariable("Path","Machine") + ";" + [System.Environment]::GetEnvironmentVariable("Path","User")

Rust が正常にインストールされていることを確認します。
バージョンナンバー、コミットハッシュ、最新の安定版がリリースされた日時が表示されれば OK です。

Power Shell
rustc --version
# rustc 1.61.0 (fe5b13d68 2022-05-18)

念のために Rust toolchains と rustup のアップデートを実行しておきましょう。

Windows PowerShell
rustup update
# info: syncing channel updates for 'stable-x86_64-pc-windows-msvc'
# info: checking for self-updates
# stable-x86_64-pc-windows-msvc unchanged - rustc 1.61.0 (fe5b13d68 2022-05-18)
# info: cleaning up downloads & tmp directories

Hello World!

カレントディレクトリをホームディレクトリに変更し、cargo コマンドで新規プロジェクトを作成。VSCode で開きます。

Windows PowerShell
cd ~/
cargo new rust_hello_world
# Created binary (application) `rust_hello_world` package
cd rust_hello_world
code .

VSCode が起動したら main.rs を開きます。
ここで自動的に rust-analyzer によるプロジェクトの解析が始まります。rust-analyzerready ( 解析完了 ) になったら Run をクリックしてプログラムを実行します。
tempsnip.png

VSCode Terminal
# > Executing task: C:\Users\slangsoft\.cargo\bin\cargo.exe run --package rust_hello_world --bin rust_hello_world <
# 
#     Finished dev [unoptimized + debuginfo] target(s) in 0.02s
#      Running `target\debug\rust_hello_world.exe`
# Hello, world!
# 
# Terminal will be reused by tasks, press any key to close it.

デバッグ設定

今のままでも rust-analyzerDebug ボタンからデバッグ実行はできますが、やはり F5 で実行できた方が便利なので設定していきます。
ctrl + shift + d でデバッグウィンドウを開き、続けて Run and Debug ボタンをクリックします。
tempsnip2.png
Cannot start debugging because no launch configuration has been provided.
ここは OK をクリック。
tempsnip_03.png
Cargo.toml has been detected in this workspace.
Would you like to generate launch configurations for its targets?
ここは Yes をクリック。
tempsnip_04.png
これで launch.json が自動生成されます。修正は必要ありませんので、そのまま閉じておきましょう。
main.rsprintln マクロの行にブレークポイントを設定して F5 を押してみます。
どうでしょうか。画像の様にブレークすれば成功です。
tempsnip_05.png

Tauri プロジェクト生成

Tauri CLI のインストール

※この手順は初回のみ必要
PowerShell を管理者として起動し、以下のコマンドを順に実行します。

Windows PowerShell
# npm を最新版にアップデート
npm install -g npm
# changed 1 package, and audited 201 packages in 3s
# 11 packages are looking for funding
#   run `npm fund` for details
# found 0 vulnerabilities
npm --version
# 8.12.2
npm install -g yarn
# changed 1 package, and audited 2 packages in 649ms
# found 0 vulnerabilities
yarn --version
# 1.22.19
yarn add -D @tauri-apps/cli
# yarn add v1.22.19
# info No lockfile found.
# [1/4] Resolving packages...
# [2/4] Fetching packages...
# [3/4] Linking dependencies...
# [4/4] Building fresh packages...
# success Saved lockfile.
# success Saved 2 new dependencies.
# info Direct dependencies
# └─ @tauri-apps/cli@1.0.0
# info All dependencies
# ├─ @tauri-apps/cli-win32-x64-msvc@1.0.0
# └─ @tauri-apps/cli@1.0.0
# Done in 8.26s.

Tauri プロジェクト ( 雛型アプリ ) 生成

カレントディレクトリをホームディレクトリに変更し、yarn create tauri-app コマンドでプロジェクトを新規作成します。途中の質問は全て Enter ( default ) で進めます。

Windows PowerShell
cd ~/
yarn create tauri-app
# yarn create v1.22.19
# warning package.json: No license field
# [1/4] Resolving packages...
#   :
#  中略
#   :
# You may find the requirements here: https://tauri.studio/v1/guides/getting-started/prerequisites
# Press any key to continue...
? What is your app name? tauri-app
? What should the window title be? Tauri App
? What UI recipe would you like to add? Vanilla.js (html, css, and js without the bundlers)
# >> Running initial command(s)
# >> Installing any additional needed dependencies
#   :
#  中略
#   :
# Your installation completed.
# $ cd tauri-app
# $ yarn install
# $ yarn tauri dev
# Done in 69.58s.

雛型アプリの起動

カレントディレクトリを tauri-app に変更し、yarn install > yarn tauri dev で雛形アプリを起動します。

Windows PowerShell
cd tauri-app
yarn install
# yarn install v1.22.19
# warning package.json: No license field
# warning ..\..\..\package.json: No license field
# warning tauri-app: No license field
# [1/4] Resolving packages...
# success Already up-to-date.
# Done in 0.23s.
yarn tauri dev
# yarn run v1.22.19
# warning package.json: No license field
# warning ..\..\..\package.json: No license field
# $ tauri dev
#  Blocking waiting for file lock on build directory
#  Compiling lazy_static v1.4.0
#   :
#  中略
#   :
#  Finished dev [unoptimized + debuginfo] target(s) in 4m 17s
#  Running `target\debug\app.exe`
# Asset `favicon.ico` not found; fallback to favicon.ico.html
# Asset `favicon.ico` not found; fallback to favicon.ico/index.html
# Asset `favicon.ico` not found; fallback to index.html

この様なアプリが立ち上がれば成功です!
tempsnip_06.png

参考サイト様

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
9
Help us understand the problem. What are the problem?