初級コース【体験授業】参加申込みは受付中!

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

ビンゴの番号を出す装置を作ろう(解説付き)

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

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

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

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

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

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

▼準備

  • STEP.1
    モードを選択する
    モード選択
    ひとりでつくる(上級モード)を選び、「えんぴつ」をタップします。
  • STEP.2
    設定を開く
    設定を開く
    「設定(はぐるま)」をタップして、設定画面を開きます。
  • STEP.3
    方眼を設定する
    1番大きい方眼にする
    方眼紙設定を1番大きい方眼にします。また、背景色も好きな色に変えてみましょう。設定したら「○」をタップします。

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

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

▼部品を描く

  • STEP.1
    「えんぴつ」をタップ
    「えんぴつ」をタップ
    「えんぴつ」アイコンをタップします。
  • STEP.2
    番号を描く
    「1」を描く
    表示する数字「1」を描きます。描けたら「○」をタップします。
  • STEP.3
    残りの番号も描く
    「2」〜「9」を描く
    同じように、数字の「2」〜「9」を描きます。
  • STEP.4
    番号を出すための部品を描く
    「■」(塗り四角)を描く「OPEN」を描く
    番号を隠す部品「■(塗り四角)」と、それを開くための「オープン」を描きます。

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

  • STEP.1
    数字とボタンを配置する
    番号と「オープン」を配置する
    数字「1」〜「9」と、「オープン」をこのように配置します。
  • STEP.2
    四角で数字を隠す
    四角で数字を隠す
    数字に「■(塗り四角)」を重ねて配置し、数字を隠します。

▼メガネをつくる

  • STEP.1
    1つ目のメガネ
    メガネをつくる
    メガネ置き場にメガネを置き、メガネの中に「■(塗り四角)」「オープン」をこのように配置します。
  • STEP.2
    ツルを長押しする
    ツルを長押し
    ツルを長押しします。
  • STEP.3
    メガネが2つに割れる
    メガネが2つに割れる
    すると、メガネが2つに割れます。
  • STEP.4
    「さわると」を配置する
    「さわると」を配置する
    「さわると」(人差し指のアイコン)を左側の「オープン」の上に重ねておきます。

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

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

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

  • STEP.1
    「あそぶ」をタップする
    「あそぶ」をタップ
    「□(あそぶ)」ボタンをタップします。
  • STEP.2
    動作を確認する
    「オープン」をタップして数字を表示
    「あそぶ」画面が表示されたら動作を確認して見てみましょう。「オープン」をタップすると、番号が現れますね!
  • STEP.3
    「あそぶ」画面のボタン
    「あそぶ」画面のボタン
    画面左上にある「やりなおし(回転矢印)」をタップすると最初の状態に戻ります。また、「もどる(×)」をタップすると「つくる」画面に戻ります。

▼完成!!

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

POINT

このメガネは、『ステージのどこかに「■(塗り四角)」と「オープンボタン」がある時に「オープンボタン」をタップすると 、「■(塗り四角)」が消え、かつ「オープンボタン」はそのまま』と言う命令になっています。

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

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

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

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

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

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

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

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

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


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

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

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

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

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

▼部品を描く

  • STEP.1
    「□」(四角枠)を描く
    赤枠を描く
    数字を選択するための部品「□」(四角枠)を描きます。

▼メガネをつくる

  • STEP.1
    2つのメガネをつくる
    ■と□を配置する
    このように2つのメガネをつくります。それぞれ、メガネの左側には「■」(塗り四角)と「□」(四角枠)を横に並べて配置します。

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

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

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

  • STEP.1
    ステージに□(四角枠)を置く
    ステージ赤枠を置く
    ステージ上の「■」(塗り四角)の上に、「□」(四角枠)を1つ置いてみましょう!

▼動きを確認!

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

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

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

  • STEP.1
    メガネを2つ追加する
    メガネを2つ追加する
    このような2つのメガネを追加します。

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

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

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

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

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

  • STEP.1
    「□」を追加する
    メガネに赤枠を追加する
    左側、右側それぞれの上段に「□」(四角枠)を追加します。
    (左側のメガネは「■」に「□」を重ねて配置します)

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

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

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

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

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

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

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

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

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

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

