カスタムレイヤーの統合

ProtoPie ConnectのStage（ステージ）ビューを使用すると、ProtoPieのプロトタイプを、Web、埋め込み、ライブカメラ、Unityプロジェクトなどの多様なカスタムレイヤーと統合できます。この統合により、ユーザーテストの体験が向上し、デザインがよりダイナミックになります。

ステージビューの作成

ステージビューを作成するには、以下の手順に従ってください：

1. ProtoPie Connectを開きます。

2. 新しいグループを作成し、プロトタイプ（Pie）をドラッグ＆ドロップしてそのグループに配置します。

3. グループを選択します。

4. View（表示）アイコンをクリックして、ステージでプロトタイプを開きます。

カスタムレイヤーの埋め込み

ステージビューを作成した後、右クリックしてステージのオプションメニューにアクセスします。編集を開始するには、Edit（編集）ボタンをクリックします。「Edit Mode（編集モード）」のメッセージが表示され、編集が有効になったことが確認できます。

新しいプロトタイプやカスタムレイヤーを追加するには：

• 左上の角にある Add（追加）をクリックします。

• ステージには以下のレイヤーを含めることができます：

• ProtoPie プロトタイプ

• URLまたはiframeコード経由のWeb埋め込み（Googleマップ、Spline、Rive、Beziなどをサポート）

• ライブカメラ（利用可能なカメラまたはライブストリーミングオプションから選択）

• Unity プロジェクト（WebGLビルドのインポートをサポート）

Web埋め込みレイヤーの設定

ステージに新しいWeb埋め込みレイヤーを追加した後、プロパティパネルでそのURLを設定できます。

完全なURLまたはiframeコードを入力できます。Web埋め込みは、マップ、Spline、Rive、Beziなどの様々なフォーマットをサポートしています。URLが有効であり、アクセスに必要な権限があることを確認することが重要です。

ライブカメラレイヤーの設定

プロジェクトにカメラフィードを追加するには、ライブカメラレイヤーを使用します。この機能は以下をサポートしています：

• ウェブカメラなどのUSB接続カメラ

• ノートパソコンの内蔵カメラ

• ライブストリーミングURL（HLS）

カメラレイヤーを使用する前に、ウェブブラウザにアクセス許可を与えていることを確認してください。カメラレイヤーを追加した後、Cameraプロパティパネルからそのプロパティを設定します。

Unityレイヤーの設定

プロジェクトにUnityシーンを追加するには、Unityレイヤーを使用します。この機能は以下をサポートしています：

• UnityシーンのWebGLビルドのインポート

• Unity用ProtoPieプラグイン

対象プラットフォームとしてWebGLを使用してUnityプロジェクトをビルドすることが重要です。生成されたBuildフォルダーには、.loader.js、.framework.js、.wasm、および .data ファイルが含まれており、これらをzipファイルにアーカイブする必要があります。Unityプロジェクトをレイヤーとしてインポートするには、このzipファイルをソースファイルとして挿入します。

Unityプラグインを使用すると、送信/受信メッセージがUnityシーンと連携して動作するようになり、ProtoPieレイヤーとUnityレイヤー間のインタラクティブ性を高めることができます。これはUnityプロジェクトに追加できるパッケージであり、Unityアセットストアからダウンロード可能です。詳細については、Unityプラグインのドキュメントを参照してください。

ステージビューのプレビュー

レイヤーを追加および設定した後、ドラッグしてステージ内でレイヤーを配置し直します。配置オプションにアクセスするには、レイヤーを右クリックします。準備ができたら、View（表示）をクリックしてステージをプレビューします。

よくある質問（FAQ）