最終更新日 2025年4月26日 by toytune
スクラッチはアメリカの大学、MIT（マサチューセッツ工科大学）メディアラボで開発されたビジュアルプログラミング言語です。
もくじ
はじめに
スクラッチでは、拡張機能を追加することで新しいブロックを使えるようになり、できることがさらに広がります。たとえば、スプライトで絵を描いたり、音を操作したり、外部機器と連携することも可能です。
今回は、拡張機能「ペン」を使って、スプライトが線を引きながら正方形・正五角形・正六角形といった図形（正多角形）を描くプログラムを作ってみましょう。
▼ 今回作成するプログラム（の旗をクリックして動作を確認することができます）
「ペン」の拡張機能を追加する
まずは「ペン」のブロックを使えるようにしましょう。
画面左下に「拡張機能」を追加するアイコンがあります。下記の画像を参照しクリックしてください。
画面が遷移し、様々な「拡張機能」の一覧が表示されています。その中に「ペン」というものがあるのでクリックします。
ブロックの中に「ペン」というものが追加されています。
クリックして中を見てみると、いくつかの「ペン」のブロックが追加されていることがわかります。
このブロックを使って図形を描画するプログラムを作っていきます。
ペンを使って線を引いてみる
簡単な動作で線を引いてみましょう。
「イベント」から「が押されたとき」をドラッグします。
次に「ペン」から「ペンを下ろす」というブロックをドラッグしくっつけます。
この「ペンを下ろす」というのは、「ペンの先を紙にのせる」ということです。
つまり、がクリックされたその位置が描画の開始地点ということです。
「ペンを下ろす」の状態から線を引きたいので、スプライトを動かします。
「動き」から「10歩動かす」をドラッグし下にくっつけます。
次に描画する上で、角度も変えていきたいので、「動き」から「15度回す」をドラッグし下にくっつけます。
今回は直角にしたいので、中の数値を「90」に変更します。
ここまでの動作を確認してみます。
をクリックすると、一瞬でスプライトが右に動き90度下を向き、動いたところに線が引かれています。
一旦、これで良さそうですが、スプライトの位置をリセットしておきたので、スプライトの下記の数値を戻します。
- x・・・・0
- y・・・・0
- 向き・・・90
スプライトの位置をリセットする仕組みをつくる
動作確認のたびに手動でスプライトを元の位置に戻すのは大変なので、スペースキーでリセットできるようにしましょう。
「イベント」から「スペースキーが押されたとき」をドラッグし、先ほど作ったプログラムの隣あたりに配置します。（どこでも構いません）
次に「スペースキーが押されたとき」に続くプログラムを作り込んでいきます。
「ネコ」のスプライトの位置を縦横中央にしたいので、「動き」から「x座標を0、y座標を0にする」をドラッグし下にくっつけます。
「ネコ」のスプライトの角度も戻したいので、「動き」から「90度に向ける」をドラッグしくっつけます。
最後に「ペン」で描かれた線もリセットしたいので、
「ペン」から「全部消す」をドラッグしくっつけます。
これでPCのスペースキーを押すと、全てリセットされるようになりました。
先に作成したプログラムと並べると今はこのようになっていればOKです。
左側は、をクリックすると線を描くプログラムで、
右側はスペースキーを押すとリセットしてくれるプログラムです。
正方形を描くプログラムを作ろう
次は、線を引くプログラムを正方形が描けるように改良します。
とはいっても、同じ長さで動かし、同じ角度で曲がったらできるので、現在の「100歩動かす」と「90度回す」を複製（コピー）してつなぎ合わせていけばできそうです。
「100歩動かす」の右上あたりを右クリックし、出てきたメニューの中から「複製」を選択します。
「複製」されたものをさらに下にくっつけます。
4回この動作を繰り返せば正方形になるので、あと2回「複製」して下にくっつけていきます。
完成したら、下記図のプログラムになっていればOKです。
動作確認をしてみます。
ステージのをクリックすると、瞬時に正方形が描かれました。
徐々に図形が描かれるようにする
今のプログラムに「待つ」の動作を加えて、アニメーションのように、ゆっくり描かれるようにしてみましょう。
「制御」から「1秒待つ」のブロックをドラッグし、「90度回す」の下に入れていきます。
「90度回す」は4つあるので、「1秒待つ」も4つその下に入れます。
これで動作確認してみます。ステージのをクリックすると、線を引いたあとは、少し間（1秒間）を置いてから正方形を描いてくれてます。
「繰り返し」でブロックをスッキリ整理する
同じブロックを何度も使っていると、見た目もごちゃごちゃしてわかりにくくなります。そこで「繰り返し」のブロックを使って整理してみましょう。
やり方はいろいろありますが、今回の場合は「繰り返し」のブロックを使うことで、ブロックの数を減らし見通しがすっきりとした状態にします。
また、「繰り返し」のブロックを使うことで、正方形以外の図形も数値を変更するだけで描画できるようになります。
一旦、「ペンを下ろす」の下の「100歩動かす」のブロックをドラッグし全て外します。
一番上の「100歩動かす」、「90度回す」、「1秒待つ」はおいておいて、それ以外は削除します。
「制御」から「10回繰り返す」をドラッグし、「ペンを下ろす」の下にくっつけます。
先ほどドラッグで外した「100歩動かす」、「90度回す」、「1秒待つ」を「4回繰り返す」の中に入れます。
左が「繰り返し」のブロックを使う前、右が「繰り返し」のブロックを使ったあとです。
8個のブロックを減らすことができ、すっきりさせることができました。
リセットのプログラムと並べると、現在はこのようになっていればOKです。
ステージのをクリックし、同じように動作するか確認してみてください。
正五角形・正六角形も描いてみよう
他の正多角形も描けます。
「繰り返し」のところには、描画したい角の数を入れます。例えば正五角形の場合、「5回繰り返す」とすればよいので、「4回繰り返す」の「4」を「5」に変更します。
角度も変更が必要です。360度を角の数で割ったものを入れます。前途した正五角形の場合、360÷5=72 になるので、「90度回す」の「90」を「72」に変更します。
正六角形も同じです。「5回繰り返す」の「5」を「6」に変更します。
角度は、360÷6=60 になるので、「72度回す」の「72」を「60」に変更します。
正六角形が描画できるか、ステージのをクリック動作確認してみます。
無事に意図した通りに描画されました。
まとめ
- 「ペン」のブロックは拡張機能から追加できる
- スプライトの動きに合わせて線を描くことができる
- 「1秒待つ」を使うと、アニメーションのように描画できる
- 「全部消す」や「位置リセット」でプログラムをきれいに初期化できる
- 「繰り返し」のブロックでプログラムを整理できる
- 図形の角の数や角度を変えることで、いろんな正多角形が描ける
今回は、もともといる「ネコ」のスプライトを使いましたが、別のスプライトで描画したり、「歩く」アニメーションと組み合わせたりしても楽しいですよ。
また、「ペンの色」や「ペンの太さ」も変えられるので、「もし〜なら」のブロックと組み合わせて、色が変わる仕組みを作るのもおすすめです。ぜひ、いろいろ試してみてくださいね！
