子どもたちの創意工夫を生かして、プログラミングによるプレゼン資料作成にぜひ、チャレンジしてみてください。
そこで先生方は、必要なときに必要なプログラムを書くという「普段使いのプログラミング」を手に入れた子どもたちの姿を見ることになるでしょう。
- Scratchでプレゼン資料を作成をする場合は、コスチューム作成に日本語のテキスト入力ができる、Scratch3 が便利です。
Scratch3 は、2019年1月に公開された最新バージョンです。オフライン版（Scratchディスクトップ・エディター）も公開されていますので、是非ダウンロードして使ってみてください。 - Scratch3で、Scratchファイル（sb2またはsb3ファイル）を展開するためには、ツールバーの「ファイル→コンピューターから読み込む」でファイルをScratch3プログラミング環境内に読み込んでください。
なお、Sctratchのプログラム環境をインストールしていない場合は、インターネット上のSctratch公式サイトでScrathプログラミング環境（外部サイト）に対して、ダウンロードしたサンプルファイル（sb2またはsb3ファイル）をアップロードしてお試しください。ただし、2019年1月時点ではInternet Explorerに、対応していません。Microsoft EdgeまたはChromeをお使いください。 - 作成したScratchファイルをパソコン内に保存する場合は、ツールバーの「ファイル→コンピューターに保存する」で保存してください。上書き保存の場合も同じ方法で保存することになります。
（注意）「コンピューターに保存する」をクリックすると、保存画面が表示され、保存するときのファイル名の指定が求められます。デフォルトでは、「Scratchのプロジェクト.sb3」となっていますが、これを自由に変更して、保存ボタンをクリックしてください。ただし、拡張子である「.sb3」は削除しないでください。ファイル名の最後に「.sb3」がないと、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には、他に保存されている画像を取り込んでスプライトとして利用することや、コスチュームエディターを使ってバナーを作ったりすることができるようになっています。
このセクションでは、そういった機能を利用して、スライドづくりに必要な部品を用意する方法を習得します。
スプライトの追加
スプライトリストの右下部にあるをクリックすると、挿入したいものの種類を選ぶリストが表示されます。
リストに表示されるものは、
- スプライトをアップロード
端末に保存しているスプライトを使う。
画像ファイルもスプライトとして使えます。 - サプライズ
Scratch が用意しているスプライトを、おまかせで使う（スプライトはランダムに選ばれる）。 - 描く
自分で絵を描いて使う（クリックすると「コスチュームエディター」が開きます）。 - スプライトを選ぶ
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つがあります。
当然ここでは、「端」を選択して、「『端』に触れた」というブロックにして、これを使います。
さて、どのようなプログラムを作りますか。
プログラムの大まかな手順を考えてみましょう。
- ネコがクリックされたら・・・（これがイベントになる）
- 「端に触れた」を感知するまで、トコトコ歩き続ける。
- 続いて、フェードアウトを開始する。
- 続いて、背景を次の背景にする。
- ネコの位置を左端にする。
（ただし、端に触れてると次で困るので、左端に触れない程度に配置する。） - フェードインする。
この6段階で、望みの動作が表現できることが分かりますね。
ここで初めて出てきたのが、2にある「～するまで～を続ける」ということを表現するブロックです。
実は、これは「繰り返し」になります。ブロックは、「制御」カテゴリーにある「＿＿まで繰り返す」です。この＿＿に「壁に触れた」をはめ込むことになります。
5の「左端に配置する」というのも初めてですよね。これは、座標で処理します。当然ここでは、x座標を考えます。
x座標は、おおよそで言うと、左端がー200、右端が200 ということになっていますので、ここでは、左端に触れない程度に、左端に置かなければならないので「x座標をー180にする」を使います。
他の所は、今までの経験を組み合わせて、考えてみてください。
ちなみに、上の1～6の手順でプログラムを表現すると、次のようになります。
いかがでしたか、複雑な動きに思えることでも、上で、考えている動きを1～6の手順に分けたように、まず、大まかな手順に分解しておいて、そのあとで、手順に書かれている、それぞれの動きを、どうやってプログラムに乗っけていけばいいのかを考えるようにすると、すっきり、プログラムを書くことができます。ほかにも、いろいろな演出を考えて、それを実現するプログラムを作ってみてください。
Contents
- アニメーションの基本
- キャラクター・背景の作成
- 背景の転換
- プレゼン用スライドを作ってみる
- 音声を吹き込んでみる
プレゼン用スライドを作ってみる
上で練習をした背景の転換で、基本的なプレゼンスライドはできますが、
パワーポイントに慣れてしまった今日、効果的なプレゼンをするためには、
もっと演出を付けたくなりますよね。
それでは、２つの例を見てみましょう。
Sample 1 動きのきっかけをものに与えるパターン
注：スライドの進め方
画面下部の「進む」「戻る」ボタンで背景画像を進めたり戻したりします。
2枚目と3枚目にある果物をクリックすると、ネコが近づいていって、コメントします。
Sample ２ パワーポイントのように動く順番を決めているパターン
注：スライドの進め方
スペースキーを押して初期化、右矢印ボタンを押してスライドを進めます。
さて、どうでしょうか。
同じような作りに見えますが、プログラム的には、Sample１の方が、断然簡単です。
児童に指導する際には、まず、Sample１のように、キャラクターなどのものをクリックして、スライドを進めていくような演出を付けるようなスライドで、まずは、慣れるようにしましょう。
なぜ、Sample２の方が難しいかというと、簡単に言えば、キャラクターやバナーが出てくる順番を決めているからです。順番を決めるためには、キャラクターやバナーに順番を示す番号を付け加えないといけませんが、順番を扱うには「変数」という概念が必要になります。
試みにゲーム制作をしてみれば、この変数がプログラミングには必要不可欠であることが分かります。例えば、点数を考えてみれば分かりますが、これは、点数を加算したり、減少させたりするようなイベントが起これば、その状況に応じて、今までの点数に対して加減を行います。これには、今までの点数を記録しておく領域が必要であり、かつ、その領域は、状況に応じて、値を変更させなければなりません。このような可変の領域が「変数」なのです。
Sample２には、2つの変数を使っています。「カウンター」と「とちゅう」の2つです。ステージの右上部に見えるのが、それらの変数が今、どういう値になっているかを示しているものです。
実際にプレゼンをする際には、表示しないものですが、作成する際には、表示させておくと、大変便利です。ダウンロードしたサンプルプログラムを動かす際には、この値に気を付けながら操作してみてください。
（ちなみに、「カウンター」はスライドのアニメーションに対応する番号です。「とちゅう」はアニメーション中かどうかを示すものであり、「1」がアニメーションが動いている途中であることを示し、「0」がアニメーションが動いていないことを示しています。）
実際にプログラミングの学習を進めていくと実感することになることは、プログラミングの基本として重要な事項が「変数」と「配列」であるということです。配列はここでは取り上げていませんが、変数も配列もプログラムにおいて記憶領域として重要なものになるのです。コンピュータは記憶することを得たことにより、できることが大幅に増えたとも言えます。
ですから、Sample１のような、イベントを中心としたプログラミングの仕方に慣れた後で、Sample２のような変数等の記憶領域を必要とするプログラムの作成にもチャレンジしてはいかがでしょうか。
Sample１の解説
「進む」と「戻る」のボタンで背景を変えていくことについては、前のセクションでお話ししたプログラムを、それぞれのボタンにそれが発生するイベントを付加すればいいことになるので、省略します。詳しくは、サンプルプログラムのスプライトリストの中の「スプライト2（進むボタン）」と「スプライト3（戻るボタン）」をクリックして中のプログラムを確認してください。）
では、「リンゴをクリックしたら、ネコが近づいていって、This is an apple.としゃべる」を実現するプログラムを考えましょう。
大まかな手順を書き下してみると、
- リンゴがクリックされたら・・・（これがイベントになる）
- ネコがトコトコ足を動かしながら、リンゴに近づき、
- This is an apple.としゃべる
となります。しかし、3の手順以外は、まだ細分化する必要があります。
まず、1の「リンゴがクリックされたら・・・」ですが、ここで考えなければならないのは、クリックするものと、動くものが違うということです。
つまり、「イベント」はリンゴに発生させ、「動作」はネコ側に起こさせることになるということであり、この間に橋渡しが必要になるわけです。
この橋渡しとして使うのが、Scratchにおける「メッセージの送受信」となります。
サンプルプログラムでは、「リンゴがクリックされたら・・・」を次のように分解します。
- （リンゴ）このスプライトがクリックされたら、「説明する」というメッセージを送り、
- （ネ コ）「説明する」というメッセージを受け取ったら・・・
という具合です。これで、リンゴがクリックされたというイベントを、ネコが感知できるようになりました。
続いて、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に用意されている音を使うことが多いですが、上でお話ししたように、マイクがあれば、自分で録音した音を追加することも可能です。
音の追加ボタンをクリックしたときに表示されるリストの中に、「マイク」がありますが、これを選択すると、録音ウィザードが表示されます。これを用いて次の手順で録音・編集をします。
- マイクを使って録音する：
- 必要な箇所のみ取り出して保存する：
- 録音した音に名前をつける。必要ならば更に編集する：
名前を付けると、リスト上にも反映される：
音の編集時には、トリミング以外にも、速さを変更して、声質を変える変えることができます。
では、実際に簡単なプログラムの例を見てみましょう。
Sample2 （サンプルプログラムダウンロード・sb3ファイル）
Scratchの新規編集画面を出して、ネコのスプライトに次のプログラムを設定します。
どのような動きをするプログラムか分かりますか。
このプログラムでは、「スペースキー」がスタートを「左向き矢印キー」がストップとなっています。
スタートしたら、ネコは滑らかにスライドしていって、壁に当たったら、逆方向を向いて再びスライドし始めます。
そして、壁に当たったとき、「ニャー」と声を上げるようになっています。
この動きを、ずっと繰り返すことになっているので、何もしなければ、ずっとこの動きをで、ニャーニャー言いながら、壁の間を往復することになります。（左矢印キーで、「すべてを止める」のでストップになります。）（スタートのプログラムの方の最初のブロックが「回転方向を左右のみにする」が入っていますが、これがないと、壁で跳ね返るとき、逆立ちしたような表示になってしまいます。）
このプログラムを設定した後、上にかいた手順で音を追加してみましょう。続いて、「『ニャー』の音を鳴らす」という命令の中の『ニャー』の部分を、新たに追加した音にしてみましょう。
サンプルプログラムでは、「こんにちは」という音を追加したので、これに変更してみます。
いかがでしょうか。ちゃんと、新しい音に変わりましたよね。
続いて、音を変数として扱うことを考えてみましょう。
条件によって、出す音が異なるときなど、一つのプログラムにおいて、音を変数として設置すると便利なときがあります。Scratchでは、スプライトごとに、設置している音をそれに付けた名前で区別しているのでそれができるのです。
実際に見ていきましょう。まずは、どのようなプログラムを組みたいか、次の動画で見てください。
Sample3 音を変数として扱う（サンプルプログラムダウンロード・sb3ファイル）
このプログラムでは、ベルとボールにネコが当たったとき、音を出すようにしています。また、それぞれの出す音は異なるものになっています。
どのようなプログラムになっているかの大まかな手順を見てみましょう。
- スペースキーで実行スタート！
- ネコは壁の間を滑らかにスライドしながら、往復し続ける。
- ネコがベルに触れたら、ベルの音を鳴らす。
- ネコがボールに触れたら、ボールの音を鳴らす。
- 左矢印キーでストップ！
説明が必要なのは、3, 4 の所ですね。
まず考えなければならないのは、ベルとボールの音を、どのスプライトに設置するかです。
今は、音を変数で扱うことについて考えますので、ネコにベルとボールの音を設置します。つまり、プログラム上、ベルとボールの音を出すのはネコになるということです。
（ベル、ボールそれぞれにそれぞれの音を設置しても、同じ動作をするプログラムを作ることはできます。この場合、基本的に変数は必要ありません。こちらのプログラム（sb3ファイル）を参考にしてください。）
まずは、ベル、ボール、ネコそれぞれに、どのようなプログラムを設定したか見てみましょう。
変数「触れたもの」と、メッセージ「触れた」とを用意しているのが分かりますね。
つまり、ネコにはベルの音に「ベル」、ボールの音に「ボール」という名前を付けており、メッセージの送受信によりネコが「触れた」を感知すると、その名前が変数に入る値となって、ネコに、その名前の音を鳴らせるという仕組みになっているのです。
音のブロックでは、リストから音の名前を選択する作りになっていますが、この例で見たように、変数は音の名前の箇所にはめ込むことができるようになっています。このサンプルでは、その機能を用いたということです。
（ちなみに、ベルとボールに設定したプログラムには「0.5秒待つ」という命令があります。これは、プログラムの実行が、それが入っている箇所で、一旦止まり、0.5秒後に実行を再開するということを意味しています。プログラムでは、ネコに触れたかどうかを、ずっと判断し続けるようになっていますから、これがないと、ネコがベルやボールの上を通過している間中、音が何回も重なって鳴るということになります。）
ブロックをうまく使おう！
それでは、Sample１について、詳しく解説を付けてみたいところですが、今までの練習として、まずは、ご自身で考えてみてください。
ただし、ネコの動きは、さまざまな動きが複合しているので、プログラムは当然長いものになります。粘り強く、考えてみてください。
さて、ここでは、長いプログラムを書くときに便利な、「ブロックを作る」についてのお話をします。
Scratchのブロックパレットの左にあるカテゴリーの中に、「作ったブロック」という項目がありますね。この項目をクリックすると分かりますが、この部分をまだ操作していなければ、「ブロックを作る」というボタンだけがあります。ここでいう「ブロックを作る」は、一連の動作を一塊にして、新たに「ブロック」作るという作業を意味しています。
長いプログラムを書いていると、同じような内容の命令列を、何回も書くようなことが起こってきます。そこで、何回も出てくるプログラム上の命令列を、一つにまとめ、それを、動作中のメインプログラムから読みに行って利用することで、プログラムがすっきりすることは、想像に難くありません。
Scratch３では、新たに作るブロックに変数（プログラミング用語では引数（ひきすう）と言います。）を設定することができるようになっていますので、これを使えば、ずいぶん読みやすいプログラムになります。
このように自分で新たなブロックを定義する作業は、複雑なプログラムを組むときには、必要不可欠なスキルとなりますから、これを期に、習得していただければと思います。
詳しくは、Sample１のサンプルプログラムを展開して確認していただければと思います。
必要なのは問題を分解して、地道に解決していく根気強さです
Sample３の解説を見ても分かりますが、プログラミングという作業は、意図する動きを細かく分解し、それぞれ一つ一つを解決していくという作業になります。
ただし、決して退屈な作業ではなく、子どもたちにとっても楽しく思える作業だと思います。なぜなら、作ったプログラムはすぐに確かめられ、修正を重ねることで、自分の思い通りの動きにだんだんと近づいていっているという実感を強く持つことができるからです。
今回ご紹介した、Scratchによるプレゼン用スライドの作成は、本格的なものを目指せば、当然、複雑で地道な作業を必要とするものになります。しかし、プログラミングは、特に経験がものを言う世界です。是非、子どもたちにチャレンジしてもらい、必要なときに必要なプログラミングができるという技量、そして、プログラミングを問題解決に積極的に活用する意欲を育てていただければと、切に願っています。