Contents

• Scratchについて
• Scratchのインストール
• Scratchの指導例

Scratchで始めるプログラミング

def fibonacci():a=0;b=1while 1:yeild aa,b=b,a+barr=[]f=fibonacci()for i in range(50):a=next(f)arr.append(a)

Scratchは、使える構文が初めから示されている。

プログラミングを学習する上で大変なのは、たくさんの構文や既に開発されている便利なライブラリーを調べたり、覚えたりすることです。しかし、Scratchは、基本的には、できることが限られている分、事前に覚えないといけないことは、非常に少なくなっている上、すべてブロックの形で用意されています。

また、教育用に開発されたScratchは、初めから、絵を動かしたりする機能を備えていますので、用意されているブロックを積み重ねていくだけで、描画やアニメーションといった、実際にはかなり大変なプログラムも簡単に体験することが可能になっています。

プログラミングの楽しさをすべての子供たちに

画面上のキャラクターやパソコンにつないだ機器を、自分の思い描いたとおりにプログラムで動かすという体験は、子どもたちにとって、とても刺激的なものになるに違いありません。ブロックを積み重ねるというパズル的な遊びの感覚で、高度なプログラミングまで可能なScratchが、子供たちにとってプログラミングを身近な存在にしてくれる強力なツールになるということに疑う余地はありません。

Contents

• Scratchについて
• Scratchのインストール
• Scratchの指導例

Scratchをインストールしてみる

ScratchはMITメディアラボが開発し、無償で提供されている教育用プログラミング開発環境です。Web上のOnline版とパソコン内にインストールするOffline版（オフラインエディター）がありますが、ここでは、Offline版をパソコン内にインストールする方法についてお話しします。
注1：2019年1月にScratch3.0 が公開されましたが、ここでは、起動方法が簡単で、汎用性に富むScratch2.0についてご説明します。Scratch3.0 については、「Scratchでプレゼン作成」のページをご覧ください。
注2：Web上のOnline版は、Scratch3.0のみです。Scratch2.0は、下記の要領で、オフラインエディターをインストールしてお使いください。
注3：本ページに掲載しているダウンロード用のScratchファイル（.sb2）は、すべてScratch2.0で作成したものですが、Scratch3.0でも、読み込みは可能ですので、Web上のOnline版（Scratch3.0）でもお使いいただけます。Web上のOnline版を使用する場合は、まず、日本語化し（ツールバー左方にある地球儀マークをクリックして日本語を選択してください。）、「ファイル」「コンピュータから読み込む」と手順を進め、ダウンロードしたファイルを選択して、プログラムを展開してください。
なお、Web上のOnline版は、2019年1月時点ではInternet Explorerに対応していません。Microsoft EdgeまたはChromeをお使いください。

注4：Scratchは、MITメディア・ラボのライフロング・キンダーガーテン・グループの協力により、Scratch財団が進めているプロジェクトです。https://scratch.mit.edu から自由に入手できます。

まず、Scratch公式サイト（Scratch2.0 ダウンロードページ）から「Scratch 2.0 オフラインエディター」の最新版を入手します。（なお、Scratch 2.0 オフラインエディターをインストールするためには、「Adobe AIR」が既にインストールされている必要があります。Adobe AIRがインストールされていない場合は、同ダウンロードページのリンクからこれを入手して、事前にインストールしておいてください。）

あとは、ダウンロードしたインストーラー「Scratch-***.exe」（***は、バージョン番号）をダブルクリックして、インストールしてください。（管理者権限を求められます。）

Scratch 2.0 オフラインエディターの日本語化

Scratch 2.0 オフラインエディターをインストールすると、初めは英語表記になっているので、日本語化する必要があります。

日本語化は簡単にできます。図にあるように、ツールバーの「地球」マークをクリックすると、使用する言語を選択できるようになりますので、「日本語」または「にほんご」をクリックすると、表記が日本語表記に変わります。

Scratch 2.0 オフラインエディターの画面構成

ステージ

「スプライト」（キャラクター）の動きを表示する部分です。 ここに表示されているスプライトは、ドラッグして自由に場所を動かすことができます。
また、下の背景のボックスを使って、背景を付けることもできます。背景の切り替えはプログラムでできます。

スプライトリスト

「スプライト」は、ステージで動かすキャラクターです。右にある「スクリプトエリア」でつくったプログラムの指示で様々な動作をさせることができます。
「新しいスプライト」を使って、複数のスプライトを用意することができます。スプライトはネコ以外にもたくさんあります。「コスチューム」を変化させることで、移動以外にも、スプライトにアニメーション効果を持たせることができます。
Scratchは、スプライトにプログラムを持たせるという考え方で、プログラムするので、複数のスプライトを使用する場合は、それぞれのスプライトにプログラムを持たせます。

ブロックパレット

ブロックパレットには、Scratchで使えるプログラムの部品が「ブロック」の形で用意されています。
ブロックは、「動き」「見た目」など、10種類の項目に分けて格納されています。プログラムするときは、この項目を切り替えながら、必要なブロックを右の「スクリプトエリア」にドラッグして並べていくことになります。
また、ブロックパレットの上部には、「コスチューム」や「音」のタブがあります。コスチュームタブをクリックすると、表示が「コスチュームエディター」に切り替わり、スプライトの絵柄を編集したり、新たなコスチュームを追加したりできます。なお、音のタブをクリックすると、録音もできるようになるので、用意された音以外にも、スプライトにセリフをしゃべらせることができるようになります。

スクリプトエリア

「スクリプト」は「台本」という意味です。ここで、使用するスプライトごとに台本（プログラム）を与えて、台本どおりの動きをさせるということになります。
また、ブロックパレットの「イベント」にある「メッセージ」を使うことによって、複数のスプライトや背景のプログラムを連携して動作させることができるので、たくさんのスプライトを使うような複雑なプログラムも簡単に作成することができます。

Contents

• Scratchについて
• Scratchのインストール
• Scratchの指導例

Scratchプログラムを読むことから始めよう

プログラム学習をするとき、まずぶつかる壁が「なにができるの？」という疑問と、「どうやって作るの？どうやって動かすの？？」という不安です。ですから、指導の際に必要なのは、そういった疑問を希望に変え、不安を期待に昇華させることです。では、どのような魔法を使うと、そのようなことができるようでしょうか。

答えは、簡単です。短い例を見せるだけでいいのです。もちろん、見せるだけではいけません。重要なのは、書かれたプログラムを自分の力で読み、こう動くんだろうなと想像させることです。

幸いなことに、Scratchは難しい構文はほとんど使われていないうえ、ブロックを並べているだけなので、プログラムを読むのは非常に簡単です。
そして、初めてプログラムを見る子どもに教えるべきルールはたった一つだけです。

プログラムは上から順に一行ずつ読む

プログラムは「すごろく遊び」とよく似ています。

（サイコロを振る）⇒（出た目の数だけ進む）⇒（止まったマスがゴールかどうかを調べる）⇒（止まったマスに書かれた命令に従った行動をする）⇒（止まったマスがゴールかどうかを見る）⇒（ゴールだったらやめる、そうでなければ、「サイコロを振る」に戻る）

