私もフロントエンド・エンジニアではありますが、もともと関心があったことと、去年からデータ・ストリームのPaaS (platform as a service) 会社であるPubNubで働いていることもあって、IoTを避けずには通れなくなり、電子工作を始めるようになりました。

そこで、最近東京・渋谷で行われた、東京Node学園で登壇した際に話したテーマ、Hardware Hacking for JavaScript Developers から、ArduinoとNode.jsを使ってプロトタイプする、という内容についてチュートリアル形式で書いてみたいと思います。

Arduinoが変えたMakerムーブメント

みなさん、Arduinoの名前は聞いたことがあると思います。Arduino、もしくはGenuinoとして知られているこのオープンソースのAVRマイクロコントローラ電子工作キットは、既存のマイコンボードと違い、安価で、I/Oポートもあり、USB接続で今すぐ始められます。開発環境（IDE）とサンプルコードなども簡単にダウンロード、インストールできることから初心者でも簡単に電子工作ができるようになったという面では、今までハードウェアに縁がなかったソフトウェアエンジニアが、Makerムーブメントに積極的に参加するようになった火付け役ともいえると思います。

しかし、同じソフトウェアといえども、ウェブエンジニアはどうでしょう？Arduinoで使用される言語はC-ベースのSketchということで敷居が高く感じたり、興味がなかったりするのではないでしょうか？でも、もし馴染みのJavaScriptで好きなことができたら、遊んでみたくなりませんか？

Johnny-Five: JSロボティクス・フレームワーク

そこで紹介したいのが、JavaScript ロボティクス・フレームワークである、Johnny-Five。日本ではまださほど知られていない感じがしますが、オープンソースでディベロッパ・コミュニティの結束も固く、インターナショナル NodeBots Dayなどでユーザ・コミュニティも大きくなってきたこのフレームワークを使えば、JavaScriptをで簡単にプログラマブル電子工作ができるようになります。ここは説明よりも実践してみるほうが理解も深まると思いますので、さっそくチュートリアルを始めましょう！

1. Arduino のセットアップ

用意するハードウェアとインストールの必要なソフトウェア

• Arduino (Genuino) Uno
• Arduino IDE
• Node.js

始めにセットアップから始めます。ArduinoボードをUSBで、コンピュータにつなぎます。Arduino IDEをダウンロード、インストールして、起動させたら、ボードとシリアルポートの設定をします。

メニューのツール > マイコンボードの中のArduino Unoを選択し、 ツール > シリアルポートの中の/dev/tty.usbmodem、もしくはcu.usbmodemという名前が含まれる項目を選びます。

Johnny-FiveはFirmataプロトコルを使ってArduinoと通信をするので、今度はStandardFirmataをインストールします。

メニューからファイル > スケッチの例 > Firmata > StandardFirmataを選択すると新しいウィンドウが開きます。そこから左から２番目にあるアップロードボタンをクリックします。下のGIFアニメーションの通りです。

終わったら閉じ、このIDEはもうこれからは必要ありません。

2. Hello World

まずコンピュータに、Node.jsがすでにインストールされていることを、確認してください。そして適当なディレクトリ (e.g. /j5-hello/) を作ったら、そのディレクトリ内にパーケッジマネージャであるnpmを使って、Johnny-Fiveをインストールします。

$ npm install johnny-five

さっそくJohhny-Fiveを使ってはじめの一歩である、Hello Worldを書いてみましょう。新しい言語やフレームワークを学ぶ際に初めて書くプログラムは”Hello world”という2つの単語を出力する、というのが一般ですが、ここでは、ハードウェア界のHello Worldとも言える「Lチカ」（LEDを点滅させる）をしてみます。

必要なハードウェア

• セットアップ済みのArduino Uno
• LED
• ブレッドボード
• ジャンパー・ワイヤー（両側がピン状になっているオス〜オス）
• 抵抗　（200-330Ω 程度）

まずはハードウェア側のセッティングです。 部品などどこで買ったらわからない、という方はAmazonなどでキットを買うのをお勧めします。

LEDの基本

LED（発光ダイオード）には、極性があり、その＋極をアノード、ー極をカソードと呼びます。普通のLEDには通常、足が二本ついていますので長い方がアノードです。これは回路を作るときに重要になってきますので必ず覚えておいてください！

電気回路の作成

ArduinoからLEDを光らせるための回路はこんな感じになります。ここでは便宜上、電源からつながるプラス側を赤、Groundにつながるマイナス側を黒のワイヤーで示してあります。何色を使っても構いませんが、混乱を避けるために2つの異なる色にすることをお勧めします。

ブレッドボードや抵抗についての基本、そしてこの「Lチカ」の回路については初心者でもわかる・できる！Arduinoを使った初めての電子工作実践の「部品をつなぐ」セクションで豊田陽介さんが詳しく説明されているので、それを参考にしましょう。

Johnny-FiveでLチカ

では、適当なファイルネーム、例えばblink.jsを作成し下のコードをコピーペーストしてください。

