Blazor WebAssembly と Windows Forms でのロジック共有例
- 1. Blazor WebAssembly と Windows Forms での ロジック共有例 2021-09-25 .NETラボ 勉強会 2021年9月 太田 浩一（@koudenpa）
- 2. 目次 • 自己・ネタ紹介 • .NETのランタイム • 実際の共有例
- 3. 自己・ネタ紹介
- 4. 自己紹介 • 太田浩一 • @koudenpa Twitterなど https://twitter.com/koudenpa • @7474 GitHubなど https://github.com/7474 • 株式会社はてな • Webアプリケーションエンジニア • 月並みですがエンジニア募集中 • https://hatenacorp.jp/recruit • 仕事 • Perl、TypeScript、Go、YAML、HCL、AWS辺りが主 • C#、Azureはあんまり
- 5. .NET • 趣味でやってる • たまにAzure周りの勉強会をふらついたり • 今回のネタも趣味のもの • Visual Studioで快適に開発できるのが好き
- 6. ネタ紹介 • Blazor WebAssemblyとWindows Formsでロジックを共有 • Blazor WebAssembly • Webブラウザで動く • Windows Forms • Windowsのデスクトップで動く • まぁまぁ違う実行環境 • どっちも（概ね）同じDLL
- 7. Windows Forms • ランタイムの図を貼る • -> しっくりくるのが無かった…… • だいたいこんな感じのはず Windows OS Windows Forms Application .NET 5 Runtime
- 10. .NETのランタイム
- 12. .NETのメインストリーム • .NET Framework 4.8, .NET Core 3.1 -> .NET 5 -> .NET 6 … .NET Framework 4.8 .NET Core 3.1 .NET 5 .NET 6 .NET Core 1.0 .NET Framework 1.0
- 13. .NETのメインストリーム • 古くからのWindowsでは.NET Framework • これまでのマルチプラットフォームは.NET Core • 今後は.NET 5～と考えておけばいい • これが普段見かける.NET • この実装とは別に仕様がある
- 14. .NETの仕様 • .NET Standard • https://dotnet.microsoft.com/platform/dotnet-standard • .NETの実装の共通の仕様 • 先の.NET FrameorkもCoreも.NET 5～もこれを実装している
- 15. 様々なランタイム
- 16. 様々なランタイム • この辺りの情報はいろんなところに書いてある • https://docs.microsoft.com/ja-jp/dotnet/standard/net-standard • https://docs.microsoft.com/ja-jp/dotnet/core/introduction
- 17. 今回話題にするもののランタイム • Windows Forms • .NET 5（のWindows版） • Blazor WebAssembly • ？？？ • 先の図に載っていない
- 19. Blazor WebAssembly • .NET Standard を実装していることに変わりないらしい
- 20. 共有できるロジックを書くには？ • .NET Standard を対象にすればいいらしい • ターゲットフレームワーク
- 21. メジャーなライブラリの依存関係 • NET Standardの、いずれかのバージョンになっている事が多い • はず • NuGetパッケージの依存関係を見てみる
- 22. Newtonsoft.Json • .NET Standard以前をサポート • 複雑すぎた
- 23. 昨今はここだけでOK • > 最も広く使用されているライブ ラリは、最終的に .NET Standard 2.0 と .NET 5 の両方 のマルチターゲットになりま す。 .NET Standard 2.0 をサ ポートすると、最大のリーチに なります。
- 24. まとめると • https://docs.microsoft.com/ja-jp/dotnet/standard/net-standard#net- 5-and-net-standard • 先の引用もここ • 色々なランタイムでロジック共有を必要としない場合 • 実行に使うランタイム（今後は.NET 5~）をターゲットにする • 実行時例外のリスクが低い安全な開発を行える • 共有したい場合 • .NET Standard 2.0をターゲットにする
- 25. Blazor WebAssembly留意点 • https://docs.microsoft.com/ja- jp/aspnet/core/blazor/?WT.mc_id=dotnet-35129- website&view=aspnetcore-5.0#code-sharing-and-net-standard • >Web ブラウザー内で使用できない API (たとえば、ファイル システムへのア クセス、ソケットを開く機能、スレッドなど) からは、 PlatformNotSupportedException がスローされます。 • 大き目の制限がある • この制限は外れることはない、はず • ブラウザのサンドボックスで動くので
- 26. 実際の共有例
- 27. ネタ • 昔好きだったVisual Basic 5 のゲーム • 色んなデータを読み込むもの • GPLv3 • 動機 • Webブラウザでそのデータを見たい • 発想 • VB->.NETコンバート • Blazorで動かせば見られるのでは？
- 28. 結果と展開 • 結果 • Blazorで動いて見られた • 展開 • どうせならゲーム本体も移植したい • VB5ならWindows Formsに
- 29. リポジトリなど • https://github.com/7474/SRC • VB5のゲーム？ • SRC（Simulation RPG Construction） • スーパーロボット大戦のようなもの • 色んな創作データを読み込める • データのビューワ • 一応動いている • https://srcv.7474.jp/ • ゲーム自体の移植 • やってる途中 • だれてるので気合入れる意味もあってこの場でしゃべっている
- 30. ソリューション構成 • Core • .NET Standard • 共有対象ロジックのライブラリ • Blazor • .NET 5 （Blazor WebAssembly） • Form • .NET 5 （Windows） • Linter • .NET 5 • マルチプラットフォームのデータ検証アプリケーション
- 34. Blazorコンポーネントのテスト • https://docs.microsoft.com/ja- jp/aspnet/core/blazor/test?view=aspnetcore-5.0 • 単体テスト • bUnit • E2Eテスト • Selenium など
- 35. ここでBlazor WebAssembly留意点 • C#コードとしてのテストでは保障できない部分がある • >Web ブラウザー内で使用できない API (たとえば、ファイル システムへのア クセス、ソケットを開く機能、スレッドなど) からは、 PlatformNotSupportedException がスローされます。 • これをフォローするにはE2Eテスト
- 36. E2Eテスト例 • テスト実行 • GitHub Actions • PR時に実行 • ホスティング • Azure Static Web Apps • PR毎の環境を構築 • テストライブラリ • Cypress • PR毎の環境にアクセスしてテスト • ビジュアルテスト • Percy • テスト時のレンダリング結果に差が無いかチェック
- 37. E2Eテスト例: GitHub Actions • https://docs.github.com/ja/actions • Publicリポジトリなら無償でCIし放題 • 便利 • これで動かしている
- 38. E2Eテスト例: Azure Static Web Apps • https://docs.microsoft.com/ja-jp/azure/static-web-apps/overview • Azureの静的サイト公開サービス • 裏番組？ のJAUGでよく見かける • PRするとそのPRの環境が立つ • これがお気に入り • PR毎にE2Eテストに使える
- 39. E2Eテスト例: Cypress • https://www.cypress.io/ • ヘッドレスブラウザを使ってWebサービスをテスト • 同種のライブラリはいくつもあるが感触はよい • 最低限をやっている • ページが表示される • スナップショットを撮る
- 40. E2Eテスト例: Percy • https://percy.io/ • ビジュアルテストを管理してくれるサービス • Cypressで撮ったスナップショットを比較できる
- 41. E2Eテスト例: 体験 • 最低限派手に壊れていないこと安心感 • SaaSを使えばCI構築の手間も少ない • なかなかいい
- 42. 応用 • 今回はWebAssemblyとWindows Formsだった • 他のパターンの共有も同じ要領でできると思う • WebAssemblyとBlazor Server • WebAssemblyとAPIのサーバサイドロジック • など
- 44. Shift_JIS • 古いWindows向けアプリケーション • 当然文字コードはShift_JIS • 今どきはUTF-8が望ましく…… • .NETにはSystem.Text.Encodingがある • 変換すればいいじゃん？ • できた • UTF-8のページにShift_JISなファイル内容が表示されて不思議な気分
- 46. スマホとデスクトップの処理速度 • 同じBlazor WebAssemblyのアプリを動かす • デスクトップの方が全然早い • シングルスレッドっぽいしこの差は暫く埋まらなさそう
- 47. ここで処理時間を表示するようにした環境 • https://icy-coast-005428600-409.eastasia.azurestaticapps.net/titles/ ～～ i7-8565U Kirin 970（少し前のハイエンド） URLは勉強会時のものです PRが閉じると無効になります
- 48. なお見た目が変わったのでテストが落ちる • PR https://github.com/7474/SRC/pull/409 • 落ちたテストのページ • 差がOKならApproveするとグリーンに • 今回はマージしない変更なのでそのまま
- 49. まとめ
- 50. まとめ • 今後の.NETは5, 6, 7…だが • .NET Standardのロジックの可搬性の高さが生きる場面もある • 非互換APIのテストは工夫したい • 移植の余地があるプロジェクトのターゲット • .NET 5ではなくStandardにしておく • はまる場面もあるのではないかと思う • Windows FormsでなくてUnityで動かすとか
- 51. 終わり • ご清聴ありがとうございました • よいBlazor WebAssemblyライフを！
Editor's Notes
- #20: メモ.NET 5 https://docs.microsoft.com/ja-jp/aspnet/core/blazor/?view=aspnetcore-5.0 https://docs.microsoft.com/ja-jp/aspnet/core/blazor/hosting-models?view=aspnetcore-5.0 https://docs.microsoft.com/ja-jp/aspnet/core/blazor/?view=aspnetcore-5.0 https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor