Blazor WASMのアプリをMAUI Blazorに移行してみる

Blazor WASMのアプリを MAUI Blazorに移行してみる株式会社SAKURUG エンジニアリングユニット草場友光 .NETラボ 2023年2月

自己紹介 • 普段は主にWebFormsアプリの保守のお仕事をしてます。 • 古めのシステムが多いので時代に取り残されぬよう新しい技術を一つでも入れるよう日々努力しています。 • 2022/08-2023
Microsoft MVP (Developer Technologies) • tomo_kusaba

宣伝【VISION】ひとの可能性を開花させる企業であり続ける VISIONに共感できる仲間募集中。

注意 • 個人の見解・解釈が多分に入っています。 • 見解の相違・事実誤認などありましたらご指摘ください。 • #dotnetlabでtweetすると右側に表示されます

今日の目的 • Blazor WebAssemblyで記述したアプリケーションは基本的にそのままのコードでMAUI Blazorに移行が可能です。 • しかし、ワークロードが異なるが故に全くそのままといういきません。 •
先月見せたRESTAPI、MessagePack、MemoryPack比較用のアプリケーションを題材にして実際にMAUI Blazorに移行してみてその差異を探ってみたいといきます。

MAUI Blazorとは Blazor Hybrid Blazor技術も使ってMAUI のUIやコードを記述できる技術 MAUIの様々なAPIも Razorコンポーネントの中に記述できる

今回の移行順序 • 必要なパッケージを NuGet(MessagePack,MemoryPack,QuickGrid) • _imports.razorに「@using Microsoft.AspNetCore.Components.QuickGrid」を追加 • Null許容を有効化する •
モデルクラス(Yubin.cs)をコピー • MauiProgram.csにhttpClientサービスを追加 • Page配下の各razorページを移行 • Shared配下のNavMenuの表示を変更

移行元プロジェクト • https://github.com/tomokusaba/MessagePackView • https://kind-moss-0af0a4d00.2.azurestaticapps.net/ （GitHub) Static Web Apps

デモ

ワークロードによる差 • global usingで暗黙的に宣言されているパッケージ • MAUIはNull許容が有効化されていなかった。(.NET 7) • Microsoft.AspNetCore.Components.Hosting.WebAssembl yHostかMicrosoft.Maui.Hostか？

実機でデバッグしてみる(Android) • 準備 • デバイスで開発者モードを有効にする • 設定画面に移動 • 端末情報を選択 •
ビルド番号を7回タップ • USBデバッグを有効にする • 設定画面に移動 • 開発者向けオプションを選択 • USBデバッグオプションをオンにする • デバイスをPCに接続する • データ通信可能なUSBケーブルでPCと端末を接続する • デバイスのドライバーをインストールする（Android SDK Managerを使用してGoogle USBドライバーをインストール）

ホットリロード • 実機でのデバッグ実行時でもホットリロード可能(重要)

デモ

移行後のMAUI Blazorアプリ • https://github.com/tomokusaba/MAUIBlazor

参考文献 • NET MAUI とは • ASP.NET Core Blazor Hybrid

おしまいおしまい

Blazor WASMのアプリをMAUI Blazorに移行してみる

Blazor WASMのアプリをMAUI Blazorに移行してみる

tomokusaba

More Decks by tomokusaba

Other Decks in Programming

Featured

Transcript