HTML Panel

HTML Panelは、Webページを操作できるパネルとしてシーン内に配置するElementです。ルームの参加者は、パネル上のボタンを押したり、ページをスクロールしたり、入力欄へ文字を入力したりできます。

このElementを追加するには詳細モードへ切り替えます。

備考

表示できるのは、HTMLパネル用の準備をしたWebページだけです。ページの作り方は、開発者向けのHTMLパネルのページを作るを参照してください。外部のWebサイトをそのまま埋め込む場合は、Iframeを利用してください。

プロパティ

項目	初期値	説明
Panel URL	空	表示するWebページのURLです。`https://`で始まる絶対URLを入力します。
Width (px)	`1024`	ページをレイアウトする幅をCSSピクセルで指定します。
Height (px)	`768`	ページをレイアウトする高さをCSSピクセルで指定します。

URLがhttps://で始まる絶対URLでない場合は、入力欄の下に警告が表示されます。警告が表示されてもシーンは保存できますが、そのパネルはルームで表示されません。

エディターでは、ページの内容は表示されません。代わりに、縦横比とURL、幅と高さを示す仮の表示が出ます。

パネルは平面の板です。幅と高さは、ページをレイアウトする画面の大きさです。パネルの縦横比も、幅と高さから決まります。ページは、この大きさのブラウザーの画面で表示されたときと同じようにレイアウトされます。

幅と高さは、それぞれ256から2048の範囲で指定します。範囲外の値を入力すると、範囲内の値に丸められます。

シーン内でのパネルの大きさは、トランスフォームのスケールで変更します。スケールが1のとき、パネルは長いほうの辺が1mです。

幅と高さを大きくすると、パネルの描画が重くなります。必要以上に大きくせず、ページ側で文字やボタンを大きめにデザインしてください。

ページの開発者に、パネルで表示するページのURLを確認します。
ページのオリジンがルームと異なる場合は、ルームのContent Security Policy（CSP）の設定でframe-srcにページのオリジンを追加します。
Spokeで詳細モードに切り替え、ElementsからHTML Panelを追加します。
Panel URLにページのURLを入力します。
Width (px)とHeight (px)を設定し、トランスフォームで位置と大きさを調整します。
シーンを公開し、ルームでパネルが表示され、操作できることを確認します。

パネルは、Spokeでシーンに配置したものだけが表示されます。ルームへURLを貼り付けても、HTMLパネルとしては表示されません。
パネルの表示と操作は参加者ごとに独立しています。ある参加者が入力した内容やスクロールした位置は、ほかの参加者には反映されません。
パネルは掴んで動かせません。
マウス、タッチ、VRのコントローラーで操作できます。VRでは、パネルの入力欄に文字を入力できません。
ページ内のリンクは、ページと同じオリジンであればパネルの中で開き、それ以外はブラウザーの新しいタブで開きます。ルームと同じオリジンへのリンクも、新しいタブで開きます。