2 年 ago
科, 颖
2 minutes

はじめに

 

先日私が投稿した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
image.png

インストールが完了しましたら。プロジェクトの作成を行っていきます。

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

そうすると以下のようにウィンドウが立ち上がります。

image.png

それでは細かい設定等やっていきます。自分は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ライフを✋

追記

 

参考用のソースとインストーラー配布します。

最後に私にブログもお願いします。

 

bannerAds