Scratch3.0について(子供向け)


#はじめに
**「Scratch3.0」**の情報をあまりネットで見かけなかったので説明書を作りました。
夏休みの自由研究の題材をそのままQiitaにあげただけなので、子供向けです。

#初めの10歩
まず**「Scratch3.0」**のURLを開いてください。URLは、
**https://beta.scratch.mit.edu/**
です。
 **「Scratch3.0」**のURLを開くと、このように表示されますが**「試す!」**をクリックすれば
普通に使えます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/285427/e874cbf5-7970-02a8-d930-5193e597c338.png)
 **「今はやめておく」**をクリックすると Scratch2.0のページにいけます。 
ここでは、**「Scratch3.0」**を使います。
クリックした後にこの画面が表示されたら大丈夫です。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/285427/7ad3e6df-bc16-9864-8281-87070b053895.png)
 この枠がプログラムを作るところです。左からブロックをドラッグして、右で並べてプログラムを作ります。 上のタブで画面を切り替える事ができます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/285427/f7138b85-6201-c3d7-9c58-4b329a922817.png)
この枠がプログラムが実行されるところです。後で詳しく説明しますが、左上の緑色の旗をクリックすると、プログラムが実行されます。右上のボタンでこの枠の大きさを変えることができます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/285427/d4461803-1c40-e32a-2651-d6f24a9c3a9b.png)
 この枠でスプライトの切り替えや設定、選択、ステージの切り替え、選択ができます。ここで選択したスプライトやステージのプログラムがさっき紹介したプログラムを作る枠に表示されます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/285427/de9a4a2d-a3ad-fad9-f0f9-d6f52a7312ec.png)
