次の方法で共有

Tauri での winapp CLI の使用

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

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

[前提条件]

  1. Windows 11
  2. Node.js - winget install OpenJS.NodeJS --source winget
  3. winapp CLI - winget install microsoft.winappcli --source winget

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

npm create tauri-app@latest

プロンプト (Project名: tauri-app、フロントエンド言語: JavaScript、Package manager: npm) に従います。

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

cd tauri-app
npm install

アプリを実行します。

npm run tauri dev

2. ID を確認するようにコードを更新する

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

windows依存関係を追加します。 src-tauri/Cargo.tomlを開きます。

[target.'cfg(windows)'.dependencies]
windows = { version = "0.58", features = ["ApplicationModel"] }

src-tauri/src/lib.rsを開き、コマンドを追加します。

#[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()
    }
}

run関数にコマンドを登録します。

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

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

src/index.htmlで、結果を表示する段落を追加します。

<p id="pfn-msg"></p>

src/main.jsで、次のコマンドを呼び出します。

const { invoke } = window.__TAURI__.core;

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", () => {
  checkPackageIdentity();
});

アプリを実行して、"パッケージ ID で実行されていません" と表示されたことを確認します。

npm run tauri dev

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

winapp init

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

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

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

package.jsonにスクリプトを追加します。

"scripts": {
    "tauri:dev:withidentity": "cargo build --manifest-path src-tauri/Cargo.toml && winapp create-debug-identity src-tauri/target/debug/tauri-app.exe && .\\src-tauri\\target\\debug\\tauri-app.exe"
}

次のコマンドを実行します。

npm run tauri:dev:withidentity

アプリにパッケージ ファミリ名が表示されます。

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

  1. リリース用のビルド:

    npm run tauri build

  2. パッケージ ディレクトリを準備します。

    mkdir dist
copy .\src-tauri\target\release\tauri-app.exe .\dist\

  3. 開発証明書を生成します。

    winapp cert generate --if-exists skip

  4. パッケージと署名:

    winapp pack .\dist --cert .\devcert.pfx

  5. 証明書をインストールします (管理者として実行)。

    winapp cert install .\devcert.pfx

  6. 生成された ファイルをダブルクリックして.msixします。 スタート メニューから起動します。

  • Last updated on