レクチャー Scratchでプログラミング

Scratchでプログラミング【第1回】

Scratchの基本と簡単プログラムをマスターしよう

文●茨木隆彰 京都クリエイティブワークショップ

"デジタルネイティブ"世代の子供たちは、コンピュータを利用した創作活動に触れる機会がどんどん増えていくだろう。その第一歩として、初心者でも楽しめる簡単プログラミング環境「Scratch(スクラッチ)」を始めてみてはいかがだろうか。

Scratchは、非常に簡単にプログラミングを学ぶことができる「グラフィカル・プロ グラミング環境」の一種で、「MIT Media Lab」で開発された。パーソナルコンピュータの発展に大きく貢献し、コンピュータ教育の第一人者としても知られるアラン・ケイによるプログラミング環境 「Squeak(スクイーク)」の考え方を強く受けて開発されたScratchは、次のような特徴を持つ。

①視覚的であること
プログラムの中心にあるのは、常に絵である。動作を見ることができるので理解しやすく、インターフェイスも視覚的に解りやすい。

②キーボードを使わないこと
ブロックを組み立てるだけでスクリプト(プログラム)を組み立てることができキーボードを使う必要がない。そのため、覚えるべき事柄も少なくて済む。

③基礎を抑えられること
上記のような特徴を備えつつも、プログラミングの基礎はしっかりと押さえることができるため、その先のステップアップが容易である。

 これらの特徴からScratchは触り始めてすぐに創作を行うことができるうえ、しっかりしたプログラミングの基礎技術を習得することができる。 この基礎を体験しておけば他の言語を覚えるための学習にも余裕ができ、iPhoneアプリ開発などへのステップアップもずっと簡単になるはずだ。まさに、 子どもがプログラミングを始めるためにはぴったりのソフトであるといえる。
 しかも、楽しめるのは子どもだけではない。作り込みの幅が非常に深く、大人でも夢中になってしまうこと請け合いだ。お父さんも一緒になって、子供と親子 でプログラミングを勉強する。新しいコミュニケーションになるのと同時にプログラミングの基礎学習ができるとてもよい遊び方ではないだろうか。
 連載第一回目となる今回は、プログラミングの細かなプラクティスを追いかけるというよりは、Scratchの操作になれることを目標に、大空で飛行機を 飛ばすプログラムの作成方法を例に、Scratchのインストールや使用方法を中心に解説していこう。(文/茨木隆彰 京都クリエイティブワークショッ プ)



s_12.png

