8 月 ago

3 minutes

更新履歴

Tauri 1.2 に合わせて 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 を管理者として起動し、以下のコマンドを実行するだけで導入できます。是非この機会に導入してみてください。

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 導入でお困りですか？
詳細な手順を以下の記事で解説していますので、ぜひ参考にしてください。

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

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

VSCode でデバッグ実行する際に必要。

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

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

Rust のインストール

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

choco install rustup.install -y

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

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

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

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

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

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 で開きます。

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

# > 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 プログラムのデバッグ方法

今のままでも rust-analyzer の Debug ボタンからデバッグ実行できますが、以下の設定を行っておくことで F5 で実行できるようになります。

launch.json ファイルの作成

デバッグ実行のテスト

Tauri プロジェクト生成

PowerShell の実行ポリシー変更

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

# 実行ポリシーの確認
Get-ExecutionPolicy
# 実行ポリシーの変更
Set-ExecutionPolicy RemoteSigned
# 実行ポリシーが変更されたことを確認
Get-ExecutionPolicy

PowerShell の実行ポリシー
PowerShell が構成ファイルを読み込み、スクリプトを実行する条件を制御する安全機能です。
Windows10 の規定値は Restricted に設定されているため、そのままでは yarn の実行がブロックされます。
実行ポリシーの詳細は Microsoft 公式サイトを参照してください。

yarn のインストール

※この手順は初回のみ必要
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

Tauri プロジェクト生成

カレントディレクトリをホームディレクトリに変更し、yarn create tauri-app コマンドでプロジェクトを新規作成します。
途中で 3 つの質問がありますので、以下を参考に回答して進めてください。

Project name
作成するプロジェクトの名前を入力します。ここではデフォルトの tauri-app としています。

Choose your package manager
パッケージマネージャーを選択します。ここでは yarn を選択して進めます。
cargo を選択すると、フロントエンドの選択肢が Vanilla と yew に限定されてしまいますので注意してください。

Choose your UI template
フロントエンドのテンプレートを選択します。ここでは react-ts ( React + TypeScript ) を選択して進めます。

cd ~/
yarn create tauri-app
# yarn create v1.22.19
# [1/4] Resolving packages...
#   :
#  中略
#   :
# ✔ Project name · tauri-app
# ✔ Choose your package manager · yarn
# ✔ Choose your UI template · react-ts
#   :
#  中略
#   :
# Done in 7.81s.

雛型アプリの起動

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

cd tauri-app
yarn
# yarn install v1.22.19
# info No lockfile found.
#   :
#  中略
#   :
# Done in 24.24s.
yarn tauri dev
# yarn run v1.22.19
# $ tauri dev
#   :
#  中略
#   :
#    Compiling webview2-com v0.19.1
#     Finished dev [unoptimized + debuginfo] target(s) in 2m 54s

雛型アプリが正常に起動できない場合の対処法

yarn tauri dev はエラーも無く実行できているのに、雛形アプリが正常に起動しない場合があるようです。
特に多いのが「ウィンドウは立ち上がるけど真っ白なブランク画面になっている」という状態。この状態ではウィンドウ右上の × ボタンも機能せず、PowerShell 上で Ctrl+C を入力することでしかウィンドウを閉じることもできません。

この様な状況になった場合は、最新の WebView2 ランタイムをインストールすることで改善する場合があります。

WebView2
Microsoft Edge をレンダリングエンジンとして使用し、ネイティブアプリに Web コンテンツを表示するためのランタイム。Windows 11 ならびに Windows 10 April 2018 以降の Home または Pro エディションには標準で搭載されている。

WebView2 のインストール方法

WebView2 ランタイムは Chocolatey で簡単にインストールすることができます。PowerShell を管理者として起動し、以下のコマンドを実行するだけです。

choco install -y webview2-runtime

Chocolatey を使用しない場合は、公式サイトからインストーラーをダウンロードできます。

参考サイト様

Windows 用 Rust と windows クレート