Web エンジンのカスタム JavaScript イベント

Web エンジンで実行されている Web サイト内の機能をトリガするには、JavaScript CustomEvents を使用します。

CustomEvent() の説明については、こちらを参照してください。

CustomEvents は、vrdWebEngines のメソッド sendEvent() を使用して送信できます。このメソッドは、2 つの文字列パラメータを取ります。最初のパラメータは CustomEvent の識別子です。2 番目のパラメータには、イベント固有のデータを含めるか、空の文字列を指定できます。

Web ページに挿入されている JavaScript コードは次のようになります。

1  var e = new CustomEvent( event
2      {
3          detail: data        
4      });
5
6  document.dispatchEvent(e);

イベントは常に DOM ドキュメントを通して送信されます。Web エンジンで実行されている Javascript コードに、これらのイベントをリッスンし、他の機能をトリガするイベントハンドラを導入することができます。

例 1

次に、CustomEvent を使用して Web ページの背景色を変更する方法を示す小規模な例を示します。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>JavaScript Custom Event</title>
 7 </head>
 8 <body style="background-color:white;">
 9     <div class="note">JavaScript Custom Event</div>
10     <script>    
11         document.addEventListener("testEvent", function(event) {   
12             document.body.style.background = event.detail.color;
13         });
14     </script>
15 </body>
16 </html>

これにより、白い背景のページが作成され、「testEvent」というカスタムイベントのイベントリスナーが導入されます。これを VRED で使用するには、新しいフロントプレートを作成して、「EventFrontPlate」という名前を付けます。コンテンツタイプが「web」に設定されるので、上記の html コードをコピーして貼り付けます。

ここで、基盤となる Web エンジンのインスタンスが必要になります。

we = vrWebEngineService.getWebEngine("EventFrontPlate")

次に、背景色を赤に変更するイベントを作成します。

we.sendEvent("testEvent", "{color: 'red'}")

背景色を緑に設定することもできます。

we.sendEvent("testEvent", "{color: 'green'}")

イベントにカスタムデータを渡さない場合は、2 番目のパラメータに空の文字列を使用します。複数の CustomEvents が使用される、より複雑な例については、「Web エンジンメニューのデモ」を参照してください。

例 2

この例では、カスタムデータパラメータにアクセスし、VRED で Python 関数を呼び出すために使用する方法を示します。上記の例のように、「EventFrontPlate」というフロントプレートを作成し、次の html コードを使用します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Custom Event</title>
</head>
<body style="background-color:white;">
    <div class="note">JavaScript Custom Event</div>
    <script>
        document.addEventListener("testEvent", function(event) {
            vred.executePython("printFromJavascript('" + event.detail.custom + "')");
        });
    </script>
</body>
</html>

VRED では、次の Python 関数を実行する必要があります。

def printFromJavascript(data):
  print(data)

その後、VRED でこのイベントを呼び出すことができます。

we = vrWebEngineService.getWebEngine("EventFrontPlate")
we.sendEvent("testEvent", "{custom: 'test 123'}")

VRED が生成するカスタムイベントの JavaScript コードは次のようになります。

<script>
var e = new CustomEvent("testEvent"
        {
          detail: {custom: 'test 123' }
        });
</script>

VRED 2021.3 での API の変更

VRED 2021.3 では、上記の例のような複雑なイベントを許可するには、data パラメータを変更する必要がありました。sendToWebEngine() の署名は次のとおりです。

sendToWebEngine(name, event, data)

VRED 2021.3 より前のバージョンでは、JavaScript コードを Web ページに挿入する際に、data パラメータが内部で引用符で囲まれていました。したがって、次のように呼び出した場合、

sendToWebEngine("EventFrontPlate", "testEvent", "test 123")

Javascript コードは次のようになります。

<script>
var e = new CustomEvent("testEvent"
        {
          detail: "test 123" }
        });
</script>

VRED 2021.3 以降では、test 123 は自動的に引用符で囲まれません。以前の動作が必要な場合は、次のように記述する必要があります。

sendToWebEngine("EventFrontPlate", "testEvent", "'test 123'")

この変更は、複雑なイベントを可能にするために必要です。そうしないと、次のような呼び出しが実行された場合、

sendToWebEngine("EventFrontPlate", "testEvent", "{custom: 'test 123'}")

次のように生成されます。

<script>
var e = new CustomEvent("testEvent"
        {
          detail: "{custom: 'test 123' }"
        });
</script>

辞書を囲む引用符は無効であるため、イベントは機能しません。これは、ユーザが引用符を削除することができないためです。

CustomEvents をデバッグする

VRED は QtWebengine を使用するため、組み込みブラウザをデバッグするために Qt メカニズムを使用できます。環境変数 QTWEBENGINE_REMOTE_DEBUGGING を設定する必要があります。値はポート番号である必要があります。たとえば、set QTWEBENGINE_REMOTE_DEBUGGING=9876 などです。

VRED を実行しているときに Web エンジンのインスタンスがアクティブになっている場合は、Chrome (または Opera や Vivaldi などの他のクロムベースのブラウザ)を起動し、その内部リモートデバッガを使用して VRED の Web エンジンに接続できます。これを行うには、Chrome の URL (http://localhost:9876) に移動します。