『ビンゴの番号を出す装置』を作ろう♪【解説付き！】

メガネの秘密を見てよう！

前回ご紹介した『ビンゴの番号を出す装置』を作ろう♪ はいかがでしたか？　これをベースに「アルファベット版」を作って下さった方がTwitterに投稿していらっしゃいました！　とっても嬉しいです♪

さて、前回の記事は「作り方」だけを紹介したので、「どうしてこんなメガネになるの？」「この部品の意味は？」「解説お願いしま〜す！」とのリクエストをいただきました！！

そこで、あらためて解説付きでお届けします。

実は「番号を出す装置」はメガネ１つで出来ちゃいます！

この「ビンゴの番号を出す装置」ですが、実は、めがね１個で出来ちゃうんです。早速作ってみましょう。

▼準備

STEP.1

モードを選択する

ひとりでつくる（上級モード）を選び、「えんぴつ」をタップします。

STEP.2

設定を開く

「設定（はぐるま）」をタップして、設定画面を開きます。

STEP.3

方眼を設定する

方眼紙設定を1番大きい方眼にします。また、背景色も好きな色に変えてみましょう。設定したら「○」をタップします。

メガネ1つで作る『ビンゴの番号を出す装置』

今回も、まずは、「１」〜「９」の数字を出す装置を作ってみましょう！

▼部品を描く

STEP.1

「えんぴつ」をタップ

「えんぴつ」アイコンをタップします。

STEP.2

番号を描く

表示する数字「１」を描きます。描けたら「○」をタップします。

STEP.3

残りの番号も描く

同じように、数字の「２」〜「９」を描きます。

STEP.4

番号を出すための部品を描く

番号を隠す部品「■（塗り四角）」と、それを開くための「オープン」を描きます。

▼ステージに部品を並べる

STEP.1

数字とボタンを配置する

数字「１」〜「９」と、「オープン」をこのように配置します。

STEP.2

四角で数字を隠す

数字に「■（塗り四角）」を重ねて配置し、数字を隠します。

▼メガネをつくる

STEP.1

１つ目のメガネ

メガネ置き場にメガネを置き、メガネの中に「■（塗り四角）」「オープン」をこのように配置します。

STEP.2

ツルを長押しする

ツルを長押しします。

STEP.3

メガネが2つに割れる

すると、メガネが２つに割れます。

STEP.4

「さわると」を配置する

「さわると」（人差し指のアイコン）を左側の「オープン」の上に重ねておきます。

※「さわると」が隠れてしまっているときには、部品置き場の上端に表示されている「△ボタン」をタップしてスクロールします。

▼遊ぶモードで動作を確認

これで「ビンゴの番号を出す装置」の完成です！　遊ぶモードで動作を確認してみましょう！

STEP.1

「あそぶ」をタップする

「□（あそぶ）」ボタンをタップします。

STEP.2

動作を確認する

「あそぶ」画面が表示されたら動作を確認して見てみましょう。「オープン」をタップすると、番号が現れますね！

STEP.3

「あそぶ」画面のボタン

画面左上にある「やりなおし（回転矢印）」をタップすると最初の状態に戻ります。また、「もどる（×）」をタップすると「つくる」画面に戻ります。

▼完成！！

これで、メガネ１つでつくる『ビンゴの番号を出す装置』の完成です！

ここまでで作成したプログラムはこちらです。

※パソコンでご覧になっている方は Flash Player を有効にして下さい。実際の動作が確認できます。

《別ウィンドウ または アプリで開く》

●普通のメガネでつくると……

ちなみに、このプログラムはこんな作り方もできます。

普通のメガネでつくる場合には、「■」１個に対してメガネが１個必要になります。今回は数字が９個なのでメガネも９個になります。

普通のメガネは輪っかの中の部品同士の位置関係（相対位置）が判定対象となります。なので、この９つのメガネの輪っかの中身は、ステージ上での９つの「■」（四角塗り）と「オープン」との位置関係をそのまま再現しています。

一方、「割れたメガネ」では、それぞれ上段と下段に入れた部品同士の位置関係は関係しません。つまり、ステージ内のどこかにそれぞれの部品があればOK！です。なので、割れたメガネは「遠近両用メガネ」とも呼ばれています。

