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
.NET MAUI+Blazor を使ってみた
Search
Tiny Mouse
July 14, 2023
Technology
0
160
.NET MAUI+Blazor を使ってみた
mobile.stmn #1 2023/7/14
Tiny Mouse
July 14, 2023
Tweet
Share
More Decks by Tiny Mouse
See All by Tiny Mouse
今年がんばったこと
tinymouse
0
58
【LT会】インプット・アウトプットどうしてる?
tinymouse
0
31
今年がんばったこと
tinymouse
0
160
【LT会】この技術書がすごい
tinymouse
1
170
蔵書管理アプリを作り直した
tinymouse
1
920
Windows アプリの開発手段の選択肢をまとめてみた
tinymouse
0
130
蔵書管理アプリを作りました
tinymouse
0
620
Google Apps Script アプリを配付する
tinymouse
0
110
蔵書管理アプリを作っています
tinymouse
1
520
Other Decks in Technology
See All in Technology
マルチプロダクト環境におけるSREの役割 / SRE NEXT 2025 lunch session
sugamasao
1
320
QuickSight SPICE の効果的な運用戦略~S3 + Athena 構成での実践ノウハウ~/quicksight-spice-s3-athena-best-practices
emiki
0
250
スタートアップに選択肢を 〜生成AIを活用したセカンダリー事業への挑戦〜
nstock
0
280
Rethinking Incident Response: Context-Aware AI in Practice
rrreeeyyy
1
300
microCMSではじめるAIライティング
himaratsu
0
120
CDKコード品質UP!ナイスな自作コンストラクタを作るための便利インターフェース
harukasakihara
2
170
開発生産性を測る前にやるべきこと - 組織改善の実践 / Before Measuring Dev Productivity
kaonavi
14
8.3k
〜『世界中の家族のこころのインフラ』を目指して”次の10年”へ〜 SREが導いたグローバルサービスの信頼性向上戦略とその舞台裏 / Towards the Next Decade: Enhancing Global Service Reliability
kohbis
2
1k
成長し続けるアプリのためのテストと設計の関係、そして意思決定の記録。
sansantech
PRO
0
140
ABEMAの本番環境負荷試験への挑戦
mk2taiga
5
760
サイバーエージェントグループのSRE10年の歩みとAI時代の生存戦略
shotatsuge
4
780
Four Keysから始める信頼性の改善 - SRE NEXT 2025
ozakikota
0
180
Featured
See All Featured
The Cult of Friendly URLs
andyhume
79
6.5k
Designing for humans not robots
tammielis
253
25k
Into the Great Unknown - MozCon
thekraken
40
1.9k
GitHub's CSS Performance
jonrohan
1031
460k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
830
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
970
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Building Applications with DynamoDB
mza
95
6.5k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
A Tale of Four Properties
chriscoyier
160
23k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Transcript
Tiny Mouse .NET MAUI+Blazor を使ってみた mobile.stmn #1 2023/7/14
n @tinymouse_jp n SI 企業の SE n 日曜プログラマ n 二児の父
n 静岡県浜松市出身 n 東京都品川区在住。名古屋市在住。 n Windows 愛用。iPhone Android スマホ n Android の会浜松支部、Hamamatsu.js 、 よちよちサンデープログラミングの会→なごや個人開発者の集い Tiny Mouse
モバイルアプリの開発手段・・どれを使おうか l OS ネイティブ l ウェブアプリ l Cordova l Flutter
l React Native l .NET MAUI
OS ネイティブ n OS メーカーが用意した開発ツー ルを使って作成する n 作成されたアプリを実機にインス トールする n
OS の機能を直接呼出できる
ウェブアプリ n HTML+JavaScript で作成する n ウェブサーバに配置しておく。実 行時にブラウザが受信する n ブラウザがコードを実行する n
ブラウザが用意していない OS の 機能は使えない
Cordova n HTML+JavaScript で記述する n OS の実行ファイルができる=ス トアなどで配布できる n プラグインを使えばブラウザが用
意していない OS の機能が使える
.NET MAUI (Multi-Platform App UI) n Microsoft が提供。2022 年に正式リリース n
Android、iOS、macOS、Windows で実行できるアプリ を開発できる n XAML+C# で記述する。Xamarin.Forms の後継 n XAML で UI を書くのは、個人的につらい
.NET MAUI n XAML+C# で記述する n Android、iOS、macOS、 Windows で実行できるアプリを開 発できる
.NET Blazor n Microsoft が提供。2018 年から n ウェブブラウザで実行されるアプリを開発できる n HTML+C#
で記述する n サーバで実行されて HTML がレンダリングされるタイプ 「Blazor Server アプリ」と、クライアントのブラウザ上で 実行されるタイプ「Blazor WebAssembly アプリ」がある
Blazor WebAssembly n HTML+C# で記述する n ウェブサーバに配置しておく。実 行時にブラウザが受信する n ブラウザがコードを実行する
.NET MAUI+Blazor n 「Blazor Hybrid」ともいう n .NET MAUI アプリのウィンドウ上に BlazorWebView
を 置いて、そこで Blazor アプリが動く=Android、iOS、 macOS、Windows で実行できるアプリを開発できる n OS の機能を直接呼出するコードが書ける
.NET MAUI+Blazor n HTML+C# で記述する n OS の実行ファイルができる=ス トアなどで配布できる n
ブラウザが用意していない OS の 機能が使える
Qiita に書いた https://qiita.com/tinymouse/items/69ae9a2c7761a83c0529 .NET MAUI+Blazor を始めてみた
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 が普通に使える
コンポーネントを作って使う <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 コンポーネント=独自タグを作って使える
サードパーティのコンポーネントを使う .NET MAUI+Blazor
Qiita に書いた https://qiita.com/tinymouse/items/01b1bc4a74429ddc0b17 .NET MAUI+Blazor を始めてみた
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 プラットフォームごとの コードを書く
いいところ、残念なところ .NET MAUI+Blazor n 同じコードで異なる OS のアプリを作ることができる n HTML+JavaScript で書くのと似ている
n C# で書ける n 実行ファイルのサイズが大きい n 起動して実行されるまで遅い n WinForms のようにビジュアルにデザインできない n Cordova や Electron が安定して使えれば、それでいい ような気がする
.NET MAUI+Blazor を使ってみよう