フィジカルなUIを扱うためのクラスについて

[Shigeru Kobayashi]

みなさま

小林です

先日の010に関するディスカッションにも関連するのですが、フィジカルなUIを扱うためのクラスを試験的にAS3ライブラリに追加してみました。

IAMAS内で行うAS3のワークショップ用のサンプルを用意していた時、イディオム的に出てくるフィルタの使い方などを隠蔽してもうちょっと抽象度をあげられないかな、というところから作ってみました。

※Arduino用のHardware Abstraction
Libraries（http://www.arduino.cc/playground/Code/HardwareAbstraction）をある程度参考にしています。

いずれもシンプルなものですが、ボタンやLEDといったものをもう少し高いレベルで扱えるようにしているつもりです。また、GainerでもArduinoでも同じように扱えます。

http://code.google.com/p/funnel/source/browse/#svn/trunk/libraries/actionscript3/src/funnel/ui

加速度センサも、「適切にスケーリングしてsinθの値を求めてそこから逆サインでさらにラジアンから度に変換」といった一連の処理を内部的に行うようにしたAccelerometerクラスを用意してみました。以下はButtonとLEDの使用例です。

import flash.display.Shape;
import flash.display.Sprite;
import flash.events.Event;
import funnel.*;
import funnel.ui.*;

public class ArduinoTest extends Sprite {
private var aio:Arduino;

public function ArduinoTest() {
var config:Configuration = Arduino.FIRMATA;
config.setDigitalPinMode(12, IN);
config.setDigitalPinMode(13, OUT);

aio = new Arduino(config);

// 必要であればここでソース／シンクも指定する（デフォルトはソース）
var led:LED = new LED(aio.digitalPin(13), LED.SOURCE_DRIVE);

// 必要であればここでプルアップ／ダウンも指定する（デフォルトはプルダウン）
var button:Button = new Button(aio.digitalPin(12), Button.PULL_DOWN);

// ボタンが押されたとき
button.addEventListener(ButtonEvent.PRESS, function(e:Event):void {
// LEDを間隔200msで2回点滅
led.blink(200, 2);
});

// ボタンが長押しされたとき
button.addEventListener(ButtonEvent.LONG_PRESS, function(e:Event):void {
// LEDの値を1000msかけて1にセット
led.fadeTo(1, 1000);
});
}
}

この後はHブリッジなどの基本的な入出力をいくつか用意しようかなと思っておりますが

・こういうのも必要なのでは
・そもそもそんなものは必要ないのでは

など、もしご意見などあればお気軽に聞かせていただけたらと思います。:)

[takanori endo]

遠藤です。

アプリケーション層といった感じのクラスでしょうか？
LEDやボタンなどは、よく使うけど単純なのであまり気にしていませんでしたが、
いつも書くコードが決まっていたように感じます。また、下記のコードをみると
ずいぶん具体的になってコードを見ただけで、このような回路のコントロールか
大体わかりますので、よいとおもいます。

ちょっと問題あるかなと思うのは、クラスの扱いに回路の知識が入ってこざるを得ない
ということで、LEDの接続がソースなのかシンクなのかを、意味はわかっていても
言葉と結びついていないような人が大半だと思います。（回路バリバリの人を除いて）
その辺の導入がうまくできないと難易度が上がってしまうと思います。

UIクラスを別パッケージにされていることからも、これは機能拡張という位置づけだと
思うので、わかる人は利用してくださいという感じになりますよね？

あと、どの程度の種類を用意するのかということがちょっと気になりました。


遠藤孝則


2009/05/17 21:13 Shigeru Kobayashi <koto...@gmail.com>:

--
endo takanori

[Shigeru Kobayashi]

遠藤さん

小林です

リプライが遅れてすみません。

今回追加したクラスですが、扱いとしてはアプリケーションレイヤとして考えています。Funnelのコア部分で用意した仕組みをそのまま使っているだけですので、実装自体は非常に簡単なものになっていると思います。

入門者向けにコードを読みやすくするという意図もあるのですが、それなりにスキルのある人がスケッチする場合にも有効に機能するのではないかと思っています。