このように、すごろくは決まった手順通りに「処理」「判断」「反復」を実行するという動作をします。そして、そのルールは絶対であり、これに反しては、すごろく遊びは成り立ちません。
実際、プログラムもそういった性格を持っています。いかなるバグを含んでいようと、ひとたび実行を始めると、プログラムに書かれた処理を上から順にたどりながら、そこに書かれた制御文どおりの動きをしていきます。

もし、指導する子供たちが低学年であれば、プログラミング指導の導入として、すごろく遊びをすることも有効でしょう。そういった、ルールに従って手順通りに進めていくという遊びの体験が、生徒のプログラムを読むというスキルに直結していくことは、間違いありません。

では、実際にScratchプログラムを見てみましょう。

事例１ 正方形を描くプログラム

（Scratchファイルダウンロード）

ブロックのかたまりが８つあります。つまり、この例では、ネコに８つのプログラムを与えていることになります。1, 5, 6, 7 は、それぞれ1つのブロックしかありませんが、これもすべて立派なプログラムです。

まず、実行の仕方ですが、各ブロックのどこでもいいですから、クリックするだけです。

まず、プログラム 1 をクリックしてみましょう。
ネコが右に動きましたね。

ここで子どもたちに覚えてもらいたいのは、クリックすると、ブロックに書かれた命令通りに、ネコが動くということです。

続いて、プログラム 2 をクリックするのですが、ここからは、子どもたちに何が起こるか想像させながら、進めていきましょう。
「ペンを下ろし→ 100 歩右に動き→ペンを上げる」…簡単ですね。まさしく、その通りに動くのを確認させてください。
実際の指導の際には、子どもたちに実演させてみると、実感がわくと思います。

また、ここでは、なぜ「ペンを上げる」がプログラムの最後にくっついているのかを考えさせるのも大切です。実際、生徒に実演させる際に、「ペンを上げる」がなければどうなるか確かめさせるとおもしろでしょう。
こうして、子どもたちは「バグ」が単なるミスではなく、想定不足も大いに原因になるといいうことを知ることになるでしょう。

プログラム 2 では、線を引くことになりますが、当然これは試し引きなので、消したくなります。じゃあと言うことで、線を消すのですが、これもプログラムで実行します。
「ペン」ブロックで描画したものを消すプログラムは、Scratchでは既に用意されています。プログラム 5 の「消す」ブロックです。
これをクリックして、実際に描いたものが消えることを確認させましょう。

また、プログラム 7 の、「1 秒で x 座標を -100 に、y 座標を 100 に変える」も試してみましょう。
このプログラムでは、設定する値が 3 つあります。自分の設定した値で、いろいろな動きが実現できることを体験させてみましょう。
また、「座標」という言葉が出てきますが、対象が数直線に慣れているならば、座標に初めて触れる子供たちに指導者が与えなければならない情報は、座標が平面上の位置を表す言葉だということだけです。時間的に余裕があれば、メルカトール図法で描かれた世界地図（ここで使用する地図は経度緯度0が真ん中にある大西洋中心の地図が良いでしょう。）を用いて、2 つの値の組合せで平面上の点の位置を表すことができるという考え方が自然であることを実感させましょう。

プログラム 6 の、「90 度に向ける」も試してみましょう。しかし、これはクリックしても何も起こりません。なぜなら、今、ネコはもともと 90 度の方向を向いているからです。
このプログラムでは、設定する値が 1 つあります。この設定値をいろいろとかえてみましょう（ドロップダウンリストで、「0」「90」「180」「-90」の 4 つが選択できるようになっていますが、それ以外の数値も入力することができるようになっています）。いかがですか。

Scratchでは、スプライトの向きは、時計でいえば、12時の方向を 0 度の向きと考え、それから時計回りに 360 度で再び12時の方向を向くように設定されています。
ですから、右の方向を向いていれば、「90 度に向いている」し、下を向けば、これは「180度に向いている」ということになるのです。ここでも、自分の設定した値で、いろいろな動きが実現できることを体験させてみましょう。

それでは、再び、ネコによる図形の描画に戻りましょう。

次は、プログラム 3, 4 を飛ばして、プログラム 8 を読ませてみましょう。ここでは、「反復」を示すブロックがあります。ブロックの形状から、子どもたちは、ペンを下ろしたあとに、「100 歩進んで 90 度右回りに回転する」を 4 回繰り返して、繰り返しが終わった時点でペンを上げる、ということを読み取ることができるでしょう。
大切なのは、この一連の動作により、何が起こったかを考えることです。

考えさせたあとで、いきなり確かめにプログラム 8 をクリックしてもいいのですが、この結果がプログラム 3 を 4 回クリックした結果と同じであることも確認させてみましょう。このねらいは、デバッグ時によく行う、「ステップイン」という考え方を理解させることです。実際、プログラムが長くなればなるほど、ステップインをよく行うことになります。長いプログラムも、短いパーツに分けて考えれば、分かりやすくなるということを、ここで理解させるのもよいと思います。

また、プログラム 4 とプログラム 8 を比べることも、指導しておきたいことの一つです。
同じミッションを持ったプログラムでも、書き方は一つではありません。見て分かるように、この 2 つのプログラムは同じ結果を持ちます。しかし、ここで子どもたちに考えてもらいたいのは、どちらがコンピュータに優しいプログラムであるかということです。
コンピュータは文句を言いません。プログラムに書かれている内容に従って、ひたすら黙々と処理を行っていきます。もし、プログラムに無駄や無理が含まれていても、コンピュータは、言われた通り、処理します。しかし、無駄は無駄です。無駄な動きをさせることは、極力避けたいことです。
これも、子どもたちに実際に実演させることで、実感できるはずです。プログラム 4 では、無駄なペンの上げ下ろしが 3 回ずつあります。プログラム 4 とプログラム 8 を同時に実演させて、プログラム 4 のほうが、無駄な処理がある分、時間がかかることに気付かせることは、重要なことです。このことが、効率のよいプログラムの必要性の理解につながっていくはずです。

事例２ ネコを壁伝いに走らせるプログラム

（Scratchファイルダウンロード）

今度のプログラムは、「分岐処理」も含んでいます。「もし~~~ならば~~~そうでなければ~~~」のブロックのところです。事例 1 よりも分かりづらいですが、読めますか。

分かりづらさの原因は、分岐処理の箇所というよりも、端に触れたとき「-20 歩進む」となっていることの必要性の分かりづらさではないでしょうか。

実際、「-20 歩進む」がないほうが、子どもたちはすんなりとプログラムを読み取ることができると思います。よって、指導の際には、まず、この「 - 20 歩進む」をはずしたプログラムを読ませるほうがよいと思います。

「-20 歩進む」がなければ、単純に、10歩ずつ進んでいって、端（壁）にぶつかったら、進行方向に向かって左に直角に曲がって、再び進んでいくということが読み取れると思います。

しかし、勘のいい子どもなら気付くとは思いますが、このプログラムを実行しても、思った通りには動きません。当然ですが、いったん端に触れたら、ネコの形状の関係で、90度回転しても、端に触れたままなので、「10歩進む」に進まないからです。つまり、一度、端（壁）から離れるための「-20 歩進む」なのです。

このように、プログラムを作るときは、各ステップを処理した後、どのような状況になっているかを常に把握しておくことが大切です。特に、条件分岐があるところでは、重要な態度になります。子どもたちには、この事例で、そのことをあわせて理解してもらいたいと思います。

