ProtoPie and blokdots: The Guide To No-Code Arduino Prototyping

はじめに

再プログラム可能で特化型のデバイス技術の登場により、ソフトウェアとハードウェアがどのように連携するかの境界はあいまいになりました。これは、インターフェース設計と、現代においてそれらが消費者のデジタル体験をどのように再定義するかに変革的な影響を与えました。

ProtoPieでは、私たちの使命の一つは、製品デザイナーだけでなく、Makerコミュニティのクリエイターにも、時間とコストの節約をもたらすことです。だからこそ、私たちはblokdotsと協力し、新しいコラボレーション機能を開発しました。このガイドでは、コードを一行も書かずに、プロトタイプ内で最初のソフトウェアとハードウェアの実装を作成する方法を始める手助けをします。

ProtoPieとBlokdots: 同じ哲学（ただし用途は異なる）

ProtoPie は、モバイル、Web、ダッシュボード、デジタルスクリーンなど向けのハイフィデリティなプロトタイピングツールです。blokdotsは、その一方で、Arduinoを使ったプロトタイピングのためのノーコードツールです。どちらも、短時間で複雑で高品質なハードウェアのインタラクションをプロトタイピングする際のノーコードアプローチが共通しています。ProtoPieとblokdotsを一緒に使えば、両方の良いところを得られます。ProtoPieがソフトウェアのインタラクションを担当し、blokdotsがハードウェアのインタラクションを処理します。

これはご自身でも簡単にできます。ですがその前に、この連携に必要な主要ツールを確認しておきましょう:

• ProtoPie Studioは、インタラクションを作成するためのものです。

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

• blokdotsは、ハードウェアのプロトタイピングに使います。

• Pieとblokdotsはsocket.IOを介して通信します。

つまり、下のようなシンプルなArduinoのセットアップだけで、ソフトウェアとハードウェアの接続を簡単かつ動的に実現できます。

動画

スマートホームのプロトタイプを使って、これと同じセットアップを自分で作る方法を引き続き読んでみてください。

さあ、魔法を起こしましょう

必要なもの：

• Arduino：対応ボード一覧はこちらをご覧ください。

• USBケーブル：ボードをデバイスに接続するために使います。

• blokdots：こちらからインストールしてください。

💡 ヒント: この接続を実現するために、blokdotsが推奨するArduino Groveボードを使用します。これは非常に簡単に使え、各コンポーネントの配線も不要です。Seeed StudioのGrove Arduinoボードには10個の事前配線済みモジュールがあり、その多くはblokdotsでサポートされています。

ArduinoからBlokdotsへ

blokdotsを開き、ArduinoボードをノートPC/PCに接続します。blokdotsのLive Viewでは、ボードの準備ができているのが表示されます。

上部のConnect A New Componentボタンをクリックしてウィザードを開き、リストから接続したいものを選びます。この例で使用するモジュールは以下のとおりです：

• ProtoPie Player

• D4: LED

• D5: Buzzer

• D6: Button

• A0: Rotary Potentiometer

セットアップ後、ボード上のいくつかのコンポーネントをテストできます。Line Viewで数値がそれに応じて変化するはずです。

ここで何が起きているのか

インタラクションを作成するのが楽しみだと思いますが、その前に、もう一つ説明しておきましょう。blokdotsがProtoPieと“会話”できるようにするには、ProtoPieのSend / Receive機能を利用する必要があります。これにより、異なるプロトタイプがメッセージを送受信できるようになり、ProtoPieとArduinoが相互に通信できるようになります。つまり、ProtoPie StudioとArduino。の間で、自分のメッセージを送受信して作成・試行できるようになります。

blokdotsは、2つがどのように相互に通信するかという条件を設定するための環境だと考えてください。

💡 覚えておいてください:

• ProtoPie Studioとblokdotsで、メッセージのSendとReceiveの方法を設定します。

• ただし、最終的なインタラクションはProtoPie PlayerとArduinoの間で行われます。

SendとReceiveの設定

ProtoPie Studioでは、Receive TriggerとSend Responseがデバイス間の通信を開始します。必要なのは、ChannelをProtoPie Studioに設定し、Messageを好きな内容に設定するだけです。

💡 ヒント: メッセージは短くしておくのが最適です。たとえば「ToggleLED」は「LEDライトのオン/オフを切り替える」よりも適しています。

