Tauri での winapp CLI の使用

このガイドでは、 winapp CLI と Tauri アプリケーションを使用して、パッケージ ID でデバッグし、アプリケーションを MSIX としてパッケージ化する方法について説明します。

パッケージ ID は、Windows app モデルの主要な概念です。 これにより、アプリケーションは特定のWindows API (通知、セキュリティ、AI API など) にアクセスでき、クリーンなインストール/アンインストール エクスペリエンスが提供されます。

完全な作業例については、このリポジトリの Tauri サンプル を確認してください。

[前提条件]

  1. Windows 11
  2. Node.js - winget install OpenJS.NodeJS --source winget
  3. Rust ツールチェーン - rustup を使用して Rust をインストールするか、winget install Rustlang.Rustup --source winget
  4. winapp CLI - winget install microsoft.winappcli --source winget

Tip

既にインストールされている場合は、 winget install コマンドを実行して更新プログラムを確認します。

1. 新しい Tauri アプリを作成する

まず、公式のスキャフォールディング ツールを使用して、新しい Tauri アプリケーションを作成します。

npm create tauri-app@latest

画面の指示に従います。

  • Project name: tauri-app (または任意の名前)
  • フロントエンド言語: JavaScript
  • パッケージ マネージャー: npm
  • UI テンプレート: Vanilla
  • UI フレーバー: JavaScript

project ディレクトリに移動し、依存関係をインストールします。

cd tauri-app
npm install

アプリを実行して、すべてが動作していることを確認します。

npm run tauri dev

2. コードを更新して ID を確認する

アプリがパッケージ ID で実行されているかどうかを確認するように更新します。 Rust バックエンドで windows クレートを使用して、Windows API にアクセスし、フロントエンドに公開します。

バックエンドの変更 (Rust)

  1. 依存関係の追加: src-tauri/Cargo.toml を開き、ファイルの末尾に次の行を追加します。 これにより、パッケージ ID を確認できるように、Windows API バインドが追加されます。

    [target.'cfg(windows)'.dependencies]
    windows = { version = "0.58", features = ["ApplicationModel"] }
    
  2. コマンドの追加: src-tauri/src/lib.rs を開き、 get_package_family_name 関数を追加します。 pub fn run()関数の前に配置します。

    #[tauri::command]
    fn get_package_family_name() -> String {
        #[cfg(target_os = "windows")]
        {
            use windows::ApplicationModel::Package;
            match Package::Current() {
                Ok(package) => {
                    match package.Id() {
                        Ok(id) => match id.FamilyName() {
                            Ok(name) => name.to_string(),
                            Err(_) => "Error retrieving Family Name".to_string(),
                        },
                        Err(_) => "Error retrieving Package ID".to_string(),
                    }
                }
                Err(_) => "No package identity".to_string(),
            }
        }
        #[cfg(not(target_os = "windows"))]
        {
            "Not running on Windows".to_string()
        }
    }
    
  3. コマンドの登録: 同じファイル (src-tauri/src/lib.rs) で、 run 関数を更新して新しいコマンドを登録します。

    pub fn run() {
        tauri::Builder::default()
            .plugin(tauri_plugin_opener::init())
            .invoke_handler(tauri::generate_handler![greet, get_package_family_name]) // Add get_package_family_name here
            .run(tauri::generate_context!())
            .expect("error while running tauri application");
    }
    