本当に大切なのはアルゴリズムを考えること

今までの指導で、子どもたちは、Scratchプログラムがどう作られているか、どう実行させるかといったことが分かったはずです。特に、プログラミングで基本的な、「反復」「条件分岐」などの流れの制御ができることができることが理解できているはずです。

こうなれば、子どもたちは実際にプログラムを作ってみたくなるはずです。プログラムを作るときに大切なのは、アルゴリズムを考えることです。アルゴリズムとは、目的に対する解法を実施可能な手順として表したものです。プログラムは、そのアルゴリズムをコンピューターが実行可能な形で表現したものです。 アルゴリズムさえしっかり考えられていれば、あとは、それをプログラミングするだけですが、今まで見てきたように、Scratchではプログラミング自体は、非常に簡単にできるようになっています。

それでは、アルゴリズムを考えるという体験の手始めとして、上にあげている例のモディフィケーション（模倣）を考えてみましょう。

練習1 正八角形を描くプログラム

練習2 リレーをする2匹のネコ

考えを実現するScratch

既にあるプログラムを読解したり、いくつかのプログラミングを体験したりすることで、プログラミングの手法をほぼ身に付けることができるのが、Scratchの特徴です。

あとは、ミッションからアルゴリズムを考え、それをプログラムに乗せていくという経験をいかに多く持たせることができるかということが重要です。また、この記事では触れなかった変数や配列、数値計算など、プログラミングの基本事項を身に付けさせること重要です。これらは、プログラミングでは、これまでやったことを「記憶」しながら動くという、人間の自然な動作に関連します。学習が進んで来れば、当然必要な事柄になっていくでしょう。

同じミッションでも、アルゴリズムは幾通りもあるのが普通です。多くのプログラミング体験を持たせることにより、効率の良さや自然な動きを意識するようになります。そして、そのことが、子どもたちに、プログラミングは自分の個性を発揮することができるものであることを理解することにつながるになります。

自らの考えを実現するプログラミング。それを、Scratchから始めましょう。

子どもたちに「普段使いのプログラミング」を身に付けさせるためのページ「Scratchでプレゼン作成」も併せてお読みください。

Contents

• アニメーションの基本
• キャラクター・背景の作成
• 背景の転換
• プレゼン用スライドを作ってみる
• 音声を吹き込んでみる

アニメーションの基本

Scratchには、キャラクターに動きを与える命令がブロックとして用意されています。
ブロックパレットで「コード」タグを開き、その中の「動き」カテゴリーを見てください。

「10歩動かす」や「15度回す」などの動きを与えるブロックが確認できますね。

「動き」ブロックと「見た目」ブロックを組み合わせると、キャラクターにアニメーションを簡単に設定することができます。
次の例を見てください。

 Sample 1  ネコを歩かせてみる１（サンプルプログラムダウンロード・sb3ファイル）

それでは、ネコを歩かせるアニメーションを順を追って作成してみましょう。
上の例には、１～５の5つのプログラムが用意されています。
１,２,３は1つのブロックしかありませんが、これらもプログラムです。
１～５のブロックの塊をクリックすると、プログラムに応じた動きが見られるので、試してみましょう。なお、それぞれのブロックの解説を次にしてみます。

プログラム１

この例では、アニメーションにおける、ネコのキャラクターの位置の初期設定として使っています。
「ステージ」の中央が、ｘ座標、ｙ座標がともに0となる位置です。このブロックで、キャラクターの位置を指定することができます。この例では、ネコを左よりに配置するため、ｘ座標を-150にしています。

プログラム２

「ブロックパレット」の「コスチューム」タグを開いてみてください。
ネコには、「コスチューム1」と「コスチューム2」の2つのコスチュームが用意されていますね。
２のブロックを何回かクリックしてみると、コスチュームが、1, 2, 1, 2, …と変化していくのが分かります。
この動きにより、キャラクター自身の動きを実現できるのです。

プログラム３

プログラム３をクリックしてみてください。
「＿＿歩動かす」ブロックは、該当のキャラクターを指定した歩数分、移動させる命令を表しています。
しかし、もとの位置から消えて、行き先に、パッと現れるような表現になります。
これでは、アニメーションっぽくないですね。

再びプログラム１をクリックしてから、次の作業に移ってください。

プログラム４

このプログラムは、「『2歩動かす』を『150回繰り返す』」と読みます。
2×150=300 ですから、結局300歩動くということになりますね。
つまり、移動先は、結局、プログラム３と同じってことです。
しかし、大きな違いがあります。
このプログラムでは、2歩動くごとに、ネコが画面上に表されるので、
それを繰り返すことで、見た目に滑らかなスライドをしているように見えるのです。
しかし、滑っていくような感じになるので、歩いてる感が出ませんね。
では、次に、プログラム２と合わせることで、ネコを歩かせてみましょう！

再びプログラム１をクリックしてから、次の作業に移ってください。

プログラム５

このプログラムは、「『2歩動かして、次のコスチュームにする』を『150回繰り返す』」と読みます。
2歩動かすごとに、次のコスチュームになりますから、
これを繰り返すと、トコトコ歩いているような感じになりますよね。
ただし、150は偶数ですから、150回目の繰り返しで、コスチュームは「コスチューム2」になっていますよね。
これでは、まだ歩いている途中に見えるので、最後に「コスチュームをコスチューム1にする」をはめ込んでいるのです。

移動先を座標で指定する

先程の例では、ネコに動く歩数を設定して、歩くアニメーションを作りましたね。

今度は、行き先を座標で指定して、そこに向かって歩いていくようなアニメーションを作ってみましょう。
まずは、行き先にしたい場所の座標の取り方です。下の画像のように、行き先にしたい場所に、ネコを移動させてみてください。

すると、図のように、「x座標を＿＿、y座標を＿＿にする」と「＿＿秒でｘ座標を＿＿に、y座標を＿＿にする」のブロックの座標を表す部分が、今ネコがいる場所を表すものになります（この例では、x座標が180、y座標が123）。

このまま、「1秒でｘ座標を180に、y座標を123にする」ブロックをスクリプトエリアにドラッグアンドドロップで移動させておきましょう。

では、このように、「x座標を―150、y座標を０にする」と先程の「1秒でｘ座標を180に、y座標を123にする」を、スクリプトエリア内でつなげてみてください。2つのプロックの間には、「1秒待つ」を入れておきましょう。できたら、このブロックの塊をクリックして、プログラムを実行させてみましょう。

どうなりましたか？

指定した場所までネコを歩かせる

 先程の作業で、位置を指定する方法が分かりましたね。

それでは、このスキルを活用して、指定した位置まで、ネコを歩かせるアニメーションを作ってみましょう。

「1秒でｘ座標を180に、y座標を123にする」で、指定した位置までスライドしていくアニメーションを作ることができますが、Sample1のように、トコトコ歩かせるためには、どうすればいいのでしょうか。

当然、コスチュームを１，２，１，２・・・と変えていかないといけないのは分かりますよね。でも、「1秒でｘ座標を180に、y座標を123にする」のどこに付け加えればいいのでしょうか。

お分かりだと思いますが、このブロックは、出発地点から到着地点までの位置の移動を示したものですから、これに付け加えることはできません。

