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
60
【LT会】インプット・アウトプットどうしてる?
tinymouse
0
32
今年がんばったこと
tinymouse
0
160
【LT会】この技術書がすごい
tinymouse
1
170
蔵書管理アプリを作り直した
tinymouse
1
920
Windows アプリの開発手段の選択肢をまとめてみた
tinymouse
0
130
蔵書管理アプリを作りました
tinymouse
0
630
Google Apps Script アプリを配付する
tinymouse
0
110
蔵書管理アプリを作っています
tinymouse
1
520
Other Decks in Technology
See All in Technology
興味の胞子を育て 業務と技術に広がる”きのこ力”
fumiyasac0921
0
260
20250719_JAWS_kobe
takuyay0ne
1
170
分散トレーシングによる コネクティッドカーのデータ処理見える化の試み
thatsdone
0
260
The Madness of Multiple Gemini CLIs Developing Simultaneously with Jujutsu
gunta
1
2.8k
モバイルゲームの開発を支える基盤の歩み ~再現性のある開発ラインを量産する秘訣~
qualiarts
0
570
AWS表彰プログラムとキャリアについて
naoki_0531
1
140
Turn Your Community into a Fundraising Catalyst for Black Philanthropy Month
auctria
PRO
0
180
CSPヘッダー導入で実現するWebサイトの多層防御:今すぐ試せる設定例と運用知見
llamakko
1
250
東京海上日動におけるセキュアな開発プロセスの取り組み
miyabit
0
190
私とAWSとの関わりの歩み~意志あるところに道は開けるかも?~
nagisa53
1
130
公開初日に個人環境で試した Gemini CLI 体験記など / Gemini CLI実験レポート
you
PRO
3
540
claude codeでPrompt Engineering
iori0311
0
520
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
KATA
mclloyd
30
14k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.3k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Become a Pro
speakerdeck
PRO
29
5.4k
Music & Morning Musume
bryan
46
6.7k
The Cost Of JavaScript in 2023
addyosmani
51
8.6k
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 を使ってみよう