var five = require('johnny-five');
var board = new five.Board();

board.on('ready', function() {
  var led = new five.Led(13);
  led.blink(500);
});

ターミナルからこのファイルを走らせましょう。

$ sudo node blink.js

正しく作動しましたか？回路が正しく、コードにエラーがない場合は、500ms間隔でLEDが点滅します。

これで、JavaScriptとハードウェアを使う基本を学びましたので、今度は実際にスマートデバイスのプロトタイプを作ってみましょう。

3. スマート照明システムをプロトタイプする

Philips HUEや、LIFXは、ムードや状況によってスマートフォンやタブレットから、明かりの色や照度をカスタマイズできるLED電球です。さっそく Arduinoを使ってこれらのように色を自在に変えられるLEDを作ってみましょう。色を変えるためのコントローラはHTML５を使ってブラウザから操作できるようにしましょう。

JavaScript で Internet of Things

さて、ここで重要なのは、デバイス（ハードウェア）とモバイルUI (HTML5)をインターネットでつなげて、IoT化するということです。Bluetoothなどと違い、インターネットにさえ繋がっていれば、あなたが世界のどこにいようともモバイルから自宅の照明の操作をすることができるのです。この2ウェイ・コミュニケーションを可能にするにはソケット・コネクションが必要になります。ここで、この双方向通信を簡単に行うことにできるPubNubのJavaScript APIを使って、IoTのプロトタイプをしてみましょう。

PubNub はグローバルなデータストリームネットワーク (DSN) で、 このAPIを使ってリアルタイムアプリケーション、IoTデバイスなどを接続、拡張、管理することができます。今から作成するスマートLEDは下の図のようにモバイルデバイス（このプロトタイプの場合はブラウザ）とハードウェアをインターネットでつなげることが可能です。

例えば、サンフランシスコにいるモバイルユーザが東京にあるArduinoを操作する場合：

1. ユーザがモバイルから「緑い照明にしたい」と送信（パブリッシュ）
2. メッセージがPubNubのサンスランシスコデータセンターに送信される
3. データは世界各地のデータセンターと同期
4. Arduinoが東京データセンターからデータを受信（サブスクライブ）して、LEDを緑に

この全てのオペレーションがわずか¼秒かそれ以下で行われるのが、PubNubの利点です。

このチュートリアルではJavaScriptを使ってプロトタイプを作りますが、PubNubの組み込みとモバイルのSDKを使えば、実際にHUEのようなスマートデバイスを製品化することも可能なのです。

必要なハードウェア

• Arduino Uno
• RGBフルカラーLED（カソードコモン）
• ブレッドボード
• ジャンパー・ワイヤー（オス〜オス）
• 抵抗　（220Ω x 2, 330Ω x 1）

RGBフルカラーLEDの基本

RGB (Red-Green-Blue) フルカラーLEDは、赤、緑、青の3色のLEDが一本になったもので、この三原色の組み合わせで無数の色を作り出すことができます。ほとんどのこのタイプのLEDは、各色のピンが一本づつと共通のカソード（もしくはアノード）の合計4本のピンがあります。このチュートリアルでは、カソードコモンのものを使用しています。

電気回路の作成

Hello World を成功させたからには、この下の図の回路も問題なく作れるのではないでしょうか。がんばってみてください。

ワイヤーを差し込むピンは、単純な「Lチカ」とは違い、PWM (Pulse Width Modulation：パルス幅変調) ピンを使っています。Arduinoボードにラベルされているピン番号の前に「〜」が付いているものがPWMピンになります。

これらと他のピンの違いは、簡単にいえばアナログかデジタルかの違いになります。例えばLEDの場合、一般のデジタルピンにつなぐとオフかオンの2つのステートしか表現できません。Lチカ（点滅）はこのデジタル信号をオンとオフと交互に発しています。しかしRGBフルカラーLEDで無数の色を表現するには、各色の値の組み合わせで色を作り出すので中間の値が必要になりますので、アナログであるPWMピンを使います。

ここで抵抗を220Ωと330Ωにわけてあるのは、同じ抵抗だと赤が強くなるので、抵抗を増やして赤を控えめな明かるさになるように調整してあります。抵抗の計算方法やカラーコードの読み方については、ここで割愛しますが、自分でいろいろ調整してみてください。

IoT リモートコントローラーUIの作成

ブラウザでLEDの色をコントロールするUIを作ってみましょう。

HTML5の“、”R”、”G”、”B”の各色調整をするスライダーバーを描写します。各色は0から255まで(min="0" max="255")の整数の値(step="1")を、つまみで調節できるようなUIにしてみましょう。

<input id="red" type="range" min="0" max="255" step="1" value="0">

これで赤色を調節するスライダーができました。このチュートリアルではCSS部分は省略しますが、スクリーンショットのようなスタイルにするには、GitHubのソースコードのgh-pages ブランチを参照してください。