フロントエンドの変更 (JavaScript)

  1. HTML の更新: src/index.html を開き、結果を表示する段落を追加します。

    <!-- ... inside <main> ... -->
    <p id="pfn-msg"></p>
    
  2. ロジックの更新: src/main.js を開いてコマンドを呼び出し、結果を表示します。

    const { invoke } = window.__TAURI__.core;
    
    // ... existing code ...
    
    async function checkPackageIdentity() {
      const pfn = await invoke("get_package_family_name");
      const pfnMsgEl = document.querySelector("#pfn-msg");
    
      if (pfn !== "No package identity" && !pfn.startsWith("Error")) {
        pfnMsgEl.textContent = `Package family name: ${pfn}`;
      } else {
        pfnMsgEl.textContent = `Not running with package identity`;
      }
    }
    
    window.addEventListener("DOMContentLoaded", () => {
      // ... existing code ...
      checkPackageIdentity();
    });
    
  3. 次に、通常どおりにアプリを実行します。

    npm run tauri dev
    

    アプリ ウィンドウに "パッケージ ID で実行されていません" と表示されます。 これにより、標準の開発ビルドがパッケージ ID なしで実行されていることが確認されます。

3. winapp CLI を使用してProjectを初期化する

winapp init コマンドでは、アプリ マニフェストとアセットなど、必要なものがすべて一度に設定されます。 マニフェストは、API アクセスを許可するために使用Windowsアプリの ID (名前、発行元、バージョン) を定義します。

次のコマンドを実行し、プロンプトに従います。

winapp init

プロンプトが表示されたら、次を実行します。

  • パッケージ名: Enter キーを押して既定値を受け入れる (tauri-app)
  • Publisher名: Enter キーを押して既定値をそのまま使用するか、名前を入力します
  • バージョン: Enter キーを押して 1.0.0.0 を受け入れる
  • エントリ ポイント: Enter キーを押して既定値 (tauri-app.exe) をそのまま使用します。
  • SDK のセットアップ: [SDK をセットアップしない] を選択します (Tauri は C++ SDK ヘッダーではなく Rust の windows クレートを使用します)

このコマンドは次の操作を行います:

  • Package.appxmanifestの作成 - アプリの ID を定義するマニフェスト
  • Assets フォルダーの作成 - MSIX パッケージ化とストアの申請に必要なアイコン

Note

SDK パッケージは管理されていないため、 winapp.yaml は作成されません。Tauri は Cargo 経由で Rust の windows クレートを使用するため、 winapp restore/update が追跡するものはありません。

Package.appxmanifestを開いて、表示名、発行元、機能などのプロパティをさらにカスタマイズできます。

4. ID を使用したデバッグ

ID を使用してデバッグするには、Rust バックエンドをビルドし、 winapp runで実行する必要があります。 npm run tauri devはプロセス ライフサイクルを管理するため、そこで ID を挿入することは困難です。 代わりに、カスタム スクリプトを作成します。 デバッグに証明書や署名は必要ありません。

  1. スクリプトの追加: package.json を開き、新しいスクリプト tauri:dev:withidentityを追加します。

    "scripts": {
      "tauri": "tauri",
      "tauri:dev:withidentity": "cargo build --manifest-path src-tauri/Cargo.toml && (if not exist dist mkdir dist) && copy /Y src-tauri\\target\\debug\\tauri-app.exe dist\\ >nul && winapp run .\\dist"
    }
    

    このスクリプトの機能:

    • cargo build ...: Rust バックエンドを再コンパイルします。
    • copy ... dist\\:exe のみを dist フォルダーにステージングします ( target\debug フォルダーは非常に大きく、アプリの一部ではない中間ビルド成果物が含まれています)。
    • winapp run .\\dist: ルーズ レイアウト パッケージ (実際の MSIX インストールと同様) を登録し、アプリを起動します。
  2. スクリプトを実行します

    npm run tauri:dev:withidentity
    

Tip

アプリ ウィンドウの背後にターミナル/コンソール ウィンドウが表示される場合があります。これは、Tauri デバッグ ビルド (Rust プロセスのコンソール) では正常です。

これで、アプリが開き、"パッケージ ファミリ名" と表示され、ID で実行されていることを確認します。 通知や Phi Silica などの新しい AI API など、パッケージ ID を必要とする API の使用とデバッグを開始できるようになりました。

Tip

