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

by Yusuke Yamada

Slide 1

Slide 1 text

HybridWebViewで JSベースのView開発 .NETラボ勉強会 2024年9月当日LT ちゅうこ / yamachu

Slide 2

Slide 2 text

自己紹介経歴 ● Xamarin歴 2014- ● Microsoft MVP 2018- ちゅうこ（山田裕介） GitHub: yamachu X(Twitter): y_chu5 趣味 ● ポケカ、ゲーム ● GitHubのExploreのだら見

Slide 3

Slide 3 text

HybridWebView ● WebView 内のコンテンツの JavaScript コードと、ホストの C# コード間の通信を可能にするコントロール ○ 例えば、WebView 上の React アプリケーションと C# 間で通信が可能に ● アプリの UI の一部として利用が可能 ○ HybridWebView 自体がコントロールであるため、 .NET MAUIの他のコントロールと共存が可能 ○ 複雑な UI の実装を JavaScript アプリケーションに委譲し、ロジック部分を C# のような使い方も可能 ● .NET 9 Preview 7 以降で利用可能

Slide 4

Slide 4 text

HybridWebView を試す 1. .NET MAUI プロジェクトの作成 2. プロジェクトに Web アプリケーションのコンテンツを追加 3. HybridWebView コントロールの配置 4. HybridWebView API を使用するコードの追加

Slide 5

Slide 5 text

Slide 6

Slide 6 text

.NET MAUI プロジェクトの作成 $ dotnet --version 9.0.100-rc.1.24452.12 $ dotnet workload install maui $ dotnet new maui

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

プロジェクトに 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# からのメッセージが含まれる

Slide 10

Slide 10 text

プロジェクトに 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 を利用する

Slide 11

Slide 11 text

Slide 12

Slide 12 text

プロジェクトに 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 方向のメッセージの受信ハンドラの設定初期化時に一度実行され、以後触る必要はない

Slide 13

Slide 13 text

Slide 14

Slide 14 text

プロジェクトに 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 コードから触る必要はない

Slide 15

Slide 15 text

プロジェクトに Web アプリケーションのコンテンツを追加 Resources/Raw/wwwroot 以下に先ほど作った 2 つのファイルを配置 ● index.html ● scripts/HybridWebView.js

Slide 16

Slide 16 text

Slide 17

Slide 17 text

HybridWebView コントロールの配置 MainPage.xaml の中身を以下のように変更コードビハインドにハンドラーがないため Error が出るが、一旦無視

Slide 18

Slide 18 text

Slide 19

Slide 19 text

HybridWebView API を使用するコードの追加 MainPage.xaml.cs の中身を以下のように変更

Slide 20

Slide 20 text

HybridWebView API を使用するコードの追加 MainPage.xaml.cs の中身を以下のように変更 .NET MAUI の Button コントロールの Click Handler JavaScript アプリケーションに対し、文字列を含むメッセージを送信

Slide 21

Slide 21 text

HybridWebView API を使用するコードの追加 MainPage.xaml.cs の中身を以下のように変更 JavaScript アプリケーションからのメッセージを受信するハンドラ e.Message に受信したメッセージが含まれる

Slide 22

Slide 22 text

完成したアプリがこちら

Slide 23

Slide 23 text

紹介していない機能 ● C# から JavaScript コードを呼び出す ○ EvaluateJavaScriptAsync ○ InvokeJavaScriptAsync

Slide 24

Slide 24 text

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 に以下を追記

Slide 25

Slide 25 text

まとめ ● HybridWebView は JavaScript と C# の通信手段を与える ● アプリの一部として利用できるため、 .NET MAUI のコントロールとの共存は容易 ● アプリの View に JavaScript アプリケーションを採用するのも現実的に

Slide 26

Slide 26 text

参考リポジトリ今回の流れに沿ったサンプルプロジェクト 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