Featured image of post Tauriが1.0になったのでWindowsデスクトップアプリを作ってみた。
ブログ

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

Tauri 1.0 Release

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

OSのバージョン

1
2
3
4
5
6
7
8
9

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で

1
2
3
4
5
6
7
8
9

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連打。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

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アプリをデスクトップアプリケーションにしてみる。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

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 はいらない

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

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/ ディレクトリを作成する。

1
2
3
4
5
6
7
8
9

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で作業する。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

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/

1
2
3
4

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でビルドする。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

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にもどってきて

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

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のビルド

1
2
3
4
5
6

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 以外に変更してもう一度ビルド。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

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デスクトップアプリができました

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

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デスクトップアプリケーション

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

1
2

    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-game

gameover

後始末

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

GitHubリポジトリ

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

comments powered by Disqus
© 2015 - 2023 Akihiro Yamamoto

This website uses cookies to improve your experience.
このサイトは「Googleアナリティクス」を使用しています。
Googleアナリティクスはデータの収集のためにCookieを使用しています。


Built with Hugo
テーマ Stack は Jimmy によって設計されています。