AngularAdvent Calendar 2024

Angular, Nx, Rust, Tauri で始めるデスクトップアプリ開発入門

Last updated at 2024-12-14Posted at 2024-12-14

これは Angular Advent Calendar 2024 の 15 日目の記事です。
昨日 12/14(土) は @scrpgil さんが執筆されました。

はじめに

この記事では、Angular, Nx, Rust, Tauri を使ったデスクトップアプリを構築する方法を紹介します。

対象読者

Angular や Web 開発の経験がある方
Nx を使ったモノレポ管理に興味のある方
Rust を使った高性能なロジック実装に挑戦したい方
Tauri を使ったデスクトップアプリ開発を学びたい方

魅力ポイント

Angular: 使い慣れた技術でフロントエンドを構築可能
Nx: モノレポで複数プロジェクトを効率的に管理
Rust: 安全で高速なロジック実装が可能
Tauri: 軽量なクロスプラットフォームアプリを提供

前提条件

下記環境が整っている事を前提とします。

開発環境

筆者のマシン環境は、 M1 Mac Book Pro Max 2020 です。
Windows, Linux での開発環境構築は未確認です。

Xcode のインストール
Rust のインストール
フロンエンド開発環境構築
執筆時点での環境

$ npm -v       # 10.8.3  
$ node -v      # v22.9.0  
$ yarn -v      # 1.22.22  
$ pnpm -v      # 9.12.1  
$ rustc --version  # rustc 1.83.0  
$ rustup --version # rustup 1.27.1

Rust環境構築については、こちらの記事を参考にしてください。
上記に加え、@tauri-apps/cli をグローバルインストール済みであること。

Nx ワークスペースの作成ステップ

1. ディレクトリ構造

my-tauri-app/      (Nx ワークスペース)  
└── apps/
    ├── frontend/  (Angularプロジェクト)
    └── desktop/   (Rust + Tauriプロジェクト)

2. Nx コマンドでワークスペース作成と Angular app を追加

Nx CLIをインストールして、プロジェクトを作成

$ npx create-nx-workspace@latest my-tauri-app --preset=angular --appName=frontend

設定情報

frontend の動作確認

下記コマンドを実行して、この画面が表示されれば、確認完了です。
```
$ npx nx serve frontend
```

2 のサンプルコード

3. Tauriプロジェクトの追加

Tauri プロジェクト作成

Tauri プロジェクト用ディレクトリの作成、移動

$ mkdir desktop
$ cd desktop

tauri cli コマンドで Tauri プロジェクトの初期化

$ npx tauri init

# アプリケーション名
✔ What is your app name? · tauri desktop app

# ウィンドウタイトル部の名前
✔ What should the window title be? · tarui desktop app 

# Web アプリ（Angular）の assets 
✔ Where are your web assets (HTML/CSS/JS) located, relative to the "<current dir>/src-tauri/tauri.conf.json" file that will be created? · ../../dist/apps/frontend

# Web アプリ（Angular）の サーバー指定
✔ What is the url of your dev server? · http://localhost:4200/

# Web アプリ（Angular）の サーバー起動コマンド
✔ What is your frontend dev command? · npx nx serve frontend

# Web アプリ（Angular）の ビルドコマンド
✔ What is your frontend build command? · npx nx build frontend

apps/desktop/src-tauri に tauri.conf.json が作成されました。
Angular と Tauri(Rust) の連携する為の設定項目です。

tauri.conf.json 設定の解説

build セクション

"build": {
  "frontendDist": "../../../dist/apps/frontend",
  "devUrl": "http://localhost:4200/",
  "beforeDevCommand": "npx nx serve frontend",
  "beforeBuildCommand": "npx nx build frontend"
}