次はJavaScriptでこの値がユーザによって変更された時に、その値をArduino側に反映させるようにします。これを実現させるためにPubNub JavaScript APIで両デバイスを接続させてみましょう。

PubNub JavaScript API を使うには、まず自分のAPIキーを取得を取得したら、CDNライブラリ（もしくはローカルファイル）を読み込みます。

<script src="//cdn.pubnub.com/pubnub-3.7.15.min.js"></script>

そして自分のキーを使ってインスタンスを初期化します。

var pubnub = PUBNUB({
　subscribe_key : '自分の subscribe key',                          
　publish_key   : '自分の publish key'
});

UIイベント発生時に自動的にLEDの色を変える仕様にしてみましょう。 スライダーDOMにchangeイベントが発生した時に、変更値をPubNubに publish メソッドを使って送信（パブリッシュ）します。

var red = document.getElementById('red');

red.addEventListener('change', function(){
  pubnub.publish({
    channel: 'smart-led', 
    message: {color: 'red', brightness: +this.value}
  });
}, false);

この時の channel 名は何でも構いませんが、のちにこのデータを受信する際にはこれと同じチャンネル名にします。

では次はNode.jsを使ってハードウェア側でこの値を反映させてみましょう。

Johnny-Five と PubNub で Arduino を IoTデバイスに

Johnny-FiveでRGBフルカラーLEDを動かすコードは、いたって簡単。npmでjohnny-fiveをインストールしたら、次のコードを動かしてみてください。

var five = require('johnny-five');
var led;

five.Board().on('ready', function() {
  console.log('ready');

  // RGB LED を初期化
  led = new five.Led.RGB({
    pins: { // pin 番号
      red: 6,
      green: 5,
      blue: 3
    }
  });

  // テスト
  led.color({red: 255, blue: 0, green: 0});
  
  led.on();
});

LEDが赤色に光ましたか？ 何も起こらない場合はコードと配線などを確かめてください。それでも作動しない場合は、使っているRGB LED がカソードコモンではなくアノードコモンの可能性があります。その場合は、GND（図上の黒のワイヤー）を、Arduinoの5Vのピンに変えてみてください。

「テスト」とコメントされた行をみてください。color メソッドでLEDの色を指定しているのがわかると思います。この場合、赤の値が255で他が0となっているので、LEDを赤で光らせることができます。Johnny-Fiveでは、CSSのcolorプロパティと同じようにRGBの値を0～255で指定することができるのです。RGBの各値を変えながらどんな色になるか実験してみてください。

さて今度は、このRGBの値をブラウザUIからリモートコントロールして、動的にLEDの色を変えてみましょう。

さきほどのUI側からパブリッシュされたデータを受け取って、ハードウェアに反映させるには、PubNub subscribe メソッドで受信（サブスクライブ）しましょう。

まず、npm で pubnub をインストールします。

$ npm install pubnub

フロントエンドと同様に、pubnubインスタンスの初期化します。

var pubnub = require('pubnub').init({
  subscribe_key: '自分の subscribe key',
  publish_key:   '自分の publish key'
});

UI側から送信されたデータは、同じ channel にアクセスすることによって自動的に送信することができます。データが送信された際には、subscribe メソッドの callback が返されます。このコールバック内で送信された色データをLEDに反映させます。

pubnub.subscribe({
  channel: 'smart-led',
  callback: function(m) {
    if(led) {
      r = (m.color === 'red') ? m.brightness : r;
      g = (m.color === 'green') ? m.brightness : g;
      b = (m.color === 'blue') ? m.brightness : b;

      led.color({red: r, blue: b, green: g});

      console.log( 'color change to...' );
      console.log( led.color() );
    }
  }
  error: function(err) {console.log(err);}
});

送信されたメッセージ、m は、UIから送られたオブジェクト、例えば青の値が150の場合、{color: 'blue', brightness: 150}、となります。次に送信された値が、{color: 'red', brightness: 150} ならば、前の値の青＝150はそのままで、ここに赤＝150が加わることによって、LEDは紫に近い色になります。さらに赤緑青の3つの値が変われば、LEDはさまざまな色に変わります。

全コードは、GitHubのソースコードのmaster ブランチ内の /node/index.jsを参照してください。

さて、これでIoTスマート照明のプロトタイプができあがりました！

Johnny-FiveもPubNubもArduinoだけではなく、他のいろいろなマイクロコンピュータに使うことができます。いろいろなセンサーやカメラなどを組み合わせて、IoTプロトタイプに挑戦してみてください。

では、Happy hacking!

References

• Johnyy-Five: The original JavaScript Robotics programming framework
• PubNub: The global realtime Data Stream Network for IoT, mobile, and web applications

Arduinoなどのマイコンのおかげで、ハードウェア開発、特にプロトタイプづくりに関するハードルはだいぶ下がりました。自分（白石）のような人間でも、LEDをチカチカさせるくらいのことはやってみたことがあり、「こんなに簡単にハードを制御できるなんて！」と感動したのを覚えています。ただ、プロトタイプを一度作ってみると、更なる大きな疑問がわいてきます…身の回りにあるハードと、自分の作ったプロトタイプの落差に驚愕するのです。

