.NET MAUI＋Blazor を使ってみた

mobile.stmn #1　2023/7/14

Transcript

1. Tiny Mouse .NET MAUI＋Blazor を使ってみた mobile.stmn #1 2023/7/14
2. n @tinymouse_jp n SI 企業の SE n 日曜プログラマ n 二児の父 n 静岡県浜松市出身 n 東京都品川区在住。名古屋市在住。 n Windows 愛用。iPhone Android スマホ n Android の会浜松支部、Hamamatsu.js 、 よちよちサンデープログラミングの会→なごや個人開発者の集い Tiny Mouse
3. モバイルアプリの開発手段・・どれを使おうか l OS ネイティブ l ウェブアプリ l Cordova l Flutter l React Native l .NET MAUI
4. OS ネイティブ n OS メーカーが用意した開発ツー ルを使って作成する n 作成されたアプリを実機にインス トールする n OS の機能を直接呼出できる
5. ウェブアプリ n HTML＋JavaScript で作成する n ウェブサーバに配置しておく。実 行時にブラウザが受信する n ブラウザがコードを実行する n ブラウザが用意していない OS の 機能は使えない
6. Cordova n HTML＋JavaScript で記述する n OS の実行ファイルができる＝ス トアなどで配布できる n プラグインを使えばブラウザが用 意していない OS の機能が使える
7. .NET MAUI (Multi-Platform App UI) n Microsoft が提供。2022 年に正式リリース n Android、iOS、macOS、Windows で実行できるアプリ を開発できる n XAML＋C# で記述する。Xamarin.Forms の後継 n XAML で UI を書くのは、個人的につらい
8. .NET MAUI n XAML＋C# で記述する n Android、iOS、macOS、 Windows で実行できるアプリを開 発できる
9. .NET Blazor n Microsoft が提供。2018 年から n ウェブブラウザで実行されるアプリを開発できる n HTML＋C# で記述する n サーバで実行されて HTML がレンダリングされるタイプ 「Blazor Server アプリ」と、クライアントのブラウザ上で 実行されるタイプ「Blazor WebAssembly アプリ」がある
10. Blazor WebAssembly n HTML＋C# で記述する n ウェブサーバに配置しておく。実 行時にブラウザが受信する n ブラウザがコードを実行する
11. .NET MAUI＋Blazor n 「Blazor Hybrid」ともいう n .NET MAUI アプリのウィンドウ上に BlazorWebView を 置いて、そこで Blazor アプリが動く＝Android、iOS、 macOS、Windows で実行できるアプリを開発できる n OS の機能を直接呼出するコードが書ける
12. .NET MAUI＋Blazor n HTML＋C# で記述する n OS の実行ファイルができる＝ス トアなどで配布できる n ブラウザが用意していない OS の 機能が使える
13. Qiita に書いた https://qiita.com/tinymouse/items/69ae9a2c7761a83c0529 .NET MAUI＋Blazor を始めてみた
14. HTML＋C# でコードを書く @page "/counter" <p role="status">Current count: @currentCount</p> <button class="btn btn-primary" @onclick="IncrementCount">Click me</button> @code { private int currentCount = 0; private void IncrementCount() { currentCount++; } } .NET MAUI＋Blazor n HTML＋JavaScript で書くのと似ている n C# プログラマが JavaScript を覚えなくていい n CSS が普通に使える
15. コンポーネントを作って使う <p>Current count: @currentCount</p> <button class="btn btn-primary" @onclick="IncrementCount">Click me</button> @code { int currentCount = 0; [Parameter] public int IncrementAmount { get; set; } = 1; void IncrementCount() { .NET MAUI＋Blazor <Counter IncrementAmount="10" /> Counter.razor n コンポーネント＝独自タグを作って使える
16. サードパーティのコンポーネントを使う .NET MAUI＋Blazor
17. Qiita に書いた https://qiita.com/tinymouse/items/01b1bc4a74429ddc0b17 .NET MAUI＋Blazor を始めてみた
18. public partial class SpeechToTextService { private SpeechRecognitionListener listener; private SpeechRecognizer speechRecognizer; public partial async Task<string> Listen(CultureInfo culture, IProgress<strin { var taskResult = new TaskCompletionSource<string>(); listener = new SpeechRecognitionListener { .NET MAUI＋Blazor プラットフォームごとの コードを書く
19. いいところ、残念なところ .NET MAUI＋Blazor n 同じコードで異なる OS のアプリを作ることができる n HTML＋JavaScript で書くのと似ている n C# で書ける n 実行ファイルのサイズが大きい n 起動して実行されるまで遅い n WinForms のようにビジュアルにデザインできない n Cordova や Electron が安定して使えれば、それでいい ような気がする
20. .NET MAUI＋Blazor を使ってみよう