frontendDist
- 概要: フロントエンドのビルド成果物（静的ファイル）が配置されるディレクトリを指定します。
- 用途: Tauri はこのディレクトリ内の index.html をアプリケーションのエントリポイントとして使用します。
- 今回の場合、Angular のビルド成果物が Nx ワークスペース内の dist/apps/frontend に生成される場合をを想定しています。
devUrl
- 概要: 開発モードでアプリを実行する際に使用する URL を指定します。
- 用途: 通常はフロントエンド開発サーバーの URLを指定します。
- 今回の場合、Angular のデフォルト開発サーバーが http://localhost:4200 で動作する事を想定しています。
beforeDevCommand
- 概要: 開発モードを開始する前に実行するコマンドを指定します。
- 用途: フロントエンド開発サーバーを起動するコマンドを指定するのが一般的です。
- 今回の場合、Angular アプリケーションを npx nx serve コマンドを想定しています。
beforeBuildCommand
- 概要: アプリをビルドする前に実行するコマンドを指定します。
- 用途: フロントエンドのビルドプロセスを実行するコマンドを指定します。
- 今回の場合、Angular アプリケーションを npx nx build コマンドを想定しています。

app セクション

Tauri アプリケーションのメタ情報や動作設定を行います。

  "app": {
    "windows": [
      {
        "title": "tarui desktop app",
        .....
      }
    ],
    .....
  },

windows
- 概要: アプリケーションウィンドウの設定を指定します。
- 用途: 初期状態のウィンドウサイズやタイトルなど、ウィンドウ関連の設定をカスタマイズします。
- title
  - 概要: アプリケーションウィンドウのタイトルを設定します。
  - 用途: ユーザーがアプリを開いたときに表示されるウィンドウタイトルを指定します。

identifier セクション

※ Tauri のビルドの時の注意事項と対処
この状態で、npx tauri build を実行すると下記エラーになります。
identifier は、初期化後に修正を実施します。

$ npx tauri build
  Error You must change the bundle identifier in `tauri.conf.json identifier`. The default value `com.tauri.dev` is not allowed as it must be unique across applications.

エラーメッセージの通り、tauri.conf.json の identifier を任意の値に変更する必要があります。
下記のように修正します。

....
  "$schema": "https://schema.tauri.app/config/2.0.0-rc",
  "productName": "tauri desktop app",
  "version": "0.1.0",
-  "identifier": "com.tauri.dev",
+  "identifier": "tauri.desktop.app",
....

tauri.conf.json 実装例

{
  "$schema": "https://schema.tauri.app/config/2.0.0-rc",
  "productName": "tauri desktop app", 
  "version": "0.1.0",
  "identifier": "tauri.desktop.app",
  "build": {
    "frontendDist": "../../../dist/apps/frontend",
    "devUrl": "http://localhost:4200/",
    "beforeDevCommand": "npx nx serve frontend",
    "beforeBuildCommand": "npx nx build frontend"
  },
  "app": {
    "windows": [
      {
        "title": "tarui desktop app",
        "width": 800,
        "height": 600,
        "resizable": true,
        "fullscreen": false
      }
    ],
    "security": {
      "csp": null
    }
  },
  "bundle": {
    "active": true,
    "targets": "all",
    "icon": [
      "icons/32x32.png",
      "icons/128x128.png",
      "icons/128x128@2x.png",
      "icons/icon.icns",
      "icons/icon.ico"
    ]
  }
}

Tauri プロジェクトの動作確認

ターミナルを 2 つ起動

Angular アプリを先に起動します。

$ npx nx serve frontend

Tauri プロジェクトをビルドします。

$ npx tauri build

Tauri プロジェクトビルド成功時

tauri.conf.json の identifier で定義した tauri.desktop.app が作成されます

Tauri のデスクトップアプリ起動

ビルド結果の app をアプリケーションフォルダへ移動（macOS の場合）

tauri.desktop.app をダブルクリック

3 のサンプルコード

デスクトップアプリをカスタマイズしてみよう

テーマ：入力された値が 2 倍に計算され、結果が表示される実装

tauri コマンド実行用 npm パッケージ追加

add @tauri-apps/api 97af060

@tauri-apps/api を追加

$ npm install @tauri-apps/api --save-dev

tsconfig.base.json に @tauri-apps/api を追加

  {
    "compileOnSave": false,
    "compilerOptions": {
      ......
      "baseUrl": ".",
-     "paths": {}
+     "paths": {},
+     "types": ["@tauri-apps/api"]
    },
    "exclude": ["node_modules", "tmp"]
  }

Tauri(Rust) 側実装変更

update code tauri / rust d81bceb