自作したプロトタイプを、カッコいい量産ハードウェアに持っていくためには、どんな作業が必要なの？ 今回はそんな素朴な疑問に答えてもらうべく、Cerevoさんにお邪魔してプロダクトマネージャーの國舛さんにお話を聞いてきました。

Cerevoといえば「LiveShell」などのハードウェア制作で有名なハードウェアスタートアップ。先日のCESでは「Top Tech of CES」を受賞されたりと、その快進撃は止まりません。今回インタビューに答えていただいた國舛さんは、現在はCerevoのプロダクトマネージャーを務めていらっしゃいます。が、「SmartTrigger」という製品を手がける前までは、ハードウェア開発の経験を持たないWebエンジニアでした（僕らと一緒ですね！）。

　▲株式会社Cerevo プロダクトマネージャー　國舛等志さん

そんな國舛さんに、「量産ハードウェアの作り方」をわかりやすく語っていただきました。では、お楽しみください！

SmartTriggerの説明

白石: 今回は、國舛さんがはじめて中心となって手がけられた量産型ハードウェア、「SmartTrigger」を題材に、ハードウェア開発の実際についていろいろ伺いたいと思っています。どうぞ、よろしくお願いします。

國舛: よろしくお願いします。ではまず、SmartTriggerとはどんな製品かを簡単に説明したあと、開発のお話をしましょうか。

こちらがSmartTriggerです。簡単に言うと、カメラとこのデバイスをつないでおくことで、スマホからリモートでカメラを操作できる、という製品ですね。 シャッターを押すのはもちろん、連写やタイマー撮影もできます。

　▲聞き手：HTML5 Experts.jp編集長　白石俊平

白石: おもしろいですねー。SmartTriggerが、スマホから送られてくる命令に従って、カメラを操作するという感じなんですね。

國舛: そのとおりです。タイムラプス動画（時間をかけて連続撮影した写真を動画のように高速再生するテクニック。時間を圧縮したような感覚の動画を得られる）も、間隔や秒数などのパラメータをセットしたら、あとはSmartTriggerが勝手にやってくれます。その間、スマホでは別の操作をしていても全然構いません。

白石: カメラとSmartTrigger、スマホはどういう風に通信するんですか？

國舛: SmartTriggerとスマホの間はBluetoothで無線通信します。SmartTriggerとカメラはケーブルで有線接続。メーカーの違いはケーブルで吸収していますので、国内メーカーのカメラはほとんどサポートできています。

白石: なるほど、手持ちのカメラに合うケーブルも同時に購入する、というかんじなんですね。
では本日は、この「SmartTrigger」を制作するにあたってのいろいろなお話を伺いつつ、「Webエンジニアが量産品のハードウェアを作るまで」をお聞きしたいと思います。

元々はWebエンジニアが趣味で始めたプロジェクト

白石: 國舛さんは以前はWebエンジニアだったとお聞きしていますが、そんな國舛さんがSmartTriggerを作るようになった経緯と製作過程を教えて下さい。

國舛: はい、元々私はJavaで業務系のアプリを作っているエンジニアだったのですが、数年前にCerevoに転職しました。この会社では、最初はPythonでサーバサイドのプログラミングを担当していて、そこからiOSのアプリエンジニアにシフトしていきました。

SmartTriggerについては、最初は趣味でやっていたんです。テレビを見ていたら「タイムラプス」という表現方法があることを知り、それをキレイに撮れるようなデバイスはないかと探していました。

でもその当時の製品は割と高くてかっこよくなかったんです。買おうかどうか迷って、ネットで情報を収集しているうちに、「どうやら自分でもプロトタイプなら作れるんじゃないか」と思うようになりまして。同じようなものを作っている方の情報を参考にしながら、同じようにやったらとりあえずできた。

でもそこで自己満足してしまって、その後はしばらくほっといてたんですよ。その後会社でアイデアを出す場があったので、そこでこのアイデアを提案したことが、仕事になったきっかけですね。

白石: なるほど、会社の仕事とも関係なく、純粋に個人的なプロジェクトとして始められたんですね。

國舛: そうなんです。全然仕事にするつもりはなかった。

白石: ちなみに結論を先取りしてしまうと、結局これが量産ハードウェアづくりにつながるわけですが、その時点で量産ハードウェア開発の知識とかはあったんですか？

國舛: いえいえ、それが全然…。周りに助けられながら、なんとかやり遂げた感じです。

白石: それはソフトウェアしか触ったことのないぼくのようなエンジニアからすると、朗報です。いい仲間さえいれば、なんとかなるもんなんですね！

まずはプロトタイピング

白石: では、SmartTrigger開発がどのように進んだのかをお聞かせください。最初のプロトタイプってどんな感じだったんですか？

國舛: 最初はAndroidとArduino、あとカメラを全部有線でつないだようなものでしたね。ネットの情報を見ながら、「Androidで操作したらカメラのシャッターが切れる」というところまで作りました。 プロトタイプは3つくらい作りましたね。