> ちょっと問題あるかなと思うのは、クラスの扱いに回路の知識が入ってこざるを得ない
> ということで、LEDの接続がソースなのかシンクなのかを、意味はわかっていても
> 言葉と結びついていないような人が大半だと思います。（回路バリバリの人を除いて）
> その辺の導入がうまくできないと難易度が上がってしまうと思います。

コード例ではデフォルト引数となっている部分を明示しましたが、実際には

public class ArduinoTest extends Sprite {
private var aio:Arduino;

public function ArduinoTest() {
var config:Configuration = Arduino.FIRMATA;
config.setDigitalPinMode(12, IN);
config.setDigitalPinMode(13, OUT);

aio = new Arduino(config);

var led:LED = new LED(aio.digitalPin(13));
var button:Button = new Button(aio.digitalPin(12));

// ボタンが押されたとき
button.addEventListener(ButtonEvent.PRESS,
function(e:Event):void {
// LEDを間隔200msで2回点滅
led.blink(200, 2);
});

// ボタンが長押しされたとき
button.addEventListener(ButtonEvent.LONG_PRESS,
function(e:Event):void {
// LEDの値を1000msかけて1にセット
led.fadeTo(1, 1000);
});
}
}

のようになります。入門者向けに紹介する回路では、ボタンならプルダウン（※）、LEDならソース（※）になる回路を紹介して、最初の段階では回路のことをよくわからなくても取組めるようにすることを想定しています。

ただし、回路のことをブラックボックスにしてしまうのではなく実習中に

・プルダウン用の抵抗器を外したら何がおこるか？
・シンクにつなぎ変えたら？

などは実際にその場で試してもらうなどして順次理解を深めてもらってもいいのでは、と思っています。そういうことができるのがブレッドボードの良さだと思いますので。

※経験の深い方ほどプルダウンではなくプルアップ、ソースではなくシンクを推奨されるかもしれませんし、実際にその方が良いケースも多いのですが、初心者にとっていきなりロジックが反転するのはかなり混乱すると思いますので...。


今後の拡張予定ですが、基本となる種類はそんなに多くないかなと思っています。むしろ、簡単なパターンマッチングなどのベタなコードで書こうとすると結構手間のかかる（＆初心者向けに説明しにくい）部分をカバーするものを追加できればと思っています。

AS3用のライブラリはコンパイル済みバイナリではなくソースで提供していることもあり、このあたり、Processingの入門者向けサンプルで別のタブにカスタムのクラス定義などを入れて用意するのと似たところがあるかもしれません。


> UIクラスを別パッケージにされていることからも、これは機能拡張という位置づけだと
> 思うので、わかる人は利用してくださいという感じになりますよね？

AS3の他のライブラリに似た感じにするためにもFunnelのコアとしては位置づけていません。ですので、Processingで同じAPIで揃える必要はないと思いますし、Processingになじむ形の拡張があれば、と思います。

しかし、「わかる人は利用」ではなく、むしろイントロダクション用のサンプルでも積極的に使っていこうかなと思っています。この辺り、いかがでしょうか。


2009/5/18 takanori endo <sweeta...@gmail.com>:

[takanori endo]

遠藤です。


今のワークショップの進行を基に考えると、とくに初心者むけのものは、
・とにかく回路図のように接続してください。
．その回路から状態を取得するにはこのようなコードを使ってください
というながれになっています。
時間がないということも、大きな要因なのですが、このへんを変えないと
難しいと思いました。（単純にワークショップの時間配分の問題ですが）

たまによくわかりそうな人が来ていて余裕がありそうなときは接続を
GNDにしてみたら、VCCにしてみたらというように（ソース、シンクの
言葉は使わないにしても）やってみることがあります。が、まったくの
初心者にこの辺のことを含めてやるには、すごく時間がかかってしまいます。
実際には、このへんのことをやるにはどの程度の時間がかかるものなのでしょう？

> ただし、回路のことをブラックボックスにしてしまうのではなく実習中に
>
> ・プルダウン用の抵抗器を外したら何がおこるか？
> ・シンクにつなぎ変えたら？
>

このことはすごく大事なことなので、入れたいことですよね。
回路に関係することや用語をおぼえたすぐ後で、
UIクラスは、今まさに覚えたばかりの用語を利用してできるので、
イントロダクションに使うのもより印象が深まるように思えます。