それともうひとつ、「割れたメガネ」には、今回のようにステージに「■（塗り四角）」がたくさんあっても、その中のどれか１つにだけ作用するという特徴があります。なので、たくさんある「■（塗り四角）」のうち１つだけ開くという動作になるのですね。

【ルーレットのような演出をつけよう！】

このように、『ビンゴの番号を出す装置』はメガネ１つで作れてしまいました。では、なぜ、前回のプログラムはメガネ５つだったのかと言うと、ビンゴカードの番号を引く時のワクワク感（演出）を加えたかったからです。

それでは、その演出として、『数字を選ぶ「赤枠（四角枠）」がルーレットのように動き回る』プログラムを追加していきましょう。

▼ふつうのメガネでつくってみよう

まずは、ふうつのメガネでつくってみましょう。どんなメガネを作ったら良いか一緒に考えてみてくださいね。

▼部品を描く

STEP.1

「□」（四角枠）を描く

数字を選択するための部品「□」（四角枠）を描きます。

▼メガネをつくる

STEP.1

２つのメガネをつくる

このように２つのメガネをつくります。それぞれ、メガネの左側には「■」（塗り四角）と「□」（四角枠）を横に並べて配置します。

右側は「■」（塗り四角）と「□」（四角枠）を重ねて配置します。

部品の位置関係が大事になりますのでこの通りに作って下さいね！

▼ステージに部品を追加する

STEP.1

ステージに□（四角枠）を置く

ステージ上の「■」（塗り四角）の上に、「□」（四角枠）を1つ置いてみましょう！

▼動きを確認！

ステージに配置した部品が動き出しましたね。今、追加した2つのメガネは「■（塗り四角）」の上を、「□」（四角枠）を左右に自動で動かすメガネです。

▼上下にも動かしてみよう

今度は、上下にも動くようにしてみましょう。どんなメガネなのか考えながらつくってみてくださいね。

STEP.1

メガネを２つ追加する

このような２つのメガネを追加します。

メガネの左側には「■」（塗り四角）と「□」（四角枠）を縦に並べて配置します。

右側は「■」（塗り四角）と「□」（四角枠）を重ねて配置します。

メガネが完成すると、ステージでは「□」（四角枠）が、上下左右に動くようになりましたね♪

▼数字を表示するメガネを改造する

数字を表示するメガネを改造します。

STEP.1

「□」を追加する

左側、右側それぞれの上段に「□」（四角枠）を追加します。
（左側のメガネは「■」に「□」を重ねて配置します）

▼遊ぶモードで動作を確認

遊ぶモードで動作を確認してみましょう。「パネル」の上を「赤枠」が動き回り、「オープン」をタップすると赤枠が重なっているパネルが消えて数字が表示されます。ルーレットぽくなってきましたね。

さて、このプログラムだと隣接したパネルに移動するだけなので「出したい数字を狙い撃ち」も簡単に出来てしまいます。では、赤枠がランダムに飛び回るようにするにはどうしたらよいでしょう？

※このプログラムはある条件が揃うと赤枠が動かなくなってしまいます。これは部品を１つ追加することで解決することが出来ます。どうしたら上手くいくのかこれも考えてみて下さいね♪

赤枠がランダムに出現するように改造してみよう！

それでは、赤枠がランダムに飛び回るように改造しましょう。ポイントは「割れたメガネ」と「状態を示す部品」です。

▼不要なメガネを片付ける

まずは、先ほどつくったメガネをすべて片付けます。

STEP.1

中の部品から片付ける

メガネを片づける時には、まずは、中の部品を「部品置き場」または「Viscuitと書かれたエリア」にドラッグ＆ドロップして片付けてメガネを空にします。

メガネが空になったら「部品置き場」または、「Viscuitと書かれたエリア」にドラッグ＆ドロップします。

▼状態を表す部品を描く

前回は「●（青色）」「●（桃色）」としていた部品を、今回はメガネの内容が分かりやすいように、「なし」（赤枠が無い状態を示す）「あり」（赤枠がある状態を示す）としてみました。

STEP.1

部品「なし」「あり」を描く

状態を表す部品「なし」「あり」を描きます。

▼メガネをつくる

前回つくったのと同じように２つのメガネをつくります。
１つ目が「赤枠を表示する」、２つ目は「表示された赤枠を消す」メガネです。

STEP.1

１つ目のメガネ

メガネ置き場にメガネを置き、メガネの中に「■（塗り四角）」「なし」、「■（塗り四角）」「□（四角枠）」「あり」をこのように配置します。

右側のメガネには、「■（塗り四角）」に「□（四角枠）」を重ねて配置しています。

STEP.2

ツルを長押しする

メガネのツルを長押しします。

STEP.3

メガネが2つに割れる

すると、このようにメガネが２つに割れます。

STEP.4

２つ目のメガネを追加する

新しいメガネを追加して、「□（四角枠）」「あり」、「なし」をこのように配置します。

STEP.5

メガネを2つに割る

１つ目のメガネと同じように、ツルを長押しして２つに割ります。

▼ステージに部品を追加する

STEP.1

「あり」をステージに配置する

”□（四角枠）がある状態” を示す部品「あり」をステージに配置します。すると、赤枠がランダムな場所に、“現れて” は “消える” ようになりましたね。

「なし」と「あり」の２つの部品は、ステージ上に「赤枠が表示されている状態」か「赤枠が表示されていない状態」かを明示する部品です。

そこで、この２つのメガネは、

1. ステージに赤枠（□）がなかったら、どれか１つの■の上に赤枠を表示する
2. ステージに赤枠（□）があったら、それを消す

という命令になります。

▼「スタートボタン」を描く

止まった赤枠を再スタートさせるための「スタートボタン」を作ります。

STEP.1

スタートを描く

部品「スタート」を描きます。

▼「オープン」をタップしたときのメガネをつくる

「オープンボタン」をタップすると「スタートボタン」に変わるメガネをつくります。

STEP.1

オープン、スタートのメガネを作る

メガネを追加して、メガネの左側に「オープン」、メガネの右側に「スタート」を配置します。

STEP.2

「さわると」を配置する

「オープン」の上に「さわると」（人差し指のアイコン）を重ねて置きます。

▼止まっている状態を示す部品を描く

「赤枠の動きが止まって数字が表じされた状態」を示す部品「表示中」を描きます

STEP.1

「表示中」を描く

「赤枠の動きが止まって数字が表じされた状態」を示す部品「表示中」を描きます

▼番号表示のメガネをつくる

STEP.1

メガネをもう一つ追加する

メガネを追加して、

左側に「■（塗り四角）」「□（四角枠）」「あり」「スタート」

右側に「表示中」「□（四角枠）」「スタート」

を、それぞれこの図と同じように配置します。

STEP.2

ツルを長押しする

ツルを長押しして、２つに割ります。

STEP.3

もう一回ツルを長押しする

メガネが２つに割れたら、もう一回ツルを長押しします。

STEP.4

メガネが３つに割れる

 

すると、メガネが３つに割れます。

割れたメガの中の部品がこのように配置されているか確認しましょう。

POINT

このメガネは、ボタンが「スタート」になったときの動作のメガネです。

「スタートボタンがある」かつ「■（塗り四角）と□（四角枠）が重なっている状態」かつ「状態＝赤枠がある」なら、「スタートボタン」はそのまま、かつ「□（四角枠）は表示したままで ■（塗り四角）を消す」かつ「状態=数字を表示中」に変える

と言う命令になっています。

このように「３つに割れたメガネ」は「３つの条件が合致したとき」に作用します。

なお、このメガネは前回作ったときと少し違っています。前回の方がメガネの中の部品数が少ないですね。それぞれ同じ動きを実現していますが、どこが違うのか考えてみて下さいね。

▼スタートのメガネをつくる

止まった赤枠の動きを再スタートさせるメガネを作ります。

STEP.1

スタート、オープンのメガネをつくる

もう一つメガネを追加して、このように「スタート」「表示中」、「オープン」「あり」を配置します。

STEP.2

メガネを２つに割る

メガネのツルを長押しして、このようにメガネを２つに割ります。

STEP.3

