こんにちは。キノコードです。
この動画は、プログラミングについて学んでいる小学生の皆さんに向けて作っています。
このレッスンでは、「スクラッチ」というものを使って、特に低学年の皆さんにぴったりなプログラミングを用意しました。
この記事の執筆・監修
テクノロジーアンドデザインカンパニー株式会社のCEO。
日本最大級のプログラミング教育のYouTubeチャンネル「キノコード」や、プログラミング学習サービス「キノクエスト」を運営。
著書「あなたの仕事が一瞬で片付くPythonによる自動化仕事術」や、雑誌「日経ソフトウエア」や「シェルスクリプトマガジン」への寄稿など実績多数。
プログラミングとスクラッチについて
まず初めに、「プログラミング」についてお話をします。
「プログラミング」というのは、コンピューターに命令をして、その通り動かせるようにすることです。
そして、そのコンピューターにこうやって動いてくれと書いた命令のことを「プログラム」と言います。
そして、その命令に使う言葉を「プログラミング言語」と言います。
今回、この動画で教える 「プログラミング言語」が「スクラッチ」なのです。
ちょっと難しい話でしたが、わかりましたか？
今の段階で、少しでもわかったら合格です。
「スクラッチ」は、絵や図を使ってかんたんに命令できるものなので、小学生の皆さんにとてもおすすめです。
「スクラッチ」で勉強すれば、大人がつかう難しい「プログラミング言語」、つまり、命令する言葉を作ることもできちゃいます。
そうすると、人間みたいな会話ができるコンピュータだって作れますし、ゲームだって作れます。
みんなが鉛筆と紙で解いている計算だって、プログラミングであっという間にとけちゃいます。
すごいですよね。
「スクラッチ」を学校でやったことがある人は、思い出しながら取り組むと復習になりますよ。
やったことがない人は、是非チャレンジしてみてください。
きっとすぐできるようになりますよ。
それでは早速、始めましょう。
めあての確認
今回のこの動画のめあては「アニメーションを作ろう」です。
「アニメーション」とは何だかわかりますか？
動く絵のことです。
例えば、「コナン」「ドラえもん」「鬼滅の刃」…
全部「アニメーション」と呼ばれます。
皆さんが知っているようなアニメーションを作るのはとても難しいので、今回は簡単な物を作っていきますよ。
最後にはこんなものができます。
ちょっと心配になりましたか？
大丈夫です、一緒にやってみましょう。
スクラッチの会員登録等基本操作
では、まず初めにスクラッチを開きます。
ここで、スクラッチで自分のアカウントを作ります。
学校でパソコンやタブレットを使って勉強している人は、わかると思いますが、アカウントとは、自分だけのページを作る、ということです。
まず、「スクラッチに参加する」をクリックします。
そして、ユーザー名を打ちます。
ユーザー名とはスクラッチ上でのあなたの名前です。
自分の本当の名前は入れてはいけません。
それから、アルファベットと数字、記号が少しだけ使えます。
打つのが難しい人は、おうちの人と一緒にやってみましょう。
パスワードも打ちます。
パスワードとは、知らない人が皆さんのふりをして、あなたのスクラッチを使えないようにする秘密の言葉のようなものです。
ユーザー名とパスワードは忘れないように紙に書いたり、写真に撮ったりしておくといいです。
「次へ」をクリックます。
住んでいる国を選びます。
英語で書いてあるので難しいです。
右側の四角をクリックしたままマウスを下に下げると下の国まで見れます。
「Japan」を選びます。
Japanは英語で日本のことです。
難しい人はおうちの人とやりましょう。
「次へ」をクリックます。
次に誕生日を入れます。
生まれた月と年を入れてください。
わからない人はおうちの人に聞いてみましょう。
次に性別を選んで入れます。
「次へ」をクリックします。
メールアドレスを入れます。
おうちの人と相談して入れてください。
「アカウントを作成する」をクリックします。
そして、「はじめよう」をクリックします。
すると、右上に自分のユーザー名が入ったページになりました。
さらに、さっき入れたメールアドレスにスクラッチからメールが届くので、開きます。
真ん中くらいにある青い文字をクリックします。
そして、「OK、let's go」の青いボタンをクリックします。
これでアカウントができました。
キャラクターを動かそう
では、まず初めにスクラッチを開きます。
「作る」をクリックします。
するとこのような画面になります。
そして、下にある動画は邪魔になるので、「×」をクリックして消しましょう。
右上にある四角い枠をステージと言います。
今、猫のキャラクターがいるところです。
ステージでは、プログラムした通りにキャラクターが動きます。
スクラッチでは、ステージにいるキャラクターのことをスプライトと呼びます。
覚えておいてくださいね。
スプライトは、猫やこうもり、恐竜などにもできます。
みなさんが好きなように選ぶことができますよ。
あとで、このスプライトの選び方を説明しますね。
また、プログラムは、真ん中の大きな白い場所で作ります。
ここは、コードエリアと言いますのでこれも覚えましょう。
さて、まずはこの猫のスプライトを使って、思い通りに動かしてみましょう。
歩く（近く→遠く）
初めに、右に動かしてみます。
「コード」タブの「動き」の中から、「10歩を動かす」というブロックを見つけてください。
そして、ブロックの上で、一度左クリックをしてみましょう。
スプライトが少し動いたのがわかりましたか？
もう一度やってみましょう。よーく見ていてくださいね。
この動きをさせたいので、ブロックをコードエリアにうつします。
ブロックの上で左クリックをしたまま、コードエリアまで引っ張ってきて、離します。
このマウスの動きをドラッグ&ドロップと言います。覚えておいてください。
コードエリアに持ってきたブロックを左クリックしてもスプライトを動かすことができます。
やってみましょう。
動かすことができました。
次に、動く距離を伸ばしましょう。
10歩だったのを100歩にしてみます。
10の部分にマウスの手のマークをもっていきます。
左クリックします。
すると薄い青色で10が囲まれます。
キーボードの「Backspace」キーを押して、10を消します。
それから、キーボードで「1・0・0」と打ちます。
もし、このように、数字の下に線がついて、四角い箱が出てきたら、この中で一番短い100を選びます。
さて、数字を増やしました。
どうなるでしょう。
どれくらい進むでしょうか。
ブロックを押して、確かめてみましょう。
さっきよりもたくさん進ませることができました。
向きを変える
今度は、スプライトの向きを変えてみます。
「15度まわす」というブロックをコードエリアにうつします。
さて、スプライトはどんな動きをすると思いますか？
少し考えてみましょう
（10秒）
どうでしたか？
考えることができましたか？
それでは答え合わせと一緒にやってみましょう。
まず、ブロックをクリックしましょう。
スプライトが回ったのがわかりましたか？
何度も押すと、どんどん回ります。
何度も押すと元に戻ってこれました。
もう一つの「15度回す」ブロックもコードエリアに持ってきます。
矢印が逆ですね。これを押すとどうなるでしょう。
反対に回りました。
さて、今の場合、スプライトは少しずつ回りました。
スプライトを一度にたくさん回すには、どうしたらいいと思いますか？
数字を変えると動きが変わりそうですよね。
15の部分をクリックします。
「Backspace」キーを押して、試しに「90」と打ってみましょう。
一度でたくさん回って、スプライトは下向きになりました。
二年生は算数で直角という言葉を勉強した人もいると思います。
直角は90度のことなので、スプライトは一度に直角の分だけ回ることができました。
数字をもっと大きくするともっと回すことができますよ。
ちなみに、「90度に向ける」というブロックを押すと、まっすぐの右向きに戻ります。
すぐに戻したいときはこれを使うと便利です。
組み合わせる
次は、少しレベルアップして、今の動きを組み合わせてみます。
コードエリアのブロックはつなげることができます。
つなぐと、動きが組み合わせることができます。
「100歩動かす」のブロックに「90度回す」ブロックをつけてみましょう。
←（ここで一つずつの動きを見せたい）
「90度回す」ブロックをドラッグして、「100歩動かす」ブロックの下に置きます。
ぴったりくっついたら成功です。
では、つなげたブロックをクリックして、スプライトを動かしますよ。
どんな動きになると思いますか？
考えることができたらクリックしてみましょう。
思った通りでしたか？
スクラッチでは、ブロックを二つつなげると、二つとも終わったところまでスプライトが動きます。
途中の動きは見えないのです。
もし、途中の動きを見たかったら、一つのブロックが終わった後に、スプライトが止まるブロックを入れてあげるといいです。
オレンジの「制御」と書いてあるタブをクリックします。
一番上に「１秒まつ」というブロックがあります。
これをコードエリアに持ってきて、「100歩動かす」と「90度回す」の間に入れます。
さて、どんな動きになるでしょうか。
動かしてみますよ。
このように動きの途中が見えるようになりました。
さて、ここで、「制御」の中の他のブロックもいくつか紹介します。
「ずっと」と書いてあるブロックを使ってみましょう。
さっき繋げたブロックに、くっつけてみます。
ドラッグして、コードエリアに持っていくと…
このようにどこにくっつけるか選ぶことができます。
今回は全部を囲むようにくっつけてみます。
さて、どんな動きになるでしょう。
このようになりました。
考えた動きと同じでしたか？
プログラミングの勉強では、このブロックを使うとスプライトがあんな風に動くんじゃないかな！と考えることがとっても大切です。
考えたこととスプライトの動きがぴったり同じだった人はすごいです。
違った人も、何回かやっていくとわかるようになります。
安心してくださいね。
では、これがなぜこのような動きになるのか説明をしますね。
まず、「100歩動かす」で前に進みます。
次に1秒待ってから、「90度回す」で回転します。
次に、最後までいったら、もう一度上に戻って「100歩動かす」の動きになり、あとはそれがずっと繰り返されます。
ストライプがずっと動いているので、黄色くなっている部分を左クリックをしてとめてあげましょう。
カスタマイズしよう
さて、今度は、スプライトを自分のお気に入りに変えてみましょう。
「コスチューム」タブをクリックします。
すると、左側に「コスチューム２」が出てきました。
このように、同じキャラクターでも違うポーズがあります。
好きな方を選んでください。
ステージにスプライトを増やしたいときは、コードタブをクリックして、一番初めの画面に戻します。
そして、右下の「スプライトを選ぶ」ボタンをクリックします。
好きなものを選んでクリックすると、ステージにスプライトが増えます。
それから、スプライトを自分の好きな色に変えることもできます。
色を変えたいスプライトをクリックします。
自分が選んだのが青くなったら、「コスチュームタブ」をクリックします。
「塗りつぶし」をクリックします。
「色」「鮮やかさ」「明るさ」を動かして、塗りたい色を作ります。
「塗りつぶし」をクリックします。
そして、塗りつぶしたい部分に矢印を持って行って、クリックします。
これで、色を変えることができました。
また、大きさも変えることができます。
コスチュームタブの画面でも、コードタブの画面でも、どちらでもいいです。←（動かして見せる）
右側の「大きさ」の数字を変えますよ。
まず、大きさを変えたいスプライトが青色になっていることを確認します。
次に、「100」の部分をクリックして青くします。
今よりも小さくしたかったら100より小さい数字にします。
試しに50にしてみます。
「Backspace」キーを押して数字を消します。
そして、50と入力。
ここでも一番短い50を選んでください。
数字を入れたら、どこでもいいので画面を一度クリックしましょう。
スプライトが小さくなったのがわかりましたか？
次は大きくしてみましょう。
「50」をクリックします。
大きくしたいので、100より大きい数にします。
試しに200にしてみましょう。
「Backspace」キーを押して数字を消します。
そして、200と打ちます。
どこでもいいので画面を一度クリックします。
大きくなりましたね。
これで自分の好きな大きさにできるようになりました。
もし、スプライトがいらないな、と思った時は、消すこともできます。
右下に自分がステージに出したスプライトが並んでいます。
消したいスプライトを選び、青くします。
すると右上に小さなゴミ箱のマークがでます。
これをクリックすると消すことができます。
スプライトをお気に入りにできたところで、これに合う絵を後ろに付けましょう。
今度も、コスチュームタブの画面でも、コードタブの画面でも、どちらでもいいです。
右下の「背景を選ぶ」をクリックします。
この中から自分の好きな絵を選びましょう。
今回はこの「ステージ」にします。
このように、変えることができました。
マイ水族館を作ろう
さて、ここまで勉強したみなさん。
「プログラミング、面白そうだなぁ。少しわかったなぁ。」と思えましたか？
最後に作品を作ってみましょう。
テーマは「マイ水族館を作ろう！」です。
自分のお気に入りの水族館を作ります。
どんな動物がいるといいかな？
どんな動きを付けたら面白い水族館になるかな？
考えながら、動画の続きを見たり、一緒にやってみたりしてください。
Lesson2
スプライトを決める
まず初めに、スプライトを選びましょう。
「スプライトを選ぶ」をクリックします。
上のボタンで、仲間ごとに探すことができます。
水族館なので、「どうぶつ」の仲間から探すと簡単です。
漢字が少し難しいですが、探せますか？
このボタンをクリックします。
下の方まで探してみましょう。
画面の右にある四角をクリックしたまま、マウスを下に動かすともっと下の画面を見ることができます。
または、マウスのホイールをくるくる回しても下の画面を見ることができますよ。
さて、皆さんなら水族館にどんな動物をおきますか？
好きな動物を選びましょう。
私は、魚を選ぶことにします。
このように、マウスを絵の上に持っていくと、色々なコスチュームがある場合は見ることができます。
魚は、オレンジ、青、しましま、黄色の４っつが用意されていますね。
決めたらクリックします。
水族館には色々な動物が欲しいのでもっとスプライトを増やします。
さっきと同じように「スプライトを選ぶ」ボタンをクリックします。
また動物のページを開きます。
カニにしてみます。
すると、ステージに二つのスプライトが登場しました。
まだまだスプライトを増やします。
次は、クラゲにしましょう。
それから、ふぐも使いましょう。
スプライトが重なっていますがドラッグして動かすことができます。
重なっていると見づらいので、バラバラにしておきます。
スプライトをお気に入りにする
次に、それぞれのスプライトをお気に入りに変えてみます。
魚は、さっき見た青のコスチュームに変更したいです。
どうやるか覚えていますか？
魚をクリックします。
「コスチューム」タブをクリックします。
左側に色々な魚が出てきました。
私は青い魚が好きなので青をクリックします。
すると、ステージの魚をオレンジから青に変えることができました。
次に、クラゲが他の動物より大きいので、少し小さくします。
大きさを変える方法、覚えていますか？
そうでした、クラゲをクリックして、100より小さい数字にするんでしたね。
私は「70」にします。
それから、そうですねえ…フグのひれの色を変えたいです。
コスチュームの色の変え方、覚えていますか？
さて、答え合わせです。
やって見せるので、よく見ていてください。
（やって見せる）
もう少し、色を変えてみましょう。
これで、お気に入りのフグができました。
次に、後ろに絵を付けましょう。
どこを押したら背景が出てくるのか、覚えていますか？
正解は、ここですよ。
合っていましたか？
さて、水族館に合う背景を探します。
「海中」ボタンをクリックして、好きな絵を選びましょう。
私は左のにします。
大分水族館っぽくなりましたね。
マイ水族館完成まで、もう少しですよ。
スプライトに動きを付ける
最後にそれぞれのスプライトを動かしますよ。
まず、フグをくるくる回します。
「コード」タブをクリックします。
どのブロックを使うか覚えていますか？
そうでした、これですね。
ずっと回っていてほしいので、「制御」の「ずっと」をくっつけます。
動きを見てみましょう。
回るのをゆっくりにしたい場合はどうしましょう？
数字を小さくしてみましょう。
これで、OKにします。
ちなみに、動きを止めたいときは、ブロックをもう一度クリックしてくださいね。
今は、動きを全部見ながらやりたいのでそのまま動かしておきましょう。
次に、魚です。
どのブロックを使うと泳いでいるようになりそうですか？（動きブロックへ）
「10歩動かす」と「ずっと」を組み合わせるとどうなるでしょう？
試しに動かしてみますよ。
う～ん、これだと、魚が見えなくなってしまって困りますね。
どれかいいブロックはないかな？
「どこかの場所へ行く」を使うとどうなるでしょう？
これだと速すぎますね。
他にいいのはないかな？
「１秒でどこかの場所に行く」を使ってみたらどうでしょう。
これにしましょう。
今みたいに、動かしながら、自分の思った通りの動きに近づけてみましょうね。
プログラミングは組み合わせです。
組み合わせると複雑な動きだってできるようになりますよ。
ちなみに、ブロックを消したいなと思った時は、ブロックがあるほうへ消したいブロックをドラッグ&ドロップするといいです。
さて、次はカニを動かしましょう。
カニは地面を歩かせたいですね。
カニも勝手に動いていてほしいので、「ずっと」は決まりです。
いい動きがあるでしょうか。
右に行ったら左に戻ってくるように動かしたいです。
「端についたら跳ね返る」というブロックがあります。
これを使ってみましょう。
あれ、これだけでは動いてくれません。
動いてくれるようなブロックを付け足さないといけないみたいです。
どうしたらいいでしょう？
「10歩動く」を使ってみましょうか。
さて、どんな動きになるでしょう。
うーん、これも悪くはないですが、足が地面につくようにしたいです。
ちょっと難しそうですがこのブロックを使ってみましょう。
「ｘ座標を10ずつ変える」というブロックです。
ｘという字はアルファベットです。
３年生で初めて習います。
６年生の算数で使います。
「X座標」は、なんと！！中学生で習います。
低学年の皆さんにはちょっと難しいですが、覚えてしまえば簡単です。
見ていてくださいね。
「X座標」は横に動かしたいときに使います。
「Y座標」は縦に動かしたい時です。
今は、横に動かしたいので、「X座標」を使います。
さて、この組み合わせだとどうなるでしょう。
これだと青い魚と同じになってしまいますね。
戻ってきてほしいので、もう一つブロックを足して、数字を変えましょう。
右に動くときは、算数でいつも使っている数字を入れればいいです。
左に動かしたいときは、「マイナス」を付けます。
皆さんはいつも「ひきざん」で使う記号ですね。
さて、これだとどうなるでしょうか。
あれ？ボタンは反応しているのに、カニが全然動きません。
どうしてでしょう。
間の動きが見えないからです。
「一秒待つ」を付け足してみましょう。
動くようになりました。
でも何だか変ですね。
左側にいる時間が短いです。
左に移動した後にまた１秒待たせましょう。
これで、「右に動く」「待つ」「左に動く」「待つ」となってゆっくり動くようになりました。
もう少したくさん動かしたいですね。
そんな時はどうするんでしたか？
数字を大きくするんでしたね。
試しに100にしてみましょう。
動きはこれに決めます。
右側の岩の上を動いて欲しいのでカニがスタートする位置を変えておきます。
ドラッグして移動します。
これでOKです。
最後に、クラゲです。
今までの生き物たちと違う動きにしたいです。
どのブロックを使いましょう。
「見た目」が変えるようにしましょう。
「見た目」をクリックします。
「コスチュームをjellyfish-dにする」を使ってみましょう。
コスチュームを選べそうですね。
これはどんなコスチュームだったか確かめます。
白いクラゲでした。
これが気に入ったので、このままにしましょう。
これに「ずっと」を組み合わせます。
でもこれだと、白いクラゲにしかなりません。
初めに見ていた肌色のクラゲが白いクラゲになるようにしたいです。
さて、どうするかというと・・・
もう一度「見た目」をクリックして、aのコスチュームも選びます。
これだと（やって見せる）やっぱりコスチュームが変わりません。
どうしましょう？
ヒントです。
「肌色」「待つ」「白色」「待つ」となればいいんですよね。
さて、どのブロックが必要かわかりますか？
そうですね、「１秒待つ」ブロックでした。
二つ使いますよ。
これで、マイ水族館完成です。
まとめ
さて、今回のレッスンはここでおしまいです。
皆さんは、スプライトを選んで、背景を付けて、動かせるようになったはずです。
今日紹介したスプライトの動きはほんの少しです。
自分でやってみて、面白い動きをたくさん発見しましょう。
皆さんもぜひ自分だけの「マイ水族館」を作ってみてください。
また、水族館を作ることができたら、違うテーマにも挑戦しましょう。
例えば…「動物園」ならどうですか？
クマ、キリン、ウサギ・・・動きはどうしますか？
「宇宙」だったらどうでしょう。
宇宙船、見たこともない惑星、宇宙人・・・どう動かしますか？
考えるだけでワクワクしてきましたね。
是非チャレンジしてみましょう。
では、また次のレッスンでお会いしましょう。