Processingになじむというあたりの話ですが、
初めてProcessingをさわって驚いたことが
主要なインタラクションのプロパティは変数に定義済み
ハンドラも定義済み
変数と関数である程度のことができるという点です。
このあたりをProcessingのすぐエントリーできる特徴と考えると
オブジェクトを使う時点でもはやエントリーのしやすさは考えなくても
よいのかもと思ってしまっています。
ので、きっちりUIクラスも実装したいと思います。

エントリーユーザー向けは、簡単バージョンでの実装も
考慮していきたいです。


Funnelは初心者向けなのか？というと、僕は「違う」とこたえたいのですが、
そのへんどうなんでしょうか？





2009/05/20 9:55 Shigeru Kobayashi <koto...@gmail.com>:

--
endo takanori

[Shigeru Kobayashi]

小林です

> たまによくわかりそうな人が来ていて余裕がありそうなときは接続を
> GNDにしてみたら、VCCにしてみたらというように（ソース、シンクの
> 言葉は使わないにしても）やってみることがあります。が、まったくの
> 初心者にこの辺のことを含めてやるには、すごく時間がかかってしまいます。
> 実際には、このへんのことをやるにはどの程度の時間がかかるものなのでしょう？

参加者の人数にもよると思いますが、説明する、しないで簡単にやっても30分くらいは変わるかなと思います。いきなり知識を詰め込みすぎるのも問題だと思いますので、余裕のある人があとから調べられるようなキーワードが補足として資料などにあるといいのかなと思います。

このあたり、どこまでが基礎知識として知っておいてもらいたいと考えるかにもよりますよね。昔のワークショップ（週に2回で1月くらいかけていた時）ではこの辺りも全部盛り込んでいましたが、確かに時間のない時には省略してしまうことも多いです。とはいえ、例えばフルカラーLEDを説明しようとすると、アノードコモンとかカソードコモンに触れる必要が出てきますので、どこかのタイミングでは説明すべき内容かなとは思います。

> 主要なインタラクションのプロパティは変数に定義済み
> ハンドラも定義済み
> 変数と関数である程度のことができるという点です。
> このあたりをProcessingのすぐエントリーできる特徴と考えると
> オブジェクトを使う時点でもはやエントリーのしやすさは考えなくても
> よいのかもと思ってしまっています。
> ので、きっちりUIクラスも実装したいと思います。

AS3を使ったワークショップの場合、既にFlashやFlex
Builderでの経験があることを前提にしてしまう場合が多いのですが、Processingを使う場合には、そもそもProcessingが初めてだったり、プログラミングも初めて、という場合が多いですよね。

自分の場合には、JavaでのHello
Worldのように、いきなりクラスとかを書かなければならないのではなく、println()だけ書けば昔のBasic感覚で使えるのがかなり印象的でした。そうした意味で「これはおまじないですのでとりあえずこう書いてください」という説明をしなくてはならない場面が少ないのがProcessingのいいところだと思っています。

オブジェクトを扱うのは確かに一つの大きなハードルで、それを説明しないでいきなりドットシンタックスが登場するのをどう説明するのか？、という点が大きな分かれ道になると思います。

このあたり、実世界の例えを持ち込んで説明しようとする教科書が多いのですが、それはかえって理解を妨げている気がします。例えばですが、全て関数で書く方法で説明し、ある程度の規模のものを扱うにはこれでは不便だと実感してもらった上でクラスを説明する、という方法が（OOPが登場した背景を考えても）自然でいいのかなと思っています。とはいえ、うまく誘導するのは難しいのですが...。

※遠藤さんがすすめていらっしゃる「全て関数ベースで」というのは、おまじない無しで説明するというところを徹底する上で重要なアプローチだと思っています。「そんな段階はすぐにクリアできるじゃん」と思ってしまうと意義がそれほど感じられないかもしれませんが、実際のところ配列や関数でつまずく初心者はかなり多いと思いますので...。

> Funnelは初心者向けなのか？というと、僕は「違う」とこたえたいのですが、
> そのへんどうなんでしょうか？

「初心者に使えないか」といわれるとそんなことはないと思います。がしかし、エントリーしやすくするための仕組みは整えつつも、狙っているのはそこから先の実践的にプロトタイピングしていくエリアかなと思っています。

2009/5/20 takanori endo <sweeta...@gmail.com>: