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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

デモ

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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