Intro to ProtoPie Connect 1 of 7: Use Send and Receive to Make Multiple Pies Talk in Studio

Learn how to use Send and Receive between your Pies to create a true multi-screen experience.

Jeff Clarke、 UX Designer & ProtoPie Educator

2022/07/20

はじめに

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 レスポンスを使っても、完全にはリセットされません。メインシーン上で、外側のサイズ、位置、不透明度などだけがリセットされ、コンポーネントの内部のレイヤーはリセットされないのです。これを回避するには、コンポーネント側でコマンドを受け取るように設定し、受信時に一連のレスポンスを実行してコンポーネントを初期状態に戻すようにします。