実は、このブロックとは違う所で、コスチュームを１，２，１，２・・・と変えていくプログラムを指定するのです。

Sample2  ネコを歩かせてみる2（サンプルプログラムダウンロード・sb3ファイル）

１, 2 のプログラムの解説をします。

プログラム１

このプログラムは、上で示したネコを指定した位置までスライドさせるプログラムをベースにしています。
しかし、初めて見るブロックがありますね。
「『はじめ』を送る」というブロックです。
これは、「イベント」カテゴリーにある「『メッセージ1』を送る」を使ったものです。『はじめ』は、メッセージの名前であり、自分で設定したものです。設定の仕方は、

このように今書かれているメッセージ（ここでは『メッセージ1』）の横の下三角をクリックして、出てきたリストの中の『新しいメッセージ』をクリックします。すると、

というボックスが表示されるので、新しいメッセージ名として、例えば『はじめ』と入力し、OKをクリックします。すると、「『はじめ』を送る」というブロックに変わります。これを、挿入したい位置にドラッグアンドドロップで付け加えるのです。

「（メッセージ）を送る」ブロックは、他のプログラムに、そのプログラムの実行を促すために使います。
ですから、このプログラムの３行目にある「『はじめ』を送る」ブロックで、2のプログラムを実行させているのです。

（注）
「イベント」は、「プログラムを開始するきっかけ」を意味します。
例えば、みなさんは、ボタンをクリックするという行為をよくすると思いますが、これは、そのボタンをクリックするというイベントを起こすことにより、それに付随するプログラムを動作させているのです。
上の例で言えば、１のプログラムで『はじめ』というイベントを発生させ、そのイベントが発生した時点で、2 のプログラムを動かし始めるというような仕組みを実現しているのです。

プログラム2

「『はじめ』を受け取ったとき」は『はじめ』というイベントが発生したら、このブログラムを実行するということを意味しています。
つまり、1のプログラムの3行目で『はじめ』というイベントを発生させ、その時点で、2のプログラムが動作し始めるのです。
2のプログラムの中身は、「『次のコスチュームにする』をずっと繰り返す」ということを意味しています。
2のブロックの塊をクリックしてみてると分かりますが、この命令により、Sample1で見たように、ネコが足を交互に動かしているようなアニメーションが実現できるのです。
しかし、この命令だけでは、その場足踏みにしかなりません。
もう一度、プログラム1を見てください。
プログラム1では、『はじめ』というイベントを発生させたあと、「2秒でx座標を180に、y座標を123に変える」を実行します。つまり、『はじめ』で足を交互に動かすという動作を開始して、その状態のまま、指定した位置までスライドしていくという状況を作っているのです。

プログラム1 再び

プログラム1で、「2秒でx座標を180に、y座標を123に変える」という処理により、ネコは指定した位置まで、移動します。移動する間は、プログラム2により、足を交互に動かし続けています。
指定した位置までの移動が終われば、当然足の動きも止めたいのですが、足を動かすプログラムは、プログラム1以外の所での処理ですので、このままでは、移動が終わっても、足は動き続け、その場足踏みをしている状況になってしまいます。
そこで、ここで使うのが、「すべてを止める」というブロックです。これは、「制御」ブロックのカテゴリーに入っています。
「すべてを止める」は文字通り、今動いているすべてのプログラムを止める命令なので、プログラム2で、交互に足を動かし続けているネコの動きを止めることができます。
ただし、すべての動きを止める前に、Sample1 と同じように、ネコのコスチュームを「コスチューム1」にして、足を止めたような雰囲気を出しています。

それでは、仕上げに、メインプログラムであるプログラム1にも、イベントを割り付けてみましょう。
次の図のように、「イベント」ブロックのカテゴリーから、「『スペース』キーが押されたとき」を選んで、プログラムの先頭に付け加えてみてください。

これで、プログラムを動かしたいときは、スペースキーを押せばよいということになりました。当然、このブロックの塊をクリックしても、プログラムは開始されますが、このように、キーを割り付けることにより、よりプログラミング的な動きを与えることができるようになります。
イベントには、ほかにも、「このスプライトがクリックされたとき」などもありますので、どのような動きをさせたいかを考えて、適切なイベントを与えるとよいと思います。

Contents

• アニメーションの基本
• キャラクター・背景の作成
• 背景の転換
• プレゼン用スライドを作ってみる
• 音声を吹き込んでみる

キャラクター・背景の作成

Scratch には、すでに用意された楽しいキャラクター（スプライト）がたくさんありますが、プレゼン資料を作成するためには、それでは足りません。
当然、自分でスライドの部品を作らなければなりません。

Scratchには、他に保存されている画像を取り込んでスプライトとして利用することや、コスチュームエディターを使ってバナーを作ったりすることができるようになっています。
このセクションでは、そういった機能を利用して、スライドづくりに必要な部品を用意する方法を習得します。

スプライトの追加

スプライトリストの右下部にあるをクリックすると、挿入したいものの種類を選ぶリストが表示されます。

リストに表示されるものは、

1. スプライトをアップロード
   端末に保存しているスプライトを使う。
   画像ファイルもスプライトとして使えます。
2. サプライズ
   Scratch が用意しているスプライトを、おまかせで使う（スプライトはランダムに選ばれる）。
3. 描く
   自分で絵を描いて使う（クリックすると「コスチュームエディター」が開きます）。
4. スプライトを選ぶ
   Scratchが用意しているスプライトを使う（クリックすると、選択画面が開きます）。

写真を取り込む

「スプライトをアップロード」を利用して、キャラクターにしたい画像を取り込みます。
下のように、コスチュームエディターを使えば、取り込んだ画像に文字を書いたり、図を付け加えたりすることが、可能です。

また、消しゴムを使えば、下のように、要らない部分を消すことができます。

必要な部分だけ切り取った後は、図の位置や大きさを調整しておきましょう。
（図の位置及び大きさの変更は、選択ツールで図を囲んでから、操作します。）

（図の位置を調整するときは、スプライトのプロパティ画面を見て、x座標、y座標が両方0になっているかどうか確認しましょう。そうなっていないときは、x座標、y座標の設定を両方0にしてから、位置を調整しましょう。

バナーやボタンを作成する

スライドの部品として、文字を書いたり、ボタンを作ったりするときは、「絵を描く」を使って、コスチュームエディターで作ることができます。

• 文字を書く
  コスチュームエディターの「テキスト」ツールを使うと、文字が書けます。書いた文字は、「選択」ツールを選んだ上でクリックすると、拡大縮小・移動が可能になります。
  
• 四角や丸の図形を描く
  「四角」ツールや「丸」ツールを使うと描けます。これも「選択」ツールで拡大縮小・移動ができます。
  
• 文字と図形を組み合わせる
  コスチュームエディターの上部に、「グループ化」と「画像の順序」に関するツールが用意されています。2つ以上の図やテキストを重ねるときは、これを上手に使っていきましょう。
  まず、書き込んだ文字と図を重ねます。続いて、必要があれば、図の順序を変更します。下の例では、丸の下にHelloがあるので、丸を奥に下げる必要があります。
  
  丸を奥に下げた結果、Helloが前に表示されるようになりました。
  
  では、仕上げに、丸とHelloをグループ化しておきましょう。まず、「選択」ツールを使って、丸とHelloを両方選択します（選択ツールで丸とHelloを大きく囲むとよい）。その上で、グループ化をします。
  これで、Helloという丸いボタンができました。大きさも適切に調整してください。

