.NETラボ2022年6月 Web開発者が始める .NET MAUI Blazor App

1. Web開発者が始める.NET
MAUI Blazor App
株式会社SAKURUG
エンジニアリングユニット
草場 友光
.NET ラボ 2022年6月

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

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

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

5. 今日の目的
• .NET MAUIがとうとうGAしました。
• .NET MAUI Blazor Appはその中でもBlazor技術を使い
Android、iOS向けのモバイル開発ができるフレームワークで
す
• Web開発者視点でどれだけ違和感なくモバイル開発に入ってい
けるかを紹介していきます。

6. 本日やってることは。。。
• Blazor WebAssemblyで実装してWebページとして公開しても
変わらないとかいう突っ込みはなしで！
• きっと、それぞれのプラットフォームでのネイティブアプリ
ケーションになるというところに価値があるのです。

7. .NET MAUIとは
ネイティブのモバイルアプリやデスクトップアプリを作成するためのクラスプラットフォー
ムフレームワーク

8. .NET MAUI Blazor Appとは？
• Android、iOS、macOS、Windowsにデプロイできる
• Razorコンポーネントを使用可能
• Blazor WebAssemblyと同じ感覚でアプリケーション開発可能
• あくまでUIを構築する手段としてのBlazor
• .NET MAUIの提供するGPSや加速度APIなどのネイティブAPI
へのアクセスを含むさまざまなAPIが使用可能

9. .NET MAUI Blazor Appのしくみ
BlazorWebVeiwコントロール
Blazorコード

10. プロジェクト構成
Platforms・Resourcesという見慣れ
ないフォルダ
他にも、MainPage.xamlや
Program.csではなく
MauiProgram.csがエントリーポイ
ントになっている
基本的には、Blazor WebAssembly
のプロジェクト構造に似てる！

11. 前提条件
• Visual Studio2022 Previewおよび.NET Multi-Platform App
UI開発ワークロードをインストール
• Microsoft Edge WebView2
• Android Emulatorのパフォーマンス向上のためHyper-Vおよ
びHAXM(Intel CPU)の有効化

12. プロジェクトを作ろう
• .NET MAUI Blazorアプリのテンプレートを選択

13. Windowsで動かしてみた

14. Androidエミュレータで動かしてみた

15. もちろん、ホットリロードもできる！
• Androidエミュレータに対してホットリロード

16. WebAPIをコールしてみた
• 通常通りの実装でWebAPIを呼べる
• だって、C#なんだもん

17. Razorコンポーネント
• WebAPIからの情報を表示す
るだけならBlazor
WebAssemblyと全く同じ
• これで、モバイル向けネイ
ティブアプリケーションがで
きるのはすごい

18. UIコンポーネントを入れてみた
• Blazorで画面をつくるためにHTML使いたくないよぉ！
• 個人的に使いなれた「Radzon」を入れてみる

19. Radzen導入方法
• 「Radzen.Blazor」をNuget

20. Radzen導入方法
• 「_Imports.razor」に@using Radzenと@using
Radzen.Blazorの2行を追加

21. Radzen導入方法
• 「wwwroot/index.html」にcssとjsを追加

22. Radzenを使う
• Radzenのタグが使えることを確認しよう

23. デバイス情報の読み取り
• DeviceInfoで読み取りができる。
• 詳しくはDocs参照

24. デバイスセンサーへのアクセス
• 例えば加速度センサーDocsのサンプル
日本語訳が微妙すぎてこの引数がよ
くわからん
次のコード例は、加速度計の変更を監視する方法を示しています。 イン
スタンスは Accelerometer.Default メソッドに
ToggleAccelerometer 渡されます。
？？
次のコード例は、加速度計の変更を監視する方法を示しています。 イン
スタンスは ToggleAccelerometerメソッドに
Accelerometer.Default が渡されます。

25. Android実機で動かしてみたその1
• 物理デバイスでデバッグする方法
ビルド番号を7回タップ→
開発者向けオプションメ
ニューが出る

26. Android実機で動かしてみたその1

27. Android実機で動かしてみたその1

28. Android実機で動かしてみたその2
• 署名なしでビルド→apkを作る
• テスト用途ですので公開用には署名してビルドしてください

29. Android実機で動かしてみたその2

30. Android実機で動かしてみたその2

31. 参考文献
• Radzen Blazor Componets Get Started
• Android用の .NET MAUI アプリを発行する
• BlazorWebView を使用して .NET MAUI アプリで Blazor
Web アプリをホストする
• .NET MAUIBlazor アプリを構築する

32. おしまい
おしまい