winapp run は、パッケージをシステムに登録します。 このため、手順 5 で後で MSIX をインストールしようとすると、MSIX が "既にインストール済み" と表示されることがあります。 完了したら、 winapp unregister を使用して開発パッケージをクリーンアップします。

Tip

高度なデバッグ ワークフロー (デバッガーのアタッチ、IDE セットアップ、スタートアップ デバッグ) については、 デバッグ ガイドを参照してください。

5. MSIX を使用したパッケージ化

アプリを配布する準備ができたら、アプリケーションにパッケージ ID を提供する MSIX としてパッケージ化できます。

まず、 pack:msix スクリプトを package.jsonに追加します。

"scripts": {
  "tauri": "tauri",
  "tauri:dev:withidentity": "...",
  "pack:msix": "npm run tauri -- build && (if not exist dist mkdir dist) && copy /Y src-tauri\\target\\release\\tauri-app.exe dist\\ >nul && winapp pack .\\dist --cert .\\devcert.pfx"
}

このスクリプトの機能:

  • npm run tauri -- build: Rust バックエンドをリリース モードでビルドします。
  • copy ... dist\\:exe のみを dist フォルダーにステージングします ( target\release フォルダーは非常に大きく、アプリの一部ではない中間ビルド成果物が含まれています)。
  • winapp pack .\\dist --cert .\\devcert.pfx: アプリをパッケージにして MSIX として署名します。

開発証明書を生成する

MSIX パッケージに署名する必要があります。 ローカル テストの場合は、自己署名開発証明書を生成します。

winapp cert generate --if-exists skip

Tip

証明書の発行者は、Package.appxmanifest 内の Publisher と一致する必要があります。 cert generate コマンドは、マニフェストからこれを自動的に読み取ります。

ビルド、ステージング、パッケージング

npm run pack:msix

Tip

pack コマンドは、現在のディレクトリから Package.appxmanifest を自動的に使用し、パッケージ化する前にターゲット フォルダーにコピーします。 生成された .msix ファイルは現在のディレクトリにあります。

証明書をインストールする

MSIX パッケージをインストールする前に、コンピューター上の開発証明書を信頼する必要があります。 このコマンドを管理者として実行します (証明書ごとに 1 回だけ実行する必要があります)。

winapp cert install .\devcert.pfx

インストールと実行

Tip

手順 4 で winapp run を使用した場合は、パッケージが既にシステムに登録されている可能性があります。 最初 winapp unregister 使用して開発登録を削除してから、リリース パッケージをインストールします。

生成された .msix ファイルをダブルクリックするか、PowerShell を使用してパッケージをインストールします。

Add-AppxPackage .\tauri-app.msix

Tip

MSIX ファイル名には、バージョンとアーキテクチャ (例: tauri-app_1.0.0.0_x64.msix) が含まれます。 ディレクトリで正確なファイル名を確認します。 コードの変更後に再パッケージ化する必要がある場合は、VersionPackage.appxmanifest をインクリメントします。インストールされているパッケージを更新するには、Windows ではより大きなバージョン番号が必要です。

インストールしたら、[スタート] メニューからアプリを起動できます。 アプリがアイデンティティで実行されていることを確認してください。

ヒント

  1. 配布の準備ができたら、証明機関のコード署名証明書を使用して MSIX に署名し、ユーザーが自己署名証明書をインストールする必要がないようにすることができます。
  2. Microsoft Storeは MSIX に署名します。送信前に署名する必要はありません。
  3. サポートするアーキテクチャ (x64、Arm64) ごとに 1 つずつ、複数の MSIX パッケージを作成する必要がある場合があります。

次のステップ

  • winget を使用して配布: MSIX を Windows パッケージ マネージャー Community Repository に送信します
  • Microsoft Store に発行する: を使用してパッケージを送信する
  • CI/CD の設定: setup-WinAppCli GitHub Action を使用して、パイプライン内のパッケージングを自動化します
  • Explore Windows API: パッケージ ID を使用して、 これで、Notificationson-device AI、およびその他の identity 依存 API