コンピュータはどうやって動いているの

僕は，科学が大好きな子供たちだけじゃなくて，ちょっ

と苦手という人にも，コンピュータの動きが何となく分

かってもらえる，そういうソフトウェア，ビスケットを

作りました．もちろん，大人やコンピュータの専門家で

も楽しめるくらい，きちんとした部分もあります．

多少の言い訳をしておくと，コンピュータがどうやっ

て動いているか，ということをきちんと理解するのは時

間がかかるし，退屈です．しかも，やっと覚えたとして

も技術革新の速さで，そんな知識は役に立たなくなって

しまうかもしれません．しかし，コンピュータはどんど

ん我々の生活に入り込んできています．少しでもコン

ピュータがどんなものというのが分かっていると，もっ

とうまくコンピュータと付き合うことができるようにな

るのではないでしょうか．

ビ ス ケ ッ ト

コンピュータはプログラムで動いています．普通のプ

ログラムは文字で書かれています．それに対して，ビス

ケットは絵でプログラムを作ります．ですから，難しい

ことを覚えなくても，キーボードが打てなくても，プロ

グラムの楽しさを知ることができるのです．

ビスケットは絵を動かすためのソフトウェアです．絵

を動かすから，プログラムを絵で作ります．

簡単な例を見て下さい．図 はビスケットの画面で

す．ビスケットではプログラムとそれを動かす場所を区

別しません．（１）はビスケットのプログラムです．矢印

の左側の絵を右側の絵に書き換えると読みます．左側の

絵には◯＋の記号（クリックマーク）が付いています．左側

と同じ絵をクリックしたときにこのプログラムが動作し

ます．

（１）のプログラムは，手を下ろしている男の子（左側）

をクリックしたら，手を上げる，となっています．（２）

に手を下ろしている男の子がいるので，これをクリック

すると，プログラムが動いて，男の子が手を上げます（図

）．

次に，手を上げた男の子の手を下ろすプログラムを用

意します（図 ）．これを追加して図 をクリックすると，

男の子は手を下ろします．それで，クリックを何度もす

ると，何度でも男の子が手を上げたり下ろしたりします．

このように，コンピュータは最初にプログラムを用意し

て，一度用意したプログラムは何度でも動かすことがで

きます．これがコンピュータの第一の特徴です．

コンピュータはプログラムで動いています．これまでの文字で作られたプログラムは難しかったですが，絵でプログ

ラムを作ると格段に分かりやすくなります．ここで紹介するビスケットはプログラムを絵で表現して，実行した結果を

アニメーションにします．動作は簡単な原理ですが，きちんとしたコンピュータらしさも残っています．子供だけでなく，

コンピュータが怖いとか難しいと思っている大人の方も，どうぞ楽しんで下さい．

キーワード：ビジュアルプログラミング，アニメーション，プログラミング教育，書換えシステム

アニメーションで簡単にプログラムを学ぼうLearn Programming with Viscuit

原田康徳

原田康徳 日本電信電話株式会社NTT コミュニケーション科学基礎研究所E mail hara＠brl ntt co jp

Yasunor i HARADA Nonmember（NTT Communication Science Laborator ies NIPPON TELEGRAPH AND TELEPHONE CORPORATION Atsugi shiJapan）．電子情報通信学会誌 Vol No pp 年 月

1 2 小学生から高校生までの科学の体験

電子情報通信学会誌 Vol No

アニメーション

図 には車のプログラムがあります．プログラムは，

車が少し進むようにずれて置かれています．ここでプロ

グラムの右側の車にもクリックマークが付けられていま

す．右側のクリックマークはコンピュータが自動的にク

リックをしてくれる，という意味です．なので，車をク

リックすると，車が少し進んで，またコンピュータがク

リックするので，車がまた進む，となって，車が続けて

動いていくことになります．

車の進み方は，プログラムの車のずらし方で決まりま

す．まっすぐずらせば，車はまっすぐ進みますが，図

のように傾けると車は曲がって進みます．曲がり方はい

つも同じなので，車は丸に沿って動きます．急に曲げる

と，丸は小さくなり，少しだけ曲げると大きな丸になり

ます．コンピュータの特徴その は，この例のように繰

り返して動かすということが得意な点です．このプログ

ラムでは車のずれ方を決めているだけですが，車はまっ

すぐ進んだり，丸に沿って進んだり，プログラムからは

簡単には想像できない動きをします．コンピュータを使

いこなすには，プログラムがどんな動きになるかを想像

できるようになることが重要なのですね．

夏休み特集――夏休みを有意義に過ごす――小特集 アニメーションで簡単にプログラムを学ぼう

図 ビスケットの画面 （１）はビスケットのプログラムで男の子をクリックすると手を上げるという意味である．（２）の男の子をクリックすることで，手を上げる（図 ）．

図 図 で（２）をクリックした結果

図 手を下ろすプログラム

図 回転する車

図 まっすぐ進む車

信 号 機

信号で停止する車を作ってみましょう．図 は赤信号

の絵と青信号の絵が入れ替わるというプログラムです．

プログラムの中に時計が入っていますが，これによって

コンピュータはゆっくりクリックをします．それで，信

号機の色はゆっくりと切り換わります．

図 は赤信号と車が一緒のプログラムに入っていま

す．しかも，プログラムの左と右とは全く同じ絵の並び

です．これは車が赤信号の近くに来ると車は止まるとい

うことです．図 は今までのプログラムをまとめたもの

です．信号が赤で車は止まっていますが，少し時間がた

つと青に変るので，車は動き出します．ビスケットの仕

組みとして，車が画面の端まで動くと，反対側から出て

くるようになっています．それで，車は何度でもこの交

差点で止まったり進んだりします．

この動きは直感的に理解するだけでもよいのですが，

もう少し詳しく説明しましょう．ビスケットは，車がク

リックされたときに，プログラムの中で左側の車にク

リックマークが付いているものを比べて，どのプログラ

ムを動かすのがよいかを判定します．それで，車が進む

方向に赤信号があれば，車が停止するプログラムを動か

し，そうでなければ車を動かすプログラムを動かします．

ビスケットのこのような判定は，車をクリックするた

びに行われるので，赤信号で車が停止しているときでも，

車に毎回クリックをさせています．良く見ると，赤信号

で停止するプログラムの右側の車にもクリックマークが

ありますね．

コンピュータの第 の特徴は，判定をするということ

です．何かと何かを比べて，どちらがいいかを判定しま

す．ここでは赤信号が車の近くにあるかどうか，という

判定をしました．判定と繰返しでコンピュータの基本的

な動作ができています．

もう一つ，この例では車を動かすことと，信号の色を

切り換えることを別々に行っています．コンピュータは

別々なプログラムを同時に動かすことができるのです．

それから，この例ではプログラムを少しずつ追加して作

り上げた，ということも重要です．コンピュータの大き

図 ゆっくりと切り換わる信号機 図 赤信号で車が停止するプログラム赤信号で車が停止するプ グラム

図 図 ，図 ，図 を合わせた例 信号はゆっくりと切り換わる．車はまっすぐ進み，画面の上にはみ出たら，下から出てくる．赤信号の前で車は停止して，青に変ると進み出す．

電子情報通信学会誌 Vol No

なプログラムを作るときには，このように，少しずつプ

ログラムを作って，それぞれのプログラムが思ったよう

に動くことを確認して，進めていきます．いきなり大き

なプログラムを作ると，きちんと動かなかったときに，

どこが間違っているか，なかなか分からないからです．

スキーの滑走

最後に，ビスケットが普通のコンピュータとは違って

いる部分を紹介しましょう．図 は二つのプログラムで，

スキーの滑走をさせるアニメーションを作っています．

プログラムでは，旗が右側にあると少年は右に曲がる，

旗が左側にあると少年は左に曲がる，となっています．

旗を縦に並べると，少年はその旗の間を曲がりながら滑

ります．

ビスケットは，たくさんの旗の中から，少年に一番近

い旗が，右側にあるか，左側にあるかを探して，どちらの

プログラムを動かすかを決めます．動かすプログラムを

決めたら，それに従って少年を少しだけ右や左に曲げます．

ビスケットでは判定の部分を柔軟に行っています．こ

こが普通のコンピュータの動きと違っているところで

す．少年と旗の関係で，どちらに曲がるのが良さそうか

を，絵の並びの近さから判定します．同じようなことを，

普通のプログラムで簡略して書くと図 のようになる

でしょう．複雑な判定を絵の並びで簡単に指定できるよ

うにした，というのがこれまでのコンピュータにはない

ビスケットの大きな特徴です．この特徴を生かすと，もっ

ともっと面白い動きを作ることができます．

ま と め

ビスケットのプログラムを通じて，コンピュータの仕

組みを少しだけ説明してきました．このほかにもまだま

だ話は続くのですが，今回はここまでにしましょう．

ここに書いてあることを読むだけでは，なかなか分か

らないかと思いますので，ぜひビスケットを動かして試

してみて下さい．ここでの説明はちょっと理屈っぽく

なってしまいましたが，実際のビスケットはもっと直感

的に簡単に楽しめるものです．いろいろと楽しんだ後で，

また，これを読んで頂くとまた違った見方ができるかも

しれません．

ビスケットのお試し版は

http: www viscuit com

からダウンロードしてみて下さい．

夏休み特集――夏休みを有意義に過ごす――小特集 アニメーションで簡単にプログラムを学ぼう

図 スキーの例 二つのプログラム（左側）で旗の間を曲がりながら滑るアニメーションができる．

原田 康徳生．北大大学院工学研究科情報工学

専攻修了．博士（工学）．日本電信電話株式会社NTT コミュニケーション科学基礎研究所主任研究員． IPA 未踏ソフトウェア創造事業プロジェクトマネージャ．ビジュアルプログラミング言語の研究を行っている．計算機科学者．

図 図 のような動作をする普通のプログラムの例