はじめに
ProtoPie では、プロトタイプ内でデータをやり取りするために、Send and Receive と呼ばれるメッセージングシステムを利用しています。シーンとコンポーネントの間でコマンドや情報を送受信するために、すでに Send and Receive を使ったことがある方もいるでしょう。
でも、プロトタイプ間でも Send and Receive を使えることをご存じでしたか？ これは、複数画面の体験をあっという間に構築できる、他にはない強力な機能です！
Studio には最初から組み込まれている
ある程度まで、この機能は ProtoPie Studio にすでに標準搭載されています。Studio だけでも、次の制限付きで 2 つの Pie を相互に通信させることができます:
Studio はデスクトップで起動している必要があります
2 つ以上の Pie を相互に連携させることはできません。
ローカルのコンピューター上でのみ動作し、クラウドでは動作しません。
Pie 同士の通信に限定されます。Studio だけでは、物理デバイスとの連携はできません。
ProtoPie Connect なら、もっとすごい！
ProtoPie Connect を加えると、これらの制限はすべて消え去ります。3 つ以上の Pie を使いたいですか？ もちろん可能！ ノートパソコン、スマートフォン、タブレットを同時に使いたいですか？ もちろん可能！ すべての Pie を 1 つの画面にまとめたいですか？ もちろん可能！ 物理ハードウェアと連携したいですか？ もちろん可能！ さらに、エンタープライズ契約なら、これらすべてをクラウドでも動かせます！
すごそうですよね？ ですよね！ ぜひ読み進めて、その仕組みを学びましょう。
学べること
このチュートリアルでは、次の内容を扱います:
Send and Receive の復習
ProtoPie Studio を使った最初の 2 画面体験
ProtoPie Connect で 3 つ目の画面を追加
所要時間: 30 分以内
Send and Receive: ProtoPie のコミュニケーションの要
まずは Send and Receive のおさらいから始めましょう。 すでに使い方をご存じかもしれませんが、少しだけお付き合いください。Send and Receive をしっかり理解することは、複数画面の体験を構築し、さらに Connect を扱ううえで非常に重要です。
Send and Receive の概念はとてもシンプルです。Send Response を使って、好きなメッセージを送信します。送るメッセージには、任意で少し情報を添えることもできます。次に、別の場所で Receive Trigger を使ってそのメッセージを待ち受け、適切に応答します。
たとえば、Send and Receive のよくある使い方は、コンポーネントを初期状態に戻すことです。コンポーネントは自己完結しているため、メインシーンでコンポーネントの複製に対して単純に Reset レスポンスを使っても、完全にはリセットされません。メインシーン上で、外側のサイズ、位置、不透明度などだけがリセットされ、コンポーネントの内部のレイヤーはリセットされないのです。これを回避するには、コンポーネント側でコマンドを受け取るように設定し、受信時に一連のレスポンスを実行してコンポーネントを初期状態に戻すようにします。
チャンネルが重要です
メッセージを送信するときは、特定のチャンネルを通して送ります。そのメッセージを待ち受けるように設定された Receive Trigger は、必ず同じチャンネルを使わなければなりません。そうしないと、そのメッセージは「聞こえない」のです。
次の表は、任意の Receive チャンネルに対応する Send チャンネルを示しています。
このチュートリアルの残りで注目するもう 1 つのチャンネルがあります。これは、複数の Pie が相互に通信するための主な仕組みです。「ProtoPie Studio」 と呼ばれています。
「ProtoPie Studio」チャンネルでメッセージを送ると、別の Pie がそれを「聞いて」応答できます。ProtoPie Connect を使えば、これらのメッセージを物理デバイスや他の Pie に中継でき、完全に没入感のあるハードウェア/ソフトウェア体験を実現できます。
では、実際に見てみましょう！
2 つの Pie の物語
最初の例では、ProtoPie Connect を使わずに 2 つの Pie が相互に通信できることを示します。スマートホームの体験を再現し、たとえば、間取り図のあるタブレットベースのコントロールパネルと、照明の明るさを操作するモバイルアプリを用意します。
開始用 Pie
作業する Pie は 2 つあります。両方をダウンロードして、ProtoPie Studio で開いてください:
チュートリアル
以下の動画に沿って進めてください。
今度は Connect で！
現時点では、この体験は Studio を起動した状態でしか実行できません。ですが、この 2 つの Pie を Connect に読み込めば、さまざまな方法で体験をプレビューでき、さらに Pie を追加することもできます。
このデモでは、先ほど使った Pie を引き続き使用し、デモの途中で 3 つ目の Pie を追加します。こちらからダウンロードできます:
以下の動画に沿って進めてください。
これはまだ序章にすぎません！ ProtoPie Connect を使って、さまざまなものと Pie を連携させる方法を知りたい方は、ProtoPie Connect 入門 2/7: IFTTT との最初の連携 を続けてご覧ください！
完成版の Pie
このチュートリアルで使用したすべての Pie ファイルの完成版です。
