姫鳴村

Te Tauri開発環境構築

12 コメント
views
城ヶ崎姫子
作成: 2025/11/07 (金) 14:55:59
通報 ...
1
城ヶ崎姫子 2025/11/07 (金) 15:00:09

めんどくせーから現時点手順ベタ貼り

Windows
Windows での開発には、Tauri は Microsoft の C++ Build Tools と Microsoft Edge WebView2 の両方が必要になります。

次の作業ステップに従って 必要な依存関係をインストールしてください。

Microsoft C Build Tools
Microsoft C
Build Tools インストーラーをダウンロードして開き、インストールを開始します。
インストール時に、「Desktop development with C」オプションにチェックを入れてください。
Visual Studio C
Build Tools installer screenshot

次のステップ: WebView2 のインストール.

2
城ヶ崎姫子 2025/11/07 (金) 15:00:39 >> 1

WebView2 のインストール
ヒント

Windows 10(バージョン 1803)以降の Windows では、WebView 2 が既にインストール済みです。開発に使用するシステムのバージョンがこれらであれば、このステップを飛ばして、直接 Rust をインストール に進んでください。

Tauri は、Windows 上にコンテンツをレンダリングするために Microsoft Edge WebView2 を使用します。

Microsoft の Webview2 ダウンロード・サイト Download the WebView2 Runtime セクションから「Evergreen Boostrapper」ファイルをダウンロードし、インストールしてください。

次のステップ: Rust のインストール

3
城ヶ崎姫子 2025/11/07 (金) 15:01:22 >> 1

Rust のインストール
Tauri は Rust で作られており、開発にも Rust が必要です。Rust のインストールには、次のいずれかの方法を使用します。その他のインストール方法については、https://www.rust-lang.org/tools/install を参照してください。

Linux と macOS
Windows
rustup をインストールするには、Rust のサイト https://www.rust-lang.org/ja/tools/install を参照してください。

あるいは、PowerShell で以下のようにコマンドを入力することで、winget を使用して rustup をインストールすることもできます:

Terminal window
winget install --id Rustlang.Rustup

MSVC toolchain がデフォルト

Tauri と trunk のようなツールを完全に利用するためには、インストーラーのダイアログで「MSVC Rust ツールチェーン」で default host triple が選択されていることを確認してください。使用しているコンピュータ・システムに応じて、x86_64-pc-windows-msvc、i686-pc-windows-msvc、または aarch64-pc-windows-msvc のいずれかになります。

すでに Rust をインストール済みの場合には、次のコマンドを実行して、正しい「ツールチェーン」がインストールされているか確認してください:

Terminal window
rustup default stable-msvc

変更を有効にするために、必ずターミナル (場合によってはシステム本体) を再起動してください。

次のステップ: Android および iOS 向けの開発を行なう場合は モバイル関連の設定 を、あるいは、JavaScript を使用する場合は Node のインストール を実行してください。それ以外の場合は、次章 プロジェクトの作成 に進んでください。

6
城ヶ崎姫子 2025/11/07 (金) 15:56:07 >> 3

Windows画面の検索バーに「winget install --id Rustlang.Rustup」って打ち込めばいけたっぽい

つかパワシェじゃなくコマンドプロンプトでも行けると思う

winget install --id Rustlang.Rustup

4
城ヶ崎姫子 2025/11/07 (金) 15:02:31

Node.js
JavaScript ecosystem

JavaScript をフロントエンドに使用する場合にのみ必要な準備処理です。

Node.js website を開いて LTS 版(長期サポート版)をダウンロードし、インストールしてください。

以下のコマンドを実行して、 Node が正常にインストールされたかどうかを確認します。

Terminal window
node -v

v20.10.0

npm -v

10.2.3

ターミナルを再起動して、新しくインストールしたプログラムが認識されているか確かめてください。場合によっては、コンピュータを再起動する必要があるかもしれません。

「npm」が Node.js のデフォルト・パッケージ・マネージャーですが、「pnpm」や「yarn」といった別のパッケージ・マネージャーを使うこともできます。こうしたパッケージ・マネージャーを有効化するには、ターミナルにて corepack enable を実行してください。この処理ステップは、「npm」以外のパッケージ・マネージャーを使いたい場合にのみに必要な、任意項目です。

次のステップ: モバイル関連の設定 または プロジェクトの作成 です。

5
城ヶ崎姫子 2025/11/07 (金) 15:08:11 >> 4

Tauriはフロントエンドの技術としてWeb技術(HTML/CSS/JavaScript)を使用しているため、Webブラウザでできることは基本的にすべてTauriのフロントエンドでできます。

しかし、「Tauri単体(Web技術のみ)ではできないこと」は、主にOSのネイティブ機能へのアクセスが必要な部分になります。

