🐥note.

小鳥とMicrosoft <3 なエンジニアの技術Blog📚

BlazorでNative Mobileアプリを開発できるMobile Blazor Bindingsを試してみる

現在開催されている.NET Conf: Focus on BlazorのEilon Lipton氏のセッション Mobile Blazor Bindings – Using Blazor to build mobile appsMobile Blazor Bindindsという名の実験的ライブラリが発表されました。

devblogs的には以下の記事です。
※実はセッションより前に公開されていたり...。

devblogs.microsoft.com

BlazorでMobileアプリを作る実験的ライブラリのようです。
NDCカンファレンスでDemoされてたやつが公開された感じですね!

中身はXamarin.FormsにBindingすることでMobileのNative Componentを描画しているようです。

f:id:piyo_esq:20200115064153p:plain
アーキテクチャ(セッションから拝借)

※01/15 追記:Microsoft Docsにもっといい図がありました。

Repositoryはこちら。
Sampleも何個か掲載されていますね。

github.com

Microsoft Docsはこちら。

docs.microsoft.com

目次

やってみる

下記コマンドでTemplateをインストールします。

dotnet new -i Microsoft.MobileBlazorBindings.Templates::0.1.173-beta

インストールしたTemplateでProjectを作成します。

dotnet new mobileblazorbindings -o MyApp

こんな感じのファイルが生成されます。

f:id:piyo_esq:20200115064228p:plain
生成ファイル

参照みてみると、Xamarin.Formsがちゃんといますね。

f:id:piyo_esq:20200115064313p:plain
Androidの参照

Androidのプロジェクトをスタートアッププロジェクトに切り替えデバッグ実行してみます。

f:id:piyo_esq:20200115064412p:plain
Android Emulator起動画面

ばっちり動きました。

中身

中身はこんな感じです。
Razor記法だ…!_Imports.razorではXamarin.Formsをusingしてますね。

HelloWorld.razor

f:id:piyo_esq:20200115064442p:plain
HelloWorld.razor

Counter.razor

f:id:piyo_esq:20200115064501p:plain
Counter.razor

App.cs

f:id:piyo_esq:20200115065246p:plain
App.cs

_Imports.razor

f:id:piyo_esq:20200115070431p:plain
_Imports.razor

対応Component

既にMicrosoft Docsに対応Componentの一覧が掲載されているようです。

docs.microsoft.com

セッション中に今後対応予定のComponentについて言及されていました。

f:id:piyo_esq:20200115064517p:plain
Componentの対応状況と対応予定

RoadMapもMicrosoft Docsに記載されてますね。

docs.microsoft.com

おわり

UnoもXamarinにPortingしてるんでしたっけ...?