html5j エンタメ技術部

5/17（土）13:30～＠インターネットイニシアティブ 17階 中会議室

～ Web技術者のためのArduino入門 ～

第2回勉強会

- 実践編（資料 1/2） -

本日の流れはじめに

Arduinoの回路を組んでみる、プログラムで制御する

　　（休憩）

JavascriptでArduinoを制御してみる

Websocketによるセンサー情報の送受信

　　（休憩）

自由課題、自由課題の内容共有

おわりに

この資料の内容

これらは別資料に

Arduino？公式サイトによると・・・（http://www.arduino.cc/）

Arduino is an open-source electronics prototyping platform based on flexible, easy-to-use hardware and software. It's intended for artists, designers, hobbyists and anyone interested in creating interactive objects or environments.

Arduino？こんな感じ？オープンソースのプロトタイピングプラットフォーム

簡単に扱えるハードウェアとソフトウェアのセット

アーティスト、デザイナー、趣味で利用する方など、どんな方でもインタラクティブなものがつくれますよ～♪

Arduino？ハードウェアの試作が簡単に！LEDを制御してみたり

温度・音・光センサーの入力を利用したハードウェアを作ったり

Perfumeの紅白歌合戦の衣装にも使われたとか・・・（http://www.daito.ws/work/nhk_kouhaku_63.html#3）

Arduino？Arduioに関するTEDトーク

マッシモ・バンジ「想像力をオープンソース化するArdurino」http://www.ted.com/talks/massimo_banzi_how_arduino_is_open_sourcing_imagination.html

何が必要？PC（Windows, Mac, Linux）

ハードウェア

Arduino基板

USBケーブル

ソフトウェア

Arduino IDE（オープンソース）

LEDを光らせるだけならこれだけ

回路を組んでみる前にArduino・電子工作の基本の話を

お手元の部品を実際に確認しつつ、お聞きください

回路を組んでみる前にArduino・電子工作の基本の話を

第１回勉強会　セッション３：「JavaScript と Arduino でオリジナルデバイスを作ろう」http://www.slideshare.net/YoshihiroIwanaga/javascript-arduino

※ 下記の資料の「ページ１～２５」をご参照ください！

LEDを光らせてみる「エルチカ」　⇒ プログラミングで言う　　「Hello World !」

セッティングの補足

Arduino IDE を　http://arduino.cc/en/Main/Software　の「Download」から、　ご自身のOSにあったものを入手。　

LEDを光らせてみる　～ おおまかな手順1. PCとArduinoをUSBケーブルで接続

2. Arduino IDE を起動

3. プログラムを開く

4. 実行

LEDを光らせてみる　～ プログラムを開く

IDEのメニュー内の「ファイル」から

＞ スケッチの例

　＞ 01.Basics

　　＞ Blink

を開く

LEDを光らせてみる　～ プログラムを書きこんでみる

ここを押すIDEの上部のボタンの

ここに注目！！

実際に見てみましょう！！

PCにつないだだけで、いきなり光ってる！？

Arduinoの起動と終了送り込んだプログラムは、電源が入ると実行されます。電源を抜いても残ったままです。（出荷時にはエルチカのプログラムがすでに　入っていたり・・・）＝ つないだだけで、以前に送り込んだ　 プログラムがいきなり実行されたりします。

終了する、という操作はないため、終了させたいときは電源を切ればOKです。

プログラムを変更してみる

例えば、時間を 1/10　にしてみたり

　～ プログラムが実際に送り　　　込まれているかを確認する

LEDを光らせてみる　～ 新規ファイルを作って　　 プログラムを書く

ここを押すIDEの上部のボタンの

LEDを光らせてみる　　～ 点滅速度を変える// 最初に1回だけ処理される部分

void setup() {

　pinMode(13, OUTPUT); // 13番ピンを出力に設定}

// 繰り返し実行される部分void loop() {

digitalWrite(13, HIGH); // LEDを点ける delay(1000); // 1秒待つ digitalWrite(13, LOW); // LEDを消す delay(1000); // 1秒待つ

}

例えば「 delay(100); 」とかにしてみる。＝「0.1秒待つ」処理になる

いろんな部品を試してみる！

とりあえず試してみる～ その２ ～

部品をつなぐ

実際にやってみましょう！！まずは、部品を接続

LEDを光らせてみる// 最初に1回だけ処理される部分

const int LED = 9; // 9番ピンにLEDをつないでいる

void setup() {

　pinMode(LED, OUTPUT); // LEDに出力}

// 繰り返し実行される部分void loop() {

digitalWrite(LED, HIGH); // LEDを点ける delay(1000); // 1秒待つ digitalWrite(LED, LOW); // LEDを消す delay(1000); // 1秒待つ

}