絵を描いてキャラクターを作る

コスチュームエディターを使うと、下図のように、自分で絵を描いてスプライトにすることができます。

上図で耳は三角形で作っているのですが、このような多角形は、直線を続けて描くことによって作成できます。「塗りつぶし」で枠を含めて色を設定できます。

ネコの口には曲線を使っていますが、これは、直線を引いた上で、「形を変える」ツールを使っています。
まず、直線を用意して、

続いて「形を変える」をクリックした上で、直線の真ん中をクリックし、上の「角ばった」をクリックして、頂点を追加します。

続いて、左半分の、そのまた真ん中を下に引っ張り、曲げた形を作ります。

すると、引っ張った点の左右にハンドル（曲げ具合を指定する）が表示されますので、その長さを調整して、形を決めていきます。

右半分にも同じことをして完成です。

このような図の描き方は、ベクター形式の図の描き方の基本です。慣れると大変便利ですので、練習して、いろんな図形にチャレンジしてみてください。

 ただし、児童には難しい描き方だと思いますので、「筆」ツールを使って、自由に好きな絵を描かせてもいいと思います。

背景の作成

背景もスプライトと同じように、自由に設定できます。「スプライトリスト」の右にある「ステージ」と書かれた枠の中の背景をクリックすると、左側のスクリプトエリアが、背景に対するプログラムを記述する場所になりますが、その上にある「コード」「背景」「音」のタグのうち、「背景」をクリックすると、背景の図柄などを編集するエディターになります。
上のキャラクターと同じような編集ができますので、試してみてください。

皆で手分けして作成する！

授業では、複数の児童による共同作業が考えられますが、Scratchでは、複数の端末で作ったスプライト（キャラクター）を、中に書かれたプログラムも含めて、一つの端末に集めて動作させる機能が備わっています。

「スプライトリスト」に並べられているスプライトを右クリックすると、「複製」「削除」「書き出し」の選択肢が与えられます。「書き出し」は、該当のスプライトを端末に保存することを意味します。ですから、スプライトの書き出し機能を使って、まず端末に保存し、それを他の端末に移して、「スプライトの追加」ボタンから「スプライトをアップロード」を使って、Scratch内に読み込ませることができます。

このようにすれば、複数の児童による共同作業が実現できます。

ただし、現段階では、背景には書き出し機能はありませんので、背景でも共同作業を考えるならば、他の画像編集ソフトで編集した画像を読み込ませるということになります。

Contents

• アニメーションの基本
• キャラクター・背景の作成
• 背景の転換
• プレゼン用スライドを作ってみる
• 音声を吹き込んでみる

背景の転換

プレゼン用のスライド作成の基本は、背景画像の転換でしょう。
ここでは、背景画像の転換の方法を考えます。

クリックや矢印キーでスライドを進める

 まず、基本です。背景画像をクリックしてスライドを次に進めたり、左矢印キーでスライドを戻したりしてみましょう。

準 備

準備として、背景画像を3枚用意してみます。

Scrtch画面の右下部にある「ステージ」と書かれている部分の下部にある背景の追加ボタンをクリックして、背景の追加をします。
下の例では、「School」「Room 1」「Room 2」の3枚の背景画像を取り込んで、ステージの背景として用意します。
しかし、もとからあった透明の背景が残っているので、これは、削除しましょう。

これで、背景用の画像が3枚になりました。

ステージをクリックしてスライドを進める

ポイントは「イベント」です。
イベントは、何かの動作を起こしたいときの、きっかけを与えるものです。
この場合は、「ステージをクリックする」がイベントになります。

ですから、プログラムとしては、
「ステージをクリックする」というイベントが発生したら、「次の背景にする」
というものになります。

ちなみに、Scratchでは、「ステージをクリックする」というイベント（「イベント」カテゴリーの中にある「ステージがクリックされたとき」ブロック）も、「次の背景にする」という命令（「見た目」カテゴリーにあります。）も、ブロックとして用意されていますので、これを並べれば、ミッションクリアとなります。

 
これを、ステージのコード編集エリアに貼付してください。

右左の矢印ボタンで操作する

矢印ボタンでスライドを進めたり、戻したりしてみます。
ここでは、右矢印でスライドを進め、左矢印でスライドを戻すといったプログラムを考えます。

ポイントは、イベントの「キーの割り付け」です。

Scratchでは、キーボードのキーをイベントに割り付けることができます。「イベント」カテゴリーにある「（スペース）キーが押されたとき」を見てください。このブロックの（スペース）の右にある下三角をクリックして、リストをみると、「右向きの矢印」や「左向きの矢印」があるのが分かります。

まず、「右向きの矢印」を選択して、ドラッグアンドドロップしてコード編集エリアに移動し、それに「次の背景にする」をくっつけます。
これで、「右向きの矢印が押されたとき」「次の背景にする」のプログラム完成です。

同じように、「左向きの矢印が押されたとき」「背景を前の背景にする」というプログラムを作ります。
「背景を前の背景にする」というブロックは、｢見た目」カテゴリーにある「背景を＿＿にする」（上の準備と同じ背景の設定をすると、初めは「背景を（School）にする」になっています。）を使います。＿＿の部分の右にある下三角をクリックして出てきたリストから、「前の背景」を選択してください。

右矢印や左矢印を押すというイベントは、背景やスクリプトに依存しませんので、これらのプログラムはどこにおいてもいいのですが、ここでは、ステージのコード編集エリアに配置してみます。

それでは、思い通りの動きをするかどうか、実際に試してみてください。（サンプルプログラムダウンロード・sb3ファイル）

スプライトをクリックしてスライドを進める_1 （サンプルプログラムダウンロード・sb3ファイル）

続いて、スプライト（キャラクター）をクリックして、スライドを進めるプログラムを考えてみましょう。

今度は、「スプライトエリア」にある該当のスプライトをクリックして、左側に該当のスプライトのコード編集エリアを表示させておきます。
「イベント」カテゴリーの中を見てみると、「このスプライトをクリックしたとき」というブロックがあるのが分かりますので、これを使えばいいのは想像つきますね。つまり、

で、お望みのプログラムが出来上がります。

しかし、少々雰囲気が足りない感じがしませんか。
そこで、スプライトをクリックすると、まず、フェードアウトしていき、その後でスライドを次に進めてから、もう一度フェードインしながら現れるといったアニメーションを付けてみましょう。

フェードアウト

ポイントは「見た目」カテゴリーの中にある画像効果に関するブロックを利用することです。
画像効果の選択肢として用意されているのは、次の7つです。

「色」「魚眼レンズ」「渦巻き」「ピクセル化」「モザイク」「明るさ」「幽霊」

この中で、フェードイン、フェードアウトに用いるのは「幽霊」です。
「幽霊」は透過度に関するものです。「幽霊の効果」が「0」のときが、透過度0を表し、「幽霊の効果」が「100」のとき、透過度100%つまり、透明になります。ですから、フェードアウトを実現するためには、徐々に透過性を高めていく必要があります。
上の例では、透過性を2%ずつ高めることを50回繰り返すことによって、フェードアウトを実現しています。

