Blazor には 7 つのプロジェクト タイプがあります。
今回は少し複雑な Mobile Blazor Bindings (Hybrid) プロジェクトを作ってみたいと思います。
参考
■ 準備
□ 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
参考
■ 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 をインストール
再度実行します。
実行できました。
■ 簡単ですね
簡単ですね。