ウーパの手習い

私的開発メモ用途なのでご容赦ください。2020年現在はSwiftとUnityでARのお勉強中。

VRChatのWebPanelをみんなで操作する+JavaScript制御

VRChatのWebPanelコンポーネントを利用すればWebサイトを表示できます。加えて、以下の動画のように、JavaScriptを呼び出すこともできます。

ですが先日、VRChatに複数人で同じワールドに滞在していた時、自分がSlideShareのスライドを切り替えても、他のユーザーには切り替わっていないという不具合が見つかりまして、

uuupa.hatenablog.com

その不具合の対応方法を確認しましたので、その報告となります。 

対処法

大部分は上のツイートの動画の通りで良いのですが、VRC_WebPanelインスペクタの Synchronize URI にチェックを入れれば、件の症状は解決します。

f:id:uuupacom:20180401182343p:plain

文字通り、画面（URI）をシンクロさせるわけですね。URI遷移を伴わない、ページ内の表示切替え（例えばSlideShareサイトのスライド送りや、JavaScriptを使ったページスクロール）も画面同期することを確認しました。

ただ、噂通り、Synchronize URI をONにするとオーナー操作権が発生するようで、WebPanelを操作するためのボタン実装（SendRPCやJavaScriptによる操作）は問題ないのですが、WebPanel自体をマウスカーソルで操作するのはオーナーに限定されるようです。

その件も含め、この設定にするとどういう挙動になるかを列挙しておきます。

  • 自分がWebPanelの画面を遷移したら、他人の画面も切り替わる
  • 自分がJSを使ってページ内遷移（例：SlideShareスライド遷移）したら、他人のページ内も遷移できる
  • 自分が（JSボタンで）操作しているSlideShareスライドを、他人が（JSボタンを）操作してスライド遷移や画面遷移できる＝共同で操作できる
  • 自分がSlideShareの3ページ目を表示しているタイミングで、他人が部屋にSpawnして登場した場合、自分は3ページ目、他人は1ページ目という状況になり、スライド操作しても、2ページぶんのズレを維持したままスライド遷移してしまう。解決法は、スライドを1ページ目まで戻したうえで、さらに戻るボタンを押す。そうすると両者とも1ページ目が表示された状態となり、ズレが解消する。その後は進むボタンで同じスライド画面を表示できる。←それが面倒なら、途中入室厳禁と言ってしまえば良い
  • 自分（オーナー）はWebPanel画面をクリックして画面遷移することができる
  • 他人（オーナー以外）はWebPanel画面をクリック操作することができない
  • オーナーはWebPanel画面上の右下のブラウザスクロール機能で画面をスクロールし、表示画面内のリンクをクリックすることはできる
  • しかし、WebPanel外に作成したボタン（ボタンにはJavaScriptによる画面スクロールが実装されている）を使ってスクロールしたり、JavaScriptを使って画面要素にアクセス（例：javascriptによるclick）したりすると、その後はWebPanel本体上をクリック操作できなくなる。←WebPanel上のフォーカスが奪われてしまう感じ。対処としてはSendRPC実装のボタンでURL遷移してしまえば、遷移先では再度WebPanel上フォーカスが復活する
  • 上記フォーカス問題を解決するために、javascript:document.activeElement.blur(); の記述をボタンに追加することで、画面内要素からフォーカスを外す＝HTMLにフォーカスを戻す、ことを狙ったが、機能しなかった。
  • target=_blank指定のページを開くとWebPanelが真っ白になってしまう。こうなってしまうとRespawnしても治らず、他のワールドに行って戻ってきても治らず、治す方法はVRChatを一旦終了して再度起動するしかないという状態でした。
    ※真っ白になった本人以外のユーザーの画面は真っ白にならず、画面も操作できる

以上のように、VRChatのWebPanelの挙動はクセが強いです。
私の場合、VRChat上でSlideShareを使ってでプレゼンするために以上のような検証をしていますが、上のような制約があるために、いくつか操作について周知する事項はありますが、なんとかVRChat上のプレゼン大会を行う目途はつきました。近々開催して検証できればと思います。