INDUSTRIES

自動車

航空・宇宙

金融

ゲーム

メドテック

IoT

デジタルプロダクト

USE CASES

エンタープライズ向け

個人向け

チーム向け

教育向け

KEY FEATURES

ハードウェア・システム統合

Beta

ProtoPie MCP

マルチデバイス・プロトタイピング

インタラクション・ロジック

開発者へのハンドオフ

ProtoPie AI

New

ユーザーテスト

PLUGINS

Figma

Sketch

Adobe XD

INSIGHTS & INSPIRATION

ブログ

eBook

カスタマーストーリー

イベント&ウェビナー

ProtoPie ギャラリー

PRODUCT LEARNING & SUPPORT

ProtoPieスクール

ProtoPieをダウンロード

製品ドキュメント

コミュニティ

INDUSTRIES

自動車

航空・宇宙

金融

ゲーム

メドテック

IoT

デジタルプロダクト

USE CASES

エンタープライズ向け

個人向け

チーム向け

教育向け

KEY FEATURES

ハードウェア・システム統合

Beta

ProtoPie MCP

マルチデバイス・プロトタイピング

インタラクション・ロジック

開発者へのハンドオフ

ProtoPie AI

New

ユーザーテスト

PLUGINS

Figma

Sketch

Adobe XD

INSIGHTS & INSPIRATION

ブログ

eBook

カスタマーストーリー

イベント&ウェビナー

ProtoPie ギャラリー

PRODUCT LEARNING & SUPPORT

ProtoPieスクール

ProtoPieをダウンロード

製品ドキュメント

コミュニティ

ProtoPie Connect

5

分で読める

Intro to ProtoPie Connect 7 of 7: Advanced Bridge App - Connect to Your Smart Home

Learn how to have your Pies interact with your Smart Home, and how to turn your bridge app into a ProtoPie connect plugin.

Jeff Clarke、 UX Designer & ProtoPie Educator
connect ai agents like claude, cursor and more to protopie via mcp

はじめに

物理デバイスを含むプロトタイプを作成したいことはよくあります。ProtoPie Connect に組み込まれているプラグインは、さまざまなものと連携できて非常に便利ですが、それらのプラグインでは対応しきれないものに出会うのは避けられません。前回までのレッスンと同様に、Enterprise プランの購読者はカスタム Bridge アプリを作成して、ProtoPie と想像できるあらゆるデバイスとの通信を可能にできます。

学習内容

先ほどの前回のレッスンで、最初の Bridge アプリの作成と実行方法を学んだばかりですね。このレッスンでは、Home Assistant と呼ばれるオープンソースアプリケーションを使ってスマートホームに接続し、スマート電球を物理的に操作します。

  • ここでも、アプリからProtoPie Connectにすばやく接続するための標準的な「ボイラープレート」コードから始めます。

  • Home Assistant WebSocket API を使って、スマート電球のオン/オフを切り替えるコマンドを中継します。

  • 複数の bridge アプリを同時に実行できることがわかります。

  • チーム内で bridge アプリを簡単に共有できるよう、持ち運び可能なプラグインファイルを作成します。

完了までの目安: ≤30分

必要なもの

ProtoPie Enterprise サブスクリプション

ProtoPie Connect 向けのカスタム bridge アプリの作成は、ProtoPie Enterprise サブスクリプションに含まれる完全版の Connect でのみ利用できます。Enterprise の購読者は、ProtoPie Connect でカスタムプラグインを使用・作成できる追加機能を利用できます。

ある程度のコーディング経験

以下の例に沿うのに、プロの開発者である必要はありません。JavaScript を触ったことが少しでもあれば—簡単なものでも—問題ないはずです。ただし、まったくコーディング経験がない場合は、かなり厳しいでしょう。

もしコーディングが初めてなら、まずは以下のチュートリアルを先に学ぶことをおすすめします:

コーディングを学ぶには確かに時間がかかりますが、プロトタイパーにとっては本当に役立つスキルです。デザイナーであっても、コーディングについて少し知っているだけで、エンジニアチームとの関係が大きく改善します。

そこそこ良いテキストエディタ

コーディングをするので、良いテキストエディタが必要です。Notepad のような OS 標準のユーティリティでも動作しますが、理想的ではありません。幸い、優れたエディタがたくさんあります:

例では Sublime Text を使うので、私と同じ画面を見たい場合は Sublime Text を使ってください。

ネットワーク上で Home Assistant が動作しており、少なくとも 1 つのスマートライトがあること

Home Assistant のインストールと設定はこのチュートリアルの範囲外ですが、Home Assistant の Getting Started ページを開けば、始めるために必要な情報はすべて見つかるはずです。

Home Assistant がサポートする調光可能なスマート電球なら、このチュートリアルで使用できます。

Home Assistant を動かす専用マシンがない場合でも、コンピューター上の仮想マシンで実行できます。このレッスンでも問題なく動作します。

ボイラープレートコード

これは前回のレッスンで使ったものと同じコードです。この ZIP ファイルをダウンロードし、コンピューターの使いやすい場所に展開してください。

[Bridge App Start Code]

開始用の Pie ファイル

次の Pie ファイルをダウンロードして ProtoPie Studio で開いてください。

[Wall Control Pie] [Mobile Controller Pie]

さあ、始めましょう!

下の動画に沿って進めてください。

動画

リソース

完成版 Pie ファイル

完成版の Light Sliders Pie ファイルはこちらです: