記事の詳細

これまでのシリーズはこちら

初心者が学ぶ子ども向け教育プログラミング言語Scratch(スクラッチ)の使い方 その1【Scratchをはじめよう】
なーんだかうちの社員みんなプログラミングだのITだの難しいこと言ってますけども、やってくれている人おらんでないですか。初心者はですねぇ、本を紹介されたって日本...
初心者が学ぶ子ども向け教育プログラミング言語Scratch(スクラッチ)の使い方 その2【自分の名前を動かそう!】
Scratchはオフラインでも使えます。オンラインの場合https://scratch.mit.edu/上記を押してサイトに行き「作る」を押すと始まるオフラインの場合「Scratch2.0」というエ...

ScratchのStep by Stepを3回まで終えてわかったこと

初心者中の初心者である私がよもや三回まで耐えられるとは思っていなかったのですが、ここまでやってわかったことをまとめてみます。

1.Scratchは「何を」「どのように」「どうする」で成り立っている

まるで日本語の「主語」「述語」のような関係ですが、Scratchにおける動作というのは基本的にこの三つの要素で成り立っています。そこにそれぞれブロックが当てはめられ、その通りに動作するわけですね。

  • 「スクリプトを」「10歩動かす」
  • 「スクリプトの色を」「25ずつ」「色を変える」
  • 「スクリプトのコスチュームを」「次のコスチュームに」「変える」

どの動作も3ワードずつくらいで1センテンスが構成されているようです。これからきっとこのセンテンスが長くなっていくんだろうなー。このワードがブロック単位で、センテンスがそれで構成された大きなブロック、ということです。視覚的に非常にわかりやすいですね。

2.Scratchは1センテンスをどうするか、というのも制御できる。

いわゆる「if文」といわれているものにあたるのでしょうが、上記で作られた1センテンスがそのまま1ワードの役割を果たすこともあるようです。

  • 「1センテンスを」「10回繰り返す」
  • 「1センテンスを」「1秒待って」「1センテンスを」「1秒待つ」

のような使い方ができるわけですね。
大きなブロックを構成した時、それもまたブロック、といわんばかりに動作を後付けすることができる、ということです。ううん言語化すると難しい。
ひとまずこの2点をおさえたうえで、色を変えたり、音を鳴らしたりすることができると理解しました。それでは本日のStep by Stepに取り掛かりましょう!

Make It Fly | 飛ばせよう!

子ども向けプログラミングScratchをやってみよう!【空を呼ぶ】

Choose a character and make it fly!
キャラクターを選んで飛ばそう!

画面に出ているキャラクターアニメーションほどがっつり作りこむことはできないようですが、頑張ってユーキャンフライしてみましょう。

Choose a Character | キャラクターを選んでね

You can make anything fly!
Click the icon that looks like this to choose a character:
Click the ‘Flying’ theme, then select the character you want:
Or, click the paintbrush to draw your own character.
Want a character that looks like you? Make your own avatar on the Powerpuff Yourself website.
Then, click the folder icon to upload the image from your computer.

Want to delete a character? Click the scissors tool then click the character.

Tip: In Scratch, characters are called ‘sprites’.

どんなものでも空を飛ばせることができるよ!
こんな感じのアイコンをクリックして、好きなキャラクターを選んでね。
「フライング(Flying)」のテーマをクリックして、自分の好きなキャラクターを選ぼう!
ペイントブラシをクリックして自分のキャラクターを描いてもいいよ。
もしこんな感じのキャラクターがほしかったら、Powerpuff Yourselfのウェブサイトでアバターを作ってね。
アバターを作って自分のパソコンに保存したら、フォルダアイコンをクリックすることでScratchに画像をアップロードすることができるよ。

キャラクターを消したいときにははさみツールをクリックしたあと、キャラクターをクリックしてね。

※Scratchではキャラクターを「スプライト」って呼ぶよ!

さすがに四回目ともなると文字量がすごいことになります。ガチ日本語版になるのはまだまだ先かもしれませんね。

ちなみにPowerpuff Yourselfのサイトはこちらです。
https://powerpuffyourself.com/#!/ja

頑張って作ってみたのがこちら

子ども向けプログラミングScratchをやってみよう!【空を呼ぶ】

ハグモンスターらしいです。
でも今回は使いません。
ねこちゃんフライです。

子ども向けプログラミングScratchをやってみよう!【空を呼ぶ】 子ども向けプログラミングScratchをやってみよう!【空を呼ぶ】

はさみを使ってもともとのねこちゃんにご退場願いまして、絵を描く場合は参考はこちらをどうぞ

初心者が学ぶ子ども向け教育プログラミング言語Scratch(スクラッチ)の使い方 その2【自分の名前を動かそう!】
Scratchはオフラインでも使えます。オンラインの場合https://scratch.mit.edu/上記を押してサイトに行き「作る」を押すと始まるオフラインの場合「Scratch2.0」というエ...

Prepare to Fly | 飛ぶ準備をしよう!

