Download to read offline
More Related Content
![[Cloud OnAir] BigQuery の仕組みからベストプラクティスまでのご紹介 2018年9月6日 放送](https://cdn.slidesharecdn.com/ss_thumbnails/dddddd-180906091548-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to Blazor WebAssembly と Windows Forms でのロジック共有例
Blazor WebAssembly と Windows Forms でのロジック共有例
- 1. Blazor WebAssembly と WindowsForms での ロジック共有例 2021-09-25 .NETラボ 勉強会 2021年9月 太田 浩一（@koudenpa）
- 2.
- 3.
- 4. 自己紹介 • 太田浩一 • @koudenpaTwitterなど 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とWindowsFormsでロジックを共有 • Blazor WebAssembly • Webブラウザで動く • Windows Forms • Windowsのデスクトップで動く • まぁまぁ違う実行環境 • どっちも（概ね）同じDLL
- 7. Windows Forms • ランタイムの図を貼る •-> しっくりくるのが無かった…… • だいたいこんな感じのはず Windows OS Windows Forms Application .NET 5 Runtime
- 8.
- 9.
- 10.
- 11.
- 12. .NETのメインストリーム • .NET Framework4.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 • ？？？ • 先の図に載っていない
- 18.
- 19. Blazor WebAssembly • .NETStandard を実装していることに変わりないらしい
- 20. 共有できるロジックを書くには？ • .NET Standardを対象にすればいいらしい • ターゲットフレームワーク
- 21. メジャーなライブラリの依存関係 • NET Standardの、いずれかのバージョンになっている事が多い •はず • NuGetパッケージの依存関係を見てみる
- 22.
- 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 Basic5 のゲーム • 色んなデータを読み込むもの • 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 • .NETStandard • 共有対象ロジックのライブラリ • Blazor • .NET 5 （Blazor WebAssembly） • Form • .NET 5 （Windows） • Linter • .NET 5 • マルチプラットフォームのデータ検証アプリケーション
- 31.
- 32.
- 33.
- 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テスト例 • テスト実行 • GitHubActions • PR時に実行 • ホスティング • Azure Static Web Apps • PR毎の環境を構築 • テストライブラリ • Cypress • PR毎の環境にアクセスしてテスト • ビジュアルテスト • Percy • テスト時のレンダリング結果に差が無いかチェック
- 37. E2Eテスト例: GitHub Actions •https://docs.github.com/ja/actions • Publicリポジトリなら無償でCIし放題 • 便利 • これで動かしている
- 38. E2Eテスト例: Azure StaticWeb 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のサーバサイドロジック • など
- 43.
- 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 Kirin970（少し前のハイエンド） 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. 終わり • ご清聴ありがとうございました • よいBlazorWebAssemblyライフを！
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