環境に WebSlate を追加する

概要

Web コンテンツの表示と操作の概要

Mesh ツールキットでは、使用する WebSlate プレハブを WebSlateFramed と呼びます。 これには、WebSlate に表示されるコンテンツを制御するために指定できる URL パラメーターが含まれています。 また、イベント開催者がリアルタイムでイベントの WebSlate の URL を変更できるようにするコンポーネントも用意されています。 WebSlate を含む Mesh イベントが開始されると、指定した URL を使用して WebSlate によってコンテンツが読み込まれます。

ノート

• Mesh ツールキットには WebSlate という名前のプレハブもありますが、Mesh イベントの URL の更新をリアルタイムでサポートしていないため、お勧めしません。

• WebSlate のサイズと形状は、配置されているクワッド GameObject のサイズと形状と一致します。 通常、これは WebSlate プレハブ内でベイクされたクワッドです。

• 複数の WebSlate をシーンに追加できます。 Mesh に基づく Mesh イベントのユーザー数は、WebSlate のパフォーマンスには影響しません。WebSlate リソースは、ユーザーのマシン上でローカルに初期化されます。

WebSlate を追加する

メニューから WebSlateFramed プレハブを追加する

1. [Hierarchy] 内を右クリックし、コンテキスト メニューで [Mesh Toolkit]>[WebSlateFramed] を選択します。

   ヒント: [Hierarchy] ウィンドウの左上にある [+] ボタンをクリックして、同じメニューを表示することもできます。

   

WebSlateFramed プレハブを検索して追加する

1. [検索] フィールドに、"WebSlateFramed" と入力します。All フィルターが選択されていることを確認します。

   

2. 目的のプレハブを [Scene] ビューまたは [Hierarchy] にドラッグします。

既定の URL を指定する

1. [Hierarchy] で、WebSlateFramed GameObject を展開し、WebSlate という名前の子オブジェクトを選択します。

   

2. [Inspector] で、WebSlate コンポーネントに移動します。

3. "Current URL" フィールドを、Mesh イベントで WebSlate が既定で読み込む URL に更新します。

   

イベントで WebSlate を制御できるようにする

環境に WebSlate を追加するときに、既定の URL を設定しますが、イベント開催者がコントロール パネルを使用してイベント中にリアルタイムで URL を変更する場合はどうなりますか? これに対応するために、WebSlateFramed プレハブには、WebSlate Controllable という名前のコンポーネントが付属しています。 また、イベント開催者がイベント中に WebSlate を有効または無効にできるようにする Object Controllable コンポーネントも付属しています。

WebSlates の制御可能な機能により、環境作成者は環境の設計と美学を維持しながら、(テンプレートとしてもそうでなくても) 複数のイベントを実行する開催者がイベントのテーマに応じてコンテンツを変更できます。 制御可能な URL は、ライブ イベント中のみに追加または変更できます。 (編集モードで) カスタマイズ中に追加された URL は保存されないため、複数のイベント間で保持されません。WebSlates は、Unity の開発者によって毎回追加される URL に既定で設定されます。

この機能では、WebSlates は以下の機能を提供します。

• イベント開催者: URL、可視性 (オン／オフ)、および (必要に応じて) [中断の防止] を切り替えて、WebSlate を常にオンに保ちます。 開催者は、ホスト パネルを使用して、イベント中に URL を変更できます。これにより、イベント内のすべてのユーザーの WebSlate が即座に更新されます (グローバル更新)。 
• イベント出席者: 出席者がカーソルまたはコントローラーを使用してポインターを WebSlate にかざすと、メニュー バーに組み込みの更新ボタンと、WebSlate のシングル ユーザー性を簡単に説明するヒントが表示されます (一部の Web アプリでは共有エクスペリエンスが提供される場合があります)。 これにより、ユーザーが移動してしまい、イベント中に Web アプリに問題が発生しても使用はできる場合に、主催者によって設定された URL に戻る方法が提供されます。 

制御可能な名前と既定の URL を追加します

注: 既存の環境に既に WebSlateFramed プレハブがある場合、制御可能な機能を入手するには、Mesh ツールキットをバージョン 24.10 以降にアップグレードします。 その後、以下の手順 3 から開始できます。

1. [Hierarchy] で、追加した WebSlateFramed プレハブを選択します。

   

2. [Inspector] で、WebSlate Controllable コンポーネントに移動し、[Display Name] フィールドに、制御可能オブジェクトの名前を追加します。 名前が環境内の WebSlate の機能を示していることを確認します。これは、コントロール パネルの主催者によって表示され、必要に応じてリアルタイムで WebSlate を更新するために使用されます。 この例では、"Azure ダッシュボード" を使用します。

   

3. Object Controllable コンポーネントで、同じ方法で名前を指定します。

4. [Hierarchy] で、WebSlateFramed コンポーネントを展開し、WebSlate という名前の子オブジェクトを選択します。

