[SuperCollider] GUI Overview and Introductionを流し読む

SuperCollider3.3になってアップデートされたというGUIのヘルプファイル、「GUI Overview and Introduction」を、翻訳する時間もスキルも無いので、あくまで流し読みます。

——

Basic usage: Kits and Syntax

GUIを扱うには2つの基本的なクラスがあるらしい。SCWindowJSCWindow
SCWindowはMacで、JSCWindowはそれ以外かな?

Basic Usage: Windows, Containers and Decorators

ウィンドウの作り方はほぼ変わらずというか変えなくてもよくて、Windowと書けばMacならSCWindowが呼び出されると言うことのようです。

(
// Window returns the window class for the current kit
w = Window( "my name is...", Rect( 128, 64, 340, 360 ));
w.front;
)

Window内のパーツの配置の仕方は、ひとつずつ座標を指定するやり方と、作ったパーツ順に自動的にWindow内に詰めて流し込むやり方がある。CSSで言ったら position: absolute; か float: left; のような感じ。当然フロートの方がらくちん。
やりかたはこれでOK

w.view.decorator = FlowLayout(w.view.bounds);

流し込むエリアもCompositeViewで複数設定できるらしい。知らなかった…
そもそもWindow自体CompositeViewのサブクラスなんだとか。

(
w=Window.new.front;
w.view.decorator = FlowLayout(w.view.bounds); // notice that FlowView refers to w.view, not w

v=CompositeView(w, Rect(5,5,190,390));
v.background = Color.rand; 					// set the color
v.decorator = FlowLayout(v.bounds);

14.do{ Slider(v, 180@20).background_(v.background) };

)

vで設定した範囲内にスライダーが流し込まれます。

Window Coordinates

ミニ情報的な感じで。SuperColliderのウィンドウはスクリーンの左下が基準なので何かと扱いづらい。そんなときはウィンドウの高さを取得すればいいよ、と。

(
w=Window.new("A Precisely Placed Window",
Rect(100, Window.screenBounds.height-300, 300, 200 )

).front;
)

ウィンドウの高さを取得して、そこから300px引いた数値を基準点とする。ウィンドウの高さが200pxなので、画面の上端からは100px離れてるよ、と。

Actions: Performing Things with a GUI Widget

アクションを設定するには。スライダーなどのGUIのactionメソッドに書く。

(
w = Window ("A Slider");
a = Slider (w, Rect(40, 10, 300, 30));
a.action={ |sl| sl.value.postln }; // set the action of the slider
w.front
);

SuperColliderの「|sl|」という引数の受け方がいまいちなじめないが…
アクションを追加するにはaddActionメソッド、削除するにはremoveActionメソッドを使う。

// adding and removing an action:
f = { |sl| "--------*******-------".postln; };
a.addAction(f);
a.removeAction(f);

この辺はすごく分かりやすい。

Asynchronous GUI Techniques: Communicating with the Sound Server

GUIとサウンドサーバの間の非同期通信。必要性・内容ともにいまいちつかめず。
ただ、サンプル中のNumberBoxと言うクラスは便利ですね!
NumberBoxで生成したテキストフィールドをクリックし、上下へのドラッグや上下矢印キーの入力で、テキストフィールド内の数字を増減できる。何かと使えそう。

——–

ううむ。次はGUI Classesを流し読みます。

SuperCollider 3.3.1リリース

1曲作るたびに心が離れ、しばらく経つとやりたくなる、
それがSuperColliderというシロモノでございます…

もともとプログラミングには全く縁のなかったド素人なのでまったく着いて行けていないのですが、いつのまにかヴァージョン3.3.1がリリースされていました。

SuperCollider » Blog Archive » SuperCollider 3.3.1 released (Safari 4 compatible)

Safari4を入れている際のバグ修正がメインらしい。
3.3のリリースのお知らせを読むと色々活発に修正されているようです。

SuperCollider » Blog Archive » SuperCollider 3.3 released

最も注目されているのがGUIのアップデート。
より易しい構文で書ける様になったらしい。

SCのGUI周りは使いやすいとは言えない感じだったので、どのように変わったのかな。
とりあえず2005年に書いたGUIを使ったコードが動いたのでひと安心。

imoutoid

このことについてブログという公開される場で書いてよいものか迷ったが、
やはり自分の中で大きな出来事なので書くことにします。

昨日、imoutoidさんと最後のお別れをしてきました。
といっても、恥ずかしながら僕はimoutoidとしての彼の活動のことはほとんど知らなくて。

僕にとって彼はotophiliaだった。
日本のSuperCollider界に超新星のごとく現れた天才。
SuperColliderというツールをただ使うしかない僕のような平凡なユーザとは違い、
コアクラスのメソッドを安々と書き換えてしまい、僕らが考えもつかないツールを開発していた。
ある意味では退屈なプログラミングという行為そのものを変革しうるような衝撃を感じた。

と、同時に、彼の生み出す音の非凡なクオリティも。

彼に初めて京都で会ったのが2007年、それからも会う機会はあったが、
年上のIAMASなんかに通ってる変な大人(失礼)相手に
堂々とレクチャーしてのける彼の度胸と生き方にすらあこがれたものです。