Build a script to tell your character to say something:
You can type in your own words.
Click the green flag to start your script:
Your script will look something like this:

キャラクターに何か言わせるスクリプトを組んでね!
自分の言葉で入力することができるよ。
緑の旗をクリックするとスクリプトが始まるよ。
こんなふうになるよ。

子ども向けプログラミングScratchをやってみよう!【空を呼ぶ】

スクリプト>イベント の中に緑のフラッグ系ブロックがあることはもう覚えておかないとだめですね。
「前に出す」ブロックはスクリプト>見た目 の下の方にあります。

こんな感じで吹き出しが出ます。

子ども向けプログラミングScratchをやってみよう!【空を呼ぶ】

Add Scenery | 景色を追加しよう!

Click this icon to choose a new sprite:
Pick a sprite for your character to fly by, such as buildings or trees.
Drag the building or other sprite to the right-side of the Stage, like this:

Tip: Adjust the size of a sprite by clicking with the grow or shrink tool:

このアイコンをクリックして新しいスプライトを選んでね!
キャラクターが飛ぶための、ビルや木を選んでください。
建物やほかのスプライトを右側に設置すると、こんな感じになります。

※拡大または縮小ツールを利用して、スプライトのサイズは調整できるよ!

子ども向けプログラミングScratchをやってみよう!【空を呼ぶ】子ども向けプログラミングScratchをやってみよう!【空を呼ぶ】

ここで新しい知識。拡大縮小そこにツールあったんかい。
いままでぽちぽち「大きさを変える」ブロックを押しながら調節していました……。

右下に設置してコントロールします。

子ども向けプログラミングScratchをやってみよう!【空を呼ぶ】

拡大縮小ツールは、スプライトの上でクリックし続けると大きさが変化していきます。解除するときは何にもスプライトがないところで一度クリックするようですね。
また、奥行き的な並び順ですが、「動かしたものが最前面にくる」ようです。一番後ろにあるものから配置していった方が作業効率はよいですね。

スプライトをコピーするときはスタンプツールをクリックして、コピーしたいスプライトをクリックするといいようです。

Make It Move | 動かしてみよう!

Move the building or other scenery so your character will look like it’s flying.
Add a script like this to your building or scenery:

Tip: Make sure to add the script to your building, tree, or other scenery.

Your script will look something like this:
x is the position on the Stage from left to right.

キャラクターが飛んでいるように見えるように、建物や風景を移動させるよ!
こんな感じのスクリプトを建物や風景に追加してね。

※建物、木、またはその他の風景にスクリプトを追加してください。

スクリプトは次のようになります。
xはステージ上の左から右への位置です。

動かすんだ?! いやそりゃそうか……何も考えずに見た目だけガンガン追加してしまいました。

子ども向けプログラミングScratchをやってみよう!【空を呼ぶ】

このスクリプトをそれぞれのスプライトすべてに当てはめていきます。

えっ なんかうまく動かない
案の定何か違う何が起こったのかわからない何で詰んだの(おろおろ)すること5分。

子ども向けプログラミングScratchをやってみよう!【空を呼ぶ】

最初のx軸の位置のセットは、ムービーのように250でセットしてしまうと最初の位置が必ずズレます。
図のところで見えるx座標が、配置したスプライトの座標となるようです。y軸はかわらないのでx軸をそれぞれのスプライトの座標に合わせて再度チャレンジ。

動くようにはなったのですが画面外までいってくれません。こういう仕様なのかな……? と疑心暗鬼に陥りつつも、x座標の移動数値回数(リピートの回数)を1.5倍に増やして再度チャレンジ
してみたはいいけれどやっぱり左端にたまってしまうようですね。仕様ですな。

Switch Looks | 見た目を切り替えよう!

If your building or scenery has more than one costume, you can switch between looks.
Add to your script like this:

Tip: Click the Costumes tab to see the sprite’s costumes.

Click the Scripts tab.
Your script will look something like this:
Click the green flag to start your script:

建物や風景に複数の衣裳がある場合は、ルックスを切り替えることができます。
次のように追加してみてね。

※スプライトの衣裳やルックスを見るには、「コスチュームタブ」をクリックしてみてね。
タブをクリックすると、あなたのスクリプトはこんな感じになっています。
緑の旗をクリックしてスタートしてね

この移動するアクションを保持したままコスチュームを変えます。

子ども向けプログラミングScratchをやってみよう!【空を呼ぶ】 子ども向けプログラミングScratchをやってみよう!【空を呼ぶ】

Step By Stepの画面を収納すると右上にxの座標が出てきますね。
こんな感じにスクリプトを作成します。

画面が切り替わりますね。
いやしかし左端に画像が溜まるのが気になる……。

Paint the Sky | 空を塗ろう!

You can change the color of the sky.
Click the icon to open the Backdrop library:
Choose a plain backdrop, such as ‘blue sky2’ or ‘purple’.
You can use the paint bucket tool to change the color of your backdrop.
Tip: Use a plain background to help make your character look like it’s flying.

