2009年度学術交流支援資金 電子教材作成支援
研究成果報告書

研究課題名：「デザイン戦略（ビジュアライゼーション）」の教材作成
氏名：脇田玲
所属：慶應義塾大学 環境情報学部


図1：本研究の成果"Intuino"の操作風景


■ 研究課題
2009年秋学期「デザイン戦略（ビジュアライゼーション）」における電子教材として、 １）実空間における情報可視化のためのアクチュエータ群、　２）実空間における情報可視化を支援するオーサリング環境、　３）上記２つのユーザーマニュアル及びチュートリアル、の3つを作成する。１は共通に利用可能な電子部品として作成し、多様な表現を行うための道具群を提供する。２は簡易プログラミング環境として作成し、ウェブ上で配布する。3はWikiにより作成し、ウェブで公開する。

■ 研究の背景
2009年度秋学期より「デザイン戦略（ビジュアライゼーション）」を研究代表者（脇田）が担当することになったため、教材作成が急務である。本講義は先端開拓科目にあたり、ビジュアライゼーション（情報可視化）の最新動向を知るとともに、その研究の先端領域を体験し、自身の研究に活かす知見を得ることを目的にしている。
　情報可視化は近年のウェブの発達に伴い急速に注目を集めている分野である。ブログのフォークソノミーを支援するTagCloud、Google Mapにおける空間情報付加環境、SNSにおける人間関係のネットワーク図など、現在のウェブ環境においては一般的なツールとして普及している。一方で、ユビキタスコンピューティング技術やタンジブルインターフェイス研究の進歩により、可視化研究のフィールドは仮想環境から実環境（我々が生活している物理的空間）に移りつつある。株価の上下を反映するインテリア照明、天気予報を発光ダイオードの色で示す傘など、情報提示の場所はディスプレイ画面を超えて、我々の生活空間に浸透してきている。

■ 研究目的
　このような現状において、本科目では実空間における情報可視化を対象とし、その実態と実現方法を具体的なメディアの作成を通して理解することを目指す。コンセプト立案とハードウェアスケッチによるプロトタイピングのプロセスを行うことで、身体的な理解を促進することができる。このようなプロトタイピングを講義の枠組み内で行うためには電子工作環境、及びそのプログラミング環境が必要である。
　電子工作とそのプログラミングはデザインやアートを目指す学生にとってはハードルの高いものである。PICやH8といったマイコンの仕様を完全に理解し、それを前提としてC言語やアセンブラでロジックを記述するにはある程度の訓練が必要である。１３回の枠組みの中でそれを行い、さらに自身の創作行為と結びつけるのは非常に困難であるため、可視化システムのデザインの本質に注力できる教材が必要である。
　そこで本研究では、デザイナーやアーティストを目指す学生を対象とした、実空間可視化メディアの作成支援環境を構築する。本支援環境は以下の3つから構成される。

１）実空間における情報可視化のためのアクチュエータ群
２）実空間における情報可視化を支援するオーサリング環境
３）アクチュエータ群及びプログラミング環境のマニュアルとチュートリアル

実空間における情報可視化のためのアクチュエータ群
１は仮想空間におけるコンピュータディスプレイに変わるものである。ウェブやCGといったCGにおける情報可視化はピクセルをベースにした情報提示の枠組みに沿っている。そのため基本的なグラフィック表示環境が存在すれば事足りる。一方で、実空間における情報可視化は発光ダイオードやモーターの回転など、電子信号を物理信号に変換するアクチュエータを用いる必要がある。一般的に入手可能なアクチュエータは発光ダイオード、モーター、ソレノイド、ペルチェ素子などがあるが、これらの制御方法はバラバラであり、初心者がこれらを全て理解して自身のメディア製作に利用するには高いハードルがある。そこで本研究ではこれらを容易に扱えるように、あらかじめ必要なインターフェイス類を付加した形のパーツキットとして履修者に配布する。
　また、近年注目を集めているスマートマテリアルを用いた情報可視化を体験してもらうために、示温インクを用いたアクチュエータとバイオメタルを用いたアクチュエータを作成し、これもパーツキットとして履修者に配布する。示温インクとは温度によってその分子特性が変化し色が変わる性質をもったインクの事である。これにより発光ダイオードのような発光性のカラーコントロールではなく、発光しない状態でそのものの色が変化するというカラーコントロールが実現できる。このアプローチはアンビエントメディア研究やメディアアート研究で急速に注目を集めている手法であるため、先端開拓の講義として実施する意味は大きい。もう１つのバイオメタルとはTi-Ni系形状記憶合金を繊維状に加工したものであり、電圧に応じてその長さを制御することができる人工筋肉素材の１つである。これにより生物的、有機的な動きが実現され、アフェクティブコンピューティング技術と連動させることで、感情豊な動きを人工物に付加することが可能になる。