また、blokdotsからの値を今後も使いたい場合は、Assign to Variableを選択し、その値を保存するための変数をProtoPieで作成してください。

変数について詳しく学ぶ。

「ProtoPie Studio」をチャンネルとして選択します。

最初のインタラクションを作成する

ユーザーはblokdotsでカードを追加・設定することでハードウェアのプロトタイピングを行います。blokdotsには2種類のカードがあります。If This Then ThatカードとMappingカードです。この例では、If This Then Thatカードだけを使います。

blokdotsからProtoPieへ

次のような条件カードが表示されます：

• If the action of any input hardware component

• Then ProtoPie Player should send message

下のサンプルカードに従ってみてください。たとえばポテンショメーターを回したい場合、次の詳細を使ってblokdotsからProtoPieへメッセージを送信する必要があります：

• メッセージ: degree

• 値: 1~1023

blokdotsからProtoPieへメッセージを送信します

ProtoPieでメッセージを受信するには、下のようにReceiveトリガーを使います。

ProtoPieでメッセージを受信します。

• チャンネル: ProtoPie Studio

• メッセージ: degree

• 「degree」という変数を作成し、その値をこのdegree変数に割り当てます。

ProtoPieからblokdotsへ

ProtoPie StudioのSend機能を使ってメッセージを送信します。

ProtoPieからメッセージを送信します

• チャンネル: ProtoPie Studio

• メッセージ: power

• オプション: 値も一緒に送信できます

メッセージを受信するには、blokdotsに移動して別のカードを追加します。If This Then Thatカードを使います。一般的な構成は通常次のとおりです：

• If ProtoPie Player is receiving message

• Then [任意の出力ハードウェアコンポーネントのアクション]

ProtoPieからの値と一緒にメッセージを受信します。

💡 ヒント: ProtoPieの値を使ってLEDをフェードイン・フェードアウトさせたい場合は、Map…ontoカードを使って、受信した値をblokdotsのハードウェアコンポーネントにマッピングできます。

次のカードを例として見てみましょう。blokdotsがProtoPieから「power」というメッセージを受信すると、ブザーコンポーネントが300ミリ秒鳴るようにトリガーされます。

blokdotsはProtoPieからメッセージを受信します

blokdotsとpieのファイルをダウンロードして、自分で調整することもできます。

[Pieファイルをダウンロード] [blokdotsファイルをダウンロード]

プロジェクトを実行する

あと少しです。QRコードをスキャンするか、アドレスを手動で入力してProtoPie Playerを接続します。これを設定すると、Line Viewは下の画像のようになるはずです。ProtoPieアイコンの左下にある小さな接続インジケーターが緑色に変わります。

ProtoPie Playerを接続するにはQRコードをスキャンします

💡 ヒント: うまくいったか確信が持てない場合は、接続をもう一度確認してください。ProtoPie Playerで成功メッセージが表示されるはずです。

ProtoPie Playerの成功メッセージ

ProtoPie Playerでプロトタイプをプレビューするには、ProtoPie StudioでQRコードをスキャンします。PlayerとStudioが同じネットワークで接続されていることを確認してください。接続されていない場合は、USBでも接続できます。

ProtoPie PlayerをProtoPie Studioに接続する方法について詳しく学ぶ

すべて接続できたので、インタラクションがどのように動くか見てみましょう。blokdotsでは、Project Viewの左上にあるRun Projectボタンを押します。

できました

おめでとうございます！ステップごとにドラッグ＆ドロップで文を追加するだけで、最初のハードウェアとソフトウェアを統合したプロトタイプを正常に起動できました。

プロジェクトにblokdotsとProtoPieを導入すると、コーディングの知識やプログラミング上の制約に縛られず、デザインをすばやくテストできます。ProtoPieとblokdotsはどちらも、誰もがアイデアを構築し、テストし、洗練させて、現実の製品やサービスを生み出せるべきだと強く信じています。あるいは、想像力豊かなメーカーが自由に試し、創造力をかき立てる手助けにもなります。

このガイドがお役に立てば幸いです！ぜひいろいろ試して、プロトタイピングの可能性を広げてください。

ProtoPieについてもっと学ぶ

ProtoPieが持つ無限のプロトタイピングの可能性についてもっと知りたい方は、下からProtoPieを無料でダウンロードして始めてください。

[無料でダウンロード]