①ScratchをMacへインストールしよう。WEBサイト(http://scratch.mit.edu/download)にアクセスする。連絡先などの個人情報の入力が促されるが、この入力は任意なので興味がなければ空欄のまま[スクラッチのダウンロードへ]をクリックして進めば問題ない。ここで入力しておけば、Scratchに関係する最新情報が送られてくることになる。



s22.png

②次の画面で、[Scratch installer for MacOS X]の項目の[MacScratch 1.4.dmg]をクリックしてインストーラを入手する。35MB程度のサイズがあるので、ダウンロード完了までには少しの時間を要する。完了したら、イ ンストーラを実行してScratchのインストールを行う。



s_3.png

③Scratchでは、起動時にはすでにネコの絵が用意されている。これを使って遊ぶことももちろん可能だが、自分の好きな絵を描くことが可能だ。その場合は、ネコを右クリックして[削除]を選択して消去しよう。



2.png

④ここでは、飛行機の絵を描いてみる。右側にある星と筆のアイコンの[新しいスプライトを書く]をクリックすれば「ペイントエディター」が起ち上がってくるので、ここで飛行機の絵を描いてみよう。



4.png

⑤右側の大きなウインドウにマウスで絵を描いていく。ペイントエディタにはペンや直線ツール、塗りつぶしツールなどオーソドックスなドローソフトの 機能がほぼ揃っている。各ツールの名前はマウスオーバーすると表示される。これでよいと思うまで描いたら、右下の[OK]を押して確定させよう。



6.png

⑥[OK]して確定すると、メイン画面に戻る。「ステージ」画面に飛行機が描かれ、画面下に「新しいスプライト」として描いた飛行機が追加されている。



5-a.png

5-b.png

⑦スプライトには名前を付けることができる。どんな名前でも特にいいのだが、今後、たくさん絵を描いてしまうと混乱してしまう。わかりやすい名前を 付ける癖をつけておこう。スプライトをクリックして選択しているときには、中央カラムに[スプライト1]という名前が表示されているはずだ。この部分のテ キストボックスを一回叩き、好みの名前を付けよう。今回はストレートに「ひこうき」という名前にしている。



7.png

⑧飛行機が飛ぶ場所が真っ白な空間ではつまらない。せっかくなので、背景に空を書いてみよう。ステージの何もないところを選択すると、ステージ自体 が選択される。ここで背景タブを選択して[背景1]の編集をクリックすることで、ペイントエディターが起ち上がり背景を編集できるようになる。雲の浮かぶ 空を描いて、[OK]をクリックする。なお、この編集方法はスプライトでも同様だ。スプライト選択時に表示される[コスチューム]タブで[編集]をクリッ クすることで修正や編集を行うことができる。



8.png

⑨さて、いよいよスクラッチで動きを付けていこう。Scratchでは、プログラムのことを「スクリプト」と呼ぶ。このスクリプトを組み合わせてい くことで、スプライト(ここでは絵として描いた飛行機)に動きを付けることができる。まずは何も難しいことは考えずに動かしてみよう。飛行機を選択した状 態で、青色の[動き]から[10歩動かす]というスクリプトを、スプライト(ひこうき)のスクリプトタブへドラッグ&ドロップ。このブロックをクリックし てみると、スプライトが少し前に進んだのがわかるはずだ。このようにスプライトに動きを付けるのが「動き」スクリプトだ。



10.png

9.png

⑩次に[制御]から[ずっと]スクリプトを持ってこよう。そして、この間にさきほどの[10歩動かす]を挿し込むようにドラッグ&ドロップする。ま た、[旗がクリックされる]スクリプトを、同様に[ずっと]の上に組み立てる。そして、ステージの上の緑の旗のマークをクリックしよう。すると、飛行機が 真っ直ぐに進み続け、画面の端にぶつかるはずだ(飛行機を止めるときは、横の赤い丸を押す)。このように処理を繰り返えしたり、処理の開始を知らせたりと いっ働きを持つのが「制御」スクリプトだ。



11.png

12.png

⑪さらに、図のようにスクリプトを組み合わせていこう。各スクリプトがどこにあるかは、そのスクリプトの色を見ることでわかる。例えば[90度回転 する]は青色なので、同じ青色の[動き]メニューの中になる。図のようにスクリプトを組み立てると、飛行機が壁にぶつかると90度周り、壁にそって飛ぶ飛 行機ができたはずだ。




13.png

14.png

⑫プログラムが完成したら保存しよう。上部のメニューの[ファイル]から[保存]を選択すると、保存ダイアログが開く。ここでプログラムの作者とそ の説明、ファイル名を入力して[OK]ボタンを押せば保存できる。また、開くときは同じ要領で[ファイル]から[開く]を選択し、開きたいファイルを選択 して[OK]を押そう。


第2回目は、プログラミングの基本中の基本である「条件判断」と「繰り返し」の考え方や使い方を学んでいこう。


京都クリエイティブワークショップについて

京都クリエイティブワークショップは、 ScratchやViscuitといったグラフィカル・プログラミング環境を用いて小中学生などにゲームづくり体験ワークショップ(公開講座)を開くこと を目的とした学生団体です。高校生を中心に、大学生・高専生などで構成されています。ターゲット年齢が夏休みとなるオープンソースカンファレンスin京都 においては、セミナー形式でワークショップを開催する予定です。URL:http://pwsk.cosmio.net/