実空間における情報可視化を支援するオーサリング環境
可視化における情報提示の作法やロジックを記述するためにはプログラミングが必須である。近年はGainerやArduinoといったフィジカルコンピューティング環境が普及してきており、これらはprocessingやActionScriptといったデジタルコンテンツのプログラミング言語でも扱えるため、インタラクションデザイナーやメディアアーティストとの親和性が高い。 しかし、いわゆるデザイナー（プロダクトデザイナー、ファッションデザイナー、建築家など）にとってはプログラミングの作法を習得することはハードルが高く、プログラミング操作なしにインタラクションをデザインできる環境が必要である。そこで本研究では、タイムライン操作や曲線描画などの日常的なPC操作言語のみでインタラクションをデザインできる環境を構築する。 この環境を用いることで、作成者は内部の通信方法を意識することなく、そのセンサやアクチュエータの振る舞いそのものに注力してデジタルメディアを作成することができる。

アクチュエータ群及びプログラミング環境のマニュアルとチュートリアル
上記の2つの環境を扱うためのマニュアルとチュートリアルを作成する。これらのドキュメントには、アクチュエータ群の詳細な仕様、基本的な利用方法、アドバンストな利用方法を記載する。Q&A、様々なトピックについて議論するフォーラムページも時間が許せば作成し、教材の枠組みを超えたコミュニティ構築も考慮する。

■ 研究成果 前章で述べた3つの研究目的を実現するために、以下の3つを作成した。

１）キネティックな表現を支援する新しいアクチュエータ
２）インタラクティブデバイスのプロトタイピングを支援するオーサリング環境
３）１と２をまとめたチュートリアル

１ キネティックな表現を支援する新しいアクチュエータ
研究計画では示温インキを用いたアンビエントなアクチュエータとバイオメタルを用いたキネティックなアクチュエータの２つを作成予定であったが、今期は予算の関係で後者のみを作成した。以下、作成したキネティックアクチュエータについて述べる。

Living Textile - アニメーションを適用可能なスマートテキスタイル
Living Textileは毛糸によって編まれた柔らかな布であり、内部に繊維状のTi-Ni系形状記憶合金（バイオメタル）が編み込まれている。バイオメタルには導電性繊維（ナスロン）によって電流が流される仕組みになっており、電圧の高低によって形状が変化する。この特性を用いることで、ユーザは曲面形状とそのアニメーションをプログラムすることができる。この特性はCGにおける自由曲面に似ており、仮想世界の形状表現を実空間で実現する素材と考えることも出来る。ユーザは次節で述べるオーサリング環境を用いることで、プログラミングの作業を行うことなく、このスマートテキスタイルを自由に制御する事ができる。動的な形状変化をともなう素材は、インテリアや衣服など日常生活に浸透した情報可視化への利用が期待できる。

図2：Living Textileの変形過程


２ インタラクティブデバイスのプロトタイピングを支援するオーサリング環境
　本研究では視覚的なPC操作のみで有機的な振る舞いを持つインターフェイスを直感的かつ高速にプロトタイピングできるオーサリング環境を提案する．この環境は，汎用的なフィジカルコンピューティングボードであるArduinoとシームレスに連携するソフトウェア "Intuino" として提供される．Arduinoに接続したセンサとアクチュエータは，そのままIntuinoの画面上に詳細なアイコンとして表示され．グラフィカルな操作言語のみでセンサ値の取得とアクチュエータの動作設定をほぼリアルタイムで行うことができる．システムは，入力／処理／出力のプロセスにおいて処理の作業を最小化するかたちで設計されているため．ユーザは入力と出力の組み合わせ及びその詳細な動きのデザインに集中することができる．プログラミングとデバッグの処理の一切を省くことは時間を短縮するのみならず，インタラクションデザインの初期過程をより充実させることにも繋がる．そのため，本システムは一般的なPCスキルしか持たないデザイナーのみならず，経験を積んだプログラマーにも有効である．