まず最初のプロトタイプは、そもそものコンセプトが実現できるかどうかを、形や大きさを気にせず試してみました。

SmartTrigger最初のプロトタイプ

SmartTrigger2番目のプロトタイプ

SmartTrigger3番目のプロトタイプ

量産に至る過程

白石: ちょっとそこ、詳しくお聞きしてもいいですか？Arduinoとかを使ったプロトタイピングまではまだイメージできるんですが、そこから最終製品を量産するというところまでのイメージがさっぱりわかなくて…

國舛: ぼくの場合はまず、リリース時期を決めてしまいます。例えばクリスマス商戦に間に合わせるぞ、とかですね。そこから逆算して、各工程にかけられる時間を見積もります。

そうして今度は、量産を前提とした試作を行っていきます。試作は毎回、明確な目標を定めて行うようにします。

まず必要なのは基板の設計と製品のデザインですね。それぞれ専門の方に担当していただき、まずは荒くてもいいから動くものを作ります。で、ここでトラブルがたくさん起きる。

それを受けて次の試作では、1度目の試作で出たトラブルに対処しつつ、信頼性の検証を行いました。 例えば静電気が発生しても壊れないとか、ボタンを何回押しても壊れないとか。

こんな感じで、次に何をやるかをイメージしながら、どんどん試作を改良していくイメージです。

白石: デザインはどんどん変化していくんですか？

國舛: いえ、デザインは最初のほうでしっかり固めなくてはなりません。ハードウェアは、デザイン修正のコストが大きいので。そこがWebとは大きく違うところですね。 でも最近は3Dプリンタで簡単に出力できるのがありがたいです。基板が入るかどうかとか、ボタンが押せるかどうかとか、そういったことを確認するためには3Dプリンタで作った試作品がとても役に立ちます。

白石: なるほど。そして、何度か試作を行って完成度を高めたら、いよいよ量産に向けて動き始めるんですよね。

國舛: はい、そうですね。量産するにあたっては、部品を購入したり、工場を決めたりということが必要になってきます。
部品も、物によっては中々入手できなかったりするので、どこからどうやって調達するかを考えなくてはなりません。ぼくらは中国の工場を使ったのですが、部品を現地で調達したほうがいいのか、こちら（日本）で入手したり作ったりしてから送ったほうがいいのかとか、いろいろとトレードオフがあります。

また工場を決定するにあたっては、実際に現地の工場に足を運んで、設備や品質管理のレベルを確認します。スタッフの熟練度は非常に重要で、実際にサンプルを作ってもらって、クオリティを確認する必要があります。 そうして選んだ基板工場や金型工場、組み立て工場に3Dデータや回路図を渡し、量産を依頼するわけです。

白石: 工場に量産をお願いしたら、あとはスムーズに製品ができ上がるんですか？

國舛: それが理想なんですが、実際にはよくトラブルが起きてしまうんですよね。 あらかじめテスト項目を用意しておくんですが、テストにパスしないものが多く出てくると「不良率が高い」ということになって、なかなか出荷したい台数に届かないということになります。

量産するにあたっては、「量産試作」という工程があって、実際の工員さんを使って量産ラインを流してみます。 例えばそこで100台とか、多めの数を流して検証してみて、組立方法を変更して時間を短縮したり、製品に不具合がないかどうかを検証して調整します。 そうして問題が出なくなったら、あとはどばっと流すかんじですね。

ハードウェア開発の体制と工程

白石: 量産に至るまでの流れが、少しイメージできるようになりました。これも聞きたいんですが、ハードウェアを作るとなると、実際にはどういうスキルを持った人が必要になるんでしょうか？

國舛: 大きく分けると4つくらいの職種が共同で作業に当たる感じですね。

まずは電気設計。基板づくりを担当します。

デザイナー。製品の見た目はもちろん、ボタンの押し心地などの機構も考えます。他にはパッケージや製品アクセサリのデザインもするし、場合によってはWebサイトのデザインも行ったりします。

組み込みエンジニア。ハードウェアに搭載する組み込みのソフトウェアを担当します。

そして一般的なアプリエンジニアです。

他にもサーバインフラのエンジニアやプロジェクトマネージャーなどもいたりしますが、基本的には先程申し上げた4つの職種がメインになります。

白石: あと、工程や期間についても、少し具体的に教えていただけますか？

國舛: 原理試作、EVT、DVT、そして量産と言った流れですね。

量産型ハードウェア開発プロセス（一例）

「とにかく作ってみる！」それが大事！

白石: ではそろそろインタビューを終えたいと思いますが、これまでソフトウェア開発しかしたことがないエンジニアに向けて、一言いただけますでしょうか？

