DIY HOBBY ELEC

Tauriが1.0になったのでWindowsデスクトップアプリを作ってみた。

by AKIHIRO YAMAMOTO | Published on 2022-06-26

Tauri 1.0 Release

Tauriが1.0に到達したんだって。
ちょうどいいことにWebアプリを前回作っていたのでWindowsデスクトップアプリにしてみました。

OSのバージョン

PowerShell 7.2.5
Copyright (c) Microsoft Corporation.

https://aka.ms/powershell
Type 'help' to get help.

PS C:\Users\aki> (Get-WmiObject Win32_OperatingSystem).Caption
Microsoft Windows 11 Pro
PS C:\Users\aki>

Tauriの環境構築

ガイド を見て、この３つのうちWebView2を除いた(Windows11には既にインストールされているので)2つをインストールする。

Setting Up Windows

  1. Microsoft Visual Studio C++ Build Tools
  2. WebView2
  3. Rust

ガイドのリンクはVisual Studio 2019だったので Build Tools for Visual Studio 2022はここの「Visual Studio 2022用のツール」からダウンロードした。

Rustはすでにあったのでなにもしない。

Install Tauri CLI

続いてInstall Tauri CLI

PowerShellで

PowerShell 7.2.5
Copyright (c) Microsoft Corporation.

https://aka.ms/powershell
Type 'help' to get help.

PS C:\Users\aki> cd .\development\
PS C:\Users\aki\development> cargo install tauri-cli --version "^1.0.0"
ながいので省略

npmはすでにあるので。 そのまま npm create tauri-app
質問にはそのままEnter連打。

PS C:\Users\aki\development> npm create tauri-app

We hope to help you create something special with Tauri!
You will have a choice of one of the UI frameworks supported by the greater web tech community.
This tool should get you quickly started. See our docs at https://tauri.app/

If you haven't already, please take a moment to setup your system.
You may find the requirements here: https://tauri.app/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

added 2 packages, and audited 3 packages in 2s

2 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

added 2 packages, and audited 5 packages in 3s

3 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
>> Updating "package.json"
>> Running "tauri init"

> tauri
> tauri

>> Updating "tauri.conf.json"
>> Running final command(s)

    Your installation completed.

    $ cd tauri-app
    $ npm install
    $ npm run tauri dev

PS C:\Users\aki\development>

続いて、書かれているとおりに実行するとウインドウが出てくる。

Tauri App

ここまで順調に進んできた。

Windowsデスクトップアプリを作る

ここから前回作ったWebアプリをデスクトップアプリケーションにしてみる。

PS C:\Users\aki\development\tauri-app> cd ..
PS C:\Users\aki\development> npm create tauri-app

We hope to help you create something special with Tauri!
You will have a choice of one of the UI frameworks supported by the greater web tech community.
This tool should get you quickly started. See our docs at https://tauri.app/

If you haven't already, please take a moment to setup your system.
You may find the requirements here: https://tauri.app/v1/guides/getting-started/prerequisites

Press any key to continue...
? What is your app name? breakout-app
? What should the window title be? Breakout
? 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

added 2 packages, and audited 3 packages in 2s

2 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

added 2 packages, and audited 5 packages in 3s

3 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
>> Updating "package.json"
>> Running "tauri init"

> tauri
> tauri

>> Updating "tauri.conf.json"
>> Running final command(s)

    Your installation completed.

    $ cd breakout-app
    $ npm install
    $ npm run tauri dev

PS C:\Users\aki\development>

dist と src-tauri はいらない

PS C:\Users\aki\development\breakout-app> rm dist

Confirm
The item at C:\Users\aki\development\breakout-app\dist has children and the Recurse parameter was not specified. If you continue, all
children will be removed with the item. Are you sure you want to continue?
[Y] Yes  [A] Yes to All  [N] No  [L] No to All  [S] Suspend  [?] Help (default is "Y"): a
PS C:\Users\aki\development\breakout-app> rm .\src-tauri\

Confirm
The item at C:\Users\aki\development\breakout-app\src-tauri\ has children and the Recurse parameter was not specified. If you continue,
all children will be removed with the item. Are you sure you want to continue?
[Y] Yes  [A] Yes to All  [N] No  [L] No to All  [S] Suspend  [?] Help (default is "Y"): a
PS C:\Users\aki\development\breakout-app>

ui/ ディレクトリを作成する。

PS C:\Users\aki\development\breakout-app> mkdir ui

    Directory: C:\Users\aki\development\breakout-app

Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
d----          2022/06/26    21:56                ui

PS C:\Users\aki\development\breakout-app>

ui/ ディレクトリの中に https://github.com/ak1211/breakout/tree/main/lesson10 を持ってくる。
PureScriptをWindowsに入れていないので、ここはWSL2上のbashで作業する。

aki:~$ cd breakout
aki:~/breakout$ cd lesson10/
aki:~/breakout/lesson10$ tree
.
├── index.html
├── index.js
├── packages.dhall
├── spago.dhall
├── src
│   ├── Breakout.js
│   ├── Breakout.purs
│   └── Main.purs
└── test
    └── Main.purs

2 directories, 8 files
aki:~/breakout/lesson10$ cp -r * /mnt/c/Users/aki/development/breakout-app/ui/

