ProtoPie MCP ベータ版を提供開始!詳しくはこちら。

ProtoPie MCPのベータ版が提供開始!

Introducing ProtoPie

始める

Making Your First Prototype

ProtoPie Ecosystem

ProtoPie Studio Interface

Import

始める

Importing From Adobe XD

Importing From Figma

Importing From Sketch

ProtoPie Genie

Basic Elements

Containers

Devices

Layers

Preview Window

Scenes

Scroll/Paging

Shortcuts

System Status Bar

Triggers & Responses

Easing

Annotations

Responses

Timelines

Triggers

Formulas

始める

Functions

Layer Properties

Syntax

Formulas Use Cases

Variables

始める

Variables

Predefined Variables

Variables Use Cases

AI

始める

AI Interaction Creation

AI Document Q&A

AI Panel Interface

Tips for Best Results

ProtoPie MCP

Getting Started

Studio MCP 概要

Studio MCP インストールとセットアップ

Code MCP 概要

Code MCP インストールとセットアップ

Dev View

Auto Layout

시작하기

Auto Layout Properties

Components

始める

Component Guides

Editing Components

Nested Components

Send & Receive Messages

Interaction Libraries

始める

Managing Interaction Libraries

Managing Library Members

Voice Prototyping

Getting Started

Listen Response

Speak Response

Use Cases

Voice Command Trigger

Connecting Devices

Connecting blokdots

Connecting Mobile Devices

ProtoPie Cloud

始める

Managing Prototypes

Managing Storage

Sharing Prototypes

ProtoPie Player

Testing Prototypes

Managing Fonts

Offline Testing

ProtoPie Player for Wear OS

Teams

始める

Editors & Viewers

Onboarding Your Team

Projects

Team Owner & Team Admin

Handoff

始める

Creating Interaction Recordings

Managing Interaction Recordings

Recording Page

User Testing

始める

Overview

Creating Test Rooms

External Integrations

Managing Test Sessions

Test Results & Analysis

User Testing on ProtoPie Cloud

ProtoPie Connect

始める

API Plugin

Arduino Plugin

blokdots Plugin

Connect Embedded

Custom Layer Integrations

Custom Plugins

Connect Devices

Gamepad Plugin

IFTTT Plugin

Logitech G29 Steering Wheel Plugin

Testing Prototypes

Feature Comparison

Unity Plugin

ProtoPie Enterprise

始める

Organization Settings

Service Admin

Single Sign-On (SSO)

Security

Overview

Access Control

Data Transit, Storage & Backup

Incident Response

Network & ProtoPie Player App Security

Physical Security

Risk Management

Menu

Introducing ProtoPie

始める

Making Your First Prototype

ProtoPie Ecosystem

ProtoPie Studio Interface

Import

始める

Importing From Adobe XD

Importing From Figma

Importing From Sketch

ProtoPie Genie

Basic Elements

Containers

Devices

Layers

Preview Window

Scenes

Scroll/Paging

Shortcuts

System Status Bar

Triggers & Responses

Easing

Annotations

Responses

Timelines

Triggers

Formulas

始める

Functions

Layer Properties

Syntax

Formulas Use Cases

Variables

始める

Variables

Predefined Variables

Variables Use Cases

AI

始める

AI Interaction Creation

AI Document Q&A

AI Panel Interface

Tips for Best Results

ProtoPie MCP

Getting Started

Studio MCP 概要

Studio MCP インストールとセットアップ

Code MCP 概要

Code MCP インストールとセットアップ

Dev View

Auto Layout

시작하기

Auto Layout Properties

Components

始める

Component Guides

Editing Components

Nested Components

Send & Receive Messages

Interaction Libraries

始める

Managing Interaction Libraries

Managing Library Members

Voice Prototyping

Getting Started

Listen Response

Speak Response

Use Cases

Voice Command Trigger

Connecting Devices

Connecting blokdots

Connecting Mobile Devices

ProtoPie Cloud

始める

Managing Prototypes

Managing Storage

Sharing Prototypes

ProtoPie Player

Testing Prototypes

Managing Fonts

Offline Testing

ProtoPie Player for Wear OS

Teams

始める

Editors & Viewers

Onboarding Your Team

Projects

Team Owner & Team Admin

Handoff

始める

Creating Interaction Recordings

Managing Interaction Recordings

Recording Page

User Testing

始める

Overview

Creating Test Rooms

External Integrations

Managing Test Sessions

Test Results & Analysis

User Testing on ProtoPie Cloud

ProtoPie Connect

始める

API Plugin

Arduino Plugin

blokdots Plugin

Connect Embedded

Custom Layer Integrations

Custom Plugins

Connect Devices

Gamepad Plugin

IFTTT Plugin

Logitech G29 Steering Wheel Plugin

Testing Prototypes

Feature Comparison

Unity Plugin

ProtoPie Enterprise

始める

Organization Settings

Service Admin

Single Sign-On (SSO)

Security

Overview

Access Control

Data Transit, Storage & Backup

Incident Response

Network & ProtoPie Player App Security

Physical Security

Risk Management

blokdots & ProtoPie

blokdots は、Arduino を使ったインタラクティブなハードウェアプロトタイプを構築するためのコード不要のソフトウェアです。ProtoPie と blokdots を組み合わせることで、1行のコードも書かずにハードウェアとソフトウェアのプロトタイピングの隔たりを埋めることができます。

この統合はすべてのプランで利用できます。ただし、blokdots を ProtoPie Connect と併用することで、3台以上のデバイスを含むハードウェアとソフトウェアのインタラクションを作成できる機能など、新たな可能性を広げることができます。ProtoPie Connect で blokdots プラグインの動作 がどのようになっているかについて詳しく見てみましょう。