國舛: 「とにかく作ってみる」それが重要ですね。最近は3Dプリンタもあるし、マイコンも流行っているので、ハードウェアを触るのもずいぶん敷居が下がりました。エンジニアは、どうしても「小さく」「カッコよく」を目指してしまいがちなんですが、最初はそんなのどうでもいい。とにかくやってみることが重要です。あとは、最近はイベントとかもよくやっているので、そういうのにも参加してみてはいかがでしょうか。

白石: 本日は、実際にハードウェア製品をリリースするまでの過程を詳しくお話いただき、ありがとうございました！とてもためになりました。

ちなみに、國舛さんが「ハードウェアスタートアップでアプリエンジニアは何をしているか」というテーマでブログを書かれています。こちらも合わせてお読みいただくと、より理解が深まると思います！

• ハードウェアスタートアップでアプリエンジニアは何をしているか | Cerevo TechBlog

この記事では、「IoT」という言葉には少し関心があるけど、ハードウェアを作るなんてハードルが高そう…と感じていらっしゃる方々（特にWebデザイナー／エンジニア）に向けて、低価格で簡単にハードウェア制御を学べる「Arduino」（アルデュイーノ）という電子工作キットの使い方をお伝えします。

電子工作でできること

ではそもそも「電子工作」とは何でしょうか？
インターネットで検索すると「電子部品を使った工作のこと」、「様々な部品で電子回路を作ること」などとでてきます。でも、「電子部品って何？」「電子回路？」と疑問が増えていきます。Wikipediaで電子部品の項目を見てみると「電子部品とは、電気製品に使用される部品のことである」と書いてあり、難しそうな部品の名前が書かれています。

はじめから詳細に踏み込むと難しそうなので、まずは、電子部品を使うとどのようなことが実現できるかを、具体例で見てみましょう。

センサーライトなどの機能の例

自分でスイッチのON／OFFを行わなくても、人の出入りに合わせて点灯／消灯するライトがあります。ライトが必要なときのみにONになり、省エネにも効果的です。
この仕組みを実現するためには「センサーで人が近づいたことを検知する」、「ライトのON／OFFを制御する」という機能が必要です。この「人を検知するセンサー部品」や「ライトを制御するプログラムを処理する」といった部分が、電子部品を組み合わせることによって実現されています。

他に、「部屋の温度を自動的に設定温度どおりに維持する」というエアコンの機能を考えてみましょう。センサーライトの例のセンサーや制御の部分が、「センサーで温度を測る」、「エアコンの冷風／温風の温度を制御する」と置き換わると実現できそうです。

Arduinoでできること

先ほどの例と似たようなことを、一から自分で試してみようとすると大変です。センサーなどの部品をつなげるだけでなく、「センサーで検知した内容に合わせて、何か制御を行う」という、プログラムを処理する部分や、プログラムを書き込む方法の用意などノウハウが必要です。

このように気軽には試せなかった「電子部品を使った工作」を、より身近にしてくれるものが「Arduino」です。Arduino には「センサーなどの部品をつなげる部分」や、「プログラムを開発し、部品へ書き込むための開発用ソフトウェア」などが用意されています。PCとArduino、そして、ちょっとした部品があれば電子工作を試すことができ、工作を始める際の敷居が大幅に下がります。

ところで、Arduinoを使うとどんなものを作ることができるのか、工作例を見てみましょう。

• Arduinoの工作例（Youtube・Vimeo の動画へのリンク）
  • 郵便受けに手紙が届いたら携帯電話へお知らせ
  • ゼリーを触って演奏するユニークな楽器
  • Twitterで特定のつぶやきがあったらお知らせ：サルのぬいぐるみ

これらは、先ほどの例にあった「センサーによる検知、検知した内容にあわせた制御」を、Arduinoと部品を使って実現しています。Arduinoでは、例えば下記のような機能を実現できます。

• 光や温度、音、物との距離など周囲の状態を知る
• 光や音をだす、モーターなどの部品や他の機械を動かす、他の機械に情報を送る

最初の一歩：Lチカ

部品を組み合わせるといろいろなことができるArduinoですが、まずは基本的な内容を試すことにしましょう。Arduinoを試す最初の一歩に「Lチカ（LEDを点滅させるプログラム）」があります。この Lチカに必要な部品、部品のつなぎ方、LEDの制御方法などを説明していきます。

手軽に部品を揃える

Lチカに必要な部品がいくつかありますが、自分で個別に揃えるのは大変です。部品の種類が複数あり「どれを組み合わせれば良いかが分からない」ということがおこりえます。
そのため、最初は、基本的な部品がセットになった「キット」を利用することをオススメします。インターネットで「Arduino　キット」とキーワード検索するといくつかでてきますが、4000円程度のものを一例として挙げておきます。

• キットの例（2015年1月現在）
  • Arduinoエントリーキット（⇒テックシェアの販売ページ）
  • Arduinoをはじめようキット（⇒スイッチサイエンスの販売ページ）

　※ Amazon.co.jpでも購入が可能です