説明は、このくらいにして実際にプログラムを作っていきましょう。まず、初めに**「10歩動かす」**というブロックをドラッグして、置いてみましょう。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/285427/a8104eda-a7c0-3a1b-ba0e-1f12a2991a95.png)
次に**「イベント」**というところをクリックして
**「 ![image.png](https://qiita-image-store.s3.amazonaws.com/0/285427/353c6418-a3eb-3bae-544e-e73e53d9f679.png) がクリックされたとき」**を**「10歩動かす」**にくっつけます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/285427/a6bbbc5a-d92e-0706-5d7d-1210a322b81c.png)
次に ![image.png](https://qiita-image-store.s3.amazonaws.com/0/285427/353c6418-a3eb-3bae-544e-e73e53d9f679.png) をクリックすると、さっき作ったプログラムが実行されます。そうすると猫が10歩右に進むと思います。**「10歩動かす」**というのは向いている方向に対して、10進むという意味です。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/285427/4a2c5b1a-fe26-eaa4-7014-eb85d42b3859.png)
実は、Scratchでは、プログラムをクリックすることでも、実行ができます。今回は、
**「 ![image.png](https://qiita-image-store.s3.amazonaws.com/0/285427/353c6418-a3eb-3bae-544e-e73e53d9f679.png) がクリックされたとき」**がついていますが、ブロック単体でも実行できます。
##ブロックの簡単な説明
####スプライトの移動

上の二つのブロックは、指定したところへ瞬間移動します。次の二つは、指定した秒数かけて指定したところへ移動します。そして、x座標、y座標に加算してその座標に瞬間移動します。最後に下の二つは、x座標とy座標に分かれてるだけで上のと一緒です。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/285427/32446b8c-660d-d6a6-845e-2eaf8030b18a.png)

####スプライトの回転

上の二つのブロックは今の角度に加算して回転させて、中央の二つは指定した角度や、ものにスプライトを回転させます。例えば**「何かへ向ける」**を使えば追尾ミサイルみたいなのが作れます。一番下は回転方法を制約したりできます。下から二番目のブロックは**「10歩動かす」**と一緒に使うと、スプライトが枠の中を跳ね返りながら、動きます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/285427/08bd32d8-d2f3-efc5-bf3e-8101b05ec1b9.png)　![image.png](https://qiita-image-store.s3.amazonaws.com/0/285427/67f91a78-9808-91f8-6879-67ec3c927ffa.png)

#スプライトについて
初めの状態だと猫のスプライトが一つあるだけですが、![image.png](https://qiita-image-store.s3.amazonaws.com/0/285427/33bc7f71-e207-b433-c4e2-b305b57597f4.png)をクリックするとデフォルトで用意されたスプライトが追加できます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/285427/2bf89786-1b43-e4c6-3af5-24baab99f2e2.png)
デフォルトだけでとても種類があって、それぞれいくつかの絵があってアニメーションも出来るようになっています。上のところで、表示の絞り込みができます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/285427/87f7fbc2-0f2c-edad-4782-85856eca0d7d.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/285427/33bc7f71-e207-b433-c4e2-b305b57597f4.png)の上にカーソルを置くとこのようにスプライトの追加方法を選択できます。上から、パソコンから読み込み、デフォルトからランダム、自分で描くとなっていて、一番下は![image.png](https://qiita-image-store.s3.amazonaws.com/0/285427/33bc7f71-e207-b433-c4e2-b305b57597f4.png)と同じです。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/285427/10e99a00-2e0c-61f1-2fa3-83bd7402a044.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/285427/b9960acb-5542-53cb-506a-868946c308ad.png)のところをクリックすると、スプライトのところに**「Empty」**というのが追加されて、上のタブが**「コード」**から**「コスチューム」**に変わったと思います。ベクター形式とビットマップ形式の両方が使えて、簡単な絵や図ならすぐにかけます。使い方はとても簡単です。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/285427/2dd2fa1c-f04b-1ebd-214e-8c69b3a4c729.png)
スプライトは**「コスチューム」**と呼ばれる絵を沢山持つことができ、それを一定間隔で切り替えることで、アニメーションをすることができます。一定間隔の動作は、繰り返しと、何秒待つを使います。文字列のコスチュームを用意して、一つのスプライトでStartとGameOverの両方を表示させる事も可能です。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/285427/b130d264-6173-c7b5-bf40-798179f25c91.png)　![image.png](https://qiita-image-store.s3.amazonaws.com/0/285427/a6a80f2d-b11e-cb29-5fd4-4cf29ba02e77.png)　![image.png](https://qiita-image-store.s3.amazonaws.com/0/285427/fe495983-9493-ecbf-2a94-5e25e8da0ec1.png)　![image.png](https://qiita-image-store.s3.amazonaws.com/0/285427/14ebbf2c-9f5d-10e6-9bfb-1500b9553fcf.png)
#音と見た目と大きさ
####見た目と大きさ

Scratchでは、スプライトに画像効果をつけることができます。猫にいろいろな効果をつけたら凄いことになりました。こうやって遊ぶだけでも楽しいです。効果の詳しい説明はしませんが、自分で試してみてください。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/285427/27c1edfe-00e6-66e2-86ce-a3956572178f.png)![image.png](https://qiita-image-store.s3.amazonaws.com/0/285427/ff2d3d27-2358-f118-35f8-f901e1b34e69.png)
**「こんにちは!と言う」**ブロックを使うと、スプライトの上に吹き出しがでて、こんにちは!と文字が表示されます。**「うーん...と考える」**ブロックを使うと、言うブロックと違う吹き出しでうーん...と文字が表示されます。違いは、吹き出しが違うだけです。何秒がついているブロックは、その秒数で消えますが、ついていないブロックはプログラムが停止するか、吹き出しが更新されるまで消えません。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/285427/9a724b34-1e4e-cf88-e932-342b3276cb08.png)　![image.png](https://qiita-image-store.s3.amazonaws.com/0/285427/27290ed7-f0ee-e458-0e24-77a88ab1d671.png)![image.png](https://qiita-image-store.s3.amazonaws.com/0/285427/c8a163d2-078a-c2dd-4b76-ebb41fd34a3e.png)

##ブロックの簡単な説明
####スプライトの見た目を変更
上二つのブロックは、前の方を参照してください。次のブロック二つは、スプライトの大きさを変えることができます。その次は、効果をつけるブロックとすべて消すブロックです。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/285427/23f1b031-8df7-7914-13f2-ea4833d5fa6c.png)
####層の移動と表示、非表示
スプライト同士の重なりを指定することができます。Startなどの文字がほかのスプライトの下に表示されると困るように使いどころはたくさんあります。下二つのは、スプライトの表示、非表示を切り替えるブロックで、幽霊効果でも同じようなことができます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/285427/e7da06d2-a657-546d-ee8b-7fc4a831e143.png)　　![image.png](https://qiita-image-store.s3.amazonaws.com/0/285427/60da3521-0f36-a658-547e-0d28a57db3d3.png)
####音と音楽
まず、上の**「音」**タブをクリックすると、こんな画面になります。どのスプライトや背景を選択していても**「音」**タブの表示は変わりません。1番始めは、ランダムな音が一つ入っています。ここでは、スプライトと同じように音の加工ができます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/285427/043ec60f-c7f9-8ece-483c-38d1346d1c60.png)
左下のボタンから音を追加することができます。上から三つ目のボタンはパソコンやスマートフォンのマイクから録音する事が出来ます。他のボタンは、スプライトと同じです。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/285427/f485321d-f302-1694-5eb5-723f61bf2c2b.png)![image.png](https://qiita-image-store.s3.amazonaws.com/0/285427/e08180e7-e09f-a59a-0b8c-4a1300150c5e.png)
##ブロックの簡単な説明
####音を鳴らす、音量を変える
上の三つは音を鳴らすか鳴らさないかです。終わるまで鳴らすというのは、繰り返すわけでは無く、音が鳴り終わるまでプログラムがそのブロックで止まります。下の二つは、音量を変えるブロックです。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/285427/030a0121-07bf-c755-d3ef-704d895a450a.png)

