$30 off During Our Annual Pro Sale. View Details »

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

tomokusaba
February 24, 2023

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

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

tomokusaba

February 24, 2023
Tweet

More Decks by tomokusaba

Other Decks in Programming

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