1. 東京工芸大学×神奈川工科大学
Funnelワークショップ
3日目担当：小林茂（kotobuki [at] yapan.org）
2008 年 11 月 24 日：東京工芸大学

2. 自己紹介
• 1970年愛知県名古屋市生まれ
• 電子楽器メーカー（1993∼2004）
– サウンドデザイナー
– 技術研究所
– ソフトウェアエンジニア
• IAMAS（2004∼）
– フィジカルコンピューティング
– インタラクションデザイン

3. 自己紹介：ツールキット開発の動機
• ハードは気軽にスケッチできない
→ソフトが動いた段階で気がついても遅い
• 実際に動くまでは想像で進めるしかない
→建設的なディスカッションが行われにくい
• デザイナーとエンジニアの共通言語がない
→コミュニケーション上の齟齬が多発する
→インタラクションデザインのプロセスで使える
ツールキットが必要なのでは？

4. 自己紹介：書籍（執筆）
Make日本語版Volume 04
特集「Sketchーハードウェアでスケッチする」
オライリー・ジャパン編（オライリー・ジャパン・2008年）

5. 自己紹介：書籍（執筆）
Make日本語版Volume 05
「Sketch / Prototype―素材として使える電子回路」
オライリー・ジャパン編（オライリー・ジャパン・2008年）

6. 自己紹介：書籍（共著）
＋GAINER
GainerBook Labo＋くるくる研究室（オーム社・2008年）

7. 自己紹介：書籍（監修）
Making Things Talk
Arduinoで作る「会話」するモノたち
Tom Igoe 著・小林 茂 監訳・水原 文 翻訳（オライリー・2008年）

8. Making Things Talkの紹介
扱っているテクノロジー
• Arduino
• Processing / PHP
• Ethernet
• Bluetooth
• IEEE 802.15.4 / ZigBee
• RFID
• 基本的なCV

9. Making Things Talkの紹介
さまざまなプロジェクト
• モンスキーポン
• ネットワークに接続された猫
• ネットワーク大気清浄度計
• 太陽電池のデータをワイヤレス中継
• デジタルコンパスを使って進路を知る
• ウェブカムを用いた2次元バーコード認識
• RFIDを使ったホームオートメーション

10. 自己紹介：Sketching in Hardware 3
• フィジカルコンピューティングに関する会議
• 2008.7.25∼27の3日間開催
• 参加者は約40名
• 全員が発表
• 濃密な情報交換とコミュニティ作り
• 最後に「Sketching in Hardware」を実践

11. 本日の内容
• FunnelでGainer I/O以外を使うには
• さまざまな無線通信の特徴
• XBee無線モデムの使い方
• FIO（Funnel I/O）の使い方
• FIOを使った制作

12. Funnelとは？：背景
• Gainerはいわばシンプルなドライバ
→複雑な現実世界を扱うにはもう少し高次の
レベルが必要なのでは？
• 全ての用途をカバーできるツールキットはない
→ツールキットの使い分けは容易ではない
• 有線接続だと体験に制限がでてしまう
→簡単に利用できる無線接続が必要

13. Funnelとは？：コンセプト
• 単純で透明
• スケッチ∼プロトタイプまで使える
• デザイナーとエンジニアの「共通言語」

14. Funnelとは？：関連
Sketching User Experiences
Getting the Design Right and the Right Design
Bill Buxton（Morgan Kaufmann Pub・2007年）

15. Funnelとは？：関連
出典：Bill Buxton, Sketching User Experiences (2008)

16. Funnelの特徴
• 疑似コード風のコーディング
• 入出力をより簡単に扱うためのフィルタ
– ローパス、ハイパス（Convolution）
– 入力を設定した閾値で分割（SetPoint）
– スケーリング（Scaler）
– オシレータ（Osc）
• 複数のI/Oモジュールに対応

17. Funnelの構成
USB XBee
Dongle
Gainer
I/O Module
Arduino
(with Firmata)
USB XBee
Dongle
Funnel Server
ActionScript 3 Processing
Max/MSP
etc.
Ruby
AS3 Library
Processing
Library
OSC LibrariesRuby Library
Funnel I/O
Digi International
XBee
Funnel I/O
Digi International
XBee

18. Arduinoとは？
• Hernando Barrag´anがIDII*1
にいた時に
開発を始めたWiringがベース
• 電子回路をプロトタイピングするための
オープンソースのプラットフォーム
• IDEとArduino I/Oボードから構成される
*1 Interaction Design Institute Ivrea

19. Wiring
写真：SparkFun Electronics

20. Arduino Duemilanove
写真：SparkFun Electronics

21. Arduino IDE

