Mobile Blazor Bindings (Hybrid) の Windows アプリでエラーでプロジェクトテンプレートから作ったばかりのプロジェクトを Windows をターゲットに実行しようとすると、Blazor が実行されないことがありました。
こんな画面でエラーになります。
申し訳ございません。このページに到達できません http://0.0.0.0 の Web ページに問題が発生しているか、新しい Web ページに完全に移動された可能性があります。 ERR_ADDRESS_INVALID
参考 github.com
NuGet パッケージの更新と追加を行います。
Xamarin.Forms を最新に更新
WebView2 をインストール
これで実行できるようになりました。
ただし、今後は MAUI に移行するとのことなので、あまりこの知識を活用する機会はそう長くないかもしれません。
頭に & を付けます。
例えば Visual Studio を実行する場合は
> &"C:\Program Files\Microsoft Visual Studio\2022\Preview\Common7\IDE\devenv.exe"
Blazor には 7 つのプロジェクト タイプがあります。
今回は一番シンプルな Blazor WebAssembly プロジェクトを作ってみたいと思います。
コマンドで作成すると手ばやいです。
> dotnet new blazorwasm -o BlazorWasmSamle
実行はプロジェクト ファイル (.csproj) のある場所で dotnet run 。
> cd .\BlazorWasmSamle\ > dotnet run
実行したら、コンソールに表示されている URL (https://localhost:XXXX) を Web ブラウザでアクセスします。
PS C:\sample\BlazorWasmSamle> dotnet run
ビルドしています...
info: Microsoft.Hosting.Lifetime[14]
Now listening on: https://localhost:7276
info: Microsoft.Hosting.Lifetime[14]
Now listening on: http://localhost:5231
info: Microsoft.Hosting.Lifetime[0]
Application started. Press Ctrl+C to shut down.
info: Microsoft.Hosting.Lifetime[0]
Hosting environment: Development
info: Microsoft.Hosting.Lifetime[0]
Content root path: C:\sample\BlazorWasmSamle
Blazor WebAssembly の Web アプリが開きました。DLL などもダウンロードされていることが見えます。
左ペインで [ Counter ] を選択。
[ Click me ] をクリックするたびにカウントが増えていきます。(プロジェクトテンプレートでそういう動作が実装されています)
これで Blazor WebAssembly のプロジェクトを作成して実行することができました。
ワークロード ASP.NET と Web 開発 が必要です。
Visual Studio の場合はプロジェクトの作成から。
プロジェクト (ソリューション) が作成され、Visual Studio で開かれます。
デバッグ実行でブラウザが起動し、サイトが開きます。
簡単ですね。
Blazor には 7 つのプロジェクト タイプがあります。
今回は一番シンプルな Blazor Server プロジェクトを作ってみたいと思います。
コマンドで作成すると手ばやいです。
> dotnet new blazorserver -o BlazorServerSample
実行はプロジェクト ファイル (.csproj) のある場所で dotnet run 。
> cd .\BlazorServerSample\ > dotnet run
実行したら、コンソールに表示されている URL (https://localhost:XXXX) を Web ブラウザでアクセスします。
PS C:\sample\BlazorServerSample> dotnet run
ビルドしています...
info: Microsoft.Hosting.Lifetime[14]
Now listening on: https://localhost:7122
info: Microsoft.Hosting.Lifetime[14]
Now listening on: http://localhost:5045
info: Microsoft.Hosting.Lifetime[0]
Application started. Press Ctrl+C to shut down.
info: Microsoft.Hosting.Lifetime[0]
Hosting environment: Development
info: Microsoft.Hosting.Lifetime[0]
Content root path: C:\sample\BlazorServerSample\
Blazor Server の Web アプリが開きました。
左ペインで [ Counter ] を選択。
[ Click me ] をクリックするたびにカウントが増えていきます。(プロジェクトテンプレートでそういう動作が実装されています)
これで Blazor Server のプロジェクトを作成して実行することができました。
ワークロード ASP.NET と Web 開発 が必要です。
Visual Studio の場合はプロジェクトの作成から。
プロジェクト (ソリューション) が作成され、Visual Studio で開かれます。
デバッグ実行でブラウザが起動し、サイトが開きます。
簡単ですね。
Web アプリのデバッグ中は自己証明書 (通称：オレオレ証明書 とも) で実行すると思います。
自己証明書だとブラウザが素直に開いてくれないので (※) ひと手間必要です。
※：開かない動作は正しい。本来自己証明書のサイトは開かないのが一般的なインターネットしぐさです。開発のデバッグというのが通常運用ではないので不便があるのは仕方がないです。安全の方が大事です。
自己証明書のサイトを開くとこんな感じになります。
[ 詳細設定 ] をクリック。
[ XXXXXX に進む (安全ではありません) ] をクリック。
デバッグ中のサイトが開きます。
簡単ですね。
Blazor には 7 つの Blazor があります。
今回はその作り方 ～プロジェクト (ソリューション) の作り方～ です。
| no | name | dotnet command | Visual Studio (Project Template) | note | article |
|---|---|---|---|---|---|
| 1 | Blazor Server | dotnet new blazorserver |
Blazor Server アプリ | article | |
| 2 | Blazor WebAssembly | dotnet new blazorwasm |
Blazor WebAssembly アプリ | article | |
| 3 | Blazor Hybrid (.NET MAUI) | dotnet new maui-blazor |
.NET MAUI Blazor App (Preview) | Preview 版 Visual Studio のインストールが必要 | article |
| 4 | Blazor Hybrid (Windows フォーム) | dotnet new winforms |
Windwos フォーム アプリ | プロジェクト作成後に NuGet ライブラリ追加とプロジェクト ファイル (.csproj) の書き換えが必要 | article |
| 5 | Blazor Hybrid (WPF) | dotnet new wpf |
WPF アプリケーション | プロジェクト作成後に NuGet ライブラリ追加とプロジェクト ファイル (.csproj) の書き換えが必要 | article |
| 6 | Mobile Blazor Bindings | dotnet new mobileblazorbindings |
Experimental Mobile Blazor Bindings App | Visual Studio と Microsoft.MobileBlazorBindings.Templates プロジェクトテンプレートのインストールが必要 | article |
| 7 | Mobile Blazor Bindings (Hybrid) | dotnet new blazorhybrid |
Experimental Mobile Blazor Bindings Hybrid App blazorhybrid | Visual Studio と Microsoft.MobileBlazorBindings.Templates プロジェクトテンプレートのインストールが必要 | article |
> dotnet new --list テンプレート名 短い名前 言語 タグ ---------------------------------------------- -------------------- ---------- -------------------------- （ 中略 ） .NET MAUI Blazor App (Preview) maui-blazor [C#] MAUI/Android/iOS/macOS/Mac Catalyst/Windows/Blazor （ 中略 ） Blazor Server App blazorserver [C#] Web/Blazor Blazor WebAssembly App blazorwasm [C#] Web/Blazor/WebAssembly/PWA （ 中略 ） Experimental Mobile Blazor Bindings App mobileblazorbindings [C#] Blazor/Xamarin.Forms Experimental Mobile Blazor Bindings Hybrid App blazorhybrid [C#] Blazor/Xamarin.Forms/Web （ 中略 ） Windows フォーム アプリ winforms [C#],VB Common/WinForms （ 中略 ） WPF アプリケーション wpf [C#],VB Common/WPF
Blazor には 7 つの Blazor があるのでメモ。
各内容は今後確認して行きます。まずは今回は種類を書き出します。
※間違っているかもしれません。そこはこれからしっかり確認して行きます。
| no | Go-Live | name | description | side | Windows | Mac | Android | iOS |
|---|---|---|---|---|---|---|---|---|
| 1 | ○ | Blazor Server | Server Side で動作する Blazor。いわゆる普通の Web。 | Server | ○ | ○ | ○ | ○ |
| 2 | ○ | Blazor WebAssembly | WebAssembly 技術でクライアントサイドで動作する Blazor。 | Client | ○ | ○ | ○ | ○ |
| 3 | － | Blazor Hybrid (.NET MAUI) | MAUI の WebView 上で Blazor Server を動かす。 | Client | ○ | ○ | ○ | ○ |
| 4 | － | Blazor Hybrid (Windows フォーム) | Windows フォームの WebView 上で Blazor Server を動かす。 | Client | ○ | － | － | － |
| 5 | － | Blazor Hybrid (WPF) | WPF の WebView 上で Blazor Server を動かす。 | Client | ○ | － | － | － |
| 6 | － | Mobile Blazor Bindings | いわゆるモバイルアプリ(ネイティブアプリ)。 | Client | － | － | ○ | ○ |
| 7 | － | Mobile Blazor Bindings (Hybrid) | モバイルだけでなくデスクトップ OS にも対応。 | Client | ○ | ○ | ○ | ○ |
7 つの Blazor のプロジェクトの作り方 - rksoftware
Blazor Server プロジェクトの作り方 - rksoftware
Blazor WebAssembly プロジェクトの作り方 - rksoftware
Blazor Hybrid (.NET MAUI) プロジェクトの作り方 - rksoftware
Blazor Hybrid (Windows フォーム) プロジェクトの作り方 - rksoftware
Blazor Hybrid (WPF) プロジェクトの作り方 - rksoftware
Mobile Blazor Bindings プロジェクトの作り方 - rksoftware
Mobile Blazor Bindings (Hybrid) プロジェクトの作り方 - rksoftware
