MULTISCREEN DESIGNS

Designing for multiple screens

Noodlを使用すると、プロジェクト内に複数のデバイスを作成することができ、各デバイスは独自のインターフェイスを持つことができます。 Noodlは、デバイス間のブリッジとしても機能し、デバイス間のデータの送受信を可能にします。

Get started

このガイドでは、プロジェクトを複数のスクリーンで使用できるようにする方法と、これらの異なるスクリーンを相互にやりとりする方法を少し詳しく解説します。

2つの異なるデバイスが互いに通信する基本的なマルチスクリーンプロジェクトがどのように設定されているかを見たい場合は、以下のサンプルプロジェクトをダウンロードしてください。download the example

Project setup

エディタでNoodlのロゴの横にある設定アイコンをクリックして、プロジェクト設定を開きます。 ここでは、プロジェクトに関連するさまざまな設定にアクセスできます。

Devicesセクションの "+"アイコンをクリックしてデバイスを追加します。 新しいデバイスを追加したら、レンダラーを変更したり、そのデバイスが使用するルートコンポーネントを設定したり、fill modeを変更することができます。

この場合、ダッシュボードとして機能し、スマートホームのタブレットサイズのディスプレイにマウントされたデバイスと、ホームダッシュボードとやり取りできる電話機の2つのデバイスを追加します。

Accessing the different devices

別のデバイスを表示するには、見たいデバイスでWebブラウザを開き、Noodlを実行するコンピュータのip-addressを入力し、ポート8574を介して接続する必要があります。

この情報にアクセスするにはNoodlビューアの通常のpreview on deviceアイコン、または手動でローカルIPアドレスを確認します。

Communication between the two devices

さまざまなデバイスルートで互いに話すことを可能にするために、ノード“Send/Receive Message”を使用します。

このプロジェクトの例では、“Phone (Hannah)” デバイスに配置されたコンポーネント「“horizontal button”」内の2つのデバイスルート間の通信していることがわかります。 “Phone (Hannah)” デバイス上のhorizontal buttonをタップすると、“Tablet (Home)”デバイスの“unlock”状態を示す信号が送信されます。

このコンセプトになじみがないように感じる場合は、Noodlの開始画面にある“Events and messaging”と呼ばれるレッスンで、実践的な例と、実際に起こっていることのさらに詳しい説明を見ることができます

上部コンポーネントは"Horizontal button"内にあります。 下部は、タブレットコンポーネントのルーにあります。

Wrapping up

これで大体は、複数のデバイスを使用するためにプロジェクトを設定する方法の基本をカバーできたはずです!多画面のインタラクションが有用な洞察を提供する使用例はたくさんあります。インスピレーションが必要な場合は、Toppのデモをご覧ください check out this demo from Topp。 マルチスクリーンインタラクションに関して他に質問がある場合は、Reddit threadでチュートリアルについてディスカッションし、マルチスクリーンのデザインをぜひ見せてください!