ProtoPie Connectでのプロトタイプのテスト

ProtoPie Connectを使用すると、さまざまなスマートデバイスやデスクトップブラウザでプロトタイプをテストできます。ProtoPie Connectは、次の方法で使用できます。

• ProtoPie ConnectとProtoPie Playerを使用してプロトタイプをテストする

• ProtoPie ConnectとProtoPie Player for Wear OSを使用してプロトタイプをテストする

• ウェブブラウザでプロトタイプをテストする

• Stage View（ステージビュー）でプロトタイプをテストする

ProtoPie Connectのダウンロードはこちらから。

ProtoPie Connectへのプロトタイプの追加

テストを開始する前に、以下の簡単な手順に沿ってプロトタイプをProtoPie Connectに読み込みます。

• 「+ New」（新規追加）ボタンをクリックし、追加したいプロトタイプを選択します。または、ProtoPie Connectのインターフェースにプロトタイプをドラッグ＆ドロップします。

• Enterpriseユーザーは、「Cloud Pie」を選択することで、ProtoPie Cloudからプロトタイプを直接開くことができます。Cloud Pieの最新バージョンを取得するには、円形の矢印アイコン（再読み込み）をクリックします。

• Pieファイルを選択し、ゴミ箱アイコンをクリックすると、リストからプロトタイプが削除されます。

• プロトタイプを置き換えるには、カーソルをプロトタイプに合わせて、双方向矢印のアイコンをクリックします。

• 技術的な注意点: 新しいPieファイルを追加すると、新しいpieidが作成されます。Pieファイルを置き換えた場合は、以前のプロトタイプと同じpieIdが再利用されます。

Pieをグループに整理する

Pieを整理して管理しやすくするために、グループにまとめることができます。新しいPieグループを作成するには、グループ化アイコンをクリックします。Pieをグループに追加するには、そのグループにドラッグ＆ドロップします。その際、あらかじめグループを展開（展開表示）しておく必要があります。

• Pieを別のグループに移動にするには、移動先となる他のグループにドラッグ＆ドロップします。

• 少なくとも1つのPieが含まれているグループのみ、展開・折りたたみが可能です。

• 少なくとも1つのPieが含まれているグループのみ、選択・選択解除が可能です。

• グループの名前を変更するには、グループ名をダブルクリックして新しい名前を入力します。

• グループを削除するには、カーソルをグループに合わせて、ゴミ箱アイコンをクリックします。

ProtoPie Connect & ProtoPie Playerを使用したプロトタイプのテスト

ProtoPie Playerは、ProtoPie StudioおよびProtoPie Connect用の無料のコンパニオンアプリです。iOS、iPadOS、およびAndroidデバイス上のProtoPie Connectに追加されたプロトタイプを、表示、体験、テストできます。

ProtoPie PlayerをProtoPie Connectに接続するには、以下の3つの方法があります。

1. QRコードをスキャンする

2. IPアドレスを入力する

3. USBケーブルを使用する

QRコードのスキャンによるProtoPie PlayerとProtoPie Connectの接続

1. お使いのコンピューターとスマートデバイスが同じWiFiネットワークに接続されていることを確認します。

2. ProtoPie Connectで開きたいプロトタイプの「Connect」（接続）をクリックします。

3. リストからQR Codeを選択します。

4. ProtoPie Playerの「Scan QR Code」（QRコードをスキャン）ボタンをタップします。

5. QRコードをスキャンして、Playerでプロトタイプを実行します。

IPアドレスの入力によるProtoPie PlayerとProtoPie Connectの接続

1. お使いのコンピューターとスマートデバイスが同じWiFiネットワークに接続されていることを確認します。

2. ProtoPie Playerのドロップダウンメニューから「Type IP Address」（IPアドレスを入力）をタップします。

3. ProtoPie Connectに表示されているIPアドレスを入力します。

4. 「Connect」ボタンをタップして、スマートデバイスでプロトタイプを実行します。

ProtoPie Connect & ProtoPie Player for Wear OSを使用したプロトタイプのテスト

ProtoPie Player for Wear OSは、通常のProtoPie Playerとは異なり、Connect Enterpriseとの組み合わせでのみ動作します。

1. ProtoPie Player for Wear OSとProtoPie Connectの両方が同じインターネットネットワークに接続されていることを確認します。

2. それらを開くと、ProtoPie Player for Wear OSとProtoPie Connectがお互いを自動的に検出します。

3. ProtoPie Player for Wear OSの「Tap to connect」（タップして接続）をクリックして、ProtoPie Connectとペアリングします。

4. スマートウォッチ用のプロトタイプをProtoPie Connectに追加します。

5. ProtoPie Connectのインターフェースの上部にある「Run」（実行）ボタンをクリックして、Player for Wear OSでプロトタイプを開きます。

