rksoftware

Visual Studio とか C# とかが好きです

Mobile Blazor Bindings (Hybrid) プロジェクトの作り方

Blazor には 7 つのプロジェクト タイプがあります。

今回は少し複雑な Mobile Blazor Bindings (Hybrid) プロジェクトを作ってみたいと思います。

参考

docs.microsoft.com

■ 準備

□ Visual Sudio

Visual Studio をインストールします。 ワークロード ASP.NET と Web 開発.NET によるモバイル開発 が必要です。

□ プロジェクトテンプレート

プロジェクトテンプレートは次のコマンドで探せます。

> dotnet new blazorhybrid --search

実行結果

テンプレートを探しています...
テンプレートソースからの一致: NuGet.org
これらのテンプレートは、入力: 'blazorhybrid' と一致しました

テンプレート名                    短い名前      作成       言語  パッケージ                                ダウンロード
--------------------------------  ------------  ---------  ----  ----------------------------------------  ------------
Experimental Mobile Blazor Bi...  blazorhybrid  Microsoft  [C#]  Microsoft.MobileBlazorBindings.Templates           16k


テンプレートを使用するには、次のコマンドを実行してパッケージをインストールします。
   dotnet new --install <PACKAGE_ID>
例:
   dotnet new --install Microsoft.MobileBlazorBindings.Templates

ただし今回は プレビュー バージョンのパッケージが必要なので少し手を加える必要があります。具体的には次のコマンドになります。

dotnet new --install Microsoft.MobileBlazorBindings.Templates::0.5.50-preview

■ dotnet command

コマンドで作成すると手ばやいです。

> dotnet new blazorhybrid -o SampleBlazorHybrid

実行は Visual Studio で行います。

> &"C:\Program Files\Microsoft Visual Studio\2022\Preview\Common7\IDE\devenv.exe" .\SampleBlazorHybrid\SampleBlazorHybrid.sln

参考

rksoftware.hatenablog.com

■ Visual Studio

プロジェクト (ソリューション) が Visual Studio で開かれます。

プロジェクトがモバイルとデスクトップの両方のものが作られていることがわかります。

□ Android

まずは Android プロジェクトを実行してみます。

デバッグ実行で Android エミュレーターが起動し、アプリが開きます。

□ Windows

続いて Windows のデスクトップを実行してみます。

ここでエラーが出ることがあります。

---------------------------
SampleBlazorHybrid.Windows.exe
---------------------------
To run this application, you must install .NET Core.

Would you like to download it now?
---------------------------
はい(Y)   いいえ(N)   
---------------------------

対策

.NET Core 3.1 をインストールします。そうするとインストール後に Android プロジェクトがビルドに失敗するようになるので、ひとまずアンロードしておきます。
rksoftware.hatenablog.com

改めて Windows のデスクトップを実行してみます。

起動しました。しかし Blazor 部分がエラーになってしまっています。

申し訳ございません。このページに到達できません
http://0.0.0.0 の Web ページに問題が発生しているか、新しい Web ページに完全に移動された可能性があります。
ERR_ADDRESS_INVALID 

対策

NuGet パッケージの更新と追加を行います。

  • Xamarin.Forms を最新に更新
  • WebView2 をインストール

rksoftware.hatenablog.com

再度実行します。

実行できました。

■ 簡単ですね

簡単ですね。