####音の効果をつける、なくす
- ピッチ
ピッチ効果は、音の高さを変えます。マイナスも使えます。

- 左右にパン
左右にパン効果はステレオの場合に効果があります。音を再生する左右の位置を指定できます。マイナスも使えます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/285427/b66b8798-1c08-8043-1ba0-d65f20a8fd6b.png)
---
音楽は**「Scratch3.0」**では拡張機能になりました。左下のボタンを押すと拡張機能を選択できます。詳細は拡張機能の紹介で説明しますが、音楽はここで説明します。ボタンを押すと、このような画面になります。そして、音楽のところをクリックすると、拡張機能を追加できます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/285427/29e27284-9498-b1e8-c700-70615a2ef627.png)			  　　![image.png](https://qiita-image-store.s3.amazonaws.com/0/285427/5977cf91-e7e5-5bef-0fbd-64565041d9f8.png)

このようにブロックの1番下に追加されたら追加完了です。普通のブロックと同じように使うことができます。一番上は音の高さのない楽器の音を、上から三番目は60を真ん中のドとして一上がるごとにレ、ミと上がっていく音の高さのある楽器の音をならせます。テンポは一拍の長さを指定します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/285427/bbcc2c39-57f9-ab05-73bc-b11e7234a67b.png)

#ステージについて
ステージとは、動かせない1番後ろに表示されるスプライトのような物です。ただしスプライトでいうコスチュームのことをステージでは背景と言います。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/285427/9af0466f-1edf-4242-3ec7-29c66a9e9129.png)

それに加えて、背景はどのスプライトからでも変更することができます。タイトル画面、ゲーム画面などそれぞれ背景を変えることができますが、障害物など当たり判定をつけたい物は、背景では無く、スプライトを使ってください。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/285427/6937359d-db9c-357b-f37b-15579a64a2a3.png)

####背景を変えるブロック
上のブロックは指定した背景、次の背景、前の背景、ランダムな背景に変えます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/285427/0622d13a-f927-d7ae-7f5d-0b0c29d3670f.png)

#変数と演算
####変数
変数とは、データを保存しておける箱のようなものです。
Scratchでは数値などを入力するところにはめることで変数を使えます。変数は**「変数を作る」**を押すと作れます。名前を入力することで変数を作る事ができます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/285427/b9dedca3-3d88-14a7-d7cd-dab27ba758f3.png)　![image.png](https://qiita-image-store.s3.amazonaws.com/0/285427/5f95b616-9e43-9f6e-61f6-5bbde92c986d.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/285427/395df3af-3e6d-fbb3-4c4f-5fc33fda25eb.png)

変数を使うとデータに名前をつけることができ、そのデータがなにを示しているのかをわかりやすくできます。そのほかにも同じデータを繰り返し使えたり、変数を使うと沢山の利点があります。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/285427/efd3cbc4-4a5f-9ba2-c0a5-ba8cc0e92a78.png)

