ユーバーの「Scratchで小・中学校のプログラミング」Vol.28　＜スクラッチで棒グラフ＞

ユーバープログラミングスクールの中村里香代表による、小学校のプログラミング授業で使ってほしいプログラミング言語Scratch（スクラッチ）の学習動画第28回。
今回は＜中級者＞向け、Scratchで棒グラフを表示するプログラムを作ります。

アンケート結果を棒グラフで視覚化する

今回は、前回作った「アンケートを集計するプログラム」の続で、複数名の回答を集計した結果を、Scratchの「スタンプ」と「リスト」を使って棒グラフで分かりやすく表示します。

◆アンケート結果の集計（前回のおさらい）

「うさぎ」のスプライトで、「○ときいてまつ」と「こたえ」を使って給食の好きなメニューのアンケートをとりました。得票数は「結果リスト」の該当位置に集計し、「ずっと」ブロックで複数名の回答を集めました。

「うさぎ」のスプライトが押されたら、アンケートをとる処理が停止する仕組みになっています。

使用するリストは以下の通りです。
・項目リスト：「1.コロッケ」「2.カレーライス」「3.ソフトめん」など、選択肢を入れる。
・結果リスト：各メニューに対応した得票数を格納する。

◆グラフ描画を始める合図

アンケートを終了したら、セリフを表示してからグラフ描画のためのメッセージ「グラフ」をブロードキャストします。これがグラフ描画の合図になります。

「メッセージ」とは、スプライトやステージで連携を実現する仕組みです。

◆グラフを描く仕組み

「グラフ」のスプライトには、一辺20ピクセルの小さな正方形のコスチュームを用意しておきます。例えば「コロッケ」の得票数が3なら、この正方形の「スタンプ」を縦方向に3つ積み上げることで棒グラフを描きます。

「スタンプ」とは、拡張機能「ペン」のブロックでスタンプを押すように画像を表示する機能です。

グラフ描画の流れは次のとおりです。
・全てのスタンプを消す（初期化）
・変数「番号」を1にして、リストの1番目（コロッケ）から処理を開始
・グラフを描き始める位置（x座標: -100, y座標: -60）に移動
・得票数分「スタンプ→上へ20ピクセル移動」を繰り返す

これで最初の項目コロッケのグラフを描くことができます。

◆全てのグラフを完成する

「項目リスト」の全ての項目の棒グラフを描くには、次の手順を項目リストの長さ分繰り返します。

• 得票数分、「スタンプ」と「上へ20ピクセル移動」を繰り返す
• 描画が終わったら
– 色の効果を指定してスタンプの色を変える
– 変数「番号」を1増やす
– y座標をグラフの最下部（-60）に戻す
– x座標を右に100ずつずらす

結果リストの位置は、変数「番号」で指定しているので、これを1ずつ増やすことで、自動的に2つ目、3つ目の項目を処理できます。

また、グラフの描画を始める前に「がぞうこうかをなくす」ブロックを使うことで、スタンプの色が毎回リセットされるようになります。

今回は、Scratchの「スタンプ」とリスト活用して、アンケート結果の棒グラフを表示するプログラムを作成しました。

次回は、結果の発表をさらに工夫したいと思います。

授業での活用

Scratchはゲームづくりだけでなく、子どもたちのアイデアの表現、発表、調べ学習など、さまざまな教育活動で活用できるツールです。
今回紹介した「アンケート結果を棒グラフで表示するプログラム」は、数値を視覚的に捉えやすくなるのがポイントです。人気の差や全体の傾向がひと目で分かるので、総合的な学習の時間など話し合い活動に結びつけやすいと思います。
算数で学ぶグラフとも関連づけられるので、他教科とのつながりを意識した活用もできそうです。「意見を集めて整理し、グラフで表現する」流れをScratchで体験できるのは、子どもたちにとって実践的で新鮮な活動になるのではないでしょうか。

◆スクラッチの使い方

◆スクラッチで給食メニューを占う

＜筆者プロフィール＞
ユーバー株式会社代表中村里香
2017年4月、すべての子どもが楽しく学べるプログラミング教育を目指し、ユーバー株式会社を設立。プログラミング教室運営、クラウド型学習サービス「うさプロオンライン」の提供、教材開発、講師育成支援、体験イベントの開催などを行う。環境に左右されない学びの機会を届けるため、教育現場や企業と連携し活動中。