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
970
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
GitHub Copilot の概要
tomokusaba
1
160
ASP.NETアプリケーションのモダナイズ インフラ編
tomokusaba
1
510
Azure AI Foundry Agent Serviceを使用してコードファースト アプリを構築する
tomokusaba
1
310
Part1 GitHubってなんだろう?その1
tomokusaba
3
980
Part1 GitHubってなんだろう?その2
tomokusaba
2
950
Part2 GitHub Copilotってなんだろう
tomokusaba
2
1.1k
Global Azure2025(GitHub Copilot ハンズオン)
tomokusaba
2
950
ASP.NETアプリケーションのモダナイゼーションについて
tomokusaba
0
350
Fluent UI Blazor 5 (alpha)の紹介
tomokusaba
0
300
Other Decks in Programming
See All in Programming
[Codecon - 2025] Como não odiar seus testes
camilacampos
0
100
効率的な開発手段として VRTを活用する
ishkawa
1
180
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
570
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
akinko_0915
0
170
코딩 에이전트 체크리스트: Claude Code ver.
nacyot
0
1k
[SRE NEXT] 複雑なシステムにおけるUser Journey SLOの導入
yakenji
0
810
フロントエンドのパフォーマンスチューニング
koukimiura
6
2.3k
CLI ツールを Go ライブラリ として再実装する理由 / Why reimplement a CLI tool as a Go library
ktr_0731
3
650
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
17
6.1k
商品比較サービス「マイベスト」における パーソナライズレコメンドの第一歩
ucchiii43
0
220
202507_ADKで始めるエージェント開発の基本 〜デモを通じて紹介〜(奥田りさ)The Basics of Agent Development with ADK — A Demo-Focused Introduction
risatube
PRO
5
1.2k
Android 16KBページサイズ対応をはじめからていねいに
mine2424
0
740
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
YesSQL, Process and Tooling at Scale
rocio
173
14k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
The Invisible Side of Design
smashingmag
301
51k
A better future with KSS
kneath
238
17k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Become a Pro
speakerdeck
PRO
29
5.4k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
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
おしまい おしまい