WinUI 3 アプリで複数のプラットフォームをターゲットにする方法

  • [アーティクル]

スターターの Hello World WinUI 3 アプリ作成したら、1 つのコードベースでより多くのユーザーにリーチする方法を疑問に思うかもしれません。 このハウツーでは、 Uno Platform を使用して既存のアプリケーションの範囲を拡大し、ネイティブ モバイル、Web、デスクトップ全体でビジネス ロジックと UI レイヤーを再利用できるようにします。

ブラウザーで実行されている

前提条件

  • Visual Studio 2022 17.4 以降
  • 開発用コンピューターをセットアップする ( WinUI の使用を開始するを参照してください)
  • ASP.NET と Web 開発のワークロード (WebAssembly 開発用) VS での Web 開発ワークロード
  • インストール済みの .NET マルチプラットフォーム アプリ UI 開発 (iOS、Android、Mac Catalyst 開発用)。 VS の dotnet モバイル ワークロード
  • インストール済みの .NET デスクトップ開発 (Gtk、Wpf、Linux Framebuffer 開発用) VS の .net デスクトップ ワークロード

環境の最終処理

  1. コマンド ライン プロンプト、インストールされている場合は Windows ターミナル、それ以外の場合は [スタート] メニューから [コマンド プロンプト] または [Windows Powershell] を開きます。

  2. uno-check ツールを次のようにインストールまたは更新します。

    • 次のコマンドを使用します:

      dotnet tool install -g uno.check

    • 前のバージョンが既にインストールされている場合にツールを更新するには次のようにします。

      dotnet tool update -g uno.check

  3. 次のコマンドでツールを実行します。

    uno-check

  4. ツールから示されている指示に従います。 システムを変更する必要があるため、管理者特権のアクセス許可を求められる場合があります。

Uno Platform ソリューション テンプレートをインストールする

Visual Studio を起動し、Continue without code をクリックします。 メニュー バーの Extensions ->Manage Extensions をクリックします。

拡張機能の管理を読み取る Visual Studio メニュー バー項目

拡張機能マネージャーで Online ノードを展開し、 Unoを検索するか、 Uno Platform 拡張機能をインストールするか、 Visual Studio Marketplace からダウンロードしてから Visual Studio を再起動します。

検索結果として Uno Platform 拡張機能を使用して Visual Studio の拡張機能ウィンドウを管理する

アプリケーションの作成

マルチプラットフォーム アプリケーションを作成する準備ができたので、新しい Uno Platform アプリケーションを作成します。 前のチュートリアルの Hello World WinUI 3 プロジェクトの XAML コードをマルチプラットフォーム プロジェクトにコピーします。 これが可能なのは、Uno Platform で既存のコードベースを再利用できるからです。 各プラットフォームによって提供される OS API に依存する機能については、簡単に時間をかけて機能するようにできます。 この方法は、他のプラットフォームに移植する既存のアプリケーションがある場合に特に便利です。

使い慣れた XAML フレーバーと既にあるコードベースを使用して、より多くのプラットフォームをターゲットにできるため、十分短期間で、このアプローチの利点を得ることができます。

Visual Studio を開き、File>New>Project で新しいプロジェクトを作成します。

新しいプロジェクトの作成

Uno を検索し、Uno Platform App プロジェクト テンプレートを選択します。

Uno プラットフォーム アプリ

プロジェクト名、ソリューション名、ディレクトリを指定します。 この例では、Hello World MultiPlatform プロジェクトは、C:\Projects に含まれる Hello World MultiPlatform ソリューションに属しています。

プロジェクトの詳細を指定する

Visual Studio の開始ページから Uno Platform App の種類を使用して、新しい C# ソリューションを作成します。 前のチュートリアルのコードとの競合を回避するために、このソリューションに別の名前 "Hello World Uno" を付けます。