⚠️ Tauriのフロントエンド(Web側)単体ではできないこと
Tauriは、Webブラウザの制限を取り払ってデスクトップアプリとして機能させるために、以下の処理を必ずバックエンドのRustコードを経由させる必要があります。

  1. OSの低レベルな機能の操作
    Web技術だけではセキュリティ上の制限からアクセスが禁じられている、OSに深く関わる操作です。

キーボードやマウスの操作シミュレーション: バーチャルキーボードの例でいうと、ユーザーの代わりにキー入力をOSに送信する機能は、Web側のJavaScriptでは実現できません。これはRustのライブラリ(enigoなど)を経由する必要があります。

通知の表示: OSのネイティブな通知領域にメッセージを表示すること。(ただし、TauriはJavaScriptから簡単に呼び出せる@tauri-apps/api/notificationを提供しており、内部でRustを経由しています。)

システム情報の取得: CPUやメモリの使用状況、OSのバージョンなどの詳細なシステム情報を取得すること。

  1. ファイルシステムや外部デバイスへのアクセス
    セキュリティ上の理由から、Webブラウザでは許可されていないローカルファイルや外部デバイスへの直接的なアクセスです。

ローカルファイルやフォルダの読み書き: ユーザーの許可なく勝手にPC上のファイルを操作することはできません。ファイルのオープン/保存ダイアログの表示、ファイルの読み書きなどは、Rustバックエンドの機能を使います。

シリアルポートやUSBデバイスへのアクセス: 外部のハードウェアと通信する場合、ネイティブなAPIを経由する必要があります。

  1. アプリケーションウィンドウ自体の制御
    ウィンドウの状態を変更したり、独自のメニューを作成したりする操作です。

ウィンドウの最小化、最大化、サイズ変更:

カスタムメニューバーの作成:

「常に最前面表示 (Always on Top)」などの特殊なウィンドウ設定:

まとめ
Tauriは、Webブラウザと同じようにUIの構築とユーザーとのやり取りはフロントエンド(Web技術)で行い、OSやシステムとのやり取りはバックエンドのRustが行うという役割分担をしています。

そのため、フロントエンド単体でできないことがあったとしても、TauriのAPIを通じてバックエンドのRust機能を呼び出すことで、必要なデスクトップアプリの機能を実現できます。

7
城ヶ崎姫子 2025/11/07 (金) 16:09:25

作った

8
城ヶ崎姫子 2025/11/07 (金) 16:31:09

npm へのコマンド通らず

原因

https://qiita.com/kztktr/items/eab640cc46aea560c499

対応
PowerShellで「 Set-ExecutionPolicy RemoteSigned」実行

9
城ヶ崎姫子 2025/11/07 (金) 17:05:19

npm run tauri dev 通らず

ps
cargo --version 実行 認識せず

システム環境変数には.cargoフォルダへのパス通ってる

ps
$env:Path -split ';' 実行 パス認識されていない

PC再起動 解決

10
城ヶ崎姫子 2025/11/07 (金) 17:11:54
11
城ヶ崎姫子 2025/11/07 (金) 17:14:43 >> 10

Copyright (C) Microsoft Corporation. All rights reserved.
                                                                                                                        新しいクロスプラットフォームの PowerShell をお試しください https://aka.ms/pscore6                                                                                                                                                               PS C:\WINDOWS\system32> Invoke-WebRequest https://get.pnpm.io/install.ps1 -UseBasicParsing | Invoke-Expression          Downloading pnpm from GitHub...

Running setup...

Copying pnpm CLI from C:\Users\h\AppData\Local\Temp\fb7280ce-b3da-4dc5-afd7-07e58a91af11\pnpm.exe to C:\Users\h\AppData\Local\pnpm.tools\pnpm-exe\10.20.0\pnpm.exe
No changes to the environment were made. Everything is already up to date.
Remove-Item : 項目 C:\Users\h\AppData\Local\Temp\fb7280ce-b3da-4dc5-afd7-07e58a91af11\pnpm.exe を削除できません: パス '
C:\Users\h\AppData\Local\Temp\fb7280ce-b3da-4dc5-afd7-07e58a91af11\pnpm.exe' へのアクセスが拒否されました。
発生場所 行:141 文字:1

  • Remove-Item $tempFile
  •   + CategoryInfo          : PermissionDenied: (C:\Users\h\AppD...91af11\pnpm.exe:FileInfo) [Remove-Item], Unauthoriz
     edAccessException
      + FullyQualifiedErrorId : RemoveFileSystemItemUnAuthorizedAccess,Microsoft.PowerShell.Commands.RemoveItemCommand
    
12
城ヶ崎姫子 2025/11/07 (金) 17:26:43 >> 10

なんかパス通ってるっぽいから、またあのエラーで再起動で通過