ソースコードについては、こちらもご参照いただけます

https://github.com/yo-to/html5j-entech/tree/master/001

短縮URL　http://goo.gl/95bGuo

⇒ 上記の中の「b1_Blink_9」

実際に見てみましょう！！

点滅！

さらに試してみる～ デジタルでアナログ ～

先ほどのプログラムの遅延をかなり小さくする

＆割合を変えてみる

もう少し簡単な方法が！

LEDの明るさ、モーターの回転数等を制御する「analogWrite」

LEDを光らせてみる// 最初に1回だけ処理される部分

const int LED = 9; // 9番ピンにLEDをつないでいる

void setup() {

　pinMode(LED, OUTPUT); // LEDに出力}

// 繰り返し実行される部分void loop() {

analogWrite(LED, 255); // 出力最大（値は 0～255）}

使えるピンが決まっているので注意！！

実際にやってみましょう！！

光ったまま

まずは、接続は先ほどと同じ

明るさを実際に変化させてみる

LEDでフェードイン／アウト// 最初に1回だけ処理される部分

const int LED = 9; // 9番ピンにLEDをつないでいる

int i = 0;

void setup() {

pinMode(LED, OUTPUT); // LEDに出力

}

// 繰り返し実行される部分

void loop() {

for(i=0; i<255; i++) {

analogWrite(LED, i); // 出力を徐々に大きくしていく

delay(10); // 変化が目に見えるように遅延を加える

}

for(i=255; i>0; i--) {

analogWrite(LED, i); // 出力を徐々に小さくしていく

delay(10);

}

}

https://github.com/yo-to/html5j-entech/tree/master/001

短縮URL　http://goo.gl/95bGuo

⇒ 上記の中の「b3_Fade」

ソースコードについては、こちらもご参照いただけます

実際に見てみましょう！！

明るくなったり、暗くなったり（繰り返し）

さらに試してみる～ センサを使う ～

部品をつなぐ

CdS（硫化カドミウム）セル⇒ 強い光があたるほど、抵抗の値が　 小さくなる

実際にやってみましょう！！まずは、部品を接続

光量によってLEDの点滅スピードが変化const int LED = 13;

int val = 0; // センサからの値を格納する変数

void setup() {

pinMode(LED, OUTPUT); // LEDに出力

// アナログの入力は自動設定されるので、記載しない

}

void loop() {

val = analogRead(0); // センサの値を読み込む

digitalWrite(LED, HIGH); // LEDをつける

delay(val); // センサの入力値が大きいほど遅延が大きくなる

digitalWrite(LED, LOW); // LEDを消す

delay(val);

}

光が強い（＝抵抗が小さい）

⇒ アナログ入力の電流が　 大きくなる

⇒ 遅延が大きくなるので、　 LEDがゆっくり点滅

⇒ 暗くなるとLEDの点滅が　 早くなる

https://github.com/yo-to/html5j-entech/tree/master/001

短縮URL　http://goo.gl/95bGuo

⇒ 上記の中の「c1_Sensor」

ソースコードについては、こちらもご参照いただけます

実際に見てみましょう！！

①ここを手で覆ったり、覆った手を離したりすると、

②点滅する速度が速くなったり、ゆっくりになったり

シリアルモニタにセンサーの値を出力

シリアルモニタにセンサーの値を出力const int LED = 13;

int val = 0; // センサからの値を格納する変数

void setup() {

pinMode(LED, OUTPUT); // LEDに出力

// アナログの入力は自動設定されるので、記載しない

Serial.begin(9600); // デバッグログ出力用

}

void loop() {

val = analogRead(0); // センサの値を読み込む

　Serial.println(val); // 改行付の出力

digitalWrite(LED, HIGH); // LEDをつける

delay(val); // センサの入力値が大きいほど遅延が大きくなる

digitalWrite(LED, LOW); // LEDを消す

delay(val);

}

先ほどのソースコードの「setup()」と「loop()」に左記の2行を追加

シリアルモニタにセンサーの値を出力　～ モニタの表示

IDEのメニュー内の「ツール」から

＞ シリアルモニタ

を開く

⇒ ウィンドウが開き、そこに、プログラム実行時のセンサーの値が出力される

リファレンス公式：　Arduino - Reference　　http://arduino.cc/en/Reference/HomePage

翻訳されたもの：　Arduino 日本語リファレンス　　http://www.musashinodenpa.com/arduino/ref/

この資料の続きは、下記（2つ目の資料）になりますhttp://www.slideshare.net/yo-to/html5j-entech0002b