HybridWebViewでJSベースのView開発 / Development JavaScript based View with HybridWebView

2024/09/28
https://dotnetlab.connpass.com/event/329105/
のLTで発表

1. HybridWebViewで JSベースのView開発 .NETラボ 勉強会 2024年9月 当日LT ちゅうこ / yamachu
2. 自己紹介 経歴 • Xamarin歴 2014- • Microsoft MVP 2018- ちゅうこ （山田 裕介） GitHub: yamachu X(Twitter): y_chu5 趣味 • ポケカ、ゲーム • GitHubのExploreのだら見
3. HybridWebView • WebView 内のコンテンツの JavaScript コードと、 ホストの C# コード間の通信を可能にするコントロール ◦ 例えば、WebView 上の React アプリケーションと C# 間で通信が可能に • アプリの UI の一部として利用が可能 ◦ HybridWebView 自体がコントロールであるため、 .NET MAUIの他のコントロールと共存が可能 ◦ 複雑な UI の実装を JavaScript アプリケーションに委譲し、 ロジック部分を C# のような使い方も可能 • .NET 9 Preview 7 以降で利用可能
4. HybridWebView を試す 1. .NET MAUI プロジェクトの作成 2. プロジェクトに Web アプリケーションのコンテンツを追加 3. HybridWebView コントロールの配置 4. HybridWebView API を使用するコードの追加
5. HybridWebView を試す 1. .NET MAUI プロジェクトの作成 2. プロジェクトに Web アプリケーションのコンテンツを追加 3. HybridWebView コントロールの配置 4. HybridWebView API を使用するコードの追加
6. .NET MAUI プロジェクトの作成 $ dotnet --version 9.0.100-rc.1.24452.12 $ dotnet workload install maui $ dotnet new maui
7. HybridWebView を試す 1. .NET MAUI プロジェクトの作成 2. プロジェクトに Web アプリケーションのコンテンツを追加 3. HybridWebView コントロールの配置 4. HybridWebView API を使用するコードの追加
8. プロジェクトに Web アプリケーションのコンテンツを 追加 https://learn.microsoft.com/ja-jp/dotnet/maui/user-interface/controls/hybridwebview?view=net-mau i-9.0&viewFallbackFrom=net-maui-8.0
9. プロジェクトに Web アプリケーションのコンテンツを 追加 https://learn.microsoft.com/ja-jp/dotnet/maui/user-interface/controls/hybridwebview?view=net-mau i-9.0&viewFallbackFrom=net-maui-8.0 C# -> JavaScript 方向のメッセージの受信 e.detail.message に C# からのメッセージが含まれる
10. プロジェクトに Web アプリケーションのコンテンツを 追加 https://learn.microsoft.com/ja-jp/dotnet/maui/user-interface/controls/hybridwebview?view=net-mau i-9.0&viewFallbackFrom=net-maui-8.0 JavaScript -> C# 方向のメッセージの送信 後述する HybridWebView.js で定義した SendRawMessage を利用する
11. プロジェクトに Web アプリケーションのコンテンツを 追加 https://learn.microsoft.com/ja-jp/dotnet/maui/user-interface/controls/hybridwebview?view=net-mau i-9.0&viewFallbackFrom=net-maui-8.0
12. プロジェクトに Web アプリケーションのコンテンツを 追加 https://learn.microsoft.com/ja-jp/dotnet/maui/user-interface/controls/hybridwebview?view=net-mau i-9.0&viewFallbackFrom=net-maui-8.0 C# -> JavaScript 方向のメッセージの 受信ハンドラの設定 初期化時に一度実行され、以後触る必要はない
13. プロジェクトに Web アプリケーションのコンテンツを 追加 https://learn.microsoft.com/ja-jp/dotnet/maui/user-interface/controls/hybridwebview?view=net-mau i-9.0&viewFallbackFrom=net-maui-8.0 JavaScript -> C# 方向のメッセージの送信
14. プロジェクトに Web アプリケーションのコンテンツを 追加 https://learn.microsoft.com/ja-jp/dotnet/maui/user-interface/controls/hybridwebview?view=net-mau i-9.0&viewFallbackFrom=net-maui-8.0 C# から JavaScript コードを実行するのに使用 JavaScript コードから触る必要はない
15. プロジェクトに Web アプリケーションのコンテンツを 追加 Resources/Raw/wwwroot 以下に 先ほど作った 2 つのファイルを配置 • index.html • scripts/HybridWebView.js
16. HybridWebView を試す 1. .NET MAUI プロジェクトの作成 2. プロジェクトに Web アプリケーションのコンテンツを追加 3. HybridWebView コントロールの配置 4. HybridWebView API を使用するコードの追加
17. HybridWebView コントロールの配置 MainPage.xaml の中身を以下のように変更 コードビハインドにハンドラーがないため Error が出るが、一旦無視
18. HybridWebView を試す 1. .NET MAUI プロジェクトの作成 2. プロジェクトに Web アプリケーションのコンテンツを追加 3. HybridWebView コントロールの配置 4. HybridWebView API を使用するコードの追加
19. HybridWebView API を使用するコードの追加 MainPage.xaml.cs の中身を以下のように変更
20. HybridWebView API を使用するコードの追加 MainPage.xaml.cs の中身を以下のように変更 .NET MAUI の Button コントロールの Click Handler JavaScript アプリケーションに対し、文字列を含むメッセージを送信
21. HybridWebView API を使用するコードの追加 MainPage.xaml.cs の中身を以下のように変更 JavaScript アプリケーションからのメッセージを受信するハンドラ e.Message に受信したメッセージが含まれる
22. 完成したアプリがこちら
23. 紹介していない機能 • C# から JavaScript コードを呼び出す ◦ EvaluateJavaScriptAsync ◦ InvokeJavaScriptAsync
24. macOS Sequoia ユーザ向けの注意点 .NET 9 RC 1 時点では、HTML コンテンツのホストにアドレスの 0.0.0.0 を使用 0.0.0.0 へのアクセスに制限が加わったため以下の Workaround が必要 (追記) https://github.com/dotnet/maui/pull/24884 0.0.0.1 になるそうです https://github.com/dotnet/maui/issues/23390#issuecomment-2202295194 MauiProgram.cs に以下を追記
25. まとめ • HybridWebView は JavaScript と C# の通信手段を与える • アプリの一部として利用できるため、 .NET MAUI のコントロールとの共存は容易 • アプリの View に JavaScript アプリケーションを採用するの も現実的に
26. 参考リポジトリ 今回の流れに沿ったサンプルプロジェクト https://github.com/yamachu/sample-hybrid-web-view ReactやVueを利用した発展的なプロジェクト（宣伝） https://github.com/yamachu/PokedexWithDotnetWebTechnologies 公式ドキュメント https://learn.microsoft.com/ja-jp/dotnet/maui/user-interface/controls/hybridwebview