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をダウンロード

製品ドキュメント

コミュニティ

Tutorials

11

分で読める

Software & Hardware Integrated Prototyping for Beginners

A step-by-step guide to getting started with Arduino & ProtoPie.

Tony Kim、 CEO & Co-Founder

デジタル変革は、フォーチュン500の巨大企業から、あなたの地元にある小さな新興スタートアップまで、世界中のあらゆる企業にその痕跡を残しました。その結果、この数年で、ソフトウェアとハードウェアの境界は、かつてないほど曖昧になったと言えるでしょう。

GoogleやAmazonのようなテック大手は、従来「ソフトウェア企業」と分類されてきましたが、Google NestやAmazon Alexaのような自社のハードウェアおよびソフトウェア製品の開発を始めています。Appleはこの融合したアプローチを体現しており、ハードウェアとソフトウェアの完璧なバランスを見いだした企業の教科書的な例です。

しかし、製品がハードウェアベースかソフトウェアベースか、あるいはその両方であっても、同じ関門を通らなければなりません。それは、プロトタイピングを何度も繰り返すことです。こうした厳密な検証と妥当性確認、つまり発売前に現実的でインタラクティブなプロトタイプに仕上げることを経た製品だけが、エンドユーザーに成功をもたらします。

産業デザイナーは、ディスプレイに表示される動的で柔軟なコンテンツのプロトタイピングを行わなければなりません。一方、ソフトウェアデザイナーは、デジタルコンテンツに接続されたさまざまなハードウェアのプロトタイピングを求められることがあります。

言うは易く行うは難しです。実際、IoTが日常生活でますます大きな役割を果たすようになっている今、この課題はさらに増しています。自動車業界や家電業界の企業は、長年この課題に取り組んできましたが、今後はほかの業界も続くでしょう。

この記事では、ソフトウェアとハードウェアを統合した最初のプロトタイプの作成を始める方法をお手伝いします。

Arduino と ProtoPie で魔法を生み出す

Makerたちは Arduino が大好きです。ゆるやかな学習曲線のおかげで、ユーザーはコードを書くことに慣れていけますし、活発なコミュニティは、Makerたちが作り上げた製品の刺激的な例を定期的に共有しています。

しかし、Arduino をソフトウェアのプロトタイプ(つまり、ユーザーが操作するプロトタイプを表示するディスプレイ)と組み合わせて使うのは、複雑で圧倒されるような作業になりがちです。

ProtoPie を使えば、これを簡単に実現できることを示しましょう。ProtoPie には、Studio、Player、Cloud の3つのコア要素と、Connect という1つの拡張機能があります。では、それぞれは何をするのでしょうか?

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

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

  • ProtoPie Cloud は、プロトタイプをオンラインで保存し、チームと共同作業するためのものです。

  • ProtoPie Connect は、複数のデバイス、ディスプレイ、ハードウェアにまたがってプロトタイプを同時に実行するためのものです。

ProtoPie Connect を使えば、プロトタイプは Arduino に信号を送ったり、Arduino から信号を受け取ったりできます。つまり、以下に示すように、ソフトウェアのプロトタイプを Arduino のセットアップと動的に連携させることができます。

以下では、DIY の Arduino ゲームパッドで動く 昔ながらのゲーム Galaga のプロトタイプを使って、このセットアップを自分で作る方法を説明します(私は子どものころによくこれを遊んでいました)。

注: Arduino では通常コーディングが必要ですが、私の意見では、ここではそこまで深く取り組む必要はありません。プロトタイプが意図したとおりに動作すれば、それで十分です。

コードを書く必要があるときは、Google でたくさんの例を見つけて、それを参考にできます。

Arduino 環境をセットアップする

Arduino Uno ボードを用意しましょう。これは最も基本的で人気のあるボードのひとつです。アナログ入力ピンが6本、デジタル入出力ピンが14本あります。Arduino Uno ボードのほかに、この例では次の部品も使います。

  • 1 ブレッドボード

  • 2 個のプッシュボタン

  • 2 個の抵抗(10kΩ):プッシュボタン用

  • 1 個のジョイスティックモジュール

  • 1 個の抵抗(1kΩ):ジョイスティック用

  • USB ケーブル(type B to type A):Arduino ボードをノートパソコンに接続するため

  • USB アダプター(type A to type C/micro):Arduino ボードを Android デバイスに接続するため。

  • ジャンパーワイヤー

電子部品を組み立てるには、基本的にはたくさんの穴が開いたプラスチック製のボードであるブレッドボードが必要です。ピンは縦横に接続されているため、回路を作るのに各電子部品を端から端へ配線する必要はありません。


Breadboard with yellow dots


ブレッドボード: 黄色い点は、穴同士がどのようにつながっているかを示しています。

プッシュボタン、ジョイスティック、LED のような電子部品を使うときは、各回路の途中に必ず抵抗を入れる必要があります。これにより、過電流によって電子部品が焼損するのを防げます。

