IAD Kyoto

日本デザイン学会第４支部
インタラクションデザイン研究会
フィジカルUI ーポストGUIをどう作る？
小林茂（IAMAS：岐阜県立国際情報科学芸術アカデミー）
2008 年 12 月 5 日：京都工芸繊維大学・工繊会館・多目的室

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

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

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

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

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

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

本セッションの内容
• フィジカルコンピューティングとは
• ツールキットの紹介（Gainer）
• 事例紹介
– IAMAS Gangu Project
– ワークショップ
• ツールキットの紹介（Funnel）

フィジカルコンピューティングとは？
• ニューヨーク大学のITP*1
でTom Igoeらが
中心となって教えているコースの名前
• インタラクションデザインを教えるための
方法の1つ
• コンピュータが理解したり反応できる人間の
フィジカルな表現の幅をいかに増やすか
• デザインやアート教育の1つの分野として定着
*1 Interactive Telecommunications Program

ITP Spring Show 2008
概要：
• ITPで学ぶ学生の展覧会で毎年2回開催
• 5月12日から13日まで開催
• http://itp.nyu.edu/shows/spring2008/

一般的なPCから見た人間は？
• キー情報（ASCIIキーボードから）
• マウス情報（1つのマウスから）

Alto (1973)
出典：http://toastytech.com/guis/

• PC＋標準入出力デバイスの世界で実現できる
インタラクションには限界がある
– 人間が直接触れて感じることができない
– PCのパラダイムに縛られてしまう
• 統一されたプラットホームならではの良さも
勿論ある
（例：Flashなどによるウェブ上での表現）

• 物理的な入出力を活用することによって
表現力は拡大する（例：Nintendo Wii）
• 電子楽器などではずいぶん昔からのテーマ
• iPhoneが注目される理由とも大きく関連
• フィジカルなインタラクションデザインの
メソッド確立はまだまだこれから？

フィジカルコンピューティングの構成要素
• センサ
（例：光、圧力、音、温度、加速度など）
• アクチュエータ
（例：LED、モータ、ソレノイドなど）
• プロセッサ
（例：マイコン、I/Oモジュール＋PCなど）
→ものすごく簡単にまとめると
プログラミング＋電子工作

プログラミング＋電子工作？
フィジカルコンピューティングは難しい？
• プログラミングはそれなりのスキルが必要
（例：ActionScript、C、C++、Javaなど）
• 電子工作にもそれなりのスキルが必要
（例：回路設計、実装、検証）
• 両方のスキルが必要ということは…

フィジカルコンピューティングは難しい？
• 確かに習得するまでにはそれなりの努力が必要
• できあがった結果は直接的に人間の感覚に
訴えるものになる（はず）

最近では扱いやすいプラットホームが登場
• プログラミング
– Flash
– Processing
• 電子回路のスケッチ
– Gainer
– Arduino
– Phidgets

電子工作は大変？
• 誰でもはんだ付けくらいはやったことがある
• まずは必要最小限のこと（だけ）を覚えれば
スタートできる
– 電圧∼電流∼抵抗
– 回路図の読み方
– オームの法則など
– よく使う部品のシンボルと特徴
• 失敗しながら覚えていけばいい
• でもUNDOはきかない（＝人生と一緒）

フィジカルな世界とつなぐ方法
マイコンのみ（例：PIC、AVR）
a
b
c
d
A
B
C
D
マイコン
microcontroller
program
a0]=ain.o;
aout.1 = 255;

マイコン＋PC（例：Arduino、Wiring）
a
b
c
d
A
B
C
D
マイコン
microcontroller
PC
USB
program
a0]=ain.o;
aout.1 = 255;
program
a0]=ain.o;
aout.1 = 255;

Arduino I/Oボード
写真：SparkFun Electronics

I/Oモジュール＋PC（例：Gainer、Phidgets）
a
b
c
d
A
B
C
D
I/Oモジュール
I/O module
PC
USB
program
a0]=ain.o;
aout.1 = 255;

Gainerとは？
オープンソース・ハード＆ソフトのツールキット
• I/Oモジュール
• ソフトウェア・ライブラリ
– ActionScript 2/3
– Processing
– Max/MSP

Gainer I/Oモジュール
写真撮影：高尾俊介

I/Oモジュール＋ブレッドボード

さまざまな電子部品

I/Oモジュール＋ブレッドボード＋部品

入力：曲げ

出力：LEDアレイ

出力：振動モータ

