作業の開始: electron アプリにWindows API を追加する

このガイドでは、Windows アプリ開発 CLI を使用して、electron アプリケーションにWindowsネイティブ機能を追加する手順について説明します。 Electron アプリから最新のWindows API を呼び出し、アプリ ID でテストし、パッケージを配布する方法について説明します。

あなたが構築するもの

このガイドを最後まで進めると、Electron アプリを完成させることができます。

  • ✅ 最新のWindows API を呼び出します (Windows SDK とWindows アプリ SDK)
  • ✅JavaScript (Phi Silica または WinML) のWindows AI 機能を使用します
  • ✅ API にネイティブ コードが必要な場合は、必要に応じてネイティブ アドオンを使用します
  • ✅ 保護された API をテストするためのアプリ ID を使用して実行する
  • ✅ 配布用の署名付き MSIX としてのパッケージ

前提条件

開始する前に、次のことを確認してください。

  • Windows 11 (Phi Silica を使用している場合は Copilot+ PC)
  • Node.js - winget install OpenJS.NodeJS --source winget
  • .NET SDK v10 - winget install Microsoft.DotNet.SDK.10 --source winget
  • Visual Studio のネイティブ デスクトップ ワークロード - winget install --id Microsoft.VisualStudio.Community --source winget --override "--add Microsoft.VisualStudio.Workload.NativeDesktop --includeRecommended --passive --wait"

プロセス

次のガイドに従って Electron アプリを設定し、最新のWindows API を呼び出して、配布用にパッケージ化します。

1. 開発環境の設定

まず、必要なツールと SDK を使用して開発環境を設定します。 これには次のものが含まれます。

  • Electron アプリの作成または構成
  • winapp CLI のインストール
  • Windows SDK と必要な資産の初期化
  • ビルド パイプラインの設定

セットアップを始める →

2. JavaScript から Windows API を呼び出す

セットアップ中に JS バインディングを有効にした場合、.winapp/bindings/には、生成された.jsラッパー クラスと、Windows アプリ SDK API の一致する.d.ts宣言が含まれます。 #winapp/bindingsをインポートして、エクスポートされたすべてのクラスにアクセスします。 #winapp/bindings パッケージのインポートには@microsoft/dynwinrt-codegen ≥ 0.1.0-preview.8が必要です。古いプロジェクトでは、インポート ファイルに対する相対パス (たとえば、require('../.winapp/bindings/index.js')からのsrc/index.js) を保持したり、npm i -D @microsoft/dynwinrt-codegen@latest && npx winapp init --add-js-bindingsを使用してアップグレードしたりできます。

3. 省略可能: ネイティブ アドオンを作成する

生成された JS バインドが必要なWindows アプリ SDK API に対応している場合は、この手順をスキップします。 ネイティブ アドオンは、Win32、純粋な COM、ネイティブ C/C++ ライブラリ、マネージド .NET アセンブリなどのネイティブ境界が必要な場合にのみ作成します。

オプション A: C++ 通知アドオンの作成

Windows アプリ SDK通知 API を呼び出す C++ アドオンを作成する方法について説明します。 これは、より複雑なシナリオに進む前にネイティブ アドオンを理解するための優れた出発点です。

C++ 通知アドオン →を作成する

オプション B: Phi シリカ アドオンの作成

Phi Silica AI モデルを使用してデバイス上のテキストを要約する C# アドオンを作成する方法について説明します。 Phi Silica は、NPU を使用する Windows 11 デバイスでローカルに実行される小さな言語モデルです。

Phi Silica アドオン →を作成する

オプション C: WinML アドオンの作成

Windows Machine Learning (WinML) を使用して画像分類、物体検出などのカスタム ONNX モデルを実行する C# アドオンを作成する方法について説明します。

WinML アドオン →を作成する

4. 流通用包装

最後に、配布用の MSIX としてアプリをパッケージ化します。 これには次のものが含まれます。

  • 運用環境用にアプリをビルドする
  • MSIX パッケージの作成と署名
  • インストールされているパッケージのテスト
  • 配布オプションについて

アプリ →をパッケージ化する

クイック ナビゲーション

Phase ガイド ここでは、次の内容について学習します
1️⃣ セットアップ ツールのインストール、SDK の初期化、ビルド パイプラインの構成
2️⃣ Notification JS バインディング JavaScript から直接Windows アプリ SDK通知を表示する
2️⃣ WINDOWS API の JS バインド Windows アプリ SDK API を呼び出し、WINDOWS SDK API にバインドを拡張する
2️⃣ Phi シリカ JS 結合 JavaScript からローカル言語モデルを直接呼び出す
2️⃣ WinML JS バインド WinML 実行プロバイダーを登録し、JavaScript から ONNX ランタイムを実行する
3️⃣ C++ 通知アドオン C++ アドオンの作成、通知 API の呼び出し、デバッグ ID を使用したテスト
3️⃣ Phi シリカ アドオン AI API に代わる C# アドオンを作成する
3️⃣ WinML アドオン WinML の C# アドオンの代替を作成する
4️⃣ パッケージ化 運用アプリの構築、MSIX の作成、配布

その他のリソース

ヘルプを取得する

  • Last updated on