6. プロトタイプを再起動または終了するには、スマートウォッチの画面をダブルタップします。

ウェブブラウザでのプロトタイプのテスト

ブラウザでプロトタイプを表示する場合、最適なパフォーマンスを得るためにChromiumブラウザを使用することをお勧めします。ProtoPie Connectからデスクトップウェブブラウザでプロトタイプを開くには、次の2つの方法があります。

• ProtoPie Connectが動作しているのと同じマシン上

• 別のマシン上

同じマシン上でのプロトタイプのテスト

1. 開きたいプロトタイプの横にあるウェブブラウザアイコンをクリックします。

2. ブラウザでのURLの形式は次のようになります：http://localhost:9981/

別のマシン上でのプロトタイプのテスト

1. お使いのコンピューターと別のマシンが、ProtoPie Connectと同じWiFiネットワークに接続されていることを確認します。

2. 別のマシンで任意のウェブブラウザを開きます。

3. アドレスバーにProtoPie ConnectのIPアドレスを入力します。ProtoPie Connectのインターフェースが表示されます。

4. 開きたいプロトタイプの横にあるウェブブラウザアイコンをクリックします。

5. ブラウザでのURLの形式は次のようになります：http://protopie.connect.ip.address:9981/

ウェブブラウザでの音声プロトタイピング機能の使用

ProtoPie Connect 1.8.0以降、iOS/Android用のProtoPie PlayerアプリやProtoPie Studioのプレビューウィンドウと同様に、Web Playerでも音声プロトタイピング機能がサポートされています。現在、サポートされている機能は以下の通りです。

• Voice Commandトリガー

• Speakレスポンス

• Listenレスポンス

互換性のあるウェブブラウザ

マイクの権限を処理する際、動作はブラウザごとに異なります。Voice CommandトリガーとListenレスポンスを使用するには、ブラウザでユーザーによるマイクの許可が必要です。以下のスクリーンショットのように、プロトタイプでマイクを有効にする必要がある場合に、ブラウザがマイクの許可を求めます。マイクへのアクセスを有効にするには「許可」をクリックします。

ProtoPie ConnectのWeb Player用の音声プロトタイピング機能は、Google ChromeやMicrosoft EdgeなどのChromiumブラウザで最適に動作します。音声インタラクションを正しく再生するには、使用するブラウザやプロトタイプの読み込み方法に応じて、ブラウザ側でのセットアップが必要な場合があります。

ウェブブラウザのセットアップ

ウェブブラウザでプロトタイプを再生するには、次の2つの方法があります。

1. IPアドレス上

2. http://localhost:9981/ 上

http://localhost:9981/ でプロトタイプを再生する場合、セットアップは不要で、どのブラウザでも動作します。

IPアドレス（例：http://192.168.0.40:9981/）でプロトタイプを再生する場合、マイクの使用を有効にするために1回限りのブラウザセットアップが必要であり、Google ChromeおよびMicrosoft Edgeでサポートされています。

Chromiumブラウザは、サイトが安全なオリジン（例：httpsまたはlocalhostから提供されている場合）から提供されている場合にのみ、デバイスのマイク権限を許可します。

ProtoPie ConnectのWeb Playerでマイクを使用するには、以下の1回限りのセットアップが必要です。

1. Chrome/Edgeブラウザで、flagsにアクセスします。

chrome://flags/#unsafely-treat-insecure-origin-as-secure

edge://flags/#unsafely-treat-insecure-origin-as-secure

2. Insecure origins treated as secureを有効にします。

3. ポート番号9981を付加したProtoPie Connectのサーバーアドレスを追加します。

注意：サーバーアドレスは、ProtoPie Connectの左下に表示されています。

4. Chrome/Edgeブラウザを再起動（Relaunch）します。

表示オプションのカスタマイズ

ProtoPie Cloudと同様に、URL パラメーターを使用して、ウェブブラウザでのプロトタイプの表示方法をカスタマイズできます。

• これらのパラメーターを含むURLの形式は次のようになります：http://localhost:9981/pie?pieid=[数字]&name=[pieの名前]…

• URL内のパラメーターを区切るには、記号「&」を使用します。

• 別のマシンのブラウザを使用する場合は、localhostをProtoPie Connectに表示されているIPアドレスに置き換えてください。例：http://192.168.123.101:9981/pie?pieid=23

パラメーターを含むURLの例：

• 背景色を白に変更し、ホットスポットのヒントを表示し、プロトタイプを画面に合わせるように拡大縮小します。

• http://localhost:9981/pie?pieid=1&bg=white&touchHint=true&scaleToFit=true

• 背景色を黄色に変更し、カーソルを非表示にします。

• http://localhost:9981/pie?pieid=1&bg=yellow&cursorHide=true

FAQ