ビスケットワークショップの開催のしかた

システム的な説明をする．
現状でバージョンが２つある．

一つは単発のワークショップに向いている方法．ver. 3.1
（ワークショップ開催者がアカウントを持っていて，参加者のアカウントはなし）

もう一つは，参加者が継続して参加する方法．ver. 3.4
（参加者一人ずつにパスワードを配布し，それでアカウントの管理をする）

3.4は，要望があったところに個別に対応しているので，連絡ください．

3.1は，ネット上で自由に開催者アカウントの作成を許しているので，
その説明をする．

＊ワークショップサイトを開く．
＊開催者新規アカウント「作る」のボタンをおして，アカウントを作る（sslではないので，パスワードの選び方は注意する．もちろん半角）．
＊ログインして，「ワークショップ環境を作る」をひらく
＊ワークショップ名を決めて，プリセットのボタンをどれか押す．さらに細かい設定を選び，「つくる」を押す．
＊できたワークショップのアイコン（たぶん灰色）をクリック．
＊右上に，ワークショップコードが表示されている．この数字を参加者に伝える．
＊ワークショップ参加者は，ビスケットのトップページの真ん中くらいにあるオレンジ色の枠で，そのワークショップコードを入力して「さんか」を押す．
＊管理者画面で，「ビスケットランド（リアルタイム）」というリンクは，ビスケットランドをワークショップ用に全画面表示するモード．参加者が作品を保存するごとに，ここに絵が現れる．
＊一般的なやり方は，最初にプロジェクターの画面は，参加者と同じ画面を見せて，操作を説明しておいて，みんなの作品が出来上がってきたころを見計らって，プロジェクターをビスケットランド表示に切り替えて，盛り上げる．
＊右下の「ほぞん」ボタンをおすと，作品が保存され，そのエリアがピンクから白に変わる．
＊ワークショップが終了したら，「中断する」を押すと，ワークショップコードを入力して新たにワークショップに参加できなくなる．
＊「公開する」にすると，ログインしないトップページにこのワークショップが現れるようになる．

＊作品を保存したときに現れる「ページコード」という数字を覚えておくと，ワークショップが中断しても，その作品を修正することができる．ページコードはワークショップ管理画面で，作品ごとに見ることもできる．

＊ビスケットランドでの「うんち」対策．
うんちが出るとしらけるので，あんまり騒ぎ立てずに，こっそり消す方法．
別のPCで管理者画面を開き，その作品をクリックする．絵とめがねまで消すのは忍びないが，ステージにおいてある，いやな絵をステージからどけて，ステージを空にして，保存しなおす．これで，作品そのものは消さないけれど，ビスケットランドの画面からは消せる．

＊ビスケットランド（リアルタイム）は作品の更新を15秒ごとに監視して，画面を更新する．ウィルスは不可．
＊ビスケットランド（高速）は作品の更新チェックはしなくて，完成した作品群を一気に読み込む．ただし，ウィルスもOK．


応用
＊管理者画面で「ひな型」かその横の「＊」で，参加者の最初の画面を決めることができる．ここにあらかじめ絵をいれておけば，それを渡せる．
＊ワークショップ環境を作る画面で，ワークショップの種類に応じて，ワークショップのプロジェクターの画面用のリンクが変わる．


その他，実験的な機能なども沢山あって，リンクはあるけど動かない場合もあるので，押しても悪いことにはならないと思いますが，気をつけてください．

ビスケットでコンピュータウィルスを説明する

ビスケットを使って，コンピュータウィルスの仕組みを説明してみる．

まず，準備．
ビスケットの入門用ワークショップにビスケットランドというのがある．

このように，参加者が作った作品を全部まとめて一つのプロジェクターに表示するというもの．
たとえば，
ビスケットランド
のような画面になる．作った動きが，大きく表示され，非常に盛り上がるワークショップである．

このワークショップに高学年の子どもが参加したときに，その子に飽きさせないような新しい技として，
「はてな」というのを教えることがある．
たとえば，

のように使う．「はてな」はワイルドカードで，任意の図形にマッチするという意味をもつ．２つめのメガネは「このみどりの魚は，何かに衝突すると，よける」という動きである．

実は上のURLの中の海にもこのみどりの魚が泳いでいた．ほとんどの魚は決められたとおりの泳ぎしかしないが，このみどりの魚だけは,他の魚に干渉して複雑な動きをする．世界一単純なロボットプログラミングといってもいいかもしれない．