空の色を変えることができるよ!
アイコンをクリックして背景タブを開いてね。
「blue sky2」や「purple」などのプレーンな背景を選択します。
ペイントバケットツールを使用して、背景の色を変更できます。
※飛行機のようにキャラクターを見せるために、プレーンな背景を使用してください。

プレーンな背景って何よ、という方のために、プレーンとはオムレツとかソーダとかの形容詞でよく使われる意味での「あっさりとした」「簡素な」のことを言っています。プレーンなベーグルとか美味しいですよね。簡素なものには簡素なものにしかない味わい深さがあります。

グラデーションだけ突っ込んでみました。

Make It Interactive | 相互的にしよう!

Make your character move when you press a key.
Select your sprite by clicking on its thumbnail:
Add these scripts to make it move up and down:

Tip: Type a minus sign (-10) to move down.

Try it! Press the up and down arrow keys on your keyboard:

キーを押したときにキャラクターを移動させるよ!
サムネイルをクリックして動かすスプライトを選択してね。
これらのスクリプトを追加して、上下に移動させます。

※マイナス記号で入力すると下に移動するよ!

キーボードの上下を押して試してみてください!

インタラクティブ! なるほど、イマイチかみ砕きにくかったのですが、つまりこちらがアクションしたときにあちらもアクションしてくれるように結びつけることを英語的にインタラクティブというわけですね、なるほどなるほど。

子ども向けプログラミングScratchをやってみよう!【空を呼ぶ】

Add Things in the Sky | 何か空に追加しよう!

Add clouds, hearts, unicorns, or other floating things in the sky!
Click this icon to choose a new sprite:
To make it float, build a script like this:
Click the green flag to try it out:
Here’s an example with clouds floating across:

空に雲、心、ユニコーン、その他の浮遊物を追加してみよう!

新しいスプライトを選択するには、このアイコンをクリックします。
それを浮かせるには、次のようなスクリプトを作成します。
緑色の旗をクリックして試してみてください:

雲が浮かぶ例があります:

子ども向けプログラミングScratchをやってみよう!【空を呼ぶ】 子ども向けプログラミングScratchをやってみよう!【空を呼ぶ】

なんだかとても微妙な気持ちになる……左端に溜まるのが気になる……。

Customize and Enhance | カスタマイズと強化

What else do you want to add? Try some of these ideas.

・MOVE LEFT AND RIGHT
Add these scripts to move your character using the left and right arrow keys:

・COLLECT THINGS
Make a sound every time you touch something.
Click the green flag to try it out.

・ADD SCORE
Create a variable for keeping score.
Then add the score blocks to your script:

・EDIT YOUR CHARACTER
You can edit your character to make it look more like it’s flying.
Click the Costumes tab.
Click the ‘Add’ button to add a magic carpet or other object to your character

何を追加したいかな? これらのアイデアを試してみてね!

・左右に移動
左右の矢印キーを使用してキャラクターを移動するには次のスクリプトを追加します。

・モノを集める
何かに触れるたびに音を出します。
緑の旗をクリックしてみてね。

・スコアを加算する
スコアを保持するための変数を作成します。
次に、スコアブロックをスクリプトに追加します。

・キャラクターを編集する
キャラクターを編集して飛行のように見せることができます。
「コスチュームタブ」をクリックしてあなたのキャラクターに魔法のカーペットやその他のオブジェクトを追加することができます。「追加」ボタンをクリックしてね!

ねえいきなり難易度跳ね上がってない?!( ;∀;)

左右に移動させる

追加するスクリプトは以下の通りです。

子ども向けプログラミングScratchをやってみよう!【空を呼ぶ】

モノを集める

モノを集めるってどういうことなのでしょうか?

子ども向けプログラミングScratchをやってみよう!【空を呼ぶ】

あ、鳴った。
割とうるさい。

スコアを加算する

ここで前触れもなく変数ですよ。

子ども向けプログラミングScratchをやってみよう!【空を呼ぶ】 子ども向けプログラミングScratchをやってみよう!【空を呼ぶ】

ひとまずナビ通りに作成すると、左上のスコアの数が一つずつ大きくなっていきます。なるほどこれで横スクロールゲームを作るわけですね……。

キャラクターを編集する

子ども向けプログラミングScratchをやってみよう!【空を呼ぶ】 子ども向けプログラミングScratchをやってみよう!【空を呼ぶ】

風船持たせてみました。これはカンタン!
はい! 今回は以上です!

ちょっとここまでできたのであれば、次は何かしら作ってみたいなぁなんて思います。

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

The following two tabs change content below.
久保田 里美

久保田 里美

価値あるコンテンツ制作部インクループ株式会社
デザイナー。コンセプト設立からデザインを理論立てて起こすことをポリシーに、WEB媒体から紙媒体まで幅広く手掛けていきたいデザイナー。日々勉強日々精進。

ほかの投稿も読んでみませんか?

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

仕事ではパソコンが使いこなせるのが当たり前

相模原市産業会館パソコン教室

AD

ページ上部へ戻る