Scratchでは、変数をそのまま表示させることができますが、今の**「Scratch3.0」**では変数の表示状態を保存することができないので、この機能を使うことはできません。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/285427/71dc1ca3-2291-77c9-03c5-688cbffb59e6.png)　![image.png](https://qiita-image-store.s3.amazonaws.com/0/285427/76813aa8-d0c7-c08b-a47c-62a4f9a2c769.png)
これらは、変数と同じように使えるブロックです。値がシステム側で決まっていて、変えることはできません。取得できるだけです。見た目でそれぞれの役割はわかると思います。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/285427/7c7916c2-cd08-99b9-7a7c-b3c24e4b381f.png)![image.png](https://qiita-image-store.s3.amazonaws.com/0/285427/0b429e65-d30c-0879-609f-d85432178532.png)
例
![image.png](https://qiita-image-store.s3.amazonaws.com/0/285427/e10e7821-88e7-db7c-3147-6a485d41e9a4.png)
####演算
演算とは、計算することです。+-×÷の四則演算や乱数生成、余り、四捨五入、切り上げ、切り下げ、絶対値などの数値の簡単な計算から三角関数、対数、平方根などの本格的な数学までいろいろあります。
それに、数値の計算だけで無く、文字列の連結、文字列から一文字を抽出、文字列の長さなど文字列の計算もあります。また、六角形のブロックはtrueかfalseの真と偽で結果を返します。それは、つぎの6章で説明する条件の時に詳しく説明します。
![2.png](https://qiita-image-store.s3.amazonaws.com/0/285427/449e51a0-09f6-869e-3a2c-9cb47541c8c9.png)![1.png](https://qiita-image-store.s3.amazonaws.com/0/285427/f3913c4d-e5f7-0d16-c905-207b8d37de8d.png)
繰り返しと条件と入力
####繰り返しと条件
繰り返しは決まった回数同じ事をしたいときや、最初から最後まで同じ事をしたいときに使います。また、繰り返しのスピードが早すぎる時は、何秒待つで例えば0.1秒、0.5秒、1秒を繰り返しの最後にブロックを置くと、一定の時間で繰り返します。
**「止める」**ブロックはプログラムを停止できます。繰り返しや何か動作の途中でも強制的に停止します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/285427/858bef68-4dac-6b9b-9b90-0ef602d5f600.png)　![image.png](https://qiita-image-store.s3.amazonaws.com/0/285427/72cf3514-2a58-e42e-a585-e72575c764e4.png)
先ほど説明した六角形の条件ブロックを使うと、その条件が合うときにある動作をしたり、条件が合うまで待ったり、条件が合うときと合わないときで動作を切り替えたり、条件が合うまで繰り返したりできます。

---
条件ブロックでも、変数と同じようにシステム側で値が決まってるブロックがあります。触れたブロックはとてもよく使います。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/285427/cd2ea236-c013-2771-1ea6-bf0eb6510be3.png)

調べる項目にある特殊なブロックを紹介します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/285427/5f93da55-8b7d-366f-c6ce-7fabbb58b26a.png)
**「あなたの名前は何ですか?と聞いて待つ」**
プレイヤー側の反応を待って、その答えを**「答え」**ブロックに入力します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/285427/0d62a078-a63a-85da-dd5f-c2d43e0ead80.png)
**「ドラッグできるようにする」**
画面を大きくして、遊んだ時にドラッグできるようにするブロックです。設定をしないままではドラックできません。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/285427/44944be0-c133-acd0-f643-96980fbde7b1.png)
**「タイマーをリセット」**時間を計るためのタイマーをリセットします。タイマーの時間は**「タイマー」**ブロックで取得できます。タイムアタックなどに使えます。

