MenuToggle Menu

プロトタイプを管理・実行する

ProtoPieでプロトタイプを作成したら、そのプロトタイプをProtoPie Connectに追加すると、スマートデバイスまたはブラウザーでプロトタイプをテストしましょう。

ProtoPieConnectでプロトタイプを管理する

ProtoPie Connectでプロトタイプを管理、プレビューを実行するためには、まずプロトタイプをProtoPieConnectに追加する必要があります。

  • [+ ]ボタンをクリックするか、ファイルを直接ドラッグ＆ドロップして、ProtoPieConnectにファイルを追加します。
  • プロトタイプを削除するには、リストから削除するファイルを選択し、ごみ箱アイコンをクリックします。 または、メニューから[Remove All]を選択して、リスト内のすべてのプロトタイプを一度に削除します。
  • リスト内のプロトタイプを置き換えるには、プロトタイプを選択して、二重矢印アイコンをクリックします。

ProtoPie Connectに追加されたファイルが変更されると、ProtoPie Connectはファイルの変更を自動的に検知し、更新します。

[object Object]

ProtoPie Connectでプロトタイプを実行する

ProtoPie Connectに追加されたプロトタイプを実行する方法は下記の3つです。

ProtoPie PlayerとProtoPie Connect を接続する

ProtoPie Playerは、ProtoPie Studioだけでなく、ProtoPie Connectでも使用できます。 iOS、iPad、AndroidデバイスでProtoPie Playerを使用してプロトタイプをテストしてみましょう。

ProtoPie PlayerをProtoPie Connectに接続する方法は以下の3通りです。

  • QRコードをスキャン
  • IPアドレスを入力
  • USBケーブルを使用

QRコードをスキャンする

1.コンピューターとスマートデバイスが同じWiFiネットワークに接続されていることを確認します 2.実行するプロトタイプのデバイスアイコンをクリックします 3. ProtoPie Playerの QRコードをスキャンボタンをクリックします 4.QRコードをスキャンします 5.接続が成功したら、ProtoPie ConnectのRunボタンをクリックして、スマートデバイスでプロトタイプを実行します。

[object Object]

IPアドレスを入力する

1.コンピューターとスマートデバイスが同じWiFiネットワークに接続されていることを確認します 2. ProtoPie PlayerのドロップダウンメニューでIPアドレスの入力を選択します 3. ProtoPie Connectに表示されているIPアドレスを入力します 4.接続が成功したら、ProtoPie ConnectのRunボタンをクリックします。リストの最初に表示されているプロトタイプがスマートデバイスで実行されます。

[object Object]

ブラウザでプロトタイプを実行します

一般的なブラウザでプロトタイプが実行できます。2通りの方法は下記の通りです。

  • ProtoPie Connectがインストールされている同じデバイスでプロトタイプを実行
  • プロトタイプを別のデバイス（タブレットや他のコンピューターなど）で実行

同じデバイスでプロトタイプを実行する

  1. プレビューするプロトタイプのWeb Browserアイコンをクリックします
  2. ウェブページのURLの形式は次の通りです。http://localhost:9981/
[object Object]

別のデバイスでプロトタイプを実行する

  1. ProtoPie Connectがインストールされているコンピューターと他のデバイスが同じWiFiネットワークに接続されていることを確認します
  2. 別のデバイスでブラウザを開きます
  3. ProtoPie Connectによって表示されるIPアドレスをウェブブラウザーのアドレスバーに入力します。
  4. プレビューするプロトタイプのWeb Browserアイコンをクリックします。
  5. ウェブページのURLの形式は次の通りです。http://protopie.connect.ip.address:9981/.
[object Object]

すべてのプロトタイプを開く

1つのブラウザページですべてのプロトタイプを同時に開くには、右上に表示される...メニューからView Allをクリックします。

[object Object]

ページの背景色をカスタマイズまたはプロトタイプの位置とサイズの調整も可能です。

[object Object]

表示オプションを管理する

ProtoPie クラウドの表示オプションと同様に、ブラウザでURLパラメータを使用して、プロトタイプの表示オプションをカスタマイズできます。

  • パラメータを含むURLの形式は次の通りです。http://localhost:9981/pie?pieid=1&param1=value1&param2=value2&...
  • pieid は、どのプロトタイプを開くかを示す必須のパラメーターです
  • パラメータを**＆**と連結します
  • 別のデバイスでブラウザを開く場合は、localhost を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
Back To Top