![【徹底分析】初めてのスクラッチプログラミング](https://meetblog.net/wp-content/uploads/2021/02/scratch_game.png)
これからスクラッチプログラミングをはじめる人向け。
ここでは、実際にスクラッチ画面を使ってプログラミングを作成していきます。
現役のITエンジニアがスクラッチをていねいな説明で解説していきます。
どこのサイトよりもていねいな説明をこころがけて、さらにユーモアをもって説明いたします。
目次
1.初めてのスクラッチプログラミング②
![【徹底分析】初めてのスクラッチプログラミング](https://meetblog.net/wp-content/uploads/2021/02/kid_job_boy_teacher.png)
初めてのスクラッチプログラミング①の続編になります。
![【徹底分析】初めてのスクラッチプログラミング](https://meetblog.net/wp-content/uploads/2021/02/computer_school_boy-2-160x160.png)
では、スクラッチのサイトを開いてさっそく始めましょう。
参考 スクラッチサイトhttps://scratch.mit.edu/2.名前を動かしてみよう
![【徹底分析】初めてのスクラッチプログラミング②](https://meetblog.net/wp-content/uploads/2021/02/computer_woman4_laugh-1.png)
![プログラミングのプロ](https://meetblog.net/wp-content/uploads/2021/02/businessman_dekiru.png)
画面のうえにあるチュートリアルを押してみてください
![](https://meetblog.net/wp-content/uploads/2021/02/image-3.png)
![プログラミングのプロ](https://meetblog.net/wp-content/uploads/2021/02/businessman_dekiru.png)
次に説明するのは「名前を動かしてみよう」というチュートリアルのプログラムです。
名前を動かして、クリックするとしゃべるプログラムを作ってみましょう
ばしばし行きますのでついてきてください!
![](https://meetblog.net/wp-content/uploads/2021/02/image-4-1-1024x823.jpg)
1.1 アルファベットの追加
![プログラミングのプロ](https://meetblog.net/wp-content/uploads/2021/02/businessman_dekiru.png)
①「名前を動かしてみよう」のチュートリアルの画面があれば閉じてください。(なければ何もする必要ありません)
②スプライトのネコは使わないので、消しましょう
ネコを選んで、ごみ箱マークをクリックしてください。
![](https://meetblog.net/wp-content/uploads/2021/02/image-4-2-1024x459.jpg)
![がんばる君](https://meetblog.net/wp-content/uploads/2021/02/pose_necchuu_computer_man.png)
「チュートリアル」と「ネコ」が消えました。
文字を動かすには、まず何をすればよいですか?
![プログラミングのプロ](https://meetblog.net/wp-content/uploads/2021/02/businessman_dekiru.png)
まずプログラミングで動かしたい文字を選びます。
プログラミングで動かしたいものを「スプライト」と言いますので覚えておいてください。
①まず、右下のスプライト追加マークを押しましょう。いろいろな絵が出てきます。
![](https://meetblog.net/wp-content/uploads/2021/02/image-4-1024x461.png)
![プログラミングのプロ](https://meetblog.net/wp-content/uploads/2021/02/businessman_dekiru.png)
②「スプライトを選ぶ」ページが開きます。アルファベットを選ぶので、上の「文字」をクリックしましょう。
![](https://meetblog.net/wp-content/uploads/2021/02/image-5-1-1024x476.jpg)
![がんばる君](https://meetblog.net/wp-content/uploads/2021/02/pose_necchuu_computer_man.png)
アルファベットが出てきました!
なんだかワクワクしてきました!
何を選ぼうかな♪
![](https://meetblog.net/wp-content/uploads/2021/02/image-5-2-1024x467.jpg)
![プログラミングのプロ](https://meetblog.net/wp-content/uploads/2021/02/businessman_dekiru.png)
その調子です!がんばって!
自分の名前のイニシャル文字をクリックしてください
![がんばる君](https://meetblog.net/wp-content/uploads/2021/02/pose_necchuu_computer_man.png)
GANBARUなのでGを選ぶことにします!
「G」をクリックするとステージに追加されました。
やったぁ
![](https://meetblog.net/wp-content/uploads/2021/02/image-5-3-1024x467.jpg)
![](https://meetblog.net/wp-content/uploads/2021/02/image-5-1024x461.png)
1.2 クリックしたら音が鳴る
![プログラミングのプロ](https://meetblog.net/wp-content/uploads/2021/02/businessman_dekiru.png)
スプライト(文字)を押したら音がなるプログラムを作ってみましょう。びっくりしますよ。
![プログラミングのプロ](https://meetblog.net/wp-content/uploads/2021/02/businessman_dekiru.png)
①「イベント」をクリックしてブロックパレットに並ぶブロックを変えます。
②「このスプライトが押されたとき」ブロックをスクリプトエリアに持ってきてください。
![](https://meetblog.net/wp-content/uploads/2021/02/image-7-1024x460.png)
![プログラミングのプロ](https://meetblog.net/wp-content/uploads/2021/02/businessman_dekiru.png)
③「音」をクリックしてブロックパレットに並ぶブロックを変えます
④「終わるまでmeowの音をならす」ブロックを「このスプライトが押されたとき」ブロックの下にくっつけてください。
![](https://meetblog.net/wp-content/uploads/2021/02/image-8-1-1024x459.jpg)
![プログラミングのプロ](https://meetblog.net/wp-content/uploads/2021/02/businessman_dekiru.png)
ステージにあるイニシャル文字をクリックしてください
![がんばる君](https://meetblog.net/wp-content/uploads/2021/02/pose_necchuu_computer_man.png)
びっくり!「G」をクリックするとニャーと言いました!
「meow」はニャーと同じなんですね。ニャーではなく、他の音を出すことはできますか?
![プログラミングのプロ](https://meetblog.net/wp-content/uploads/2021/02/businessman_dekiru.png)
もちろんできます。スクラッチではいろいろなことができます。
画面上部の「音」をクリックして左下の「音アイコン」選んでください
いろんな音があり、試し聞きできるので好きな音を選んでください
①「音」をクリックします。
②「音アイコン」をクリックします
いろんな音を聞いて好きな音を選んでください
![](https://meetblog.net/wp-content/uploads/2021/02/image-9-1024x468.png)
![](https://meetblog.net/wp-content/uploads/2021/02/image-10-1024x461.png)
![プログラミングのプロ](https://meetblog.net/wp-content/uploads/2021/02/businessman_dekiru.png)
音を選んだら画面左上の「コード」をクリックしてもどり、
先ほど追加した音ブロックを見ると、音が選べるようになっています。
音を変えて、その通りに音が鳴るか、確かめてください。
![プログラミングのプロ](https://meetblog.net/wp-content/uploads/2021/02/businessman_dekiru.png)
④「コード」をクリックします。
⑤「音」を変えることができます
![](https://meetblog.net/wp-content/uploads/2021/02/image-11-1-1024x467.jpg)
1.3 アルファベットの追加2
![プログラミングのプロ](https://meetblog.net/wp-content/uploads/2021/02/businessman_dekiru.png)
次は、音ではなく色を変えてみましょう。
まず文字をふやしましょう。
★画像を挿入★
![](https://meetblog.net/wp-content/uploads/2021/02/image-12-1024x464.jpg)
![](https://meetblog.net/wp-content/uploads/2021/02/image-13-1-1024x460.jpg)
![がんばる君](https://meetblog.net/wp-content/uploads/2021/02/pose_necchuu_computer_man.png)
次は、GANBARUのAを選びます!
Aが増えました。
![](https://meetblog.net/wp-content/uploads/2021/02/image-13-1024x461.png)
![プログラミングのプロ](https://meetblog.net/wp-content/uploads/2021/02/businessman_dekiru.png)
プログラミングしたいスプライト(文字)を切り替えるときは、スプライトエリアのスプライトをクリックしてください
![プログラミングのプロ](https://meetblog.net/wp-content/uploads/2021/02/businessman_dekiru.png)
①プログラミングしたいAのスプライトをえらんでクリックします
![](https://meetblog.net/wp-content/uploads/2021/02/image-15-1024x461.png)
1.4 クリックしたら色が変わる
![プログラミングのプロ](https://meetblog.net/wp-content/uploads/2021/02/businessman_dekiru.png)
では、「このスプライトが押された時」「色の効果(こうか)を25ずつ変える」プログラムを作ってみましょう
![がんばる君](https://meetblog.net/wp-content/uploads/2021/02/pose_necchuu_computer_man.png)
あのー。色の効果(こうか)を25ずつ変えるってどういう意味ですか?
![プログラミングのプロ](https://meetblog.net/wp-content/uploads/2021/02/businessman_dekiru.png)
色の効果(こうか)とは、色合いのことで、スクラッチでは、
数字を増やしたり減らしたりして、色を変えることができるのです。
200まで増やすか、0にすると、元の色にもどります。
![プログラミングのプロ](https://meetblog.net/wp-content/uploads/2021/02/businessman_dekiru.png)
①「イベント」を選んで、②「このスプライトが押されたとき」をスクリプトエリアにもってきてください
![](https://meetblog.net/wp-content/uploads/2021/02/image-16-1-1024x459.jpg)
![プログラミングのプロ](https://meetblog.net/wp-content/uploads/2021/02/businessman_dekiru.png)
③「見た目」を選んで、④「色の効果を25ずつ変える」を「このスプライトが押されたとき」の下にくっつけてください
![](https://meetblog.net/wp-content/uploads/2021/02/image-16-2-1024x460.jpg)
![プログラミングのプロ](https://meetblog.net/wp-content/uploads/2021/02/businessman_dekiru.png)
ステージの「A」をクリックするたびに、色が変わるので、確かめてください。
![](https://meetblog.net/wp-content/uploads/2021/02/image-17-1024x280.png)
1.5 アルファベットの追加3
![プログラミングのプロ](https://meetblog.net/wp-content/uploads/2021/02/businessman_dekiru.png)
「文字を追加する」「色をかえる」ができました。
次は、文字を回転させてみましょう。
同じように一文字追加します
![](https://meetblog.net/wp-content/uploads/2021/02/image-18-1-1024x461.jpg)
![がんばる君](https://meetblog.net/wp-content/uploads/2021/02/pose_necchuu_computer_man.png)
次は、GANBAのNを選びます。Nが追加されました!
![](https://meetblog.net/wp-content/uploads/2021/02/image-18-3-1024x460.jpg)
![](https://meetblog.net/wp-content/uploads/2021/02/image-18-5-1024x460.jpg)
![プログラミングのプロ](https://meetblog.net/wp-content/uploads/2021/02/businessman_dekiru.png)
文字が重なっていたら、クリック&ドラッグして動かしましょうね
1.6 クリックしたら回転する
![プログラミングのプロ](https://meetblog.net/wp-content/uploads/2021/02/businessman_dekiru.png)
それでは「このスプライトが押された時」文字が「回転する」プログラムを作ってみましょう
![プログラミングのプロ](https://meetblog.net/wp-content/uploads/2021/02/businessman_dekiru.png)
①「イベント」を選んで、②「このスプライトが押されたとき」をスクリプトエリアに持ってきてください。
![](https://meetblog.net/wp-content/uploads/2021/02/image-18-6-1024x460.jpg)
![プログラミングのプロ](https://meetblog.net/wp-content/uploads/2021/02/businessman_dekiru.png)
③「動き」を選んで、④「15度回す」を「このスプライトが押された時」に下にくっつけてください。
![](https://meetblog.net/wp-content/uploads/2021/02/image-18-7-1024x455.jpg)
![がんばる君](https://meetblog.net/wp-content/uploads/2021/02/pose_necchuu_computer_man.png)
おどろいた!Mをクリックするとちょっとずつ回りますね。すごい楽しい!
![](https://meetblog.net/wp-content/uploads/2021/02/image-18-8-1024x457.jpg)
![プログラミングのプロ](https://meetblog.net/wp-content/uploads/2021/02/businessman_dekiru.png)
はい。クリックする度に15度右に回る、プログラムができました。これをもっと連続で回転するように、プログラミングしていきましょう!
![がんばる君](https://meetblog.net/wp-content/uploads/2021/02/pose_necchuu_computer_man.png)
ええー!そんなこともできるんですか!?すごい!
1.7 クリックしたらさらに回転する
![プログラミングのプロ](https://meetblog.net/wp-content/uploads/2021/02/businessman_dekiru.png)
くり返しブロックを使って、何度もクリックしなくても、もっと回転するプログラムを作りましょう!
![プログラミングのプロ](https://meetblog.net/wp-content/uploads/2021/02/businessman_dekiru.png)
「制御(せいぎょ)」を選んで、「10回繰(く)り返す」を「このスプライトが押されたとき」の下に持っていき「15度回す」をはさんでください。
ヒント:他のブロックにくっついてしまったら「10回繰(く)り返す」を動かして、やり直してください
![](https://meetblog.net/wp-content/uploads/2021/02/image-18-9-1024x460.jpg)
![がんばる君](https://meetblog.net/wp-content/uploads/2021/02/pose_necchuu_computer_man.png)
わあ!さっきより回転しましたね!
![プログラミングのプロ](https://meetblog.net/wp-content/uploads/2021/02/businessman_dekiru.png)
そうですね、15度回すを10回くり返しているので、150度回ったことになります。
10回ではなく、24回にすると一周しますよ。数字を変えていろいろ試してくださいね。
![がんばる君](https://meetblog.net/wp-content/uploads/2021/02/pose_necchuu_computer_man.png)
はーい。あとでやっておきます!
1.8 アルファベットの追加4
![プログラミングのプロ](https://meetblog.net/wp-content/uploads/2021/02/businessman_dekiru.png)
最後に、大きさを変えるプログラムに、ちょう戦しましょう。同じように、スプライトを追加してください
![](https://meetblog.net/wp-content/uploads/2021/02/image-18-10-1024x461.jpg)
![](https://meetblog.net/wp-content/uploads/2021/02/image-18-11-1024x461.jpg)
![がんばる君](https://meetblog.net/wp-content/uploads/2021/02/pose_necchuu_computer_man.png)
最後は、GANBARUのBを選びます。Bが追加されました!
![](https://meetblog.net/wp-content/uploads/2021/02/image-18-1024x459.png)
1.9 クリックしたら大きさが変わる
![プログラミングのプロ](https://meetblog.net/wp-content/uploads/2021/02/businessman_dekiru.png)
くり返しブロックを使って、文字の大きさを変えるプログラムを作りましょう。大きさも数字を使って変えられますよ。
![プログラミングのプロ](https://meetblog.net/wp-content/uploads/2021/02/businessman_dekiru.png)
①「イベント」を選んで、②「このスプライトが押されたとき」をスクリプトエリアに持ってきてください
![](https://meetblog.net/wp-content/uploads/2021/02/image-19-1-1024x459.jpg)
![プログラミングのプロ](https://meetblog.net/wp-content/uploads/2021/02/businessman_dekiru.png)
③「見た目」を選んで④「大きさを10ずつ変える」を「このスプライトが押されたとき」の下にくっつけてください
![](https://meetblog.net/wp-content/uploads/2021/02/image-19-2-1024x457.jpg)
![プログラミングのプロ](https://meetblog.net/wp-content/uploads/2021/02/businessman_dekiru.png)
⑤「制御」を選んで、⑥「10回繰り返す」で「大きさを10ずつ変える」ブロックをはさんでください
![](https://meetblog.net/wp-content/uploads/2021/02/image-19-3-1024x457.jpg)
![プログラミングのプロ](https://meetblog.net/wp-content/uploads/2021/02/businessman_dekiru.png)
元の大きさに戻すには、「見た目」をえらんで、ブロックパレットにある「大きさを100%にする」を直接クリックすると
元の大きさにもどりますよ。
![](https://meetblog.net/wp-content/uploads/2021/02/image-19-4-1024x459.jpg)
![プログラミングのプロ](https://meetblog.net/wp-content/uploads/2021/02/businessman_dekiru.png)
次に小さくするプログラムも追加しましょう
![プログラミングのプロ](https://meetblog.net/wp-content/uploads/2021/02/businessman_dekiru.png)
作ったブロックの下にもう一つ「大きさを10ずつ変える」と「10回繰り返す」を追加してください
「大きさを10ずつ」の10を、-10(マイナス10)にしてください
![](https://meetblog.net/wp-content/uploads/2021/02/image-19-1024x544.png)
![がんばる君](https://meetblog.net/wp-content/uploads/2021/02/pose_necchuu_computer_man.png)
マイナス10ですね!できました!大きさがビヨンビヨンになって面白い!
![プログラミングのプロ](https://meetblog.net/wp-content/uploads/2021/02/businessman_dekiru.png)
はい。マイナスをつけると小さくなります。10大きくなって、10小さくなるので、元の大きさにもどります。
![がんばる君](https://meetblog.net/wp-content/uploads/2021/02/pose_necchuu_computer_man.png)
GANBの文字がそれぞれクリックすると色が変わったり、大きくなったりするので面白いですね!
1.10 日本語の文字の追加
![がんばる君](https://meetblog.net/wp-content/uploads/2021/02/pose_necchuu_computer_man.png)
日本語の文字で同じことはできますか?
![プログラミングのプロ](https://meetblog.net/wp-content/uploads/2021/02/businessman_dekiru.png)
はいできます。スプライトは選ぶだけでなく、自分で作れるので実さいに作ってみよう。
①スプライトの追加ボタンにマウスをのせると、メニューがでるので、「描く」(えがく)を選んでください
②T(テキスト)マークを選んで、ここに文字を入力(ここでは水と入力した)
![](https://meetblog.net/wp-content/uploads/2021/02/image-20-1024x458.png)
![がんばる君](https://meetblog.net/wp-content/uploads/2021/02/pose_necchuu_computer_man.png)
文字が入力できました。でも小さいのです。。
![プログラミングのプロ](https://meetblog.net/wp-content/uploads/2021/02/businessman_dekiru.png)
矢印の選択マークを選んで、文字のまわりの丸いところをクリックしたまま、広げると大きくなります。
![](https://meetblog.net/wp-content/uploads/2021/02/image-21-1024x459.png)
![プログラミングのプロ](https://meetblog.net/wp-content/uploads/2021/02/businessman_dekiru.png)
画面左上の「コード」をクリックして戻ります。
あとは、これまでと同じようにプログラムを作おってみましょう。
![](https://meetblog.net/wp-content/uploads/2021/02/image-22-1024x460.jpg)
1.11 さらにちょう戦したい人は
![プログラミングのプロ](https://meetblog.net/wp-content/uploads/2021/02/businessman_dekiru.png)
プログラミングをしてきましたがどうでしたか?
![がんばる君](https://meetblog.net/wp-content/uploads/2021/02/pose_necchuu_computer_man.png)
楽しかったー
自分で指定したとおりに動くのがうれしかったです
![プログラミングのプロ](https://meetblog.net/wp-content/uploads/2021/02/businessman_dekiru.png)
もっとやってみたいと思った人は、その他のチュートリアルにも、ちょう戦してみてくださいね
先生のおすすめは、ひとまずこの3つ
「スプライトに動きをつける方法」
「背景の追加方法」
「滑らかに動かす方法」
さらにちょう戦したい人は、この2つのゲーム作りがおすすめです
「クリッカーゲームを作ろう」
「追跡ゲームを作ろう」
![](https://meetblog.net/wp-content/uploads/2021/02/image-23-1-1024x460.jpg)
![がんばる君](https://meetblog.net/wp-content/uploads/2021/02/pose_necchuu_computer_man.png)
はい。やってみます!
![プログラミングのプロ](https://meetblog.net/wp-content/uploads/2021/02/businessman_dekiru.png)
スクラッチを楽しんでね
![がんばる君](https://meetblog.net/wp-content/uploads/2021/02/pose_necchuu_computer_man.png)
はーい