Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Blazor WASMのアプリをMAUI Blazorに移行してみる
Search
tomokusaba
February 24, 2023
Programming
0
870
Blazor WASMのアプリをMAUI Blazorに移行してみる
.NETラボ 勉強会 2023年2月
Blazor WASMのアプリをMAUI Blazorに移行してみる
tomokusaba
February 24, 2023
Tweet
Share
More Decks by tomokusaba
See All by tomokusaba
Visual StudioのGitHub Copilotでいろいろやってみる
tomokusaba
1
7
.NET Frameworkでも汎用ホストが使いたい!
tomokusaba
0
4
ASP. NET CoreにおけるWebAPIの最新情報
tomokusaba
0
370
Semantic Kernelのネイティブプラグインで知識拡張をしてみる
tomokusaba
0
220
.NET Conf 2024の振り返り
tomokusaba
0
270
.NET Conf 2024 .NETラボ 勉強会 2024年12月
tomokusaba
1
46
C#/.NETのこれまでのふりかえり
tomokusaba
1
240
Cloud Adoption Framework にみる組織とクラウド導入戦略
tomokusaba
2
840
Cloud Adoption Frameworkにみる組織とクラウド導入戦略(縮小版)
tomokusaba
1
300
Other Decks in Programming
See All in Programming
メンテが命: PHPフレームワークのコンテナ化とアップグレード戦略
shunta27
0
120
Honoとフロントエンドの 型安全性について
yodaka
7
1.2k
ソフトウェアエンジニアの成長
masuda220
PRO
10
1.1k
法律の脱レガシーに学ぶフロントエンド刷新
oguemon
5
740
CI改善もDatadogとともに
taumu
0
120
WebDriver BiDiとは何なのか
yotahada3
1
140
Spring gRPC について / About Spring gRPC
mackey0225
0
220
Flutter × Firebase Genkit で加速する生成 AI アプリ開発
coborinai
0
160
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
130
AWS Organizations で実現する、 マルチ AWS アカウントのルートユーザー管理からの脱却
atpons
0
150
もう僕は OpenAPI を書きたくない
sgash708
5
1.6k
負債になりにくいCSSをデザイナとつくるには?
fsubal
9
2.4k
Featured
See All Featured
Building Your Own Lightsaber
phodgson
104
6.2k
Gamification - CAS2011
davidbonilla
80
5.1k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Bash Introduction
62gerente
611
210k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.2k
GraphQLとの向き合い方2022年版
quramy
44
13k
Building a Scalable Design System with Sketch
lauravandoore
461
33k
Writing Fast Ruby
sferik
628
61k
Testing 201, or: Great Expectations
jmmastey
42
7.2k
Building an army of robots
kneath
303
45k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Transcript
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
おしまい おしまい