MenuToggle Menu

プロトタイプの管理とテスト

ProtoPie Studioでプロトタイプを作成したら、ProtoPie Connectを使用してスマートデバイスまたはデスクトップブラウザでテストしましょう。ProtoPie Connectのダウンロードはこちらからできます。

ProtoPie Connect によるプロトタイプのテスト

ProtoPie Connectによるプロトタイプのテストは2段階あります。

  • ステップ1 ProtoPie Connectにプロトタイプをロードします。
  • ステップ2 ロードしたプロトタイプをテストします。

プロトタイプのアップロード

まずProtoPie Connectにプロトタイプをアップロードする必要があります。ProtoPie Connectでは1つ以上のPieファイルを同時に再生できます。

  • プロトタイプを追加するには、[+ New]ボタンをクリックし、追加したいプロトタイプを選択します。もしくは単純にプロトタイプをProtoPie Connectのインターフェースにドラッグ&ドロップしてください。
  • リストからプロトタイプを削除するには、Pieファイルを選択してゴミ箱アイコンをクリックします。
  • プロトタイプを交換するには、カーソルをプロトタイプに合わせて両矢印アイコンをクリックします。

新しいpieファイルを追加すると新しいpie IDが作成されます。Pieファイルを置き換えると以前のプロトタイプと同じpie IDが再利用されます。

ProtoPie StudioでProtoPie Connectにアップロード済みのプロトタイプを変更すると自動で反映されます。

[object Object]

Pieをグループ配置することで、さらに直感的な並び替えができます。Groupのアイコンをクリックして、Pieの新しいグループを作成します。Pieをグループに追加するためには、対象のPieをグループにドラッグ＆ドロップしてください。グループは必ず展開されたままにしてください。

[object Object]
  • Pieを従来のグループから他のグループに移動するためには、対象のPieを移動したいグループにドラッグ＆ドロップしてください。
  • グループを展開し、または閉じるためには1つ以上のPieが含まれている必要があります。
  • グループを選択し、または選択を解除するためには1つ以上のPieが含まれている必要があります。
  • 最後に作成されたグループは、グループ一覧の一番上に追加されます。
  • 最後に呼び出されたPieは、グループ一覧の一番下に追加されます。
  • グループ名を変更する場合は、グループ名をダブルクリックした後、新しいグループ名を入力してください。
  • グループを削除する場合は、グループ名にカーソルを移動した後、ごみ箱のアイコンをクリックします。

プロトタイプのテスト

ProtoPie Connectによるプロトタイプのテスト方法は3つあります。

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ケーブルの使用

ProtoPie Playerアプリの詳細についてはこちら。

QRコードのスキャン

  1. お使いのコンピュータとスマートデバイスを同じWiFiネットワークに接続します。
  2. ProtoPie Connect上で開きたいプロトタイプのQRコードアイコンをクリックします。
  3. 一覧からQRコードを選択します。
  4. QRコードをスキャンしてProtoPie Player上のプロトタイプを起動します。
[object Object]

IPアドレスの入力

  1. お使いのコンピュータとスマートデバイスが同じWiFiネットワークに接続されていることを確認します。
  2. ProtoPie Player上のドロップダウンメニューからIPアドレスのタイプをタップします。
  3. ProtoPie Connectに表示されたIPアドレスを入力します。
  4. 接続ボタンをタップしてお使いのスマートデバイス上のプロトタイプを起動します。
[object Object]

ProtoPie ConnectとProtoPie Player for Wear OSによるプロトタイプのテスト

ProtoPie Player for Wear OSは通常のProtoPie Playerと異なり、ProtoPie ConnectのEnterpriseプランと併用する必要があります。どちらもProtoPieのスマートウォッチソリューションの一部です。

  1. ProtoPie Player for Wear OSとProtoPie Connectを同じインターネットネットワークに接続します。
  2. ProtoPie Player for Wear OSとProtoPie Connectを開きます（自動で相互認識されます）。
  3. ProtoPie Player for Wear OS上のタップをクリックしてProtoPie Connectとペアリングします。
  4. スマートウォッチのプロトタイプをProtoPie Connectに追加します。
  5. ProtoPie Connectのインターフェースのトップにある[作動]ボタンをクリックしてProtoPie Player for Wear OS上のプロトタイプを開きます。
  6. プロトタイプを再起動または閉じるには、スマートウォッチのスクリーンをダブルタップします。

ProtoPie Connectによるウェブブラウザ上でのプロトタイプのテスト

主要ブラウザであれば実行可能です。ProtoPie Connectからデスクトップウェブブラウザ上でプロトタイプを開く方法は2つあります。

  • ProtoPie Connectが作動しているデバイスが同じ場合
  • デバイスが異なる場合

デバイスが同じ場合

  1. 開きたいプロトタイプの隣にあるウェブブラウザのアイコンをクリックします。
  2. ブラウザのURLの形式は次の通りです。http://localhost:9981/
[object Object]