▼状態を表す部品を描く

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

  • STEP.1
    部品「なし」「あり」を描く
    部品「なし」をつくる部品「あり」をつくる
    状態を表す部品「なし」「あり」を描きます。

▼メガネをつくる

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

  • STEP.1
    1つ目のメガネ
    一つ目のメガネ
    メガネ置き場にメガネを置き、メガネの中に「■(塗り四角)」「なし」、「■(塗り四角)」「□(四角枠)」「あり」をこのように配置します。

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

  • STEP.2
    ツルを長押しする
    ツルを長押しする
    メガネのツルを長押しします。
  • STEP.3
    メガネが2つに割れる
    メガネが2つに割れる
    すると、このようにメガネが2つに割れます。
  • STEP.4
    2つ目のメガネを追加する
    2つ目のメガネを追加する
    新しいメガネを追加して、「□(四角枠)」「あり」、「なし」をこのように配置します。
  • STEP.5
    メガネを2つに割る
    メガネを2つに割る
    1つ目のメガネと同じように、ツルを長押しして2つに割ります。

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

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

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

POINT

ビスケットでは、このように「特定の状態」を1つの部品に置き換えてあげると、メガネをシンプルに作る事が出来るようになります。

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

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

という命令になります。

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

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

  • STEP.1
    スタートを描く
    「スタート」ボタンを描く
    部品「スタート」を描きます。

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

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

  • STEP.1
    オープン、スタートのメガネを作る
    オープン、スタートのメガネをつくる
    メガネを追加して、メガネの左側に「オープン」、メガネの右側に「スタート」を配置します。
  • STEP.2
    「さわると」を配置する
    「さわると」を追加する
    「オープン」の上に「さわると」(人差し指のアイコン)を重ねて置きます。

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

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

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

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

  • STEP.1
    メガネをもう一つ追加する
    メガネを追加する
    メガネを追加して、

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

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

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

  • STEP.2
    ツルを長押しする
    長押しして2つに割る
    ツルを長押しして、2つに割ります。
  • STEP.3
    もう一回ツルを長押しする
    もう一回長押しする
    メガネが2つに割れたら、もう一回ツルを長押しします。
  • STEP.4
    メガネが3つに割れる
    メガネが3つに割れた 
    すると、メガネが3つに割れます。

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

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

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

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

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

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

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

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

  • STEP.1
    スタート、オープンのメガネをつくる
    スタート、オープンのメガネを追加する
    もう一つメガネを追加して、このように「スタート」「表示中」、「オープン」「あり」を配置します。
  • STEP.2
    メガネを2つに割る
    長押しして2つに割る
    メガネのツルを長押しして、このようにメガネを2つに割ります。
  • STEP.3
    「さわると」を追加する
    「さわると」を追加する
    メガネの左側の「スタート」の上に「さわると」(人差し指のアイコン)を重ねて置きます。
POINT
このメガネは「スタート」ボタンをタップすると赤枠が移動しはじめるメガネです。
「スタートボタンがある」かつ「状態が “表示中”」(=数字を表示して赤枠は止まっている)なら、「スタートボタン」を「ストップ」に変え、かつ「状態を赤枠 “あり”」に変わります。

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

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

▼完成!

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

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

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

改造しよう!

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

▼数字を追加する

  • STEP.1
    追加した数字をステージに並べる
    追加した数字を並べる
    ここでは「25」まで部品を追加してみました。追加した数字をステージに並べましょう。あわせて、「オープン」と「あり」の配置場所も工夫してみましょう。
  • STEP.2
    数字を隠す
    数字を隠す
    数字の上に「■」を重ねて配置します。
  • STEP.2
    部品「あり」を「なし」に置き換える
    「あり」を「なし」に置き換える
    「あり」を「なし」に置き換えてみましょう。すると、「□(四角枠)」が表示されて動き出しますね!

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

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

  • STEP.1
    部品置き場の「なし」を長押しする
    編集したい部品を長押しする
    部品の置き場にある部品「なし」を長押しします(約3秒)。すると、「えんぴつ」が表示されます。

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

  • 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 に増やして、スロットルのようにストップを押してからもしばらく赤枠が動き続ける演出を加えています。どのように改造を加えたのか解き明かしてみて下さい!

それがこちら!


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

1 Comment

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です