さて，やっとウィルスの説明の準備ができた．ここで，

のような作品をつくる．
「はてな」が理解できた人ならこれがどのような動きをするかわかるだろう．
2つ目のメガネは，「黄色い顔が何かに当たったら，相手も自分と同じ黄色い顔にする」という意味である．
これを実際に海に放流するとこうなる．
怖いビスケットランド
今まで楽しかった海が，一瞬で怖いウィルスだらけになる．

このウィルスの変形で，「黄色と何かがぶつかったら，相手を赤にする」というのもつくれる．黄色は増えずに，赤だけが増えるので，感染はすごく遅い．数に比例した時間がかかる．それに対して，上の黄色のウィルスは，自分が増殖するので，一気に感染してゆく．指数関数のすごさである．

物が腐る，マルチ商法，風邪がうつる，みな指数関数だが，指数関数を直感で理解するのは難しい．3日腐らなかったから4日目も大丈夫だろう，というものではない．

プログラミング教育がなぜ必要か．
世の中を生きる上でプログラミングが直接役に立つという局面はほとんどない．未来のプログラマーを育てるためではない．

我々は，子どもの頃に積み木遊びをしたから，荷物を高く積むと崩れそう，という直感が働く．
コンピュータやインターネットの直感的な理解はどのようにして得られるだろうか．
それはプログラミング遊びを通じて獲得してゆくものなのである．

このコンピュータウィルスの授業は小学校高学年なら90分くらいでやれるだろう．ご興味のある学校があればご連絡ください．
ツイッター

ビスケットのルーツ

ビスケットは非常に独特な言語と思われているが，実はそのルーツとなるビジュアル言語が二つある．それらを知ると，ビスケットはそんなに変わった言語ではないことがわかるだろう．

ひとつは，KidSimというビジュアル言語である．マックの上で動く，アイコンを動かすシミュレータである．この言語はその後Cocoaと名前を変え，さらにStagecast Creatorという名前で製品化された．
http://www.stagecast.com/
簡単な例を示すと，

このプログラムで，赤い顔が右に動く，という意味になる．

さらに，

このプログラムは，赤い顔と水色の顔が隣り合っていると，赤は一つ下に下がって，水色をオレンジにする．

たとえば，

のような画面で，これらのプログラムを実行すると，
最初に赤は右に進んで，水色に衝突すると，それをオレンジに変えて，一つ下がって，．．．これを繰り返して，最後にはすべての水色をオレンジに変える．

製品ではもっといろんな機能があるが，基本的にはこのように動く．

絵はサイズが固定で，ます目にしか配置できない．絵を回転させることもできない．最初のKidsimの時代のコンピュータはまだ遅かったので，このような仕様でも大変高度な処理だった．たとえば，上の例では赤い顔が一つであるが，画面に赤い顔を二つ，三つ置いても，それぞれ同時に動く．動作が列で定義されているわけでもないし，自然と並行処理だった．

Stagecastは2005年に子ども向けソフトとして受賞するなど，高い評価を受けていたようであるが，その後どうなったのであろう．今なら，この路線でFlash版というのも面白いかもしれない．サイトの更新のされかたを見るとあまり流行らなかったみたいだ．

たまたま，今の時代の人には，子ども向けプログラミング言語といえば， SqueakやScratchしかないと思われているが，昔はこんな感じで本当にいろいろと変わったものがあったのだ．昔はよかったというと年寄扱いされるが，本当に昔の方が豊かだったと思う．

さて，ビスケットは，このKidsimからどのように進歩したかというと，絵をます目にとらわれず，回転もできるように自由に配置できるようにしたことである．配置が自由になると，厳密な絵の配置のマッチングがほとんど無理になる．ます目があるから厳密に「隣」という判定ができるが，自由な配置を許すと「大体となりにある」という曖昧な判定が必要になる．さらに，判定が曖昧になると，それによって動かされる絵も曖昧さの影響を受ける．くっついて隣なのか，離れて隣なのかの違いが，動きに表れて欲しい．

そのような複雑な計算をさせて動かしているのがビスケットなのである．

プログラミング言語の論理的な表現力は，Kidsimとビスケットではそんなに変わらない．表現できるアルゴリズムもほとんど同じだと思う．しかし，自由な配置を許したことで，論理的な視点だけでは語ることができない表現力が大幅に増したのである．