22. オープンソース・ハードウェアとは？
• ハードウェアのデザインデータがオープン
– 回路図
– 基板レイアウト
• ライセンスに基づいて自由に改変できる

23. LilyPad Arduino
写真：SparkFun Electronics

24. Arduino Pro Mini
写真：SparkFun Electronics

25. Arduino ProtoShield
写真：SparkFun Electronics

26. Arduino XBee Shield
写真：SparkFun Electronics

27. FIO: Funnel I/O Module v1.3

28. FIO: Funnel I/O Module v1.3

29. Arduinoの各部紹介
デジタル入出力 x14
アナログ入力 x6GND+5V
GND

30. 比較：Gainer vs Arduino
Gainer Arduino Duemilanove
入出力ピン 16 20（RX/TXを含む）
A/D 8（8bit） 6（10bit）
PWM 8（8bit） 6（8bit）
ユーザLED 1 0
ユーザLED 1 1（D13兼用）
オープンソース Yes Yes
スタンドアロン No Yes
重点 シンプルさ 拡張性

31. Arduinoを用いるメリットは？
• シンプルに記述できる
• 非プログラマでも取り組みやすい
• 多くの利用例が公開されている
• 登場する「おまじない」が少ない

32. 比較：ArduinoでのLED点滅
コード例 1 Arduino言語でのLED点滅
int ledPin = 13;
void setup() {
pinMode(ledPin, OUTPUT);
}
void loop() {
digitalWrite(ledPin, HIGH);
delay(1000);
digitalWrite(ledPin, LOW);
delay(1000);
}

33. 比較：通常のC言語でのLED点滅
コード例 2 通常のC言語でのLED点滅の例
#include <avr/io.h>
#include <avr/pgmspace.h>
#include <avr/delay.h>
#define CLK_CALIB_DATA (FLASHEND - 3)
void init() {
uint8_t osccal_data = pgm_read_byte(CLK_CALIB_DATA);
if (osccal_data != 0xff) OSCCAL = osccal_data;
DDRB = 0xff;
DDRD = 0xff;
return;
}

34. 比較：通常のC言語でのLED点滅
コード例 3 通常のC言語でのLED点滅の例（続き）
void delay_ms(uint16_t t) {
while (t--) _delay_ms(1);
}
int main(void) {
init();
for (; ;) {
PORTB = 0xff;
delay_ms(500);
PORTB = 0x00;
delay_ms(500);
}
return 0;
}

35. Arduinoを用いるデメリットは？
• C/C++ベースなのでサイズが大きくなりがち
• 実行速度の面で不利な場合もある
• デバッガは利用できない

36. ArduinoとPCをつなぐ方法
• 有線
– シリアル
– USB
– Ethernet
• 無線
– Bluetooth
– IEEE 802.15.4 / ZigBee
どのようにデータをやり取りするかについて
取り決め（＝プロトコル）が必要

37. プロトコル：Firmata
http://www.arduino.cc/playground/Interfacing/Firmata
• Hans-Christoph Steinerが提案
• MIDIを参考にしたプロトコル
• Arduino 0012から標準に

38. Firmataに対応したPC側のライブラリ
• Pd (aka Pure Data)
• Processing
• Funnel
• Linux C++
• C++/openFrameworks

