目指せMaker!
初心者がArduinoに
チャレンジしてみた
豊田陽介(@youtoy)

html5j エンタメ技術部 第1回勉強会
∼ Web技術者のためのArduino入門 ∼
2/27(木)19:30∼
@インターネットイニシアティ...
Arduino?
公式サイトによると・・・
(http://www.arduino.cc/)
Arduino is an open-source electronics prototyping
platform based on flexible...
Arduino?
こんな感じ?
オープンソースのプロトタイピングプラットフォーム
簡単に扱えるハードウェアとソフトウェアのセット
アーティスト、デザイナー、趣味で利用する方など、
どんな方でもインタラクティブなものがつくれます
よ∼♪

14年...
Arduino?
ハードウェアの試作が簡単に!
LEDを制御してみたり
温度・音・光センサーの入力を利用した
ハードウェアを作ったり
Perfumeの紅白歌合戦の衣装にも使われたとか・・・
(http://www.daito.ws/work/n...
Arduino?
Arduioに関するTEDトーク
マッシモ・バンジ
「想像力をオープンソース化するArdurino」
http://www.ted.com/talks/
massimo_banzi_how_arduino_is_open_so...
何が必要?
PC(Windows, Mac, Linux)
ハードウェア
Arduino基板

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

USBケーブル
ソフトウェア
Arduino IDE(オープンソース)

14年3月9日日曜日
LEDを光らせてみる
「エルチカ」
  プログラミングで言う
  「Hello World !」

14年3月9日日曜日
LEDを光らせてみる
 ∼ おおまかな手順
1. PCとArduinoをUSBケーブルで接続
2. Arduino IDE を起動
3. プログラムを書く
4. 実行

14年3月9日日曜日
LEDを光らせてみる
 ∼ プログラムを書いてみる
// 最初に1回だけ処理される部分
void setup() {
 pinMode(13, OUTPUT);

// 13番ピンを出力に設定

}
// 繰り返し実行される部分
void lo...
実際に見てみましょう!!
ここに注目!!

14年3月9日日曜日
実際に見てみましょう!!
【Webカメラを使ったライブデモ】
映像内容の補足:
 USBケーブルでPCとArduino
 基板をつなぐと、つないだとたん
 に基板上のLEDが点滅

14年3月9日日曜日

点滅!
PCにつないだだけで、
いきなり光ってる!?

14年3月9日日曜日
Arduinoの起動と終了
送り込んだプログラムは、電源が入ると実行
されます。電源を抜いても残ったままです。
(出荷時にはエルチカのプログラムがすでに
 入っていたり・・・)
= つないだだけで、以前に送り込んだ
  プログラムがいきなり実行...
プログラムを変更してみる
 ∼ プログラムが実際に送り
   込まれているかを確認する

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

14年3月9日日曜日
LEDを光らせてみる
  ∼ 点滅速度を変える
// 最初に1回だけ処理される部分
void setup() {
 pinMode(13, OUTPUT);

// 13番ピンを出力に設定

}

例えば「 delay(100); 」とか
にし...
実際に見てみましょう!!
【Webカメラを使ったライブデモ】
映像内容の補足:
 変更後のプログラムを送り込む
 と、基板上のLEDの点滅速度が
 速くなる

14年3月9日日曜日

点滅!
いろんな部品を試してみる!

14年3月9日日曜日
でも何を買えば・・・

14年3月9日日曜日
Arduinoの入手
購入はオンラインストアや秋葉原などにある
電子部品を扱う店で
自分の場合はAmazonで購入
自分で部品を選んで買っても良いですが、セット品
を買ってしまったほうが楽かも
「Arduinoをはじめようキット」とか、「Ard...
Arduinoのキット
Arduino基板(Arduino Uno R3)、USBケーブル、ブレッド
ボード、ジャンパワイヤー、抵抗器、センサー等がセットに

書籍「Arduinoをはじめよう 第2版(オライリー・ジャパン)」などに対応したセッ...
基板の種類や、部品の基礎知識等は、
後のセッションにて
【公開資料へのリンク】
セッション2:
「Arduino応用編」
http://www.slideshare.net/tomowatanabe/arduino-31704976
セッション...
とりあえず試してみる
∼ その2 ∼

14年3月9日日曜日
この後は、
「Arduinoエントリーキット」
に入っている部品を使って
進めていきます

14年3月9日日曜日
部品をつなぐ

14年3月9日日曜日
実際に見て
みましょう!!
【Webカメラを使ったライブデモ】
デモで提示した映像内容の補足:
 右の画像のとおりに
 部品を接続

14年3月9日日曜日
LEDを光らせてみる
// 最初に1回だけ処理される部分
const int LED = 9;

// 9番ピンにLEDをつないでいる

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

// LEDに出力

/...
実際に見て
みましょう!!
【Webカメラを使ったライブデモ】
デモで提示した映像内容の補足:
 基板上のLEDでなく、
 ブレッドボード上に接続
 されたLEDが点滅

14年3月9日日曜日

点滅!
さらに試してみる
∼ デジタルでアナログ ∼

14年3月9日日曜日
先ほどのプログラムの遅延を
かなり小さくする
&
割合を変えてみる
14年3月9日日曜日
もう少し簡単な方法が!

14年3月9日日曜日
LEDの明るさ、モーターの回転数等を
制御する「analogWrite」

14年3月9日日曜日
LEDを光らせてみる
// 最初に1回だけ処理される部分
const int LED = 9;

// 9番ピンにLEDをつないでいる

void setup() {
 pinMode(LED, OUTPUT);
}
// 繰り返し実行される部...
実際に見て
みましょう!!
【Webカメラを使ったライブデモ】
デモで提示した映像内容の補足:
 ブレッドボード上に接続された
 LEDが明るく光る

14年3月9日日曜日

光った
まま
LEDでフェードイン/アウト
// 最初に1回だけ処理される部分
const int LED = 9;

// 9番ピンにLEDをつないでいる

int i = 0;
void setup() {
pinMode(LED, OUTPUT);

...
実際に見て
みましょう!!
【Webカメラを使ったライブデモ】
デモで提示した映像内容の補足:
 ブレッドボード上に接続された
 LEDがだんだんと明るくなり、
 最大の明るさになった後、
 今度はだんだんとLEDが暗く
 なる(これの繰り返し...
さらに試してみる
∼ センサを使う ∼

14年3月9日日曜日
部品をつなぐ

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

14年3月9日日曜日
実際に見て
みましょう!!
【Webカメラを使ったライブデモ】
デモで提示した映像内容の補足:
 右の画像のとおりに
 部品を接続

14年3月9日日曜日
光量によってLEDの点滅スピードが変化
const int LED = 13;
int val = 0;

// センサからの値を格納する変数

void setup() {
pinMode(LED, OUTPUT);

// LEDに出力

...
実際に見て
みましょう!!

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

【Webカメラを使ったライブデモ】
デモで提示した映像内容の補足:
 センサー付近を手で覆うと、
 LEDの点滅速度が速くなり、
 覆った手をセンサーから
 ...
さらに試す
∼ 音を鳴らしてみる ∼

14年3月9日日曜日
部品をつなぐ

ピエゾスピーカー

14年3月9日日曜日
実際に見て
みましょう!!
【Webカメラを使ったライブデモ】
デモで提示した映像内容の補足:
 右の画像のとおりに
 部品を接続

14年3月9日日曜日
音を鳴らす
static int PIEZO = 12;
static long LENGTH = 300;
void setup() {
pinMode(12, OUTPUT);

// 12番ピンを出力に設定

}
// 繰り返し実行される...
実際に聞いて
みましょう!!
【ライブデモ】
デモで行った内容の補足:
 プログラムで書かれた ある
 メロディ が繰り返し再生
 される

14年3月9日日曜日

♪ ♩
リファレンス
公式:
 Arduino - Reference
  http://arduino.cc/en/Reference/HomePage
翻訳されたもの:
 Arduino 日本語リファレンス
  http://www.musashi...
最後に
様々な部品の組み合わせが可能
センサーなどによる入力
音や光などの出力
PC上のメディアアート系のプログラムとの
連携も可能
あなたも明日からMaker!?
14年3月9日日曜日
Upcoming SlideShare
Loading in...5
×

「目指せMaker!初心者がArduinoにチャレンジしてみた」〜【html5j エンタメ技術部】第1回勉強会 公開用

2,042

Published on

2014/2/27 に開催した「html5j エンタメ技術部」の「第1回勉強会(http://atnd.org/events/47308)」の資料です。
セッション1で使ったスライドです。
※ 公開用に一部の画像の差し替えや、口頭で補足した内容のテキストの追加を行っています。

Published in: Technology
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,042
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
8
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

「目指せMaker!初心者がArduinoにチャレンジしてみた」〜【html5j エンタメ技術部】第1回勉強会 公開用

  1. 1. 目指せMaker! 初心者がArduinoに チャレンジしてみた 豊田陽介(@youtoy) html5j エンタメ技術部 第1回勉強会 ∼ Web技術者のためのArduino入門 ∼ 2/27(木)19:30∼ @インターネットイニシアティブ 17階 大会議室 14年3月9日日曜日
  2. 2. 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. 14年3月9日日曜日
  3. 3. Arduino? こんな感じ? オープンソースのプロトタイピングプラットフォーム 簡単に扱えるハードウェアとソフトウェアのセット アーティスト、デザイナー、趣味で利用する方など、 どんな方でもインタラクティブなものがつくれます よ∼♪ 14年3月9日日曜日
  4. 4. Arduino? ハードウェアの試作が簡単に! LEDを制御してみたり 温度・音・光センサーの入力を利用した ハードウェアを作ったり Perfumeの紅白歌合戦の衣装にも使われたとか・・・ (http://www.daito.ws/work/nhk_kouhaku_63.html#3) 14年3月9日日曜日
  5. 5. Arduino? Arduioに関するTEDトーク マッシモ・バンジ 「想像力をオープンソース化するArdurino」 http://www.ted.com/talks/ massimo_banzi_how_arduino_is_open_sourcing_ imagination.html 14年3月9日日曜日
  6. 6. 何が必要? PC(Windows, Mac, Linux) ハードウェア Arduino基板 LEDを光らせる だけならこれだけ USBケーブル ソフトウェア Arduino IDE(オープンソース) 14年3月9日日曜日
  7. 7. LEDを光らせてみる 「エルチカ」   プログラミングで言う   「Hello World !」 14年3月9日日曜日
  8. 8. LEDを光らせてみる  ∼ おおまかな手順 1. PCとArduinoをUSBケーブルで接続 2. Arduino IDE を起動 3. プログラムを書く 4. 実行 14年3月9日日曜日
  9. 9. LEDを光らせてみる  ∼ プログラムを書いてみる // 最初に1回だけ処理される部分 void setup() {  pinMode(13, OUTPUT); // 13番ピンを出力に設定 } // 繰り返し実行される部分 void loop() { digitalWrite(13, HIGH); delay(1000); // LEDを消す delay(1000); 14年3月9日日曜日 // 1秒待つ digitalWrite(13, LOW); } // LEDを点ける // 1秒待つ
  10. 10. 実際に見てみましょう!! ここに注目!! 14年3月9日日曜日
  11. 11. 実際に見てみましょう!! 【Webカメラを使ったライブデモ】 映像内容の補足:  USBケーブルでPCとArduino  基板をつなぐと、つないだとたん  に基板上のLEDが点滅 14年3月9日日曜日 点滅!
  12. 12. PCにつないだだけで、 いきなり光ってる!? 14年3月9日日曜日
  13. 13. Arduinoの起動と終了 送り込んだプログラムは、電源が入ると実行 されます。電源を抜いても残ったままです。 (出荷時にはエルチカのプログラムがすでに  入っていたり・・・) = つないだだけで、以前に送り込んだ   プログラムがいきなり実行されたりします。 終了する、という操作はないため、終了させた いときは電源を切ればOKです。 14年3月9日日曜日
  14. 14. プログラムを変更してみる  ∼ プログラムが実際に送り    込まれているかを確認する 例えば、時間を 1/10 にしてみたり 14年3月9日日曜日
  15. 15. LEDを光らせてみる   ∼ 点滅速度を変える // 最初に1回だけ処理される部分 void setup() {  pinMode(13, OUTPUT); // 13番ピンを出力に設定 } 例えば「 delay(100); 」とか にしてみる。 =「0.1秒待つ」処理になる // 繰り返し実行される部分 void loop() { digitalWrite(13, HIGH); delay(1000); // LEDを消す delay(1000); 14年3月9日日曜日 // 1秒待つ digitalWrite(13, LOW); } // LEDを点ける // 1秒待つ
  16. 16. 実際に見てみましょう!! 【Webカメラを使ったライブデモ】 映像内容の補足:  変更後のプログラムを送り込む  と、基板上のLEDの点滅速度が  速くなる 14年3月9日日曜日 点滅!
  17. 17. いろんな部品を試してみる! 14年3月9日日曜日
  18. 18. でも何を買えば・・・ 14年3月9日日曜日
  19. 19. Arduinoの入手 購入はオンラインストアや秋葉原などにある 電子部品を扱う店で 自分の場合はAmazonで購入 自分で部品を選んで買っても良いですが、セット品 を買ってしまったほうが楽かも 「Arduinoをはじめようキット」とか、「Arduinoエントリーキット」   とか(価格は4200円くらい) 14年3月9日日曜日
  20. 20. Arduinoのキット Arduino基板(Arduino Uno R3)、USBケーブル、ブレッド ボード、ジャンパワイヤー、抵抗器、センサー等がセットに 書籍「Arduinoをはじめよう 第2版(オライリー・ジャパン)」などに対応したセット品。 もちろん、ネットで情報を探しつつ試してみてもOKです! 14年3月9日日曜日
  21. 21. 基板の種類や、部品の基礎知識等は、 後のセッションにて 【公開資料へのリンク】 セッション2: 「Arduino応用編」 http://www.slideshare.net/tomowatanabe/arduino-31704976 セッション3: 「JavaScript と Arduino でオリジナルデバイスを作ろう」 http://www.slideshare.net/YoshihiroIwanaga/javascript-arduino 14年3月9日日曜日
  22. 22. とりあえず試してみる ∼ その2 ∼ 14年3月9日日曜日
  23. 23. この後は、 「Arduinoエントリーキット」 に入っている部品を使って 進めていきます 14年3月9日日曜日
  24. 24. 部品をつなぐ 14年3月9日日曜日
  25. 25. 実際に見て みましょう!! 【Webカメラを使ったライブデモ】 デモで提示した映像内容の補足:  右の画像のとおりに  部品を接続 14年3月9日日曜日
  26. 26. LEDを光らせてみる // 最初に1回だけ処理される部分 const int LED = 9; // 9番ピンにLEDをつないでいる void setup() {  pinMode(LED, OUTPUT); } // LEDに出力 // 繰り返し実行される部分 void loop() { digitalWrite(LED, HIGH); delay(1000); digitalWrite(LED, LOW); delay(1000); } 14年3月9日日曜日 // LEDを点ける // 1秒待つ // LEDを消す // 1秒待つ
  27. 27. 実際に見て みましょう!! 【Webカメラを使ったライブデモ】 デモで提示した映像内容の補足:  基板上のLEDでなく、  ブレッドボード上に接続  されたLEDが点滅 14年3月9日日曜日 点滅!
  28. 28. さらに試してみる ∼ デジタルでアナログ ∼ 14年3月9日日曜日
  29. 29. 先ほどのプログラムの遅延を かなり小さくする & 割合を変えてみる 14年3月9日日曜日
  30. 30. もう少し簡単な方法が! 14年3月9日日曜日
  31. 31. LEDの明るさ、モーターの回転数等を 制御する「analogWrite」 14年3月9日日曜日
  32. 32. LEDを光らせてみる // 最初に1回だけ処理される部分 const int LED = 9; // 9番ピンにLEDをつないでいる void setup() {  pinMode(LED, OUTPUT); } // 繰り返し実行される部分 void loop() { analogWrite(LED, 255); } 14年3月9日日曜日 // LEDに出力 使えるピンが決まって いるので注意!! // 出力最大(値は 0∼255)
  33. 33. 実際に見て みましょう!! 【Webカメラを使ったライブデモ】 デモで提示した映像内容の補足:  ブレッドボード上に接続された  LEDが明るく光る 14年3月9日日曜日 光った まま
  34. 34. 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); } } 14年3月9日日曜日 // 出力を徐々に小さくしていく
  35. 35. 実際に見て みましょう!! 【Webカメラを使ったライブデモ】 デモで提示した映像内容の補足:  ブレッドボード上に接続された  LEDがだんだんと明るくなり、  最大の明るさになった後、  今度はだんだんとLEDが暗く  なる(これの繰り返し) 14年3月9日日曜日 明るくなったり、 暗くなったり (繰り返し)
  36. 36. さらに試してみる ∼ センサを使う ∼ 14年3月9日日曜日
  37. 37. 部品をつなぐ CdS(硫化カドミウム)セル 強い光があたるほど、抵抗の値が   小さくなる 14年3月9日日曜日
  38. 38. 実際に見て みましょう!! 【Webカメラを使ったライブデモ】 デモで提示した映像内容の補足:  右の画像のとおりに  部品を接続 14年3月9日日曜日
  39. 39. 光量によってLEDの点滅スピードが変化 const int LED = 13; int val = 0; // センサからの値を格納する変数 void setup() { pinMode(LED, OUTPUT); // LEDに出力 // アナログの入力は自動設定されるので、記載しない } 光が強い(=抵抗が小さい) アナログ入力の電流が   大きくなる void loop() { val = analogRead(0); // センサの値を読み込む 遅延が大きくなるので、   LEDがゆっくり点滅 digitalWrite(LED, HIGH); // LEDをつける delay(val); // センサの入力値が大きいほど遅延が大きくなる digitalWrite(LED, LOW); delay(val); } 14年3月9日日曜日 // LEDを消す 暗くなるとLEDの点滅が   早くなる
  40. 40. 実際に見て みましょう!! ①ここを手で覆っ たり、覆った手を 離したりすると、 【Webカメラを使ったライブデモ】 デモで提示した映像内容の補足:  センサー付近を手で覆うと、  LEDの点滅速度が速くなり、  覆った手をセンサーから  離すと、LEDの点滅速度が  ゆっくりになる 14年3月9日日曜日 ②点滅する速度が 速くなったり、ゆ っくりになったり
  41. 41. さらに試す ∼ 音を鳴らしてみる ∼ 14年3月9日日曜日
  42. 42. 部品をつなぐ ピエゾスピーカー 14年3月9日日曜日
  43. 43. 実際に見て みましょう!! 【Webカメラを使ったライブデモ】 デモで提示した映像内容の補足:  右の画像のとおりに  部品を接続 14年3月9日日曜日
  44. 44. 音を鳴らす static int PIEZO = 12; static long LENGTH = 300; void setup() { pinMode(12, OUTPUT); // 12番ピンを出力に設定 } // 繰り返し実行される部分 void loop() { tone(12, 262); // 音を鳴らす delay(LENGTH); tone(12, 294); // 音を鳴らす delay(LENGTH); 。。(途中省略)。。 tone(12, 294, LENGTH*3); delay(2000); } 14年3月9日日曜日 // 音を鳴らす // 2秒待つ
  45. 45. 実際に聞いて みましょう!! 【ライブデモ】 デモで行った内容の補足:  プログラムで書かれた ある  メロディ が繰り返し再生  される 14年3月9日日曜日 ♪ ♩
  46. 46. リファレンス 公式:  Arduino - Reference   http://arduino.cc/en/Reference/HomePage 翻訳されたもの:  Arduino 日本語リファレンス   http://www.musashinodenpa.com/arduino/ref/ 14年3月9日日曜日
  47. 47. 最後に 様々な部品の組み合わせが可能 センサーなどによる入力 音や光などの出力 PC上のメディアアート系のプログラムとの 連携も可能 あなたも明日からMaker!? 14年3月9日日曜日
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×