また、キットには説明書が付属されていないため、部品のつなぎ方は自分で調べる必要があります。インターネットで調べてもよいですが、調べるのが大変という方は書籍を購入することで手間を省けます。前述の2つのキットに関しては、販売ページの商品説明に、オススメの書籍の例がそれぞれ記載されています。

Lチカのための部品

部品をつないでみる前に、Lチカでに必要になるもの一式を紹介します。各部品の説明は後述していきます。

Arduinoボードはいくつか種類がありますが、この記事では、前述のキットでも同梱されている「Arduino Uno R3」を利用します。
抵抗もいくつか種類がありますが、今回は利用するLEDに合わせて330Ω（オーム）のものを使います。抵抗の種類については、後で補足します。 なお、キットを購入すると、よく利用する複数の種類の抵抗が付属されています。そして、キットに対応する書籍を購入していると、組み合わせるべき部品と抵抗の種類の情報が記載されているため、 Lチカやそれ以外の工作を楽に進めることができます。

【USBケーブルに関する補足】

PCとArduinoボードをつなぐ USBケーブルですが、ケーブルの種類が「USBケーブル A-Bタイプ」などと呼ばれるものになります。接続部分の形が下の写真のようなものになります。スマートフォンの充電に使うケーブルなどとは異なりますので注意しましょう。

【Arduinoボードに関する補足】

Arduinoボード上の接続部などについて、一部補足します。 今回のLチカでは、下の写真の上部にある接続部を使います。今の時点では、接続部の横に0〜13番までの番号や GND と記載があることを確認しておいてください。 下側にある接続部は上部にある接続部と異なる役割を持っていますが、詳細は割愛します。 また、写真で示したLEDを見ることで、Arduinoボードに電源供給がされているかを確認できます。

部品をつなぐ

それでは、Lチカ用の部品をつないでみましょう。

手順1）ブレッドボードにLEDと抵抗を差し込む

上の写真の赤矢印で示した部分のように、LEDと抵抗を、ブレッドボードに差し込んでいきます。
ブレッドボードとは、部品を差し込むための穴がたくさん空いた板状のものです。LEDやセンサーなどの部品のつなぎ替えを、簡単に行うことができるようになり、試行錯誤をする段階では非常に便利です。

まずは、以下の手順でブレッドボードにLEDと抵抗を差し込んでみましょう。

LEDは電気が流れる方向が決まっています。写真にあるように、方向は足の長さの違いで区別します。つなぐ方向を逆にしないように注意しましょう。なお、抵抗はつなぐ際の方向は関係ありません。

【ブレッドボードに関する補足】

ブレッドボードにLEDと抵抗を差し込みましたが、部品はどのようにつながっているのでしょうか？それを理解するために、ブレッドボードの中身について補足します。
ブレッドボードのそれぞれの穴は、一部が中でつながっています。下の写真で、緑の線を描いた部分が、内部でつながっている穴になります。

このため、先ほどつないだ部品は、LEDのマイナス側と抵抗の片側とが接続された状態になっています。

【抵抗に関する補足】

LEDなどの部品には流してもよい電流の大きさが決められており、過剰に電流を流すと部品が壊れてしまします。それを防ぐために使うのが抵抗です。抵抗を組み込むことで、部品に流れる電流を抑えられます。ここで、抵抗の種類などについて少し補足します。

今回、330Ωの抵抗を使いましたが、抵抗には種類があります。

上の写真にあるように、抵抗についている色の並びが、抵抗の大きさを示しています。計算方法はここでは割愛しますが、最初のうちはよく利用するものはある程度限られます。そのため主なものの「抵抗値と色の並び」をメモしておくとよいでしょう。

抵抗にはいくつか種類があることを説明しましたが、どの抵抗を使えばよいのでしょうか？ それには、オームの法則を使って計算します。学校の授業で習った覚えがあったりするのではないでしょうか？ 計算には、部品がどのようにつながっているかも考慮する必要があります。そのため、最初は書籍やインターネットで情報を調べるなどして、自分が試したい内容に関して「どの種類の部品と抵抗を、どのようにつなげばよいか」を参照したほうが楽に行えます。

それでは、今回の Lチカのつなぎ方の場合で、使う抵抗の大きさを計算してみます。計算式は
　（「電源の電圧」 – 「LEDの順電圧」）÷ 「LEDに流す電流」
となります。 LEDの順電圧というのは LEDによって決まっているものです。赤色のLEDの場合 2 V（ボルト）前後であることが多いようです。また、電源の電圧というのは、この場合は Arduinoボードの電圧になりますが、0～13番の接続部でかかる電圧は5Vです。LEDに流す電流は、LEDの順電圧と同様に LEDに決められた流してよい電流の最大値でひとまず計算します。これが10mA（ミリアンペア）の場合、抵抗値の計算は下記になります。
　(5 – 2) ÷ 0.01 = 300
この場合、利用する抵抗の大きさは300Ω（オーム）となりましたが、同じ大きさの抵抗があるとは限りません。その場合は、計算結果より大きく数字が近いものを選びます。そうすると、流れる電流が少し小さめになり、LEDに流してよい電流の最大値を超えることはありません。

