Tauriが1.0に到達したんだって。
ちょうどいいことにWebアプリを前回作っていたのでWindowsデスクトップアプリにしてみました。
OSのバージョン
TEXT
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
- Microsoft Visual Studio C++ Build Tools
- WebView2
- Rust
ガイドのリンクはVisual Studio 2019だったので Build Tools for Visual Studio 2022はここの「Visual Studio 2022用のツール」からダウンロードした。
Rustはすでにあったのでなにもしない。
Install Tauri CLI
PowerShellで
TEXT
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連打。
TEXT
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>続いて、書かれているとおりに実行するとウインドウが出てくる。
ここまで順調に進んできた。
Windowsデスクトップアプリを作る
ここから前回作ったWebアプリをデスクトップアプリケーションにしてみる。
TEXT
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 はいらない
TEXT
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/ ディレクトリを作成する。
TEXT
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で作業する。
TEXT
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/TEXT
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でビルドする。
TEXT
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にもどってきて
TEXT
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のビルド
TEXT
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 以外に変更してもう一度ビルド。
TEXT
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デスクトップアプリができました
TEXT
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デスクトップアプリケーション
インストーラを使ってみる
TEXT
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実行ファイルをそのまま実行していいんだけど、書かれている通りインストーラもできたので使ってみる。
実行
breakout-game
後始末
GitHubリポジトリ
コードはGitHub上にあります。
https://github.com/ak1211/breakout
コメント