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

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

前提条件

• Visual Studio 2022 17.4 以降
• Windows App SDK 用のツール
• ASP.NET と Web 開発ワークロード (WebAssembly 開発用)
• インストール済みの .NET マルチプラットフォーム アプリ UI 開発 (iOS、Android、Mac Catalyst 開発用)。
• VS で .NET デスクトップ開発がインストールされている (Gtk、Wpf、Linux Framebuffer 開発

環境の最終処理

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 をクリックします。

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

アプリケーションの作成

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

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

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

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

プロジェクト名、ソリューション名、ディレクトリを指定します。 この例では、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 を使用するため、実際のアプリケーションを迅速に構築するための優れた出発点となります。

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

エディターの上部にあるバナーから、次のようにプロジェクトの再読み込みを求められた場合は、[Reload projects] (プロジェクトの再読み込み) をクリックします。

アプリのビルド

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

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

Visual Studio で WinUI 3 プロジェクトが開いていることを確認し、WinUI 3 プロジェクトの子 XAML 要素 MainWindow.xaml を MainPage.xaml Uno Platform プロジェクトのファイルにコピーします。 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 と組み合わされている必要があります。

    

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

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

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

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

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

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

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

関連項目

• Uno Platform のドキュメント
• Uno 拡張機能の機能