手順2）Arduinoボードとつなぐ

先ほどの部品とArduinoボードをつなぎます。Arduinoボードを使う際、ボードの裏側は金属部分がそのままでているため、金属などの電気を通す素材の上に置くのは避けてください。
では、下の写真にあるように、Arduinoボードとブレッドボードの間を、ジャンバーワイヤーでつないでみましょう。LEDのプラス側のほうが11番の接続部に、マイナス側のほうが抵抗を通じて GNDの接続部につながれる形になります。

ジャンパーワイヤーは、Arduinoボードやブレッドボードへつなぐためのピンが、導線でつながれたものです。抵抗と同じで、つなぐ方向は特に関係ありません。

プログラム（スケッチ）を書き込む準備

部品の準備は整いました。次に、PCからArduinoボードへプログラムを書き込むための準備を進めていきましょう。Arduinoでは、プログラムのことを「スケッチ」と言いますが、本記事では「プログラム」と記載しています。
今回は、LEDを点滅させるためのプログラムを書き込みます。

手順3）PCで開発環境「Arduino IDE」を準備する

「Arduino用プログラムを扱う専用ソフトウェアの Arduino IDE」を準備します。お使いのPCに合わせて、最新のWindows用／Mac用などのファイルを「Arduino IDEのページ」からダウンロードしてください（※2015年1月3日時点では、最新バージョンは1.0.6）。

Windowsの場合はドライバのインストールも必要ですが、インストーラを使えば、Arduino IDE と一緒にドライバもインストールされます。Macの場合は、ZIPファイルを解凍するとArduino.appが展開されます。

これで開発環境の準備ができました。

手順4）PCとArduinoボードをつなぐ

ArduinoボードをPCにUSBケーブルでつないでみましょう。 USBケーブルをつなぐと、PCからArduinoボードに電気が供給されるため、Arduinoボード上の小さなLEDが点灯します。Arduinoボードには電源スイッチがないため、動作を止めたい場合は USBケーブルを抜いて電気の供給を止めることになります。

そして、手順3）で準備したArduino IDEを起動してください。そうすると、下の写真のようなウィンドウが表示されると思います（※以下、基本的にはMac版の画面で説明を進めます）。

ここで、つないだArduinoボードの設定と、シリアルポートの設定を行います。シリアルポートの詳細の説明は、今の時点では割愛します。ひとまず、ArduinoボードをPCに認識させるために必要な設定、と覚えておきましょう。

メニューの「ツール」⇒「マイコンボード」の中の「Arduino Uno」を選択します。

次にシリアルポートの設定です。Macに関しては、メニューの「ツール」⇒「シリアルポート」の中の「/dev/tty.usbmodemという名前が含まれる項目」を選択すればOKです。

Windowsの場合、「COMという名前が含まれる項目」を選択するのですが、それが複数表示されている場合があります。そのため、Arduinoボードに該当するものを確認する方法を記載します。
「スタートメニュー」から、「コントロールパネル」⇒「ハードウェアとサウンド」⇒「デバイスマネージャー」とたどります。そして、デバイスマネージャーの中の「ポート（COMとLTP）」をクリックし、その中で「Arduino Uno を名前に含む項目」を見ます。下の画像の例では「COM6」が Arduinoボードのシリアルポートになります。

これで、PCとArduinoボードの接続と設定は完了です。

手順5）Lチカのプログラムを試す

これでLチカの準備が整いました。早速、Lチカを試してみましょう。
Arduino IDEに下記のプログラムを入力してみてください。

void setup() {                
  pinMode(11, OUTPUT);     
}

void loop() {
  digitalWrite(11, HIGH);
  delay(500);
  digitalWrite(11, LOW);
  delay(500);
}

そして、下の画像で示したボタンを押してみましょう。

この操作で、Arduinoボードにプログラムが書き込まれます。 問題なく書き込みが行われれば、Arduino IDEの下部に「マイコンボードへの書き込みが完了しました」というメッセージが表示され、ブレッドボードにつないだLEDが点滅します。

もし、下の画像のようなエラーが表示された状態になった場合は、プログラムの入力ミスがないかを確認してみてください。

プログラムについて補足します。

void setup() { ... }

pinMode(11, OUTPUT)

void loop() { ... }

digitalWrite(11, HIGH)

digitalWrite(11, LOW)

delay(500)

今回、USBケーブルが Arduinoボードに電気を供給する部分になっているため、USBケーブルを抜くと ArduinoボードやLEDに電流は流れなくなります。Arduinoボードに書き込んだプログラムはそのまま残っているので、再度USBケーブルをつなぐなど電気を供給した際には、今回書き込んだプログラムが実行される状態になっています。

おわりに

Arduinoを使った電子工作はいかがだったでしょうか？
LEDを点滅させる以外にも、センサーの情報を取得したり、モーターを制御したりなど、Arduinoを使ってできることはたくさんあります。ぜひ、他の部品を使った電子工作を試してみてください。