Blazor WebAssemblyテンプレートからPhotino.Blazorでデスクトップアプリを作ってみる

Photinoとは
Photino.Blazorアプリを作成する
- プロジェクト新規作成
- プロジェクトの編集
感想

この記事は、Photino.Blazorでアプリケーションを作成してみた例です。

Photinoとは

C#とWebUI (HTML/CSS/JS) でデスクトップアプリを作成するためのフレームワークです。
Windows、Mac、Linuxをサポートしています。
OSに含まれるブラウザコントロールを使用するため、アプリケーションにブラウザを同梱する必要はありません。

Photino: Native, Cross-Platform Web UI Desktop Apps

主な関連プロジェクトは、以下の3つです。

Photino.Native

Windows、Mac、Linux上のブラウザコントロールのC++ラッパーです。
ネイティブOSウィンドウを作成し、その中にブラウザコントロールを配置します。

OS 依存コントロール

Windows

Chromium-based Edge control in WebView2

Mac

WebKit-based browser control in WKWebView

Linux

WebKit-based browser control in WebKitGTK+2

Photino.NET

OS	依存コントロール
Windows	Chromium-based Edge control in WebView2
Mac	WebKit-based browser control in WKWebView
Linux	WebKit-based browser control in WebKitGTK+2

Photino.Nativeの.NETラッパーです。
C#などの.NET言語を使用し、WebUIのデスクトップアプリを作成できます。
Blazor、Vue.js、Angular、React、または基本的なHTMLなど好きな方法でUIを構築できます。

Photino.Blazor

Photino.NET上に構築されています。
Blazorを使用してデスクトップアプリを簡単に作成できるようにします。

Photino.Blazorアプリを作成する

PhotinoのQuick Startでは、プロジェクトテンプレートを使用してアプリケーションを作成する方法が紹介されています。が、Blazorのプロジェクトテンプレートは含まれていませんでした。

なので、この記事ではBlazor WebAssemblyテンプレートからデスクトップアプリを構築してみます。

作成したプロジェクト

https://gitlab.com/syousuke1104/photino-blazor-tailwind-sample

プロジェクト新規作成

まずは、適当に新規プロジェクトを作成します。
Tailwindはついでに試してるだけなので気にしないでください。

mkdir photino-blazor-tailwind
cd photino-blazor-tailwind

dotnet new sln --name PhotinoBlazorTailwind
dotnet new blazorwasm -o src/PhotinoBlazorTailwind.Desktop
dotnet sln add src/PhotinoBlazorTailwind.Desktop

プロジェクトの編集

PhotinoBlazorTailwind.Desktop.csproj

.csproj ファイルを編集します。変更点は5つです。

SDKをBlazor WebAssemblyからRazorに変更します。
出力形式をExeまたはWinExeに変更します。
Blazor WebAssembly関連パッケージを削除します。
Photino.Blazorパッケージを追加します。
wwwroot/ 以下のコンテンツをコピーします。

PhotinoBlazorTailwind.Desktop.csproj

@@ -1,14 +1,20 @@
-<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
+<Project Sdk="Microsoft.NET.Sdk.Razor">

   <PropertyGroup>
     <TargetFramework>net6.0</TargetFramework>
     <Nullable>enable</Nullable>
     <ImplicitUsings>enable</ImplicitUsings>
+    <OutputType>Exe</OutputType>
   </PropertyGroup>

   <ItemGroup>
-    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="6.0.24" />
-    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="6.0.24" PrivateAssets="all" />
+    <PackageReference Include="Photino.Blazor" Version="2.6.0" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <Content Update="wwwroot/**">
+      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+    </Content>
   </ItemGroup>

 </Project>

_Imports.razor

以下のような不要になった行を削除します。

_Imports.razor

@@ -4,7 +4,6 @@
 @using Microsoft.AspNetCore.Components.Routing
 @using Microsoft.AspNetCore.Components.Web
 @using Microsoft.AspNetCore.Components.Web.Virtualization
-@using Microsoft.AspNetCore.Components.WebAssembly.Http
 @using Microsoft.JSInterop
 @using PhotinoBlazorTailwind.Desktop
 @using PhotinoBlazorTailwind.Desktop.Shared

wwwroot/index.html

blazor.webassembly.js から blazor.webview.js に変更します。

wwwroot/index.html

@@ -19,7 +19,7 @@
         <a href="" class="reload">Reload</a>
         <a class="dismiss">🗙</a>
     </div>
-    <script src="_framework/blazor.webassembly.js"></script>
+    <script src="_framework/blazor.webview.js"></script>
 </body>

 </html>

Program.cs

プログラムは丸ごと置き換えます。

Program.cs

using Photino.Blazor;

using PhotinoBlazorTailwind.Desktop;

class Program
{
    [STAThread]
    static void Main(string[] args)
    {
        var builder = PhotinoBlazorAppBuilder.CreateDefault(args);

        builder.RootComponents.Add<App>("#app");

        var app = builder.Build();

        app.Run();
    }
}

実行結果

コンソールウィンドウは、OutputType を WinExe にすると表示されなくなります。

感想

MAUI SDKのインストールも要らず、XAMLやWinFormsを使わなくともUIを構築できるのは良いですね。あとは、HTMLやCSS、必要であればJSも覚える必要がありますが、まあそこはBlazorを選んでる時点で・・・。