Tauri でデスクトップアプリを作成する（準備）

# Tauri でデスクトップアプリを作成する

## 概要

DevContainer 環境で Tauri デスクトップアプリの作成を行っていきます。今回は、開発コンテナを作成してデフォルトのアプリケーションの起動まで行うところまでです。方針としては、Cargo を使用して環境を構築していきます。

## 作成環境

- Windows 11
- Visual Studio Code(VSCode)
  - Dev Containers（拡張機能）
- Docker DeskTop(バックグラウンドで起動させておく)

## 作業

### 開発環境コンテナの作成

1. VSCode の左下の「><」をクリック。
   ![スクリーンショット 2024-08-25 003613.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3813024/b0c6fcf5-0b84-08a0-d2cc-f9cd221b2ecb.png)

2. 「新しい開発コンテナを作成」を選択する。
   ![スクリーンショット 2024-08-25 004322.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3813024/14aac458-fe4b-a3c6-89c1-40c9efd33fac.png)

3. 「Ubuntu」を選択する。
   ![スクリーンショット 2024-08-25 005044.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3813024/e03fd84f-0610-cf4c-8b40-66e1e3414dff.png)

4. 「その他オプション」を選択。
   ![スクリーンショット 2024-08-25 005210.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3813024/183b84be-093f-fe0d-a0fe-c2fa498acad0.png)

5. Ubuntu のバージョンを訊かれる。特にこだわりがなければ`(既定)`となっているものを選択。
   ![スクリーンショット 2024-08-25 005245.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3813024/f5b8b512-7dd1-187a-1c5a-2cd5f23c3385.png)

6. 以下のオプションを選択。「OK」ボタンを押下。
   - Rust
   - Node.js
     ![スクリーンショット 2024-08-25 005555.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3813024/74163592-9b60-ae81-5c05-2b3be1110c9e.png)
![スクリーンショット 2024-08-25 010222.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3813024/96080d02-a113-696e-5ac2-229594821537.png)

7. Node.js のバージョン等を訊かれるが、基本的に`(既定)`がついているものを選択。
8. 開発コンテナ作成後、`.devcontainer` ディレクトリが作成されている。
   ![スクリーンショット 2024-08-25 011214.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3813024/da13ae36-72e3-d179-3c21-57517f01e843.png)

9. 今回は、`Dockerfile`を用いて、必要なパッケージを開発コンテナにインストールする。`.devcontainer/devcontainer.json`を以下のように書き換える。
    ```diff_json:.devcontainer.json
    {
    	"name": "Ubuntu",
    	// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
    -   "image": "mcr.microsoft.com/devcontainers/base:jammy",
    +	//"image": "mcr.microsoft.com/devcontainers/base:jammy",
    +	"build": {
    +		"dockerfile": "./Dockerfile"
    +	},
    	"features": {
    		"ghcr.io/devcontainers/features/node:1": {
    			"nodeGypDependencies": true,
    			"installYarnUsingApt": true,
    			"version": "lts",
    			"nvmVersion": "latest"
    		},
    		"ghcr.io/devcontainers/features/rust:1": {
    			"version": "latest",
    			"profile": "minimal",
    			"targets": "x86_64-unknown-redox,x86_64-unknown-uefi"
    		}
    	}
    }
    ```