フェードイン

フェードインはフェードアウトの逆の操作になります。
上の例では、透過性を10%低めることを10回繰り返して、徐々に透過性を0に近づけていっています。
上で見るように、透過性を低めることは、マイナスの値で実現できます。

なお、サンプルプログラムでは、ネコをクリックする以外にも、右矢印キーを押しても同様の動きをするようにしています。また、左矢印キーで背景を前に戻すようにしています。このプログラムでは、メッセージの送受信を用いて、効率化していますので参考にしてください。

スプライトをクリックしてスライドを進める_2 （サンプルプログラムダウンロード・sb3ファイル）

では、もっと演出を付けてみましょう。

ここでは、下の画像のように、ネコが左から右に歩いて行って、右端にタッチしたら、フェードアウトし、場面を変えて、左端にフェードインで現れるという演出を考えてみましょう。

さて、どのようなプログラムを考えますか。

ポイントは、「感知」することです。この例では、「右端にタッチした」ということを感知しないといけません。

右端にタッチしたことを感知する判断の方法はいろいろと考えられますが、ここでは、既に用意されている「＿＿に触れた」というブロックを使ってみます（「調べる」カテゴリーの中にあります）。

「＿＿に触れた」の＿＿の部分の選択肢には、「マウスのポインター」と「端」の2つがあります。
当然ここでは、「端」を選択して、「『端』に触れた」というブロックにして、これを使います。

 さて、どのようなプログラムを作りますか。

プログラムの大まかな手順を考えてみましょう。

1. ネコがクリックされたら・・・（これがイベントになる）
2. 「端に触れた」を感知するまで、トコトコ歩き続ける。
3. 続いて、フェードアウトを開始する。
4. 続いて、背景を次の背景にする。
5. ネコの位置を左端にする。
   （ただし、端に触れてると次で困るので、左端に触れない程度に配置する。）
6. フェードインする。

この6段階で、望みの動作が表現できることが分かりますね。

ここで初めて出てきたのが、2にある「～するまで～を続ける」ということを表現するブロックです。
実は、これは「繰り返し」になります。ブロックは、「制御」カテゴリーにある「＿＿まで繰り返す」です。この＿＿に「壁に触れた」をはめ込むことになります。

5の「左端に配置する」というのも初めてですよね。これは、座標で処理します。当然ここでは、x座標を考えます。
x座標は、おおよそで言うと、左端がー200、右端が200 ということになっていますので、ここでは、左端に触れない程度に、左端に置かなければならないので「x座標をー180にする」を使います。

他の所は、今までの経験を組み合わせて、考えてみてください。

ちなみに、上の1～6の手順でプログラムを表現すると、次のようになります。

 いかがでしたか、複雑な動きに思えることでも、上で、考えている動きを1～6の手順に分けたように、まず、大まかな手順に分解しておいて、そのあとで、手順に書かれている、それぞれの動きを、どうやってプログラムに乗っけていけばいいのかを考えるようにすると、すっきり、プログラムを書くことができます。ほかにも、いろいろな演出を考えて、それを実現するプログラムを作ってみてください。

Contents

• アニメーションの基本
• キャラクター・背景の作成
• 背景の転換
• プレゼン用スライドを作ってみる
• 音声を吹き込んでみる

プレゼン用スライドを作ってみる

上で練習をした背景の転換で、基本的なプレゼンスライドはできますが、
パワーポイントに慣れてしまった今日、効果的なプレゼンをするためには、
もっと演出を付けたくなりますよね。

それでは、２つの例を見てみましょう。

 Sample 1  動きのきっかけをものに与えるパターン

（サンプルプログラムダウンロード・sb3ファイル）

注：スライドの進め方
画面下部の「進む」「戻る」ボタンで背景画像を進めたり戻したりします。
2枚目と3枚目にある果物をクリックすると、ネコが近づいていって、コメントします。

 Sample ２ パワーポイントのように動く順番を決めているパターン

（サンプルプログラムダウンロード・sb3ファイル）

注：スライドの進め方
スペースキーを押して初期化、右矢印ボタンを押してスライドを進めます。

 さて、どうでしょうか。

同じような作りに見えますが、プログラム的には、Sample１の方が、断然簡単です。
児童に指導する際には、まず、Sample１のように、キャラクターなどのものをクリックして、スライドを進めていくような演出を付けるようなスライドで、まずは、慣れるようにしましょう。

なぜ、Sample２の方が難しいかというと、簡単に言えば、キャラクターやバナーが出てくる順番を決めているからです。順番を決めるためには、キャラクターやバナーに順番を示す番号を付け加えないといけませんが、順番を扱うには「変数」という概念が必要になります。

試みにゲーム制作をしてみれば、この変数がプログラミングには必要不可欠であることが分かります。例えば、点数を考えてみれば分かりますが、これは、点数を加算したり、減少させたりするようなイベントが起これば、その状況に応じて、今までの点数に対して加減を行います。これには、今までの点数を記録しておく領域が必要であり、かつ、その領域は、状況に応じて、値を変更させなければなりません。このような可変の領域が「変数」なのです。

Sample２には、2つの変数を使っています。「カウンター」と「とちゅう」の2つです。ステージの右上部に見えるのが、それらの変数が今、どういう値になっているかを示しているものです。
実際にプレゼンをする際には、表示しないものですが、作成する際には、表示させておくと、大変便利です。ダウンロードしたサンプルプログラムを動かす際には、この値に気を付けながら操作してみてください。
（ちなみに、「カウンター」はスライドのアニメーションに対応する番号です。「とちゅう」はアニメーション中かどうかを示すものであり、「1」がアニメーションが動いている途中であることを示し、「0」がアニメーションが動いていないことを示しています。）

 実際にプログラミングの学習を進めていくと実感することになることは、プログラミングの基本として重要な事項が「変数」と「配列」であるということです。配列はここでは取り上げていませんが、変数も配列もプログラムにおいて記憶領域として重要なものになるのです。コンピュータは記憶することを得たことにより、できることが大幅に増えたとも言えます。

ですから、Sample１のような、イベントを中心としたプログラミングの仕方に慣れた後で、Sample２のような変数等の記憶領域を必要とするプログラムの作成にもチャレンジしてはいかがでしょうか。 

Sample１の解説

「進む」と「戻る」のボタンで背景を変えていくことについては、前のセクションでお話ししたプログラムを、それぞれのボタンにそれが発生するイベントを付加すればいいことになるので、省略します。詳しくは、サンプルプログラムのスプライトリストの中の「スプライト2（進むボタン）」と「スプライト3（戻るボタン）」をクリックして中のプログラムを確認してください。）

では、「リンゴをクリックしたら、ネコが近づいていって、This is an apple.としゃべる」を実現するプログラムを考えましょう。

大まかな手順を書き下してみると、

1. リンゴがクリックされたら・・・（これがイベントになる）
2. ネコがトコトコ足を動かしながら、リンゴに近づき、
3. This is an apple.としゃべる

となります。しかし、3の手順以外は、まだ細分化する必要があります。

まず、1の「リンゴがクリックされたら・・・」ですが、ここで考えなければならないのは、クリックするものと、動くものが違うということです。
つまり、「イベント」はリンゴに発生させ、「動作」はネコ側に起こさせることになるということであり、この間に橋渡しが必要になるわけです。