プログラミング教育はアルゴリズムを教えればよい，と狭くとらえている人には，このKidsimからビスケットへの拡張は理解できないかもしれない．しかし，僕がとらえているコンピュータは，アルゴリズムを表現するだけではなくて，作者（プログラマー）の微妙なニュアンスが表現できる，表現メディアなのである．

もう一つ，ビスケットの前進となった言語VISPATCH
http://www.brl.ntt.co.jp/people/hara/vispatch.html
は，説明が非常にマニアックなので，また別に書くことにする．

オブジェクト指向は子ども向けには難しい

オブジェクト指向は子ども向けには難しいということをもう少しちゃんと書いてみようと思う．

オブジェクト指向プログラミングの最初の言語 Smalltalk は子ども向けとして作られたと言われているけれど，やっぱり僕は難しいと思う．構成要素が多すぎる．

僕のオブジェクト指向の理解は，沢山の文があって，それらの文の主語が数種類のとき，その文の主語でまとめて，主語を省略して文を記述できる，というものである．リンゴは赤い．リンゴは丸い．リンゴはおいしい．をまとめて，リンゴについて言います．赤い，丸い，おいしい．という感じ．オブジェクト指向のありがたさは，文が沢山ないとわからない．１つや２つの文で，それらの主語を省略できたからといって，ありがたみは感じないだろう．

Squeak, Scratch, そしてプログラミンであるが，これらのオブジェクト指向の部分について．これらの言語に共通しているのは，見た目を自由に変更できるということ．オブジェクトというモノが最初にあって，そいつは今こういう見え方をしているけど，何かの処理でその見え方を変えることができるようになっている．逆に，見え方が全く同じでも，違うオブジェクトであれば動きが違う場合もある．実装的には，オブジェクトという抽象的なものがあって，それに見え方や動きやその他の状態が結び付けられている．つまり，これらの言語をきちんと理解するためには，その抽象的なものの考え方ができなければならない．

オブジェクト指向を教えたいのではなくて，プログラミングの楽しさを教えたいのであるから，オブジェクト指向の抽象的な考え方を理解させる必要はない．僕はScratchを子どもに教えている現場を知らないけれど，このあたりを子どもに理解させるのに苦労するのではないかと想像する．抽象的な考え方ができるのは小学校高学年だと思うが，抽象的なものの理解が苦手な子どもを脱落させるのではないだろうか．

それに対して，ビスケットはオブジェクト指向ではない．見えているものがすべてである．頑張ってまったく同じ絵を描けば別だけれど，そうじゃなければ，同じ絵は必ず同じ動きをする．見た目以外に隠された状態はない．（このあたりの徹底さが，Visibility なのであるが）

ビスケットのプログラムは，メガネで記述するが，そのメガネは特定の絵に結びついているわけではない．メガネは絵と独立している．メガネは単独で文の意味を持つので，それをそのまま言葉にして読むことができる．抽象的なものを理解する必要はなく，具体的な絵に対して考えればよいだけである．

ビスケットでも頑張って大きなプログラムを作る子どもが出てくる．プログラムはだんだんぐちゃぐちゃして，わかりにくくなる．そういう子は，自分で整理法を編み出すようになるだろう．そこでオブジェクト指向のありがたみを体感できるだろうし，その辺で普通の文字の言語を学ぶ準備ができるんじゃないかと思う．

ビスケットのインタフェース（教える側編）

ビスケットの普及を考えたとき，そもそもコンピュータが苦手な人や子どもを対象としているから，インターネットで直接その対象に教える，というのは相当難しい．やはり，ある程度できる人が間に入って，その人から教えてもらう，というのが現状の妥当な方法である．将来的には，それが子ども同士になって，大人はコンピュータ室の鍵の管理だけやっていればよい，というのが理想．

で，教える側のことを配慮したインタフェース・システムという話を書こうと思う．実際，ビスケットの機能は昨年くらいからほとんど進化していなくて，最近はこの教える側向けの仕組みばかり拡張している．

まず，子ども編の最後にちょっとふれた，レベルに応じたビスケットのこと．

ビスケットの今のシステムは，ワークショップという単位で管理されている．教える側（開催者）はまずワークショップを一つ作る．子どもたちはそのワークショップに参加するが，作品はワークショップの開催者がすべて管理する．

