WebブラウザでC#実行 WebAssemblyの技術
1 like1,850 views
Cross-Platform Developers Communityでお話した資料になります https://elv.connpass.com/event/150777/
![参考資料
WebAssembly: 「なぜ」と「どうやって」 [翻訳記事]
https://dev.to/nabbisen/webassembly--3385
Doom3のデモ
https://wasm.continuation-labs.com/d3demo/](https://image.slidesharecdn.com/webassembly-191118121542/85/Web-C-WebAssembly-23-320.jpg)
WebブラウザでC#実行 WebAssemblyの技術
- 3. Part 01 Webのクロスプラットフォーム CONTENTS WebブラウザでC#実行 WebAssemblyの技術 Part 02 WebAssemblyの技術 Part 03 ASP.NET Core Blazor WebAssemblyとは Part 04 まとめ
- 13. バイナリなのにどうやって各種CPUへ対応できるのか WebAssemblyの技術 実はWebAssembly は 本来の意味でのアセンブリ言語ではなく、あくまでサーバー側がブ ラウザ側に対応したバイナリファイルを出力しています。 （x86、x64、ARMなどのコンパイルターゲットが不明なため） 実際にどのマシンで実行されるかわからないため、ブラウザが WebAssemblyのバイナリ コードをダウンロードした時点で、実行可能なアセンブリに変換がなされます。 そのため、CPUの種類に影響されない実行が可能となっています。
- 14. WebAssemblyの期待される活用範囲 WebAssemblyの技術 配布されるのがアセンブリのため、コードのセキュリティ性が高いうえ、従来のJavascriptでの 実行では遅かったり、難しい部分に対して置き換えて実行させることで速度の向上が期待でき ます。 実行速度はC／C++のソフトウェア速度には劣りますが、２０％程度の負荷程度となっていま す。 また、OSとは切り離されたブラウザ上での実行となるため、安全な実行となります。 （クラッシュしても実行クライアントに大きな影響を与えない） そのため、今までサーバー側で処理していた演算をクライアント側に分散させたり、一時的な オフライン処理はもちろん、独立したクライアントアプリとしても実行可能となります。 （クライアントへ依存した分、WASMファイルは大きくなり、ロード時間もかかります） 例）ゲーム / 動画編集 / 3D レンダリング / 音楽編集など 既にAutoCADやDoom3のデモが移植されています（ダウンロードに時間がかかる） https://wasm.continuation-labs.com/d3demo/
- 15. WebAssemblyの制限 WebAssemblyの技術 便利なWebAssemblyですが、やはりそれなりの制限はかかります。 WebAssemblyからは、ブラウザ側のDOM / WebGL / WebAudio などには直接アクセスはでき ません、Javascript経由で実行する必要があります。 WebAssembly対応ブラウザのシェアは徐々に増えてはいますが、実行前にチェック処理などが 必要となります。 現時点で、WebAssembly を完全にサポートしている言語は C / C++ / Rustしかありません。 Kotlin / .NETは現在開発中 → ASP.NET Core Blazor Serverがリリース！（Blazor Client（WebAssembly）は来年予定）
- 16. Part.03 ASP.NET Core Blazor WebAssemblyとは
- 17. ASP(Active Server Pages) ASP.NET WebForm ASP.NET MVC ASP.NET Core Blazor Server ASP.NET Core MVC ASP.NET Core Blazor WebAssembly 1996 2002 2009 2016 2019 2020 ASP.NETの歴史 VBScript,JavaScript ASP.NET 3.5SP1-4.6 MVC1-MVC5 .NET Core 3.0 ASP.NET 1.0-3.5,Ajax VB.NET,C# .NET Core 1.0,MVC5,SPA .NET Core 3.1
- 18. ASP.NET Core Blazor WebAssembly ASP.NET Core Blazor WebAssemblyとは RazorファイルにBlazor構文で、HTMLと混在して記述する。 内部の@code内にC#が記述できます。 C#の依存関係、.NET ランタイムがWASMファイルでダウンロードされ、WebAssemblyに よりクライアント側で実行されます。 完全にWeb分離した場合は初回のダウンロードだけで、 すべて完結することが可能。 （現時点ではURL Rewriteなどインストールが必要）
- 19. ASP.NET Core Blazor Server 随時WebAssemblyでのクライアント動作も使いつつ、サーバー処理はSPA（SignalR）で 通信してサーバー処理を実行する。 ASP.NET Core Blazor WebAssemblyとは
- 20. ASP.NET Core Blazor WebAssembly メリット ・.NETサーバー側に依存せずに単体の動作が可能。 ・クライアントにダウンロードされた後は、切断されてもページが完全に機能する。 ・クライアントのリソースと機能を完全に活用が可能。（Javascript制御） ・アプリ配布した後の動作にASP.NET CoreのWeb サーバーは必要ない。 デメリット ・WebAssemblyに対応したブラウザバージョンが必要。 ・使える機能はクライアントのブラウザーが持っている機能までに制限される。 ・依存関係を使いすぎると、ダウンロードサイズが大きくなり、初回の読込みに時間がかかる。 ・.NETランタイムとツールのサポートやデバッグ機能に制限がある。 ASP.NET Core Blazor WebAssemblyとは
- 21. ASP.NET Core Blazor WebAssembly メリット ・.NETサーバー側に依存せずに単体の動作が可能。 ・クライアントにダウンロードされた後は、切断されてもページが完全に機能する。 ・クライアントのリソースと機能を完全に活用が可能。（Javascript制御） ・アプリ配布した後の動作にASP.NET CoreのWeb サーバーは必要ない。 デメリット ・WebAssemblyに対応したブラウザバージョンが必要。 ・使える機能はクライアントのブラウザーが持っている機能までに制限される。 ・依存関係を使いすぎると、ダウンロードサイズが大きくなり、初回の読込みに時間がかかる。 ・.NETランタイムとツールのサポートやデバッグ機能に制限がある。 → 結局はWebAssemblyなので、ほぼ同じメリット・デメリットとなるが、 C#と.NET FrameWorkを使って開発ができるが一番のメリット！ ASP.NET Core Blazor WebAssemblyとは
- 22. 01 Javascriptをなるべく記述はしなくてもよくなるが、連携は必要なので、それなり にJavascriptの理解はまだ必要 まとめというか所感 02 .NET FrameWorkは強いが、依存関係を増やしすぎると起動が重くなるので注意 03 独立したクライアントとして利用するには、配布方法や動作機能がまだ未成熟？ なので、正式リリースするまではBlazor Clientのみの開発は控えるべき （PWAとの連携などがうまく出来上がれば流行るかも） 04 C#とBlazor構文のみで、少なくともTypeScriptはもう書かなくてよくなる未来は すでに来ているはず
- 24. Thank you for your kind attention ご清聴ありがとうございました！