ProtoPie を blokdots に接続するための、最もシンプルなエコシステムは次のとおりです:

  • ProtoPie Studio - インタラクションを作成するため。

  • ProtoPie Player - スマートデバイス上でプロトタイプを実行するため。

  • blokdots - socket.IO を介して Arduino とプロトタイプ間の通信を容易にするため。


{'_type': 'localeString', 'en': 'blokdots_and_protopie_environment'}

準備

ProtoPie で blokdots を使用するには、次のものが必要です:

  • デスクトップに blokdots アプリ がインストールされていること。

  • Arduino ボードをセットアップします。対応しているボードは こちら で確認してください。

  • Arduino ボードをノートパソコンまたは PC に接続するための USB ケーブル。

  • blokdots pro の無料トライアルを有効にします。

Arduino を blokdots に接続する

blokdots を開き、Arduino ボードをノートパソコンまたは PC に接続します。

左上隅にボードの準備完了が表示されたら、コンポーネントの設定を開始できます。

blokdots でコンポーネントを設定する

  1. Connect A New Component をクリックし、接続したいものを選択します。

  2. 一覧から利用可能な Grove スロットまたはハードウェアピンを選択します

  3. Set Component. をクリックします。

この手順は、blokdots が Arduino ボードのどのコンポーネントを制御するかを把握するために必要です。


{'_type': 'localeString', 'en': 'blokdots wizard bg'}

blokdots を介して ProtoPie と Arduino を接続する

blokdots アプリを使用すると、ProtoPie と Arduino が相互にメッセージを送信できます。これを実現するには、次のことが必要です:

  1. ProtoPie Studio で送信と受信を設定する

ProtoPie Studio では、Receive TriggerSend Response によってデバイス間の通信が開始されます。ChannelProtoPie Studio. に設定してください。MessageValue は自由に設定できます。

  1. blokdots で条件カードを作成する

blokdots のコンポーネントにロジックを追加するには、Project View のメイン領域でカードを追加し、設定する必要があります。blokdots には 2 種類のカードがあります。「If This Then That」カードと「Mapping」カードです。

最終的なインタラクションは ProtoPie PlayerArduino の間で行われるため、両者を組み合わせることで通信が可能になります。

blokdots から ProtoPie へのメッセージの受信

blokdots から ProtoPie にメッセージを送信するには、条件カードは次の構造である必要があります:

  • If 任意の入力ハードウェアコンポーネントの動作

  • Then ProtoPie Player送信 メッセージ を送ります

以下のスマートホームプロトタイプの例では、Arduino ボード上の Potentiometer を回すと、ProtoPie Player で実行中の pie ファイルに表示される温度の数値が変わります。


{'_type': 'localeString', 'en': 'blokdots to protopie'}

blokdots からメッセージを受信するには、以下のように ProtoPie Studio で Receive トリガーを使用します。


{'_type': 'localeString', 'en': 'receive_trigger_protopie_studio'}

ProtoPie から blokdots へのメッセージ送信

ProtoPie Studio から blokdots にメッセージを送信するには、Send レスポンスを使用します。


{'_type': 'localeString', 'en': 'send_response_protopie_studio'}

ProtoPie からメッセージを受信するには、blokdots の条件カードは次の構造である必要があります:

  • If ProtoPie Player受信 メッセージ を受信している

  • Then 任意の入力ハードウェアコンポーネントの動作


{'_type': 'localeString', 'en': 'protopie to blokdots'}

インタラクションのテスト

インタラクションをテストするには、次の手順を実行します:

  1. ProtoPie Player を blokdots に接続します(現時点では iOS のみ)

左下隅の ProtoPie アイコンの上にカーソルを置くと blokdots に表示される QR コードをスキャンするか、IP アドレスを入力してください。設定が完了すると、ProtoPie Player コンポーネントは緑色に変わります。


{'_type': 'localeString', 'en': 'connecting_player_with_blokdots'}
  1. ProtoPie Studio を ProtoPie Player に接続します

詳しく見る で ProtoPie Player の接続方法を確認できます。

  1. blokdots でプロジェクトを実行します

プロジェクトウィンドウ上部の Run Project ボタンをクリックします。


{'_type': 'localeString', 'en': 'run blokdots project'}

ProtoPie と blokdots の統合についてさらに詳しく知り、自分で試してみたい場合は、このステップバイステップの チュートリアル をご覧ください。

よくある質問

firmata-can-not-be-uploaded-on-blokdots-error

I get an error message on the blokdots app that Firmata cannot be uploaded. What does it mean?

To be able to communicate with blokdots, the Arduino board needs to be flashed with Firmata, a protocol that allows it to communicate with your computer. Once you open blokdots and plug in your Arduino, blokdots flashes the board with the Firmata automatically. However, in case you get an error message that Firmata cannot be uploaded you can follow these steps to troubleshoot it:

Open Arduino IDE → File → Examples → Firmata → StandardFirmata → Click on the Arrow icon to upload Firmata. Once the sketch is compiled, you will get a notification message that Firmata has been successfully uploaded.


upload_firmata_arduino


upload_standard_firmata_arduino

arduino-board-not-detected-troubleshoot

My Arduino board is not detected. What should I do?

If your board does not appear in the Arduino application Port menu and you get a “Board not connected” message in your blokdots application, please follow these troubleshooting steps.

troubleshoot_arduino_board


troubleshoot_arduino_port