MAUIに注目する C# Tokyoイベント Web開発者にお勧め .NET MAUI Blazor App

1. Web開発者にお勧め
.NET MAUI Blazor App
株式会社SAKURUG
エンジニアリングユニット
草場 友光
MAUIに注目する C# Tokyoイベント

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

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

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

5. Windowsで動かしてみた

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

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

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

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

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

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

12. Razorコンポーネントでデバイス情報の読み取り
<p>加速度計：@AccelLabel</p>
@code {
private string AccelLabel = string.Empty;
protected override void OnInitialized()
{
ToggleAccelerometer(Accelerometer.Default);
}
public void ToggleAccelerometer(IAccelerometer accelerometer)
{
if (accelerometer.IsSupported)
{
if (!accelerometer.IsMonitoring)
{
// Turn on accelerometer
accelerometer.ReadingChanged += Accelerometer_ReadingChanged;
accelerometer.Start(SensorSpeed.UI);
}
else
{
// Turn off accelerometer
accelerometer.Stop();
accelerometer.ReadingChanged -= Accelerometer_ReadingChanged;
}
}
}
}

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

14. おしまい
おしまい