10. (公式ページ)[https://tauri.app/v1/guides/getting-started/prerequisites]を参考に`.devcontainer/Dockerfile`を作成。

    ```Dockerfile:Dockerfile
    FROM mcr.microsoft.com/devcontainers/base:jammy
    
    ENV DISPLAY=:1
    
    RUN sudo apt update
    RUN sudo apt install -y libwebkit2gtk-4.0-dev \
        build-essential \
        curl \
        wget \
        file \
        libssl-dev \
        libgtk-3-dev \
        libayatana-appindicator3-dev \
        librsvg2-dev 
    # アプリで日本語出力する場合、fontをインストールする。（お好みで）
    RUN sudo apt install -yfonts-takao
    
    RUN curl --proto '=https' --tlsv1.2 https://sh.rustup.rs -sSf | sh -s -- -y
    ```

10. 左下の「><」ボタンを押下し、「コンテナのリビルド」を選択。
    ![スクリーンショット 2024-08-25 013544.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3813024/24454ad6-0e80-1eb5-47c8-120a1cf2ec4e.png)


11. 開発コンテナのリビルドが完了したら、ターミナルを立ち上げる(ショートカット Ctrl + Shift + @)。
12. 立ち上げたターミナルに以下のコマンドを打ち込む

    ```Shell
    cargo install create-tauri-app --locked
    cargo create-tauri-app
    ```

13. `cargo create-tauri-app`実行後、プロジェクト名を訊かれるので、好きなプロジェクト名を入れる。ここでは、`test-app`にする。

    ```Shell
    vscode ➜ /workspaces/ubuntu $ cargo create-tauri-app
    ? Project name (tauri-app) › test-app
    ```

14. アプリを識別するための文字を入力する。ここでは、`com.test-app.app`にする。

    ```Shell
    vscode ➜ /workspaces/ubuntu $ cargo create-tauri-app
    ✔ Project name · test-app
    ✔ Identifier · com.test-app.app
    ```

15. フロントエンドで使用する言語を訊かれる。今回は、TypeScript を使いたいので、`TypeScript / JavaScript  (pnpm, yarn, npm, bun)`を選択。

    ```Shell
    vscode ➜ /workspaces/ubuntu $ cargo create-tauri-app
    ✔ Project name · test-app
    ✔ Identifier · com.test-app.app
    ? Choose which language to use for your frontend ›
      Rust
    ❯ TypeScript / JavaScript  (pnpm, yarn, npm, bun)
      .NET
    ```

16. パッケージマネージャーは`npm`を使用。

    ```Shell
    vscode ➜ /workspaces/ubuntu $ cargo create-tauri-app
    ✔ Project name · test-app
    ✔ Identifier · com.test-app.app
    ✔ Choose which language to use for your frontend · TypeScript / JavaScript - (pnpm, yarn, npm, bun)
    ? Choose your package manager ›
      pnpm
      yarn
    ❯ npm
      bun
    ```

17. UI のテンプレートは、`React`を使用。

    ```Shell
    vscode ➜ /workspaces/ubuntu $ cargo create-tauri-app
    ✔ Project name · test-app
    ✔ Identifier · com.test-app.app
    ✔ Choose which language to use for your frontend · TypeScript / JavaScript - (pnpm, yarn, npm, bun)
    ✔ Choose your package manager · npm
    ? Choose your UI template ›
      Vanilla
      Vue
      Svelte
    ❯ React  (https://react.dev/)
      Solid
      Angular
      Preact
    ```

18. TypeScript を使用するので、`TypeScript`を選択。

    ```Shell
    vscode ➜ /workspaces/ubuntu $ cargo create-tauri-app
    ✔ Project name · test-app
    ✔ Identifier · com.test-app.app
    ✔ Choose which language to use for your frontend · TypeScript / JavaScript - (pnpm, yarn, npm, bun)
    ✔ Choose your package manager · npm
    ✔ Choose your UI template · React - (https://react.dev/)
    ? Choose your UI flavor ›
    ❯ TypeScript
      JavaScript
    ```

19. 設定が完了し、起動するコマンド(下３行)を教えてくれるので、順にターミナルで実行する。

    ```Shell
    vscode ➜ /workspaces/ubuntu $ cargo create-tauri-app
    ✔ Project name · test-app
    ✔ Identifier · com.test-app.app
    ✔ Choose which language to use for your frontend · TypeScript / JavaScript - (pnpm, yarn, npm, bun)
    ✔ Choose your package manager · npm
    ✔ Choose your UI template · React - (https://react.dev/)
    ✔ Choose your UI flavor · TypeScript
    
    Template created! To get started run:
      cd test-app
      npm install
      npm run tauri dev
    ```

20. 以下の画面が出れば、今回の目的は達成です。お疲れさまでした。
![スクリーンショット 2024-08-25 022511.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3813024/321eebc7-cba9-f5e9-ae39-af9f51471d19.png)

## 参考 URL など

- [Tauri 公式](https://tauri.app) https://tauri.app
- [Tauri Prerequisites](https://tauri.app/v1/guides/getting-started/prerequisites) https://tauri.app/v1/guides/getting-started/prerequisites