aki:~/breakout/lesson10$ cd /mnt/c/Users/aki/development/breakout-app/ui/
aki:/mnt/c/Users/aki/development/breakout-app/ui$ ls
index.html  index.js  packages.dhall  spago.dhall  src  test
aki:/mnt/c/Users/aki/development/breakout-app/ui$

PureScriptソースをspagoでビルドする。

aki@DESKTOP-JAGH6CN:/mnt/c/Users/aki/development/breakout-app/ui$ spago bundle-app
[info] Installing 81 dependencies.
[info] Searching for packages cache metadata..
[info] Recent packages cache metadata found, using it..
[info] Installing "css"
[info] Installing "distributive"
[info] Installing "aff"
ながいので省略
[info] Build succeeded.
[info] Bundle succeeded and output file to index.js
aki:/mnt/c/Users/aki/development/breakout-app/ui$

ビルドが終わったので、PowerShellにもどってきて

PS C:\Users\aki\development\breakout-app> ls

    Directory: C:\Users\aki\development\breakout-app

Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
d----          2022/06/26    22:19                node_modules
d----          2022/06/26    22:12                ui
-a---          2022/06/26    22:22          11069 package-lock.json
-a---          2022/06/26    22:19            187 package.json

PS C:\Users\aki\development\breakout-app> npm install

up to date, audited 7 packages in 422ms

3 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
PS C:\Users\aki\development\breakout-app> npm run tauri init

> tauri
> tauri

✔ What is your app name? · breakout-app
✔ What should the window title be? · breakout
? Where are your web assets (HTML/CSS/JS) located, relative to the "<current dir>/src-tauri/tauri.conf.json" file that will be created? › ✔ Where are your web assets (HTML/CSS/JS) located, relative to the "<current dir>/src-tauri/tauri.conf.json" file that will be created? · ../ui
✔ What is the url of your dev server? · ../ui
PS C:\Users\aki\development\breakout-app>

Tauriのビルド

PS C:\Users\aki\development\breakout-app> npm run tauri build

> tauri
> tauri

       Error You must change the bundle identifier in `tauri.conf.json > tauri > bundle > identifier`. The default value `com.tauri.dev` is not allowed as it must be unique across applications.

エラーに書かれている通り
src-tauri/tauri.conf.json ファイル の中にある tauri.conf.json > tauri > bundle > identifier の設定を com.tauri.dev 以外に変更してもう一度ビルド。

PS C:\Users\aki\development\breakout-app> npm run tauri build

> tauri
> tauri

   Compiling proc-macro2 v1.0.40
   Compiling quote v1.0.20
   Compiling unicode-ident v1.0.1
   Compiling syn v1.0.98
   Compiling cfg-if v1.0.0
   省略
   Compiling tauri-utils v1.0.0
   Compiling tauri-build v1.0.0
   Compiling tauri-codegen v1.0.0
   Compiling tauri-macros v1.0.0
   Compiling app v0.1.0 (C:\Users\aki\development\breakout-app\src-tauri)
   Compiling webview2-com v0.16.0
   Compiling tauri-runtime v0.9.0
   Compiling tauri-runtime-wry v0.9.0
    Finished release [optimized] target(s) in 3m 19s
        Info Target: x64
     Running candle for "main.wxs"
     Running light to produce C:\Users\aki\development\breakout-app\src-tauri\target\release\bundle/msi/breakout-app_0.1.0_x64_en-US.msi
    Finished 1 bundle at:
        C:\Users\aki\development\breakout-app\src-tauri\target\release\bundle/msi/breakout-app_0.1.0_x64_en-US.msi

PS C:\Users\aki\development\breakout-app>

初回ビルドはとても時間がかかるので休憩してくる。

Windowsデスクトップアプリができました

PS C:\Users\aki\development\breakout-app> ls .\src-tauri\target\release\

    Directory: C:\Users\aki\development\breakout-app\src-tauri\target\release

Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
d----          2022/06/26    22:43                .fingerprint
d----          2022/06/26    22:43                build
d----          2022/06/26    22:46                bundle
d----          2022/06/26    22:46                deps
d----          2022/06/26    22:43                examples
d----          2022/06/26    22:43                incremental
d----          2022/06/26    22:46                resources
d----          2022/06/26    22:46                wix
-a---          2022/06/26    22:43              0 .cargo-lock
-a---          2022/06/26    22:46        1154855 app.d
-a---          2022/06/26    22:46        5853184 app.pdb
-a---          2022/06/26    22:46       26931200 breakout-app.exe

PS C:\Users\aki\development\breakout-app>

src-tauri\target\release\breakout-app.exeが できあがったWindowsデスクトップアプリケーション

インストーラを使ってみる

    Finished 1 bundle at:
        C:\Users\aki\development\breakout-app\src-tauri\target\release\bundle/msi/breakout-app_0.1.0_x64_en-US.msi

実行ファイルをそのまま実行していいんだけど、書かれている通りインストーラもできたので使ってみる。

install

install

install

install

実行

breakout

gameover

後始末

uninstall アプリと機能にbreakout-appがあるので、アンインストールすると元通り。

GitHubリポジトリ

コードはGitHub上にあります。
https://github.com/ak1211/breakout

Next post (2022-07-13)

赤外線解析アプリをTauri+React+Rustで書き換えた。

Prev post (2022-05-08)

MDN ブロックくずしゲームでウェブゲーム開発に入門してみた。その１０
comments powered by Disqus