はじめに
先日私が投稿したelectronでの記事、初めてqiitaで数千という閲覧数を記録し様々な方にご覧いただきありがとうございます。
今回は知り合いから要望があったのでelectronではなくTauriで制作してみようと思います!
実際にやってみた。
注意点
まず初めに注意として、Tauriを使うにはRustの実行環境はもちろんVS2017以降のC++buildtoolが必要になります。
詳細は過去記事にて(唐突な宣伝)
PC環境
ハード
ROG Flow x13
Ryzen9 5900HS(x64)
GTX1650
ソフト
VisualStudio2022 C++ buildtool
webstorm 2022.3.2
Cargo 1.67.0
プロジェクト作成(cargo)
普段はnpm又はyarnで一度NextJSなどのプロジェクトを作成してからTauriの設定を行うのですが、今回はようつべを見るだけなのでcargoで行きます。
1.cargo拡張機能導入~ビルド
cargo install create-tauri-app
インストールが完了しましたら。プロジェクトの作成を行っていきます。
2.プロジェクト作成
cargo create-tauri-app
✔ Project name · youtube-desktop-app
✔ Choose your package manager · cargo
✔ Choose your UI template · vanilla
Please follow https://tauri.app/v1/guides/getting-started/prerequisites to install the needed prerequisites, if you haven't already.
You also need to install tauri-cli (cargo install tauri-cli)
Done, Now run:
cd youtube-desktop-app
してディレクトリに入り動作確認です。
3.動作テスト
cargo tauri dev
...
Compiling url v2.3.1
Compiling serde_with v1.14.0
Compiling toml v0.5.11
Compiling treediff v3.0.2
Compiling serialize-to-javascript v0.1.1
Compiling cargo_toml v0.13.3
Compiling winres v0.1.12
Compiling json-patch v0.2.7
Compiling webview2-com-sys v0.19.0
Compiling kuchiki v0.8.1
Compiling tauri-utils v1.2.1
Compiling tauri-build v1.2.1
Compiling tauri-codegen v1.2.1
Compiling tauri-macros v1.2.1
Compiling youtube-desktop-app v0.0.0 (C:\Users\nknig\lang-test\rust\youtube-desktop-app\src-tauri)
Compiling webview2-com v0.19.1
Finished dev [unoptimized + debuginfo] target(s) in 1m 29s
そうすると以下のようにウィンドウが立ち上がります。
それでは細かい設定等やっていきます。自分はWebstormを使っていますが、Rustのコードはそこまでいじらないのでお気に入りのエディタで大丈夫です👍
4.youtubeサイト&ビルド設定
そしたらsrc-tauriディレクトリ内のtauri.conf.jsonを開きます。
基本的にいじるのは3か所です。
...
"build": {
"beforeDevCommand": "",
"beforeBuildCommand": "",
"devPath": "https://youtube.com/",
"distDir": "https://youtube.com/",
"withGlobalTauri": true
}
...
"identifier": "com.nknight-amamiya.dev",
...
(以下略)
devPathは通常localhostとかを指定するのですが、youtubeのリンクを指定することで無理やり開いています...
またdistDirも同様に変更しています。
あとidentifierを変更しないとエラーになるようです。
5.ビルド
Tauriはインストーラーも一緒に作ってくれます。
またまたコードガリガリです。
cargo tauri build
PS C:\Users\nknig\lang-test\rust\youtube-desktop-app> cargo tauri build
Compiling youtube-desktop-app v0.0.0 (C:\Users\nknig\lang-test\rust\youtube-desktop-app\src-tauri)
Finished release [optimized] target(s) in 7.39s
Info Target: x64
Running candle for "main.wxs"
Running light to produce C:\Users\nknig\lang-test\rust\youtube-desktop-app\src-tauri\target\release\bundle/msi/youtube-desktop-app_0.0.0_x64_en-US.msi
Finished 1 bundle at:
C:\Users\nknig\lang-test\rust\youtube-desktop-app\src-tauri\target\release\bundle/msi/youtube-desktop-app_0.0.0_x64_en-US.msi
これでビルドしたexeを開けばOKです👍
ちなみにインストーラーはbundleディレクトリ内にあります。
それではよきYoutube&Tauriライフを✋
追記
参考用のソースとインストーラー配布します。
最後に私にブログもお願いします。