Zenn
🔻

HTML5製のwebアプリをTauri 2.0でexe化する

に公開
JavaScript
HTML 5
Tauri
webアプリケーション
exe
tech

はじめに

HTML＋CSS＋JavaScriptで作ったwebアプリをデスクトップアプリ化したい。Electronだとnode.jsに加えてChromiumによるレンダリングはスペック盛りすぎだと思う。exeサイズが大きくなるのも好ましくない。

今回は、HTML5アプリを、Tauri 2.0でexe化して実行できるようにします。

1. HTML5プログラムを用意する

HTML5プログラムを作成し、1つのフォルダにまとめてフォルダ内のindex.htmlからブラウザで起動できるようにして、動作確認までしておきます。
例えば以下のようなもの。
sp01.png
ソースコードは以下から取得

https://github.com/cykod/AlienInvasion

2. Tauriをインストールする

下記Tauriのオフィシャルサイトに従い、以下3つの資材をインストールします。
・Microsoft C++ Build Tools
・Rust
・Node.js

https://v2.tauri.app/ja/start/prerequisites/#windows

3. アプリのexe化を実行する

1 PowerShellを起動

Windows PowerShellを起動します。基本的にこのコンソール内でコマンドを入力していきます。作業用のフォルダを作っておいてディレクトリ移動しておきます。

sc02.png

PS C:\Users> cd f:\work\tauri
PS F:\work\tauri>

2 プロジェクトの作成

今回はフレームワークなしの素のJavaScriptのプログラムでパッケージマネージャはnpmとします。AlienInvasionという名前でプロジェクトを作ります

PS F:\work\tauri> npm create tauri-app@latest

? Project name (tauri-app) › AlienInvasion              (入力してEnter)
? Package name (alieninvasion) › alieninvasion          (そのままEnter)
? Identifier (com.alieninvasion.app) ›                  (そのままEnter)
? Choose which language to use for your frontend ›
❯ TypeScript / JavaScript  (pnpm, yarn, npm, deno, bun) (選択してEnter)
  Rust
  .NET
? Choose your package manager ›
❯ npm                                   (選択してEnter)
  pnpm
  yarn
  deno
  bun
? Choose your UI template ›
❯ Vanilla                               (選択してEnter)
  Vue
  Svelte
  React
  Solid
  Angular
  Preact
? Choose your UI flavor ›
  TypeScript
❯ JavaScript                            (選択してEnter)

Template created! To get started run:

3 npm install

F:\work\tauri\AlienInvasionというフォルダが作成されたので、フォルダ内に移動し必要なpackageをインストールします

PS F:\work\tauri> cd AlienInvasion
PS F:\work\tauri\AlienInvasion> npm install

4 環境を確認

ここで一旦、開発モードでTauriの内部サーバを起動して動作を確認します。実行されるHTML5アプリはプロジェクト作成時にsrcに自動生成されたテンプレートファイル群です

PS F:\work\tauri\AlienInvasion> npm run tauri dev

> alieninvasion@0.1.0 tauri
　　　　：
   Compiling alieninvasion v0.1.0 (F:\work\tauri\AlienInvasion\src-tauri)
   Compiling open v5.3.2
    Finished `dev` profile [unoptimized + debuginfo] target(s) in 2m 35s
     Running `target\debug\alieninvasion.exe`

s03.png
こんなWindowが表示されればOKです

5 HTML5プログラムを配置する

srcの中身をExplorer等で目的のものに入れ替えます
s05.png

再度、開発モードでTauriの内部サーバを起動して動作を確認します。

PS F:\work\tauri\AlienInvasion> npm run tauri dev

> alieninvasion@0.1.0 tauri
　　　　：
     Running DevCommand (`cargo  run --no-default-features --color always --`)
        Info Watching F:\work\tauri\AlienInvasion\src-tauri for changes...
   Compiling alieninvasion v0.1.0 (F:\work\tauri\AlienInvasion\src-tauri)
    Finished `dev` profile [unoptimized + debuginfo] target(s) in 13.79s
     Running `target\debug\alieninvasion.exe`

s06.png
問題なく動作しています

6 リリースビルド

ビルドしてexeを作ります

PS F:\work\tauri\AlienInvasion> npm run tauri build

> alieninvasion@0.1.0 tauri
　　　　：
   Compiling alieninvasion v0.1.0 (F:\work\tauri\AlienInvasion\src-tauri)
    Finished `release` profile [optimized] target(s) in 3m 41s
       Built application at: F:\work\tauri\AlienInvasion\src-tauri\target\release\alieninvasion.exe
　　　　：
    Finished 2 bundles at:
        F:\work\tauri\AlienInvasion\src-tauri\target\release\bundle\msi\alieninvasion_0.1.0_x64_en-US.msi
        F:\work\tauri\AlienInvasion\src-tauri\target\release\bundle\nsis\alieninvasion_0.1.0_x64-setup.exe

F:\work\tauri\AlienInvasion\src-tauri\target\releaseフォルダにalieninvasion.exeという名前で実行ファイルができました。
また、同時にmsiやsetup.exeも作成されます。

-a----        2025/06/13     17:42        8925184 alieninvasion.exe

8.9MB程度のサイズですね。exeだけ適当なフォルダや別PCにコピーして実行してみます。

08.png
s07.png
良い感じ。
以上

参考

Tauri 2.0 -- https://v2.tauri.app/ja/

Discussion