39. FunnelでArduinoを使うには
コード例 4 FunnelでArduinoを使う例
import processing.funnel.*;
Arduino arduino;
void setup() {
Configuration config = Arduino.FIRMATA;
config.setDigitalPinMode(13, Arduino.OUT);
arduino = new Arduino(this,config);
}
void draw() {
if (mousePressed) {
arduino.digitalPin(ledPin).value = 1.0;
...

40. FunnelでXBeeを使うには
コード例 5 FunnelでXBeeを使う例
import processing.funnel.*;
XBee xbee;
void setup() {
int ids[] = {1};
xbee = new XBee(this, ids);
}
void draw() {
float value = xbee.iomodule(1).port(0).value;
...

41. FunnelでFIOを使うには
コード例 6 FunnelでFIOを使う例
import processing.funnel.*;
Fio fio;
void setup() {
int[] ids = {1};
Configuration config = Fio.FIRMATA;
config.setDigitalPinMode(12, Fio.IN);
fio = new Fio(this, ids, config);
}
void draw() {
if (fio.iomodule(1).digitalPin(12).value == 0) {
background(200);
...

42. FIO: Funnel I/O Module v1.3
• LilyPad v1.6がベース
• 3.3V動作
• Arduino互換機（動作速度は8MHz）
• XBee無線モデム（802.15.4またはZigBee）
• 充電器内蔵
• シールドでさまざまな機能を拡張

43. FIO：使用例（スタンポロン）

44. FIO：使用例（スタンポロン）

45. FIO：使用例（スタンポロン）

46. FIO：現状について
• FIO v1.0をベースに実際に使用して検証
• Nathan Seidle*2
と共同で改良
• 12月上旬頃SparkFun Electronicsから発売
*2 SparkFun ElectronicsのCEO

47. さまざまな無線通信の方式とその特徴
Wi-Fi Bluetooth 802.15.4 / ZigBee
IEEE規格 802.11b 802.15.1 802.15.4
通信距離 約100m 約10m 約30m
最大通信速度 11Mbps 1Mbps 250kbps
接続ノード数 32 7 65535
電池寿命 数時間 数日 数年
ネットワーク構成 スター型 スター型 スター型・メッシュ型など
主な用途 無線LAN 携帯電話 セキュリティ機器
表1 代表的な2.4GHz帯無線通信方式の比較

48. Point to Point
Point to Multi
Star
802.15.4 Coordinator
802.15.4 End Device
IEEE 802.15.4で可能な構成

49. IEEE 802.15.4デバイスの種類
• コーディネータ（1個）
• エンド・デバイス（複数）

50. Mesh
Coordinator
End Device
Router
ZigBeeで可能となるクラスタツリー／メッシュ構成

51. ZigBeeデバイスの種類
• コーディネータ（1個）
• ルータ（複数）
• エンド・デバイス（複数）

52. XBeeの特長
• IEEE 802.15.4とZigBeeの2つのモデル*3
– XBee 802.15.4
– XBee ZB ZigBee PRO
• 比較的低価格（国内モデルで約3500円）
• 日本国内でも利用できるよう認証取得済み
• 利用方法を解説した書籍がある
*3 モデル間での相互接続性はない

53. XBeeの注意点
• 電源電圧は5Vではない
• UDPと同様に相手にパケットが届くことが
保証されない
• 同じチャンネルを使用するデバイス全体で
帯域幅は100kbps程度

54. 参考資料（日本語）
• アルファ電子株式会社
http://www.alpha-denshi.co.jp/seihin/toriatukai/Digi/TechDB/
– 基本的なドキュメントの日本語版
– 内容的には最新でない部分もある

55. XBeeの設定方法の説明と簡単な通信
• Windows XP/Vistaの場合
– 専用ユーティリティーX-CTUを使う方法
– Acknowrichを使う方法
• Mac OS Xの場合
– screenコマンドを使う方法
• 共通
– Processing用のスケッチを使う方法

56. 専用ユーティリティーX-CTUを使う方法
1. X-CTUをダウンロードする
http://tinyurl.com/4ltzop
2. ダウンロードしたファイルを実行してインス
トールする
3. X-CTUを起動して該当するポートを選択する
4. Serialタブを開いて通信する

57. screenコマンドを使う方法
1. Terminalを起動する
2. $ screen /dev/tty.usbserial-XXXXXXXX 19200
とタイプする*4
3. Terminal上でキーをタイプするとモデムに送信され、
返信された内容だけが表示される
4. 終了するにはctrl-aに続けてctrl-をタイプする
5. Really quit and kill all your windows [y/n]
に対してyをタイプする
*4 今回配布したXBeeは19200bpsに設定されているが
デフォルトは9600bps

58. Processing用のスケッチを使う方法
1. Making Things Talkのサポートページからコードを
コピーする
http://www.makingthingstalk.com/chapter6/31/
2. Processingを起動してスケッチにコードを
貼付ける
3. スケッチを実行する
4. Display Windowをクリックしてアクティブにする
5. キーボードからATコマンドをタイプする

59. Processing用のスケッチを使う方法

60. Processing用のスケッチを使う方法
1. +++をタイプする（returnなし）
2. 1秒程度待つ
3. received:の下にOKが表示される
4. ATID 1111のように入力して最後にreturn
5. 電源をオフにした後も設定を保持するには
最後にATWRコマンドを実行する
6. キー入力終了後に一定時間が経過すると自動的に
コマンドモードに戻る

61. XBee無線モデムの設定
コーディネータ エンドデバイス 備考
ATID 1234 1234 チームごとに別のPAN IDを設定
ATMY 0 1 自分のアドレス
ATDL FFFF 0 相手のアドレス（下位16ビット）
表2 FIOを使用するためのXBee無線モデムの設定（主なもの）

62. FIO：動作確認
• XBee Explorer USBをPCに接続
• Arduino 12を起動
• Tools→Boardから
Arduino Pro/ Pro Mini (8MHz)を選択
• Tools→Serial Portから
/dev/cu.usbserialで始まるポートを選択
• Open→Examples→Digital→Blinkを選択
• Upload to I/O Boardでアップロード

63. FIO：準備
• hardware/fio/firmware/FioStandardFirmata
を選択
• Upload to I/O Boardでアップロード

64. FIO：動作確認
• FIOの電源をオンにする
• XBee Explorer USBをPCに接続
• Funnel Serverを起動
• ProcessingでDigitalOutFIOを開いて実行
• マウスボタンを押す／離すとFIOのLEDが
点灯／消灯することを確認する

65. FIO ProtoShieldについて
• ブレッドボードを搭載したシールド
• 回路を組む間は必ず電源をオフにする
• FIO本体から外す時は非導電性のツールを使用
• 部品を追加すればI2
Cも利用可能

66. FIO：加速度センサを接続する

67. 加速度センサの動作確認
• SimpleScopeFIOを開いて実行
• X / Y / Zそれぞれの軸の変化を確認する
– 傾ける
– 振る

68. 加速度センサの用途
• 動きの検出（動的加速度）
• 傾きの検出（静的加速度）
→なぜ加速度センサで傾きが検出できるの？

69. 傾きを検出する原理

70. 加速度センサの出力から角度を求める
• フィルタで細かい動きを取り除く
• -1から+1までにスケーリングする
• 逆sin関数を用いて角度に変換する
• 必要に応じてラジアンから度に変換する

71. センサの出力から角度を求める（1/2）
コード例 7 スムージング＋スケーリングの例
void setup()
{
...
int moduleIDs[] = {1};
fio = new Fio(this, moduleIDs, Fio.FIRMATA);
Filter f0[] = {
new Convolution(Convolution.MOVING_AVERAGE),
new Scaler(0.30, 0.70, -1.0, 1.0, Scaler.LINEAR, true)
};
...
fio.iomodule(1).analogPin(1).filters = f0;
...
}

72. センサの出力から角度を求める（2/2）
コード例 8 逆sin関数を用いて角度に変換
void draw()
{
...
rotateZ(-asin(fio.iomodule(1).analogPin(1).value));
rotateX(asin(fio.iomodule(1).analogPin(2).value));
...

73. FIO：加速度センサ＋スイッチを接続する

74. SetPointとOscの使い方
コード例 9 暗くなるとLEDを点滅
void setup()
{
...
int[] moduleIDs = {1};
// ArduinoでGainerのaoutに相当するモードはPWM
Configuration config = Fio.FIRMATA;
config.setDigitalPinMode(11, Fio.PWM);
fio = new Fio(this, moduleIDs, config);
Filter f[] = {
// パラメータは閾値とヒステリシス
new SetPoint(0.5, 0.05)
};
fio.iomodule(1).analogPin(0).filters = f;
...

75. SetPointとOscの使い方
コード例 10 暗くなるとLEDを点滅（続き）
...
// パラメータは波形、周波数、繰り返し回数（0は無制限）
osc = new Osc(this, Osc.SIN, 0.5, 0);
osc.serviceInterval = 40;
osc.addEventListener(Osc.UPDATE, "oscUpdated");
}
// オシレータが更新する度に呼ばれるイベントリスナ
void oscUpdated(Osc osc)
{
fio.iomodule(1).digitalPin(11).value = osc.value;
}

76. SetPointとOscの使い方
コード例 11 暗くなるとLEDを点滅（続き）
// SetPointをセットした入力が0から1に変化する時に呼ばれるイベントリスナ
void risingEdge(PortEvent e)
{
// Arduinoでピンを連番で表現する際、A0はD13の後の14番になる
if (e.target.number == 14) {
// 明るくなったらオシレータを停止してLEDを消灯
println("BRIGHT");
osc.stop();
fio.iomodule(1).digitalPin(11).value = 0;
}
}

77. SetPointとOscの使い方
コード例 12 暗くなるとLEDを点滅（続き）
// SetPointをセットした入力が1から0に変化する時に呼ばれるイベントリスナ
void fallingEdge(PortEvent e)
{
// Arduinoでピンを連番で表現する際、A0はD13の後の14番になる
if (e.target.number == 14) {
// 暗くなったらオシレータを再スタート
println("DARK");
osc.reset();
osc.start();
}
}

78. お知らせ
IAMAS Gangu Project - Work in Progress
• 場所：AXIS Gallery
• 日時：12月25日（木）∼27日（土）
11:00∼19:00（27日は17:00閉場）
• 内容：電子玩具のスケッチ∼プロトタイプの
展示＋ワークショップ
• 詳細：http://www.iamas.ac.jp/project/ui/