デバイスが異なる場合

  1. ProtoPie Connectが作動中のデバイスと別のデバイスが同じWiFiネットワークに接続されていることを確認します。
  2. 別のデバイスでウェブブラウザを開きます。
  3. アドレスバーにProtoPie ConnectのIPアドレスを入力します。ProtoPie Connectのインターフェースが表示されます。
  4. 開きたいプロトタイプの隣にあるウェブブラウザのアイコンをクリックします。
  5. ブラウザのURLの形式は次の通りです。http://protopie.connect.ip.address:9981/

同じブラウザのタブで複数のプロトタイプを開く

  1. 同じグループにプロトタイプを追加します。
  2. プロトタイプを選択します(グループ名の隣にあるチェックボックスをクリックして、グループ内にある全てのプロトタイプを選択することができます)。
  3. MultiViewのアイコンをクリックして、1つのブラウザで複数のプロトタイプを開きます。
[object Object]

画面を右クリックして、コントロールメニューを開きます。Settingsをクリックして、背景色のカスタマイズやプロトタイプのサイズ変更および再ソートを行うことができます。

[object Object]

以後MultiViewでプロトタイプを再実行する場合、レイアウトの新しい設定で表示されます。グループ内のPieを削除し、または順番を変更すると、レイアウトの設定が初期化されます。

ウェブブラウザで音声プロトタイピング機能を利用する

ProtoPie Connect 1.8.以降は、iOS/Android用ProtoPie PlayerアプリやProtoPie Studioのプレビューウィンドウと同様に、Web Playerでも音声プロトタイピング機能をサポートしています。現在、対応している機能は次のとおりです。

対応ウェブブラウザ

マイクのアクセス許可は、ブラウザによって操作が異なります。音声認識トリガーと音声聞き取りレスポンスを使用するには、ユーザーがブラウザにマイクのアクセス許可を与える必要があります。プロトタイプでマイクを有効にする必要がある場合、下記のスクリーンショットのようにブラウザがマイクのアクセス許可を要求します。マイクのアクセスを有効にするには「許可」をクリックします。

[object Object]

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/）でプロトタイプを再生する場合、マイクの使用を有効にするための一回限りのブラウザ設定が必要です。これはGoogle ChromeとMicrosoft Edgeで対応しています。

Chromium系ブラウザは、安全なオリジンを持つサイト、つまりhttpsまたはローカルホストからの発信である場合にのみ、デバイスのマイク使用を許可します。

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を有効化します。

[object Object]

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

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

[object Object]

4. ChromeまたはEdgeブラウザを再起動します。

[object Object]

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

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

  • パラメータ付きＵRLの形式は 次の通りです。http://localhost:9981/pie?pieid=[ number]&name=[pie name]…
  • 「&」記号を使用してURL中のパラメータを分けます。
  • 異なるマシン上でブラウザを使用している場合、ローカルホストをProtoPie Connectに表示されているIPアドレスに置き換えます。例 http://192.168.123.101:9981/pie?pieid=23.

pieid: Pie ID

  • 値: number
  • デフォルト値: (required)
  • 例: http://localhost:9981/pie?pieid=1

fullscreen: ブラウザに全画面ボタンを表示

  • 値: true | false
  • デフォルト値: false
  • 例: http://localhost:9981/pie?pieid=1&fullscreen=true

bg: 背景のカラー

  • 値:
    - CSS color, e.g., red, black, transparent
    - HEX, e.g., #ffffff
    - rgb, e.g., rgb(255,255,0)
    - rgba, e.g., rgba(200,100,20,0.4)
  • デフォルト値: transparent
  • 例: http://localhost:9981/pie?pieid=1&bg=#000000

hotspotHints: プロトタイプでホットスポットのヒントを表示する

  • 値: true | false
  • デフォルト値: ProtoPie Connectのデフォルト値
  • 例: http://localhost:9981/pie?pieid=1&hotspotHints=true

cursorHide: プロトタイプのカーソルを隠す

  • 値: true | false
  • デフォルト値: false
  • 例: http://localhost:9981/pie?pieid=1&cursorHide=true

scaleToFit: 画面に合わせてプロトタイプをスケーリングする

  • 値: true | false
  • デフォルト値: true
  • 例: http://localhost:9981/pie?pieid=1&scaleToFit=false

パラメータ付きのURLの例：

  • フルスクリーンボタンを表示、背景色をrgba（0,0,255,0.8）に設定、ホットスポットヒントを表示して、画面に合わせてプロトタイプを拡大縮小しないように設定する http://localhost:9981/pie?pieid=1&fullscreen=true&bg=rgba(0,0,255,0.8)&touchHint=true&scaleToFit=false
  • 背景色を黒に設定、ホットスポットのヒントを表示して、画面に合わせてプロトタイプを拡大縮小するように設定する http://localhost:9981/pie?pieid=1&bg=black&touchHint=true&scaleToFit=true
  • 背景色を黄色に設定し、カーソルを非表示にする http://localhost:9981/pie?pieid=1&bg=yellow&cursorHide=true

ProtoPie Connectでメッセージのデバッグ

送受信した全メッセージは、接続したすべてのプロトタイプ、カスタムプラグイン、ProtoPie Connectのインターフェースの右側にあるハードウェアデバイスで閲覧できます。デバッグする場合、ダッシュボードからメッセージを送信し、プロトタイプできちんと受信されたかをテストできます。

[object Object]
Back To Top