『子供の科学』2020年8月号の別冊付録
べっさつふろく
「QRコードプログラミングBOOK」は読んでくれたかな?

子供の科学2020年8月号付録「QRコードプログラミング」

 別冊付録では読み取ったQRコードの情報
じょうほう
を元にして、キャラクターの強さや色を決定し、対戦
たいせん
ができるQRバトルゲームのプロジェクトを紹介
しょうかい
したね。今回は夏らしく、QRコードの情報を元に打ち上げ花火を上げることができる「QR打ち上げ花火」のプロジェクトを紹介しよう。
 今年は新型コロナウイルス感染症
かんせんしょう
影響
えいきょう
で中止になった花火大会も多いから、お家でQRコード花火大会を開催
かいさい
してみてね。

QR打ち上げ花火

1  打ち上げ花火の形を決める方法

 まずは打ち上げ花火の「形」を決める情報について整理
せいり
しておこう。今回は4つの変数
へんすう
を使って打ち上げ花火の形を決めていくよ。

打ち上げ花火の形を決める方法

 それぞれの変数について
くわ
しく説明すると、「数」は花火の星が何個
らばるか、「色」は最初に打ちあがる星の色、「大きさ」は星がどの程度
ていど
広がるか、「重なり」は何重
なんじゅう
に花火が上がるかだ。
 これらの4つの変数はQRコードの内容を読み取って決めていくよ。QRコードを読み取ると、QRコードの内容によって
ちが
った形の花火が上がるというわけだ。綺麗
きれい
な花火が上がるQRコードを探してみよう!

2  背景とスプライトの準備

 まずはステージの背景と必要なスプライトを準備
じゅんび
しよう。QRコードの拡張機能
かくちょうきのう
が使えるScratchにGoogle Chrome(グーグル クローム)でアクセスして作業
さぎょう
を始めるぞ。Scratchの画面が表示されたかな?

QRコードの拡張機能が使えるScratch
https://stretch3.github.io/

 最初に夜空をつくるために、ステージの背景
はいけい
を黒く
りつぶそう。ステージを選択
せんたく
して、「背景」のタブを選択しよう。

ステージの編集

 最初に「ビットマップに変換
へんかん
」というボタンを押して、画面全体を塗りつぶせるようにしておこう。

ビットマップに変換

 色を黒に設定して「塗りつぶし」のアイコンをクリックし、となりに表示されているステージをクリックすれば一面を黒く塗りつぶすことができる。

ステージの編集をする方法

 次にスプライトを作成しよう。まずはScratchキャットのスプライトは削除
さくじょ
しておこう。

Scratchキャットのスプライトを削除

 「
く」のメニューから新しいスプライトを作成しよう。

新しいスプライトの作成

 花火の星になる円を描いていこう。筆を使うために「ビットマップに変換」のボタンを押しておこう。

ビットマップに変換

 「筆」のアイコンをクリックしてから、塗りつぶしの色を黄色に設定して、筆の太さを15にしておこう。

花火のスプライトを作成する

 キャンバスを拡大しておき、キャンバスの中心の十字の印と円の中心を合わせてクリックし、キャンバスの中心に円を描こう。

キャンバスの十字と円の十字を合わせて描く

 中心から円がずれた場合は、「選択」のツールを使って円を囲んで、中心に合うように移動することもできる。

 これで背景とスプライトの準備は完了だ。以下の画面では作成したスプライトのx座標
ざひょう
とy座標が0になっているけれど、今の段階
だんかい
ではどこにあっても大丈夫だよ。

背景とスプライトの準備が完了

3  変数の作成

 まずは「1 打ち上げ花火の形を決める方法」で説明した花火の形を決める4つの変数を用意しよう。今回はこの変数は最初に用意しておいて、打ち上げのコードも先につくる作戦
さくせん
にするよ。QRコードの内容をこの変数に設定するのは最後にすれば、花火を打ち上げるコードのテストがしやすいからだ。

 まずは変数をつくろう。今回は一度に1つしか花火を打ち上げないので、「すべてのスプライト用」で大丈夫だよ。複数
ふくすう
の花火を打ち上げる場合は「このスプライト用」にしておいた方がよいだろう。「数」「色」「大きさ」「重なり」の4つの変数をつくろう。

変数の作成

 全ての変数が用意できたら、テストをするために4つの変数を以下のように設定しておこう。完成まで変数はステージに表示したままにしておこう。その方が確認しやすいぞ。

変数の値を設定

4  打ち上げのコード

 円のスプライトに、形の4つの変数を使った打ち上げのコードをつくっていこう。

打ち上げのコード

 花火の星が準備できたら「メッセージ1」を送るようにしたので、そのメッセージを受け取って、それぞれが消えながら広がる部分は以下のようになるね。

メッセージのコード

 緑の
はた
をクリックして、うまく動作するか確認してみよう。

プログラムのデモ画面

5  QRコードの読み取り

 最後に変数の値をQRコードの内容を元に決める部分をつくろう。それぞれの変数の数の範囲
はんい
と、QRコードの内容をどのように使うかについて整理しておこう。

QRコードの読み取りの基準

拡張機能からQRコードを追加しよう。

機能拡張のQRコード

 カメラでQRコードを読み取り、QRコードの内容をもとにして、変数に数を設定する以下のようなコードをつくろう。

QRコードを読み取るコード

 つくった変数を設定するコードが緑の旗が実行されたときに実行されるように、ブロック定義
ていぎ
を使ってみよう。新しく「QRコードの読み取り」というブロックを作成しよう。

ブロック定義

 全てをまとめたコードを掲載
けいさい
しておくね。

QR打ち上げ花火の全コード

 最後に変数をステージから
かく
すように、変数の名前の左にあるチェックボックスを外しておこう。

変数を表示しないようにする

 今回のQR打ち上げ花火のコードは以下からダウンロードできるぞ。リンク先にアクセスをして、zipファイルをダウンロードしてね。zipで圧縮
あっしゅく
されているので、解凍
かいとう
して、できたsb3ファイルを読み込んで使用してね。

<文/杉浦 学(鎌倉女子大学)>

子供の科学2020年8月号

特集ではサイエンスアーティスト・YouTuberとしても活躍している市岡元気先生が実験術を伝授! とじ込み付録は図形認識能力が身につく算数パズル「三色問題の謎を解け」。出題されている問題をパズルで解いてみよう!
8月号の詳細はこちら

最新情報をチェックしよう!