lib.rs 下記のように編集

  #[cfg_attr(mobile, tauri::mobile_entry_point)]
  pub fn run() {
  tauri::Builder::default()
+     .invoke_handler(tauri::generate_handler![double_value]) // tauri コマンドを追加
      .setup(|app| {
        if cfg!(debug_assertions) {
          app.handle().plugin(
            tauri_plugin_log::Builder::default()
              .level(log::LevelFilter::Info)
              .build(),
          )?;
        }
        Ok(())
      })
      .run(tauri::generate_context!())
      .expect("error while running tauri application");
  }
+ 
+ // 入力値を2倍にする関数
+ #[tauri::command]
+ fn double_value(value: i32) -> i32 {
+   value * 2
+ }

tauri.conf.json の画面サイズを変更

  "app": {
    "windows": [
      {
        "title": "tarui desktop app",
-        "width": 800,
+        "width": 400,
-       "height": 600,
+       "height": 300,
        "resizable": true,
        "fullscreen": false
      }
    ],
    "security": {
      "csp": null
    }
  },

Angular 側実装変更

update code angular 20d041b

nx ワークスペース作成と同時に Angular アプリケーションを作成した際に
apps/frontend/src/app/nx-welcome.component.ts が作成されています。
今回は nx-welcome.component.ts に UI や tauri 連携処理を実装します。

apps/frontend/src/app/app.component.ts から不要コード削除、参照ライブラリ修正

  import { Component } from '@angular/core';
- import { RouterModule } from '@angular/router';
+ import { RouterOutlet } from '@angular/router';
  import { NxWelcomeComponent } from './nx-welcome.component';

  @Component({
-   imports: [NxWelcomeComponent, RouterModule],
+   imports: [NxWelcomeComponent, RouterOutlet],
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrl: './app.component.scss',
  })
- export class AppComponent {
-   title = 'frontend';
- }
+ export class AppComponent {}

apps/frontend/src/app/nx-welcome.component.ts に計算用 UI 追加、tauri コマンド連携実装

- import { Component, ViewEncapsulation } from '@angular/core';
+ import { Component } from '@angular/core';
- import { CommonModule } from '@angular/common';
+ import { FormsModule } from '@angular/forms';
+ import { invoke } from '@tauri-apps/api/core';

  @Component({
    selector: 'app-nx-welcome',
-   imports: [CommonModule],
+   standalone: true,
+   imports: [FormsModule],
    template: `
-     <!--
-       * * * * * * * * * * * * * * * * * * * * * * * * * * * *
-    .......
+   <div>
+     <h1>Double Your Number</h1>
+     <input
+       [(ngModel)]="inputValue"
+       type="number"
+       placeholder="Enter a number"
+     />
+     <button (click)="doubleValue()">Double</button>
+     @if (result !== null) {
+       <p>Result: {{ result }}</p>
+     } @else {
+       <p>before calculation</p>
+     }
+   </div>
  `,
    styles: [],
-   encapsulation: ViewEncapsulation.None,
  })
-  export class NxWelcomeComponent {}
+  export class NxWelcomeComponent {
+     inputValue = 0; // ユーザーの入力値
+     result: number | null = null; // 計算結果
+
+    async doubleValue() {
+      // Rust 側の `double_value` コマンドを呼び出す
+      this.result = await invoke<number>('double_value', {
+        value: this.inputValue,
+      });
+    }
+  }

動作確認動画

実装変更のサンプルコード

ビルドから動作確認を全て見たい方は、こちらから動画（102MB）を御覧ください

今回紹介した記事のコードは、下記リポジトリです。

まとめ

本記事では、Web 開発の知識を活用しつつ、新しい技術（Rust や Tauri ）に触れることで、効率的かつ柔軟なデスクトップアプリ開発の方法を解説しました。
技術ごとの役割を理解し、フロントエンドとバックエンドを組み合わせたモダンな開発環境を構築できます。

ぜひ、この記事を参考にデスクトップアプリ開発に挑戦してみてください！
読者の皆さまのプロジェクトが成功することを願っています。

明日 12/16(月) は、我らが黄色い人！！！
@fusho-takahashi さんです！
よろしくお願い申し上げます！

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up