モノづくりの革新に向けたBlazorの導入の紹介と実践を勉強するための資料です。

1. Blazorを活用したモノづくり
向けのアプリ開発について
モノづくりBlazor勉強会1回目資料

2. Blazorとは？
ブラウザ
httpサーバ
C#(ASP .NET)
Java
Python
Javascript
ブラウザ
httpサーバ
C#(ASP .NET) C#
時々Javascript
従来のWEBアプリはクライアント側はJavascriptで処
理し、サーバ側を他の言語で行うことが多い。
Blazorはクライアント側もサーバ側もC#のみで処理
を記述することが可能。
つまり、単一の言語でWEBアプリの開発が可能に
なる。

3. Blazorにはいくつかの種類がある！
BlazorはWEBアプリであるが、WEBアプリのメリットを生かしたデスクトップアプリを開発することが可能。
⇒ WEBアプリでもデスクトップアプリでも、同じコード資産を共有できる！
Edgeの上で稼働するBlazor Web App
WPFフォームにBlazor Webview2コンポーネントを
配置したBlazor Hybrid

4. なぜ、Blazorに着目したのか？
今後のモノづくり（設計、製造、生産技術）は自動化、システム化が求められる。
⇒機械設計だけやっても、改善しない！
高齢化、人が少ない。
⇒やることだけが増える。ここからはスピード勝負！
デスクトップアプリやWEBアプリをWPFや.NET Coreで開発していたが・・・・
⇒Blazorをやることで開発リードタイムが半分になった！
による、お互いのスキルアップにつなげる。
込むことで、モノづくり革新の促進につなげる。

5. Blazor Hybridによるデスクトップアプリの
開発メリット
• BootstrapやJQueryといった、WEB上のオープンソースを活用できる。
• マウスのスクロールホイールでアプリを拡大・縮小が可能。
• ウィンドウのサイズに合わせた、柔軟なフォーミングが可能。
• WPFと同様、外部のDLL等も使用可能。
デメリットといえば・・・
双方向バインディングがやりづらい？？？
でも、今のところはその程度。
ウィンドウサイズに合わせて
コンポーネントの位置が自動的
に
リプレイスできる。

6. デスクトップアプリで
HTMLエディタを実装してみる！
HTMLエディタなんて、難しくてできないよ。
テキストボックスにどうやって、絵やテキスト
の
色付けを行うの！？
インターネットに無償公開されているオープ
ンソースのHTMLエディタを活用する方法
があれば、簡単にできるんじゃない？

7. HTMLエディタはSummernoteがおすすめ！
Summernote - Super Simple WYSIWYG editor Razorファイル(ページファイル)に、下記の
数行を追加するだけで実装完了！

8. Blazor Hybridを使えば・・・
WEB上のオープンソースを活用して多くの機能を簡単に実装が可能！
⇒コードの記載の手間を減らすことができる。
⇒開発リードタイムの短縮が可能
さらに・・・・
CSSやWEBのコンポーネントを活用するため、デザイン性にあふれたフォー
ミングが可能となる。