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

.NETラボ 勉強会 2023年2月
Blazor WASMのアプリをMAUI Blazorに移行してみる

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

9. デモ
   

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

13. デモ
    

    View Slide

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

    View Slide

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

    View Slide

16. おしまい
    おしまい
    

    View Slide