.NETラボ 勉強会 2023年2月 Blazor WASMのアプリをMAUI Blazorに移行してみる
Blazor WASMのアプリをMAUI Blazorに移行してみる株式会社SAKURUGエンジニアリングユニット草場 友光.NETラボ 2023年2月
View Slide
自己紹介• 普段は主に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 HybridBlazor技術も使ってMAUIのUIやコードを記述できる技術MAUIの様々なAPIもRazorコンポーネントの中に記述できる
今回の移行順序• 必要なパッケージをNuGet(MessagePack,MemoryPack,QuickGrid)• _imports.razorに「@usingMicrosoft.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.WebAssemblyHostか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
おしまいおしまい