TauriでMac用のデスクトップアプリを開発してみる
Webアプリ開発者がデスクトップアプリに入門してみます。
RustベースのTauriフレームワークを使えば、慣れ親しんだWeb技術でクロスプラットフォームなデスクトップアプリが作れるとのこと。AIもいるしきっと学習コストは低いはずです！
前提：
- macOS使用
- Reactを使った開発経験あり
準備
1. Rustインストール
Tauriの核となるRust言語をインストールします。Rustは高速で安全なシステムプログラミング言語で、パッケージマネージャの「Cargo」も一緒に導入されます。インストールは公式のrustupツールを使うのが最も簡単です。
# rustupをインストール
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
# パスを適用
source "$HOME/.cargo/env"
# インストールの確認
rustc --version cargo --version
2. macOS向け依存パッケージのインストール
macOSでの開発に必要な依存パッケージをインストールします。Homebrewを使ってNodeをインストールし、Apple純正の開発ツールであるXcodeコマンドラインツールも導入します。これらはTauriアプリをビルドする際に必要となります。
# Homebrewがインストールされていることを確認
brew --version
# 必要なパッケージをインストール
brew install node
# Xcodeコマンドラインツールをインストール
xcode-select --install
3. TauriのCLIツールをインストール
Tauriのコマンドラインインターフェースをグローバルにインストールします。このツールを使ってTauriプロジェクトの初期化やビルドを行います。
npm install -g @tauri-apps/cli
プロジェクトの作成
Vite + Reactプロジェクトの作成
フロントエンド部分はViteを使ってReact + TypeScriptのプロジェクトを作成します。Viteは高速な開発環境を提供してくれるビルドツールで、Reactとの相性も抜群です。
# Viteを使ってReact + TypeScriptプロジェクトを作成
npm create vite@latest my-tauri-app -- --template react-ts cd my-tauri-app
# 依存パッケージをインストール
npm install
Tauriの初期化
作成したViteプロジェクトにTauriを統合します。Tauriの依存パッケージをインストールし、tauri initコマンドでプロジェクトを初期化します。これにより、必要なRustのファイル構造や設定ファイルが自動的に生成されます。
# Tauriを初期化
npm install --save-dev @tauri-apps/cli @tauri-apps/api
npx tauri init
Viteの設定
vite.config.tsファイルを以下のように編集します。
Viteの設定ファイルを編集して、Tauriとの連携をスムーズにします。ポート番号の固定や環境変数のプレフィックス設定などを行います。
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
server: {
port: 3000,
strictPort: true,
},
clearScreen: false,
envPrefix: ['VITE_', 'TAURI_'],
})
プロジェクト構成の確認と修正
src-tauri/tauri.conf.jsonの確認
生成されたsrc-tauri/tauri.conf.jsonを確認し、必要に応じて設定を変更します。
アプリケーション名や識別子などを実際のプロジェクトに合わせて変更します。この設定がデスクトップアプリの基本情報となります。
{
"$schema": "../node_modules/@tauri-apps/cli/config.schema.json",
"productName": "agent-app", ←ここはアプリの名前に変更する。
"version": "0.1.0",
"identifier": "com.sample.agent
-app", ←ここをデフォルト値(`com.tauri.dev`)から変更する。
省略
"build": {
"frontendDist": "../dist", ←ここはVite+Reactのビルド成果物のパスに変更する。
"devUrl": "http://localhost:3000",
"beforeDevCommand": "npm run dev",
"beforeBuildCommand": "npm run build"
},
省略
}
package.jsonにTauriスクリプトを追加
package.jsonにTauri関連のスクリプトを追加して、開発やビルドのコマンドを簡略化します。これにより、npmコマンド一つでTauriの機能を呼び出せるようになります。
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview",
"tauri": "tauri",
"tauri:dev": "tauri dev",
"tauri:build": "tauri build"
}
開発サーバーの起動
開発サーバーを起動すると、ブラウザでのプレビューと同時にデスクトップアプリのウィンドウも表示されます。コードを変更すると両方に即座に反映されます。
npm run tauri:dev
アプリケーションが起動します。
アプリケーションのビルド
ビルドコマンドを実行すると、macOS向けのdmgファイルが生成されます。これで本格的なデスクトップアプリケーションの完成です。
npm run tauri:build
初めてのアプリケーションができました！
デフォルトのままですが、ちょっとした感動です！！
Discussion