では、下の図を使って部品をつなぎ、ジャンパーワイヤーで慎重に配線しましょう。やっていると電気技師になった気分になるかもしれません。少なくとも私はそうです!


Diagram explaining how to assemble breadboard


ブレッドボード図: 電子部品の組み立て方


Finished setup of breadboard and microcontroller


組み立て後のセットアップはこのようになります。

組み立てたあとのセットアップはこのようになります。

では、今度は電気工学の帽子をソフトウェア工学の帽子に替えましょう。コードを書いたり調整したりするには、コンピューターに Arduino IDE をインストールする必要があります。

次に、必要なコードをコピー&ペーストします(下に示しています)。

USBケーブルでArduino ボードをコンピューターに接続したら、このスケッチ(Arduino ボードで実行されるコードはスケッチと呼ばれます)をボードにアップロードします。始める前に一歩下がって Arduino をよりよく理解したい場合は、まず Arduino UNO について詳しく学んでみてください。

  • まず「Sketch > Verify/Compile」でスケッチを検証します。

  • 「Sketch > Upload」でスケッチをアップロードします。

  • アップロード後は、シリアルモニター(「Tools > Serial Monitor」)でハードウェアが正しく動作するかテストします。

  • プッシュボタンを押したり、ジョイスティックを動かしたりして、モニターウィンドウに信号が入ってくるか確認します。

ソフトウェアをセットアップする

もうすぐ完了です! いまのうちに、モバイルに ProtoPie Player を、デスクトップに ProtoPie Connect をインストールする必要があります(ProtoPie Connect を入手したい場合はお問い合わせください)。この例は Android と iOS デバイスで動作します。ProtoPie Connect を使って ProtoPie が Arduino とどのように通信するかについて、さらに詳しく学びましょう。

ProtoPie Studio を使えば、pie ファイル自体をダウンロードして、好きなように調整できます。

[Download ProtoPie] [Get the Galaga prototype]

ProtoPie Connect 経由で Arduino を ProtoPie Player に接続する

 1. USB ケーブルを使って、ノートパソコン、Arduino Uno、モバイルを接続します。


How to connect Arduino and laptop with ProtoPie player


ProtoPie Player、Arduino、ノートパソコンを接続する

 2. Arduino Sketch(Arduino IDE)から Arduino Uno に Arduino コードを送信します。

 3. 「...」をクリックして ProtoPie Connect に Arduino を接続し、USB ポートと 9600 ボーレートを選択します。

💡 Arduino IDE でシリアルモニターがオンになっていると接続できないので、まずシリアルモニターを必ずオフにしてください。


how to connect Arduino with ProtoPie connect


Arduino を ProtoPie Connect に接続する

 4. 次に、NEW ボタンをクリックして pie ファイルを ProtoPie Connect にアップロードします。

 5. 最後に、モバイルで ProtoPie Player を開き、ProtoPie Connect 上のデバイス USB をクリックします。すると、あなたのプロトタイプが Connect から Player に同期されたことがわかります。

💡 同じ Wi-Fi ネットワーク経由で ProtoPie Player と ProtoPie Connect を接続することもできます。


Sync prototype from ProtoPie Connect to Player


ProtoPie Connect から Player にプロトタイプを同期する

完了ですか? これで準備完了です!

やった!

おめでとうございます! あなたは最初のハードウェアとソフトウェアを統合したプロトタイプを正常に動かしました。

ProtoPie と Arduino を使ってほかに何をプロトタイプ化できるのか、気になっているかもしれません。今お伝えしましょう。可能性は無限大です。

コーディングスキルは、デザイナーがアイデアを探求し、検証するのを妨げる障壁であるべきではありません。また、この種のプロトタイピングを行うのにエンジニアである必要もありません。自分のスキルや専門知識に、ほかの人から借りられる知見を組み合わせてください。Arduino が ProtoPie とどのように連携するかを理解すれば、時間を節約し、より良いプロトタイプを作れます。

もっと学びたいですか?

私にどのようなお手伝いができますか?

ProtoPie の私たちのチームは、業界を問わず、皆さまのプロトタイピングのニーズをお手伝いしたいと考えています。

IoT が多い業界(自動車や接続された家電製品など)向けに、ハードウェア、ソフトウェア、API を統合する具体的なプロトタイピングソリューションをお探しなら、ぜひ お問い合わせください

ProtoPie の自動車向けソリューション

ProtoPie Automotive Solution は、自動車業界のニーズに特化して設計されたプロトタイピングソリューションです。これにより、自動車会社は、あらゆるハードウェアや API と統合しながら、複数のディスプレイにまたがるプロトタイプを構築・テストできます。

その結果は? 自動車会社はプロトタイピングのサイクルを短縮し、より迅速に、より万全な体制で市場に投入できます。

[Automotive Solution について詳しく見る]