#イベントとクローン
Scratchでは、このイベントブロックからプログラムが実行されます。基本的には**「 ![image.png](https://qiita-image-store.s3.amazonaws.com/0/285427/353c6418-a3eb-3bae-544e-e73e53d9f679.png) がクリックされたとき」**を起動と考えてプログラムを作ります。**「新しいメッセージを送る」**ブロックはほかのスプライトや自分に向けて送ることができます。メッセージは追加できますが、そのメッセージはデータを送るという意味ではなく、イベントが発生したことを伝えるだけです。データを送りたい場合は、ほかに変数を用意してイベントを送る前にデータを設定してからイベント受け取った時にその変数を取得するとデータも送れます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/285427/461f7cbe-7dee-540a-c982-1386a9851a96.png)　![image.png](https://qiita-image-store.s3.amazonaws.com/0/285427/5030526b-a24c-29b2-b4b3-ec18fb796efb.png)
クローンはスプライトの複製です。同じように動くかつ、沢山の使う時にクローンを使います。例えば、シューティングゲームの敵や、弾などに使います。それ以外でも残機がある時は同じ処理をするので、自機でもクローンを使ったりします。

#ブロックを作る
Scratchでは、自分でブロックを作ることができます。ただし、Scratchができることしかできません。ブロック名を決めて**「OK」**を押すとプログラムを作る枠に**「定義ブロック名」**というイベントブロックが追加されます。**「ブロック名」**ブロックを使うと、イベントが発生して**「定義ブロック名」**につながっているブロックが実行されます。
ブロックを作る意味はたくさんありますが、まず、変数と同じようにそのプログラムに名前をつけることができます。そして**「画面を再描画せずに実行する」**にチェックをいれると、プログラムの動作スピードが速くなります。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/285427/28b5da1d-2ac6-2560-e276-1d514b84d860.png)　![image.png](https://qiita-image-store.s3.amazonaws.com/0/285427/9166d833-b6c9-9165-184d-7fed08367aeb.png)　 ![image.png](https://qiita-image-store.s3.amazonaws.com/0/285427/4d86a10f-f591-4a1b-9793-9236811ee7d5.png)

#拡張機能の紹介
拡張機能は3章で紹介した音楽など、Scratchを拡張する機能です。音楽やペンのようにScratch2.0では標準機能だったものが拡張機能になったものもあります。また、ビデオモーションセンサーやGoogle翻訳など**「Scratch3.0」**から追加された拡張機能もあります。そして、ほかのロボットなどとの連動機能もあります。**micro:bit**、**LEGOMINDSTORMSEV3**、**LEGOWeDo2.0**が今は使えます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/285427/5359d349-7cdc-36e1-5650-2e413930a9c4.png)　![image.png](https://qiita-image-store.s3.amazonaws.com/0/285427/c66b870a-0774-0521-33c9-528d62734428.png)

####Google翻訳
Google翻訳は、追加ブロックが少なくて、機能が簡単なので説明します。追加されるのは**「こんにちはを言語に翻訳する」**ブロックと**「言語」**ブロックです。この二つのブロックを組み合わせて使うと、簡単に多言語に対応できます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/285427/e1b6fb4c-ab30-3f78-a6be-b5fb8c196009.png)


#作品を作ろう
これまでの学習したことを応用して何か作品を作ってみましょう。Scratchのページの**「見る」**というところから投稿された作品を見ることができます。そして、その作品のURLをコピーして**「Scratch3.0」**に入力すると作品プログラムも見れます。ほかの作品を見ると、とても勉強になると思います。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/285427/dc2d4644-5c6f-5452-1d94-d04a59e7b90a.png)　![image.png](https://qiita-image-store.s3.amazonaws.com/0/285427/21a3b355-112e-07dc-ffc8-8e5c5a4914a1.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/285427/6cde1b8f-1c74-3fc6-da06-f023a19472fe.png)　　　　　　　![image.png](https://qiita-image-store.s3.amazonaws.com/0/285427/fc84ca91-1114-873d-aa49-69dc6c91ecc3.png)

####保存と読み込み
作品ができたら、保存しましょう。**「Scratch3.0」**では**「コンピュータに保存する」**から保存をすることができます。逆に、作品を作り直したり、遊びたいときは**「コンピュータから読み込む」**からファイルを選択して、読み込むことができます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/285427/488420ff-089d-e2e5-d4b8-8046e80d7c41.png)![image.png](https://qiita-image-store.s3.amazonaws.com/0/285427/e8ae61a1-22af-589f-62ce-a02e1265c68b.png)

#おわりに

これで**「Scratch3.0」**の説明を終了します。長い説明を最後まで読んでくださりありがとうございます。でも、まだScratchには紹介しきれなかった機能やブロックがあります。その機能やブロックはScratchを遊んで、発見してみてください。そして、発見したことで遊んでみたり、それを応用してゲームを作ったりしてみるととても楽しいです。Scratchは沢山の可能性を秘めてると思います。