「さわると」を追加する

メガネの左側の「スタート」の上に「さわると」（人差し指のアイコン）を重ねて置きます。

▼遊ぶモードで動作を確認

遊ぶモードで動作を確認してみましょう。「パネル」の上を「赤枠」がランダムに出たり消えたりして動き回り、「オープンボタン」をタップすると「赤枠」が重なったパネルが消えて数字が表示されます。

▼完成！

ランダムに「１」〜「９」の番号を出す装置の完成です！
ここまでで作成したプログラムはこちらです。

※パソコンでご覧になっている方は Flash Player を有効にして下さい。実際の動作が確認できます。

《別ウィンドウ または アプリで開く》

改造しよう！

それでは、前回同様、数字を増やして改造しましょう。割れたメガネを使用しているので「オープン／ストップ」ボタンも自由に配置場所を変えてOKです！　また、状態を表す「ある」「なし」「表示中」も見栄えが良い部品に書き換えてみます。

▼数字を追加する

STEP.1

追加した数字をステージに並べる

ここでは「25」まで部品を追加してみました。追加した数字をステージに並べましょう。あわせて、「オープン」と「あり」の配置場所も工夫してみましょう。

STEP.2

数字を隠す

数字の上に「■」を重ねて配置します。

STEP.2

部品「あり」を「なし」に置き換える

「あり」を「なし」に置き換えてみましょう。すると、「□（四角枠）」が表示されて動き出しますね！

▼状態を表す部品を修正する

状態を表す部品「なし」「あり」「表示中」を見栄えが良いように修正します。

STEP.1

部品置き場の「なし」を長押しする

部品の置き場にある部品「なし」を長押しします（約３秒）。すると、「えんぴつ」が表示されます。

※５秒くらい長押ししても「えんぴつ」が表示されない場合には、一度指を放してもう一度やり直してみて下さい。

STEP.2

「えんぴつ」をタップする

表示された「えんぴつ」タップします。

※「えんぴつ」は数秒で消えるので、タップする前に消えてしまった場合には、もう一度部品を長押しして下さい。

STEP.3

「もどる」ボタンをタップ

「もどる（回転矢印）」をタップすると一筆毎に消えていきます。部品を消したら、新しい内容に書き換えましょう。

なお、「もどる」ボタンをタップして、“何も描かれていない状態”になったときに「○」をタップすると部品自体が完全削除されてしまうので注意して下さい。

STEP.4

部品を描き直す

編集が終わったら「○」をタップします。

STEP.5

「あり」「表示中」を修正する

同じように、「あり」「表示中」も見栄えが良い部品に書き換えます。

▼完成！
これで「1」〜「25」までの数字を表示できる『ビンゴの番号を出す装置』が出来上がりました！

※パソコンでご覧になっている方は Flash Player を有効にして下さい。実際の動作が確認できます。

《別ウィンドウ または アプリで開く》

作品を保存しよう！

出来上がった作品を保存しておきましょう。次の方法で保存先を記録しておくと、簡単に作品が呼び出せて便利ですよ。

▼保存先のURLを取得する

STEP.1

「おくる」をタップする

画面右上の「保存（おくる）」ポタンをタップします。

STEP.2

「○」をタップする

確認の「○」ボタンが表示されるのでこれもタップします。すると，作品のURLがパソコンのペーストボードにコピーされます。

STEP.3

「メモ帳」などにペーストする

メモ帳などにペーストして作品のURLを保存しておきましょう。このURLをブラウザで開くと作品を改造したり、遊んだりすることが出来ます。

今回は解説付きでお届けしました。ちょっと解り難いところもあったと思いますが、実際にViscuitでプログラミングしながら、いろいろと試してみてくださいね♪

このプログラムを発展させたものをひとつご紹介します！　これは、2020年2月15日に開催された「Microsoft Education Day 2020　学びのカラフルゼリー」の懇親会のビンゴ大会で使っていただいたものです。

番号を1〜75 に増やして、スロットルのようにストップを押してからもしばらく赤枠が動き続ける演出を加えています。どのように改造を加えたのか解き明かしてみて下さい！

それがこちら！

《別ウィンドウ または アプリで開く》