Android で使用可能なブラウザコンポーネント (WebView / GeckoView) を uGUI (Texture2D) として利用するためのプラグイン.3Dウェブブラウザ (3D WebView) の実装が可能になります.
- キーボード入力
- タッチ操作
- ファイルダウンロード (blob, data urlを含む)
- リサイズ
- Javascriptの実行
- 複数インスタンスの同時実行をサポート
- 複数のブラウザエンジンをサポート
- 複数のレンダリング方法をサポート
-
HardwareBudder: Androidの低レイヤー機能を使用した実装.パフォーマンス⭕️ -
ByteBuffer: C#側でbyte配列として結果を取得するためフレームへのアクセスが容易.安定性⭕️.デフォルトではこのオプションが使用されています. -
Surface: AndroidのSurfaceクラスに直接レンダリングを行う.CompositionLayersなどを活用する際に利用することを想定
-
ドキュメントはこちら
スニペットはこちら
Javaプラグインのソースコードはこちら
- Unity 2021
- Unity 2022
- Unity 6000 (
WebViewのみテスト済みです.GeckoViewはまだテストしていません.)
- OpenGLES
- Vulkan
Android13, Adreno 619で実行した画面
| OS | Android 10 ~ 14 |
| GPU | Qualcomm Adreno 505, 619 |
| Unity | 2021.3 |
- TLabVKeyborad
v1.0.1
こちらをご覧ください
以下のコマンドでリポジトリをクローンしてください
git clone https://github.com/TLabAltoh/TLabWebView.git
or
git submodule add https://github.com/TLabAltoh/TLabWebView.git
Unity Package Managerでadd package from git ...から以下のurlでパッケージをダウンロードしてください
https://github.com/TLabAltoh/TLabWebView.git#upm
このプラグインを使用したアプリをアプリストアに出した場合,以下のような警告を受ける場合があります.
Your application may contain an unsafe implementation of the WebView's onReceivedSslError() method with a call to `handler.proceed() with insufficient validations. This may cause the WebView to ignore SSL certificate validation errors, making the application vulnerable to man-in-the-middle attacks.
your app is using an unsafe implementation of
WebviewClient.onReceivedSslErrorhandler
その場合は,アプリストアに対応したバージョンのパッケージに切り替えてください.
add package from git URL ...
https://github.com/TLabAltoh/TLabWebView.git#appstore-compatible-upm
アプリストア対応バージョンはセキュアではないウェブサイトを読み込むことができない点をあらかじめご了承ください.
こちらをご覧ください
- Build Settings
| Property | Value |
|---|---|
| Platform | Android |
- Project Settings
| Property | Value |
|---|---|
| Color Space | Linear |
| Minimum API Level | 26 |
| Target API Level | 30 (Unity 2021), 31 ~ 32 (Unity 2022) |
- Project Settings --> Player --> Other Settings に以下のシンボルを追加(ビルド時に使用)
UNITYWEBVIEW_ANDROID_USES_CLEARTEXT_TRAFFIC
UNITYWEBVIEW_ANDROID_ENABLE_CAMERA
UNITYWEBVIEW_ANDROID_ENABLE_MICROPHONE
- Scene
BrowserManagerをシーン内のいずれかのGameObjectにアタッチしてください.(EventSystemにアタッチするのが一番望ましいかも ...).
PluginsフォルダーをAssets以下に作成し,以下のファイルを置いてください.また,BrowserContainer.browserにWebViewの代わりにGeckoViewをアタッチしてください.また,GeckoViewの使用には API level 33 ~ が求められます.Project SettingsからターゲットAPIレベルを33以上に設定してください.
- gradleTemplate.properties
org.gradle.jvmargs=-Xmx**JVM_HEAP_SIZE**M
org.gradle.parallel=true
# android.enableR8=**MINIFY_WITH_R_EIGHT**
unityStreamingAssets=**STREAMING_ASSETS**
**ADDITIONAL_PROPERTIES**
android.useAndroidX=true
# android.enableJetifier=true- mainTemplate.gradle
...
dependencies {
implementation "androidx.annotation:annotation-jvm:1.9.1"
def collection_version = "1.4.3"
implementation "androidx.collection:collection:$collection_version"
def lifecycle_version = "2.6.1"
implementation "androidx.lifecycle:lifecycle-viewmodel-ktx:$lifecycle_version"
implementation "androidx.lifecycle:lifecycle-viewmodel-compose:$lifecycle_version"
implementation "androidx.lifecycle:lifecycle-livedata-ktx:$lifecycle_version"
implementation "androidx.lifecycle:lifecycle-runtime-ktx:$lifecycle_version"
implementation "androidx.lifecycle:lifecycle-runtime-compose:$lifecycle_version"
implementation "androidx.lifecycle:lifecycle-viewmodel-savedstate:$lifecycle_version"
implementation "androidx.lifecycle:lifecycle-common-java8:$lifecycle_version"
implementation "androidx.lifecycle:lifecycle-service:$lifecycle_version"
implementation "androidx.lifecycle:lifecycle-process:$lifecycle_version"
implementation "androidx.lifecycle:lifecycle-reactivestreams-ktx:$lifecycle_version"
}
...- GeckoView plugin (
.aar) (現在 125.0.20240425211020 version のみで開発・テストを行っているので,同じバージョンのものをダウンロードしてください.)
以下に置いてあるプレハブをCanvasに追加することでWebViewを実装できます
/Resources/TLab/WebView/Browser.prefab
このパッケージでは,デフォルトでuGUIをベースに実装されたバーチャルキーボードが利用できます.しかし,uGUIをベースにしたバーチャルキーボードはデザインなどの拡張性の点で利点がありますが,場合によってはOS標準のシステムキーボードを利用したい場面もあるかもしれません.その場合は,各プラットフォームの設定に従って,アプリ側でパーミッション等を使用してシステムキーボードを有効にしてください (例: Meta Quest での設定はこちら).アプリ側での設定が完了すると,WebViewでのシステムキーボードの利用が可能になります.
Note
外部ストレージ(/Downloadや/Pictureなど)にファイルをダウンロードしたい場合,以下のパーミッションをAndroidManifest.xmlに追加してください.これは,Android 11以降のデバイスで必要になります (詳細はこちら).
<uses-permission android:name="android.permission.MANAGE_EXTERNAL_STORAGE" />Note
WebViewで実装されているjavascriptインターフェースwindow.tlabは現在GeckoViewではサポートされていません.これはGeckoViewとjavaネイティブプラグイン(.aar)間の通信処理の実装の複雑さに起因します.現状はwindow.tlab.unitySendMessageの代替としてwindow.postMessageの呼び出しでC#コンポーネントにメッセージを送信する機能のみ実装されていますが,将来的にはwindow.tlabの機能をGeckoViewでも完全にサポートする計画です.
GeckoViewのページスクリプトからC#コンポーネントにメッセージを送信する際は,以下のようにjavascriptを記述してください.
let payload = { go: "Test", method: "OnMessage", message: "this is test message." };
window.postMessage({ type: "TLABWEBVIWE_GECKO_NATIVE_MESSAGE", payload: { method: "unitySendMessage", payload: payload } }, "*");Warning
このプラグインはAndroidデバイス上でのみ動作します.Unity Editor上で実行してもWebページは表示されないことに注意してください.
Warning
HardwareBuffer モードは,プラグインを実行するデバイスによっては正常に動作しない場合があるかもしれません. その場合は,プロジェクトのGraphics APIをVulkanからOpenGLESに変更する (HardwareBufferモードにおける問題は,ほとんどが,プロジェクトでVulkan APIを使用している場合に報告されています).もしくは,HardwareBuffer から ByteBuffer へ CaptureMode を切り替えてください (安定したレンダリングオプションです).
Warning
Android WebViewは WebXR API をサポートしません.
Warning
OculusQuestはいくつかのHTML5 input タグをサポートしていません(下記参照).それらを使用したい場合,GeckoViewをWebViewの代わりにBrowserとして使用してください.uGUIで実装したウィジェットを表示します.以下は,このプラグインによる,HTML5 inpu タグの対応状況です.
Warning
このプラグインは,OpenGLESとVulkanの両方をサポートしていますが,Vulkan API を使用する場合は,デバイスがOpenGLES 3.1以上をサポートしている必要があることに留意してください.