5. [Inspector] で、"Current URL" フィールドを、Mesh イベントで WebSlate が既定で読み込む URL に更新します。

   

6. 再生モードで WebSlate をテストして、URL が正しく表示されることを確認します。

その他の WebSlate の制御可能な設定

[中断の防止] (WebSlate Controllable コンポーネント): この設定はコントロール パネルに表示され、既定ではオフに設定されています。 つまり、出席者が WebSlate から離れ、WebSlate が 30 秒以上表示されなくなった場合、Webslate はメモリを節約するために自動的に中断されます。 WebSlate が再び出席者のビューに入ると、再読み込みされます。

状況によっては、イベントでの位置に関係なく、出席者に対してコンテンツの再生が必要になる場合があります (たとえば、WebSlate がライブ ストリーム コンテンツを実行している場合)。 この場合は、[中断の防止] 設定をオンに切り替える方が適切です。

イベント開催者は、イベントでこの設定のオンとオフを切り替えることができます。 既定の設定を "オン" に変更する場合は、[Prevent Suspension] チェック ボックスを選択します。

バックプレート (WebSlate Controllable コンポーネント): WebSlateFramed プレハブには、ここで選択した *バックプレート GameObject が付属し、"フレーム" を提供します。 これを "なし" に変更してフレームをオフにできますが、この設定はそのままにしておき、イベント開催者に任せて、バックプレートのオンとオフを切り替えておくことをお勧めします。

表示 (Object Controllable コンポーネント): この設定は、イベント開催者がすべてのイベント出席者の WebSlate の表示のオン／オフを切り替えることができるコントロール パネルにも表示されます。 既定を "表示" にする場合は、これを選択します。

注: これらの設定のいずれかがイベント中に変更された場合、変更はすべてのユーザーに対してリアルタイムで反映されます。

Mesh イベントで Controllable をテストする

WebSlate の完全な制御可能な機能のテストは、Mesh イベントでのみ行うことができます。 環境に基づくこのイベントの例では、制御可能な WebSlate の例である "Azure ダッシュボード" がコントロール パネルに表示されます。

イベント開催者は、Azure ダッシュボードの下向き矢印をクリックして URL を表示し、変更できます。

前述のように、開催者は、イベント中に [中断の防止]、[バックプレートの表示]、[表示] (オン／オフの切り替え) など、WebSlate の いくつかの設定を変更できます。

WebSlate メニュー

ユーザーでも開催者でもカーソルまたは VR コントローラーで WebSlate にポインターをかざすと、WebSlate メニューが表示されます。

更新 (左ボタン): 出席者はこれをクリックすると、個人用ビューを WebSlate の既定の Web ページに戻すことができます。

情報 (右ボタン): WebSlate に協働 Web アプリが表示されていなければ、表示されている内容は各出席者専用であり、他の出席者と共有されていないことを出席者に通知するヒントが表示されます。

ヒント

• クワッド以外の GameObject に WebSlate を配置するには、スクリプト コンポーネントとしての WebSlate.cs を最適な 3D オブジェクトに直接追加し、UnlitWebSlate.mat を MeshRenderer Materials に追加します。 これにより、視覚的なテクスチャのストレッチ、反転、回転が発生する可能性があります。

• WebSlate は既定の URL を読み込みます。 この URL は、使用中の各 WebSlate に適した URL に置き換える必要があります。 明るさのパラメーターは 1.0 (ブラウザーの明るさの 100%) に設定されます。

• WebSlates は、画面外状態が長すぎると自動的に中断されます。 特定の WebSlate が常に実行されていることを確認する必要がある場合 (ライブ ストリームや継続的なオーディオ再生など)、WebSlate コンポーネントで、[Prevent Suspension] を選択します。 これを行うと、WebSlate が常にアクティブなままになるため、シーンはより多くのリソースを消費する可能性があることに注意してください。

• 画像 URL のサイズを WebSlate のサイズに変更するには、URL を HTML でラップします。 Visual Scripting で WebSlate LoadHTML API を使用して、この HTML コンテンツを WebSlate にレンダリングします。 構築された HTML を HTMLContent プロパティに追加します。 または、LoadHTMAsset API を使用して、HTML をアセットとして渡すことができます。 画像 URL を自分の画像 URL に置き換えます。

  LoadHTML API と LoadHTMLAsset API を使用した画像 URL と Visual Scripting グラフを含むサンプル HTML:

  <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width initial-scale=1.0"><title>Microsoft</title></head><body style="margin: 0; height: 100vh; overflow: hidden; background-color: black;"><img src="https://learn.microsoft.com/en-us/mesh/media/webview-developer-guide/ArcadeWebSlate.png" loading="lazy" style="width: 100%; height: 100%;"></body></html>

  

  

次のステップ

WebSlate をテストする