図3：Intuinoの概観。左側のグラフは取得したセンサ値を表示している。中央にあるI/Oモジュールアイコンはピンのレベルまで詳細に表現しており、視覚的に設定を行うことができる。右に表示されているタイムラインはアクチュエータの振る舞い（この場合は2つのLED）をスプライン曲線で指定しているところ。

操作対象の視覚化
実際の電子部品に対応するGUI上のアイコンは端子のレベルまで精密に表現されている．アイコンをクリックすることでそのデバイスに適用可能な設定項目が表示されるようにした（図3）．ArduinoのI/Oモジュールについては，ラジオボタンを用いることで，各ピンを入力として扱うか／出力として扱うか／もしくはPWMとして設定するかの選択ができるようにした．アイコン毎に表示される設定項目を確認することで，デザイナーは選択可能な機能を理解しながら操作することが可能となり，基本操作に対するミスも軽減できる．

タイムラインによる動作生成
アニメーション作成ソフトや映像編集ソフトで一般的に使われているタイムラインを用いて，LEDやサーボモータなどのアクチュエータの動きを時系列で編集できるようにした（図3）．タイムライン上にベジェ曲線を描写することで，時間軸に沿った細かな動きや滑らかな動作の作成が可能になる．

リアルタイム連動
IntuinoとArduinoは常に連動しており，Arduinoに接続したセンサの値はリアルタイムにIntuinoに反映される．アクチュエータの動作も画面上で組み立てた通りに即座に実行されるので，ユーザは画面上に表示されるセンサとアクチュエータの動作曲線を見ながら，トライ＆エラーを短時間に繰り返してインタラクションを組み立てて行くことができる．

イベントライン機能
センサの値とアクチュエータの動きを関連づける場合にはイベントライン機能を用いる． センサの値を示すグラフとアクチュエータのタイムラインを結ぶことで，センサの値に応じたアクチュエータの動きの制御や，割り込み処理を実現できる．例えば人が触れると回転するモータや温度に応じてフルカラーLEDの色を変えるといった処理をGUI上で組み立てることができる．
　本システムでは複数の入出力をサポートしている．熟練したインタラクションデザイナーであればArduinoの複数ピンを同時に制御することで，より複雑なインタラクションの初期設計も行うことができるだろう．

実装
図4に示すように，システムはAdobe Airのアプリケーションとして提供される．Arduinoとアプリケーションの通信にはFunnel ServerのAS3 Libraryを用いている．ホストPCとArduinoとの通信プロトコルにFirmataを用い，PC側のfunnelサーバを介して本アプリケーションが常に連携できる環境を構築している．


図4：Intuinoのシステム構成


３ アクチュエータ群及びプログラミング環境のマニュアルとチュートリアル
多くのオープンソース環境は開発者向けであるためにドキュメントもまた開発者向けのものが多い．我々はデザイナーを支援することが目的であるため，情報技術としては初心者である彼らでも理解し易い言葉と構成をとったWikiチュートリアルを構築した．サイトではIntuinoを使い方をビデオや画像を用いて分かり易く説明している，長期的にはコミュニティを育成していくことも視野に入れている．


図6：チュートリアルWiki


■ まとめ
本研究では、「デザイン戦略（ビジュアライゼーション）」の教材作成として、実空間における情報可視化のためのアクチュエータ作成、実空間における情報可視化を支援するオーサリング環境、アクチュエータ群及びプログラミング環境のマニュアルとチュートリアル、の3つの詳細について報告した。今後はこれらのツールを2010年度の講義内で利用し、その有効性を検討していく予定である。