次に、Hello World アプリケーションのマルチプラットフォームを使用する基本テンプレートを選択します。 Uno Platform App テンプレートには、すぐに作業を開始できる 2 つのプリセット オプション (空白りソリューション、または Uno.Material および Uno.Toolkit ライブラリへの参照を含む既定の構成) が用意されています。 既定の構成には、依存関係の挿入、構成、ナビゲーション、およびログ記録に使用される Uno.Extensions も含まれており、MVVM の代わりに MVUX を使用するため、実際のアプリケーションを迅速に構築するための優れた出発点となります。

プロジェクトのスタートアップの種類の Uno ソリューション テンプレート

簡略化するために、[空白] プリセットを選択します。 次に [作成] ボタンをクリックします。 プロジェクトが作成され、それらの依存関係が復元されるまで待ちます。

エディターの上部にあるバナーで、プロジェクトの再読み込みを求められる場合があります。[プロジェクトの を読み込む] をクリックします: プロジェクトを再読み込みして変更を完了するための Visual Studio バナー オファリング

アプリのビルド

マルチプラットフォーム WinUI アプリケーションの機能の開始点を生成したので、 previous チュートリアルで説明されている Hello World WinUI 3 プロジェクトからマークアップをコピーできます。

次の既定のファイル構造がソリューション エクスプローラーに表示されます。

既定のファイル構造

Visual Studio で WinUI 3 プロジェクトが開いていることを確認し、WinUI 3 プロジェクトの MainWindow.xaml の子 XAML 要素を Uno Platform プロジェクトの MainPage.xaml ファイルにコピーします。 MainPage ビュー XAML は次のようになります。

<Page x:Class="HelloWorld.MainPage"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:local="using:HelloWorld"
   xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
   xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
   mc:Ignorable="d"
   Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

      <!-- Below is the code you copied from MainWindow: -->
      <StackPanel Orientation="Horizontal"
                  HorizontalAlignment="Center"
                  VerticalAlignment="Center">
          <TextBlock x:Name="myText" 
                     Text="Hello world!"
                     Foreground="Red"/>
      </StackPanel>
</Page>

HelloWorld.Windows ターゲットを起動します。 この WinUI アプリが前のチュートリアルと同じであることを確認します。

これで、サポートされている任意のプラットフォームでアプリをビルドして実行できるようになりました。 これを行うために、デバッグ ツール バーのドロップダウンを使用して、デプロイするターゲット プラットフォームを選択できます。

  • WebAssembly (Wasm) ヘッドを実行するには:

    • HelloWorld.Wasm プロジェクトを右クリックし、[スタートアップ プロジェクトとして設定] を選択します
    • HelloWorld.Wasm ボタンを押してアプリをデプロイします
    • 必要に応じて、 HelloWorld.Server プロジェクトを代替として使用できます。

  • iOS に対してデバッグするには:

    • HelloWorld.Mobile プロジェクトを右クリックし、[スタートアップ プロジェクトとして設定] を選択します

    • デバッグ ツール バーのドロップダウンで、アクティブな iOS デバイスまたはシミュレーターを選択します。 これを機能させるには、Mac と組み合わされている必要があります。

      デプロイするターゲット フレームワークを選択する Visual Studio ドロップダウン

  • Mac Catalyst に対してデバッグするには:

    • HelloWorld.Mobile プロジェクトを右クリックし、[スタートアップ プロジェクトとして設定] を選択します
    • デバッグ ツール バーのドロップダウンで、リモート macOS デバイスを選択します。 これを機能させるには、それと組み合わされている必要があります。

  • Android プラットフォームをデバッグするには:

    • HelloWorld.Mobile プロジェクトを右クリックし、[スタートアップ プロジェクトとして設定] を選択します
    • デバッグ ツール バーのドロップダウンで、アクティブな Android デバイスまたはエミュレーターを選択します
      • [デバイス] サブメニューでアクティブなデバイスを選択します

  • Skia GTK を使用する Linux でデバッグするには:

    • HelloWorld.Skia.Gtk プロジェクトを右クリックし、[スタートアップ プロジェクトとして設定] を選択します
    • HelloWorld.Skia.Gtk ボタンを押してアプリをデプロイします

これで、マルチプラットフォーム アプリケーションの構築を開始する準備ができました。

関連項目