そして、imoutoidとしても素晴らしい活躍をしていたとは。
本当に素晴らしいです。そして、お疲れさま。

最後に、SuperCollider Japanでの彼のページを貼っておきます。
いつか、すべて読み返そう。
http://supercollider.jp/userinfo.php?uid=42

彼のご冥福をお祈りいたします。

さらに、よりよいXHTMLコーディングを考える…

半年ほどちんたら更新してきた当ブログですが、前回の記事には意外にも反応があってびっくりしています。コメント本当にありがとうございます。

改めて前回の記事を見返してみて、「正しい」という表現が適当じゃなかったかもしれません。別段、定義リストを使ったコーディングにたいして、おまえは間違っていると糾弾するつもりはないんです。個人的に嫌だなと思うだけで。まぁ好みは色々あるでしょうし。

ここで前回「よろしくない」と例に挙げた新着ニュースリリース部分のコーディングを再度ご紹介。

<dl id="news">
<dt>2009.06.02</dt>
<dd><a href="~">ニュースのタイトル</a></dd>
<dt>2009.06.01</dt>
<dd><a href="~">ニュースのタイトル</a></dd>
</dl>

制作の現場では複数人数でのコーディングが当たり前、客から突然仕様変更を言い渡されることも当たり前です。たとえば上記のコーディングで突然、ニュースのカテゴリもテキスト表示してくれとなった場合。ddをもう一つ追加するわけですが…

<dl id="news">
<dt>2009.06.02</dt>
<dd class="category">製品情報</dd>
<dd><a href="~">ニュースのタイトル</a></dd>
<dt>2009.06.01</dt>
<dd class="category">採用情報</dd>
<dd><a href="~">ニュースのタイトル</a></dd>
</dl>

CSSには当然ddに対してスタイルが設定されているので、どちらかにクラス名を追加しなきゃならない。場合によっては両方につける羽目になり、CSSも一部書き直し…。それは嫌だからddの中にspanを挿入する? システムが組みあがってからこういうマークアップ上の変更をするのは結構めんどくさいです。

と言うことを考えると、最初から出来るだけ細かく、各要素には意味のあるクラス名をつけておくのがよい、というわけです。CSSも見やすくなります。

#news dd {
・・・
}

と書かれていたのでは、いったい何に対してスタイルを設定しているのかCSSだけを見ても分かりませんが…(まぁなんとなく分かりますが)

#news .entry-title {
・・・
}

こちらの方がより、自分のあとにCSSを触る人に対しても親切です。

でも「意味のあるクラス名」の付け方にはどういう基準があるのか? この基準がないと、class名を考えるのに無駄な時間を使ってしまい、かえって効率的ではなくなってしまいます。

そのヒントになりそうなのがMicroformatsというわけなのですが、徹夜の開発中なのでまた次回…

正しいXHTMLマークアップとは?

XHTMLのマークアップでどうしても許せないというか、気になるやり方をよく見かける。
企業サイトではトップページに最新ニュースの一覧が表示されていることがよくあるが、その部分がかなりの確率でこのように書かれている。

<dl id="news">
<dt>2009.06.02<dt>
<dd><a href="~">ニュースのタイトル</a></dd>
<dt>2009.06.01<dt>
<dd><a href="~">ニュースのタイトル</a></dd>
</dl>

要は定義リストを使っているわけだが、これが「正しいコーディングである」と誰かが提唱しているのだろうか、ほんとによく見るんですが、定義リストの本来の意味からは大きく外れているのが気になるんです。

DTDではdl要素について「definition lists – dt for term, dd for its definition」と注釈があります。この文面通りに受け取れば、上記のコーディングは2006年6月1日についての解説がリンク先にあるということになってしまうが、もちろんそのようなことはないはず。

では、どのようにコーディングすればよいのか。僕がもう少しましだと思うのはこういうマークアップです。

<div id="news">
<span class="updated">2009.06.02</span>
<span class="title"><a href="~">ニュースのタイトル</a></span>
<span class="updated">2009.06.01</span>
<span class="title"><a href="~">ニュースのタイトル</a></span>
</div>

数字は更新日時のことで、文字部分はタイトルであるということが明白ですね。
でもまだ問題があります。どこからどこまでがひと固まりであるのかはっきりしません。
さらに修正してみましょう。

<div id="news">
<div class="entry">
<span class="updated">2009.06.02</span>
<span class="title"><a href="~">ニュースのタイトル</a></span>
</div>
<div class="entry">
<span class="updated">2009.06.01</span>
<span class="title"><a href="~">ニュースのタイトル</a></span>
</div>
</div>

最初のコーディングとだいぶ変わりましたね。そして、RSSやAtomのフィードのソースにかなり近づいたと思いませんか? XHTMLはXMLでもあるので、同じXMLであるRSSと似ているというのは、個人的には「より正しいマークアップである」と思います。

さらにもうひと工夫すれば、機械的にもこの部分が新着記事であると理解できるようになります。そのうちMicroformatsという考え方についてご紹介したいと思ってます!