この橋渡しとして使うのが、Scratchにおける「メッセージの送受信」となります。
サンプルプログラムでは、「リンゴがクリックされたら・・・」を次のように分解します。

1. （リンゴ）このスプライトがクリックされたら、「説明する」というメッセージを送り、
2. （ネ　コ）「説明する」というメッセージを受け取ったら・・・

という具合です。これで、リンゴがクリックされたというイベントを、ネコが感知できるようになりました。

続いて、2の「ネコがトコトコ足を動かしながら、リンゴに近づき」というところですが、これは、上の「アニメーションの基本」でもみたように、

• ネコが足を交互に動かす
• リンゴの近くまでネコがスライドする

の2つの動作を、異なるプログラムで実現して、それらを同時に動かすことによって実現します（あくまでも一例ですが・・・）。

ですから、上で見た「説明する」というメッセージを受け取るプログラムは、2つになるわけです。

つまり、

• （「説明する」を受け取ったら）足を交互に動かす
• （「説明する」を受け取ったら）リンゴの近くまでスライドする

となるわけです。しかし、「アニメーションの基本」のときも同じことをしたので、同様にすればいいかというと、そうではありません。「アニメーションの基本」のときは、ネコの移動の後は何も無かったので、その時点で、強制的に全てのプログラムを止めればよかったのですが、今は、移動の後で、ネコが台詞をしゃべる場面を残しています。ですから、プログラムの実行を強制的に止めるという指令は出せません。

そこで、プログラムを

• （「説明する」を受け取ったら）＿＿秒間、足を交互に動かし続ける
• （「説明する」を受け取ったら）＿＿秒間で、リンゴの近くまでスライドする

という風に、時間を合わせたプログラミングをします。Scratchで時間を管理する機能が「タイマー」なのです。

続いて、「リンゴの近くまでスライド」する所ですが、「リンゴの近く」を、ここでは座標で設定して、「＿＿秒間でｘ座標を＿＿に、ｙ座標を＿＿にする」とします。

つまり、2の「ネコがトコトコ足を動かしながら、リンゴに近づき」には、3つの設定値が必要なわけです。リンゴだけなら、この設定値をネコのプログラムに、数値で書き込んでしまえばいいのですが、この後、バナナにも同じことをしますので、この3つの設定値は、リンゴの方のプログラムに書き込んで、それをネコのプログラムで読み取るというふうにします。
また、3の「This is an apple.としゃべる」もありますので、この「This is an apple.」も設定値として、計4つの設定値を、リンゴのプログラムに書き込みます。

このプログラムには、設定値として、「位置ｘ」「位置ｙ」「話」「移動時間」の4つを用意しています。Scratch上でこれを実現するためには、「変数」カテゴリーを使います。

 「ブロックパレット」の左端にある「変数」をクリックすると、最上部に、「変数を作る」というボタンがあります。これをクリックすると、変数作成のウィザードが表示されますので、これにより、それぞれの変数を作成します。なお、「すべてのスプライト用」か「このスプライトのみ」かを選択するようになっていますが、ここでは、複数のスプライトで使用するため、「すべてのスプライト用」を選択します。（このような、変数の使用範囲の設定を「変数のスコープ」といい、プログラミングにおいては、重要な概念です。なお、ここでは「変数」という言葉を使っていますが、概念的には、「定数」に当たります。）
また、ブロックパレットにできた変数の横にチェックボックスがありますが、ここにチェックを入れると、ステージに、作成した変数の値が表示されますので、プログラム作成時には、チェックを入れて、変数を確認しながらデバッグをするようにするのがお薦めです。
当然ですが、プログラムが完成したら、チェックをはずしておきましょう。

バナナにも、上のリンゴと同じような設定をすることにより、プログラムが完成されます。

 Sample１の説明を「タイマー」の説明で終えたいと思います。上に挙げたリンゴのプログラムでは、クリックされたというイベントの直後に、「タイマーをリセットする」という命令を入れています。

実は、タイマーは、プログラムをScratchで展開した時点でスタートします。ですから、イベントを発生させた時点でリセットして、いったん「0秒」に戻しているのです。

また、ネコのプログラムでは、足を交互に動かす方のプログラムにおいて、「『タイマー』が＿＿秒より大きくなるまで、続ける」というふうに使っています。不等号記号の「＞」を使っていますが、「＝」でいいのではないかと思われる方は当然いらっしゃると思います。どちらかといえば、そちらの方が正しく思われますが、タイマーは小数点以下第3位まで計測するようになっており、「ちょうど」の時間でストップすることは、精度上無理なのです。ですから、不等号にしている訳です。

タイマー機能は、アニメーションを実現する上で重要なアイテムになります。
このプログラムで、タイマーの使用に慣れておけば、さまざまなアニメーションに応用できるようになりますので、この機会に是非習得してください。 

Sample２について

上でお話したように、キャラクターやバナーが出現したり、消えたりするプログラムは、「変数」を用いて、プログラム上で動的に判断を下しながら動作をさせることになるので、プログラミングの経験が浅い児童には難しいものになっています。しかし、パワーポイントと同じようなアニメーションの設定ができるということを知るだけでも、非常に高い学習効果があると思います。そのような知識を持った子どもたちは、市販のアプリを見て、そこにプログラムの存在を感じ、がんばれば自分もこのようなアプリを作れるのではないかという期待を抱くようになるからです。

といっても、設定が多いだけで、プログラム内容が複雑なわけではありません。
必要なのは、根気強さです。
詳しい解説は、ここではしませんが、サンプルプログラムを読み解いていただき、是非、子どもたちにもチャレンジするよう、勇気付けてあげてください。

プレゼン時は「全画面表示」で！

Scratchの編集画面では、ステージは右上部に小さく表示されているだけですが、「全画面表示」も可能です。ご活用ください。

Contents

• アニメーションの基本
• キャラクター・背景の作成
• 背景の転換
• プレゼン用スライドを作ってみる
• 音声を吹き込んでみる

音声を吹き込んでみる

さて、そろそろ仕上げです。

今までは、無音でスライドを作っていきましたが、Scratchは、音を扱うことができますので、この機能を利用したプログラムについて考えてみます。

例えば、プログラム中のキャラクターがしゃべる、ものに触れたときに効果音を出すといった演出は、子どもたちの作り手意欲を高めることになることは、想像に難くないですね。
ですから、音を扱うことは、子どもたちが楽しんでプログラミングをするためにも、是非身に付けておきたい内容です。

 例えば、こんなのはどうでしょうか。
「プレゼン用スライドを作ってみる」のセクションでお見せしたSample１に音を付けてみます。

Sample1  英語あそび（サンプルプログラムダウンロード・sb3ファイル）

この例では、リンゴをクリックすると、ネコが近づいていって「This is an apple.」という声を出していますが、これは、プログラム作成者が声を吹き込んだものです。音声の速さをコントロールできるので、上の動画の中の音声のように、声質を変えることもできます。
ネコが歩くときやドアを閉めるときの効果音も付けていますので、無音のときよりも、見る方も楽しく見ることができますよね。

では、まず、音の基本操作について見てみましょう。

音は、スプライトごとに設置します。1つのスプライトに複数の音を設置することも可能です。
「音エディター」を見てみましょう。