事例紹介1：IAMAS Gangu Project
• 2005年にタカラインデックスeRラボ
株式会社*2
の協力のもとスタート
• 情報技術を活用した新しい電子玩具がテーマ
• 2008年からはプロトタイピングの新しい
メソッド確立をテーマに第2期を運営
*2 現在はティーツーラボ株式会社

第1期の進め方
• リサーチ
• アイデアスケッチ
• プロトタイプ制作
• 展示
• リフレクション

第1期の作例：Mountain Guitar
• 金箱淳一
• 音楽表現のためのギター型インタフェース
– 親しみやすさ
– 演奏の奥深さ
• 各種センサ＋I/Oモジュール＋PC
• IAMAS東京展「いまからだ」などで展示
• 学生CGコンテストなど複数で受賞

第1期の作例：Mountain Guitar
• Gainerを本格的に取入れた最初の世代
• スケッチ∼プロトタイプの流れを実践できた
• 完全なスタンドアロンではないが、無線化で
「体験」としてほぼ目的のものが実現できた

第1期の反省点
• スケッチ段階でのイテレーションが少なかった
• 無線化に関してカスタムのハードウェア開発が
必要で時間がかかった

第2期の進め方
• リサーチ
• アイデアスケッチ
• ハードウェアスケッチ
• プロトタイプ制作
• 展示
• リフレクション

第2期の進め方：ハードウェアスケッチ？
• 安価で簡単に加工できる材料で作る
• センサやアクチュエータも組込む
• 体験さえできれば最終で想定しているのと
異なる実現方法でも構わない
※参考：littleBits coffemaker*3
*3 http://www.vimeo.com/1389390

第2期の作例：JammingGear
• 菅野創＋西郷憲一郎
• ギアの回転でシーケンスを演奏
• 各種センサ＋Arduinoなど
• 音はMax/MSPでコントロール
• Make: Tokyo Meetingなどで展示

第2期で変化した点
• 3Dプリンタの導入により、機構も含めた
プロトタイピングの速度が大幅に上がった
• 気軽にバッテリ駆動や無線化を扱えるように
なった
• スケッチ段階でのイテレーションの間隔を
短く、回数を多くできるようになった

事例紹介2：ワークショップ
HELLO!!フィジカルコンピューティング
• 日時：2007.12.22-23
• 場所：山口情報芸術センター
• 参加者：19名
• 言語：日本語
• 環境：Processing×Funnel×Gainer I/O

資料の例：電圧∼電流∼抵抗
電気の流れは水の流れのようなもの
• 電圧
– 2点間の高度（電位）の違い
– 基準点が必要（GND）
– 単位はボルト（V）

資料の例：電圧のイメージ図
低高

• 電流
– 電圧の高いところから低いところに流れる
– 単位はアンペア（A）

資料の例：電流のイメージ図
少多

• 抵抗
– 電流の流れにくさ
– 単位はオーム（Ω）

資料の例：抵抗のイメージ図
低高

資料の例：ブレッドボードの構造
• 横方向のブロックは背面で接続
• 縦方向のブロックは未接続
• 電源用のエリアは専用に用意されている

資料の例：LEDを点灯させてみよう

資料の例：LEDを点灯させてみよう
どうして抵抗器が必要なの？
• LEDには適切な電流の範囲がある
（例：20mA）
• その範囲を超えると簡単に焼き切れてしまう
• 適切な値の抵抗器を用いて電流を制限する
• 適切な抵抗値はどうやって求める？
→オームの法則を用いて計算する
※抵抗器で電流を制限する方法が全てではありません

資料の例：オームの法則
電圧∼電流∼抵抗の関係
V = I × R
• Vは電圧で単位はV（ボルト）
• Iは電流で単位はA（アンペア）
• Rは抵抗で単位はΩ（オーム）

資料の例：LEDを点灯させてみる

資料の例：LEDを点灯させてみる（NG）
の方向が違う
ワイヤをさす位置が違う
にささっていない

資料の例：ain 0にボリュームを接続

資料の例：ain 0に光センサを接続

資料の例：ain 0に感圧センサを接続

資料の例：ainに加速度センサを接続

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

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

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

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

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

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

Arduino Duemilanove

LilyPad Arduino

Arduino Pro Mini

Arduino ProtoShield

Arduino XBee Shield

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

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

お知らせ
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/

IAD Kyoto

IAD Kyoto

Recommended

More Related Content

Similar to IAD Kyoto

Similar to IAD Kyoto(20)

More from Shigeru Kobayashi

More from Shigeru Kobayashi(20)

IAD Kyoto