開催者は，その回のワークショップをどのようなものにするかを決める．初心者向けなら機能を最小にしてなど．これらは，そのワークショップの「ひな型」を編集することで実現できる．参加者は，最初にそのひな型がコピーされてそこから作品作りが始まる．ひな型にいろんな部品を配置しておけば，それはそのまま参加者の最初の画面となる．ワークショップの進行上の工夫で，最初にお絵かきを教えない場合もあるが，その場合はひな型の上で絵を描いておけば，それが最初から入っている絵の部品となる．

ビスケットの拡張機能には，ゲームパッド，部品を大きく・小さくするボタン，背景色の変更ボタン，などがあるが，これらは後から追加できるようになっている．

ためしに，どれでもいいから，それらのボタンをshift+clickで開いてみるとよくわかる．たとえば，上矢印の部品はテキストで
#key up
というコマンドで作られている．このテキストというのはエンピツボタンの右側いあるやつで，こいつはある意味ビスケットを無限に拡張できるようにするための抜け穴である．今は無いけど，
#javascript
みたいなコマンドを用意したら，まあ何でもできそうなのがわかるだろう．

このコマンドは大きく3種類に分けられている．

＊入力
ゲームパッドの矢印など．センサーのこと．メガネの左側に入れて使う.真偽値を返して，真のときだけこのメガネが有功になる．将来的には，実数値も受け入れて，メガネが３０％だけ有功みたいな使い方も考えている．Webと連携して，たとえば「XXの天気予報が晴れなら」みたいなのも面白いかも．パソコンについている本当のセンサー（温度センサーなど）は，Webなので実は難しい．

＊出力
1秒とか，音とか．アクションのこと．メガネの右側に入れて，このメガネを実行する際にこのアクションを実行する．入力がアナログ値に対応したら，出力もそれに対応するようにした方が面白いかも．

＊操作
クリックしてその場で動作する．画面の背景を変えたり，部品の大きさを変えたり，といったボタンになっている．ボタンの表示名も変えられて，漢字を使わないとか，英語にするとかも出来る．クリックがマウスダウンで動くようにしているので，この部品を移動させる場合はshiftを押しながら移動させる．

これらをどういうワークショップを開催したいかに応じて，開催者がひな型を編集して自由に並べることができる．これらは，Wikiに影響を受けている．あと，ビスケットのデータはXMLなので，ひな型をXMLで直接編集したりする．

これらの機能，一番助かっているのが僕自身で，ワークショップ開催直前にインタフェースのいろんな修正を現場で行うのに非常に便利である．ただし，相当アドホックに拡張してきたので，コマンド体系は汚く，次のバージョンでは整理されることになるだろう．なのであまりドキュメントもちゃんと用意していない．

本当はどこかでリリースバージョンとして機能拡張をストップさせなきゃならないのだけれど，毎月なにか拡張しているので，なかなかそうもいかない．

もうひとつ，これはインタフェースというよりも教える側にとっての便利なシステムの話なのだが，作品つくりの管理ページというのがある．いま，福岡アジア美術館やICCで行っている「えほん作り」であるが，参加者がいま何ページまで作品を作ったか，というのが一覧で見れるようになっている．これを見ながら，ワークショップの進行を管理している．あと何分くらいで全員が作り終わるか，極端に制作が遅い子はいないか，など，この画面をファシリテーター間で共有しながら進行してゆく．

ワークショップの演出の機能もいくつかあって，ビスケットランドという参加者が作った作品をすべてごちゃ混ぜにして一つの画面で見せる見せ方がある（むかしビスケットランドは別の意味でつかっていた．．．）．この見せ方は，全員で一つの世界観を作り上げる，という共同制作の意味もあって，子どもたちの新しい遊びとして好評である．スライドショーは，誰かが作品を保存すると即座にそれを表示して，そうじゃないときは今までの作品を順番に見せる，という見せ方である．ワークショップ中に大画面でスライドショーを見せていると，プチ発表会のようにも使われて，非常に便利である．

先日，デジタルワークショップの集まりがあったが（デジタルはらっぱhttp://www.d-hara.org/），デジタルワークショップのあまり語られていない特徴として，こういったワークショップを実施する側のデジタル化による恩恵もかなりあるということを言っておきたい．