音エディターでは、このように、トリミングや速さなどの編集が可能になっています。また、名前も自由に付けることができます。名前はプログラム上で使用することが多いので、分かりやすくしておくことをお薦めします。

なお、音のリスト（上の例では、「ニャー」という1つの音しか設定されていません。）の下部にある、音の追加ボタンをクリックすると音を追加することができます。Scratchに用意されている音を使うことが多いですが、上でお話ししたように、マイクがあれば、自分で録音した音を追加することも可能です。

音の追加ボタンをクリックしたときに表示されるリストの中に、「マイク」がありますが、これを選択すると、録音ウィザードが表示されます。これを用いて次の手順で録音・編集をします。

1. マイクを使って録音する：
   
2. 必要な箇所のみ取り出して保存する：
   
3. 録音した音に名前をつける。必要ならば更に編集する：
   
   名前を付けると、リスト上にも反映される：
   
   音の編集時には、トリミング以外にも、速さを変更して、声質を変える変えることができます。

では、実際に簡単なプログラムの例を見てみましょう。

Sample2  （サンプルプログラムダウンロード・sb3ファイル）

Scratchの新規編集画面を出して、ネコのスプライトに次のプログラムを設定します。

どのような動きをするプログラムか分かりますか。

このプログラムでは、「スペースキー」がスタートを「左向き矢印キー」がストップとなっています。
スタートしたら、ネコは滑らかにスライドしていって、壁に当たったら、逆方向を向いて再びスライドし始めます。
そして、壁に当たったとき、「ニャー」と声を上げるようになっています。
この動きを、ずっと繰り返すことになっているので、何もしなければ、ずっとこの動きをで、ニャーニャー言いながら、壁の間を往復することになります。（左矢印キーで、「すべてを止める」のでストップになります。）（スタートのプログラムの方の最初のブロックが「回転方向を左右のみにする」が入っていますが、これがないと、壁で跳ね返るとき、逆立ちしたような表示になってしまいます。）

このプログラムを設定した後、上にかいた手順で音を追加してみましょう。続いて、「『ニャー』の音を鳴らす」という命令の中の『ニャー』の部分を、新たに追加した音にしてみましょう。
サンプルプログラムでは、「こんにちは」という音を追加したので、これに変更してみます。

いかがでしょうか。ちゃんと、新しい音に変わりましたよね。

続いて、音を変数として扱うことを考えてみましょう。

条件によって、出す音が異なるときなど、一つのプログラムにおいて、音を変数として設置すると便利なときがあります。Scratchでは、スプライトごとに、設置している音をそれに付けた名前で区別しているのでそれができるのです。

実際に見ていきましょう。まずは、どのようなプログラムを組みたいか、次の動画で見てください。

Sample3 音を変数として扱う（サンプルプログラムダウンロード・sb3ファイル）

このプログラムでは、ベルとボールにネコが当たったとき、音を出すようにしています。また、それぞれの出す音は異なるものになっています。

どのようなプログラムになっているかの大まかな手順を見てみましょう。

1. スペースキーで実行スタート！
2. ネコは壁の間を滑らかにスライドしながら、往復し続ける。
3. ネコがベルに触れたら、ベルの音を鳴らす。
4. ネコがボールに触れたら、ボールの音を鳴らす。
5. 左矢印キーでストップ！

説明が必要なのは、3, 4 の所ですね。

まず考えなければならないのは、ベルとボールの音を、どのスプライトに設置するかです。

今は、音を変数で扱うことについて考えますので、ネコにベルとボールの音を設置します。つまり、プログラム上、ベルとボールの音を出すのはネコになるということです。
（ベル、ボールそれぞれにそれぞれの音を設置しても、同じ動作をするプログラムを作ることはできます。この場合、基本的に変数は必要ありません。こちらのプログラム（sb3ファイル）を参考にしてください。）

 まずは、ベル、ボール、ネコそれぞれに、どのようなプログラムを設定したか見てみましょう。

変数「触れたもの」と、メッセージ「触れた」とを用意しているのが分かりますね。

つまり、ネコにはベルの音に「ベル」、ボールの音に「ボール」という名前を付けており、メッセージの送受信によりネコが「触れた」を感知すると、その名前が変数に入る値となって、ネコに、その名前の音を鳴らせるという仕組みになっているのです。

音のブロックでは、リストから音の名前を選択する作りになっていますが、この例で見たように、変数は音の名前の箇所にはめ込むことができるようになっています。このサンプルでは、その機能を用いたということです。

 （ちなみに、ベルとボールに設定したプログラムには「0.5秒待つ」という命令があります。これは、プログラムの実行が、それが入っている箇所で、一旦止まり、0.5秒後に実行を再開するということを意味しています。プログラムでは、ネコに触れたかどうかを、ずっと判断し続けるようになっていますから、これがないと、ネコがベルやボールの上を通過している間中、音が何回も重なって鳴るということになります。）

ブロックをうまく使おう！

それでは、Sample１について、詳しく解説を付けてみたいところですが、今までの練習として、まずは、ご自身で考えてみてください。

ただし、ネコの動きは、さまざまな動きが複合しているので、プログラムは当然長いものになります。粘り強く、考えてみてください。

さて、ここでは、長いプログラムを書くときに便利な、「ブロックを作る」についてのお話をします。

Scratchのブロックパレットの左にあるカテゴリーの中に、「作ったブロック」という項目がありますね。この項目をクリックすると分かりますが、この部分をまだ操作していなければ、「ブロックを作る」というボタンだけがあります。ここでいう「ブロックを作る」は、一連の動作を一塊にして、新たに「ブロック」作るという作業を意味しています。

長いプログラムを書いていると、同じような内容の命令列を、何回も書くようなことが起こってきます。そこで、何回も出てくるプログラム上の命令列を、一つにまとめ、それを、動作中のメインプログラムから読みに行って利用することで、プログラムがすっきりすることは、想像に難くありません。

Scratch３では、新たに作るブロックに変数（プログラミング用語では引数（ひきすう）と言います。）を設定することができるようになっていますので、これを使えば、ずいぶん読みやすいプログラムになります。

このように自分で新たなブロックを定義する作業は、複雑なプログラムを組むときには、必要不可欠なスキルとなりますから、これを期に、習得していただければと思います。

詳しくは、Sample１のサンプルプログラムを展開して確認していただければと思います。

必要なのは問題を分解して、地道に解決していく根気強さです

Sample３の解説を見ても分かりますが、プログラミングという作業は、意図する動きを細かく分解し、それぞれ一つ一つを解決していくという作業になります。

ただし、決して退屈な作業ではなく、子どもたちにとっても楽しく思える作業だと思います。なぜなら、作ったプログラムはすぐに確かめられ、修正を重ねることで、自分の思い通りの動きにだんだんと近づいていっているという実感を強く持つことができるからです。

今回ご紹介した、Scratchによるプレゼン用スライドの作成は、本格的なものを目指せば、当然、複雑で地道な作業を必要とするものになります。しかし、プログラミングは、特に経験がものを言う世界です。是非、子どもたちにチャレンジしてもらい、必要なときに必要なプログラミングができるという技量、そして、プログラミングを問題解決に積極的に活用する意欲を育てていただければと、切に願っています。