Pintaniña, belongs to your side
学びの海の助け舟 ピンタニーニャ
Eatablished since 2020

titleimage

さいしょから学ぼう
ビスケットでプログラムを作って学ぼう 1

 

テキストの補足・解説
紙の上では動かないけど

ピンタニーニャロゴ画像 やりたくなる楽しい教材
     続けられるから忘れない
やりたくなる楽しい教材
     続けられるから忘れない

紙の教科書では伝えきれない「具体的な操作方法」など、「動画で見れたらいいのに」という要望に応えるページを用意しました。


この教科書の目的

ビスケット未経験者がビスケットをある程度使えるようになることを目指します。


 

1.学んだことを力にする方法

頭に詰め込むだけが勉強じゃないってことは、大人なら実経験に基づいて十分理解していることと思います。
インプットとアウトプットをバランス良く行いましょう。


 

2.ウェブサイトを見てみよう

インターネットエクスプローラーは新しいサイトに対応しませんのでご注意を。
このページを見れているのであれば解説不要でしょうか。


 

3.ビスケットのサイトに行ってみよう

Viscuit←ビスケットのサイトへジャンプするよ

ビスケットのサイトに行けないとビスケットができません。
ショートカットを作っておくといいでしょう。



動画で見てみよう

上記ビスケットのリンクで開いた画面から、どこを押したらいいのかよくわからない人は動画を参考にやってみましょう。

 

4.ビスケットをやってみる

保存/再開の部分で結構な変更がありました。
テキストは「ほんだな」での操作法を解説していますが、2021年春以降は「ほんだな」以前のFlash時代のページに似た画面で『じゆうにつくる』を使っていくようになると思われます。私の教室でもそうしています。

4.ビスケットを『やってみる』

▽▼▽最新版のページはコチラ▽▼▽

4 画像クリックで拡大します

「じゆうにつくる」を選んでください。あとはやってることは同じです。
『まえのあそぶばしょ』がそう遠くないうちに削除される可能性があります。

動画で見てみよう

ビスケットのサイトを開いて、「やってみる」をクリックしたあとの操作の仕方を動画で説明します。


4.3 プログラムを保存する方法

▽▼▽最新版のページはコチラ▽▼▽

4.3 画像クリックで拡大します

保存する方法自体に変更はありません。保存が成功したあと戻ってくる画面が「じゆうにつくる」の画面になります。
保存の際にいちばん大事なことが、保存先の番号を控えておくことです。やっていることは「ほんだな」のときと同じですが、画面が違います。詳細は次のページを参照ください。

4.4 作ったプログラムを再開する方法

▽▼▽最新版のページはコチラ▽▼▽

4.4 画像クリックで拡大します

再開ボタンが変わりました。ですが、2年以上前から始めている人は見慣れた画面かもしれませんね。
再開ボタンで開く画面は「ほんだな」のときに比べ圧倒的に見やすくなっています。とはいえ似たような数字が並ぶ画面は慣れないと探しにくいかもしれません。
難しいのは最初だけなので、とにかくたくさんやってみましょう!

4.5 ビスケット 設定画面の使い方

動画で見てみよう

設定ボタンを押して、背景の色とマス目の粗さを変更しています。やり方の一例ですが、よくわからない人はそのとおりにやってみましょう。


 

5.絵を描いてみよう

絵を描くことがビスケットの基本。テキストを見ただけじゃ分からない人はこの動画と全く同じことを一度やってみよう。
なお、マウスをクリックしたときは、マウスカーソルに黄色い●のしるしが付くからよく見てね。


動画で見てみよう

設定の様子とボールを描く様子を動画で確認できるよ。

動画で見てみよう

灰色のブロックを実際に描く様子を動画で確認できるよ

 

6.絵を動かしてみよう ~メガネの基本~

メガネの使い方を覚えよう。一度、動画と全く同じことをしてみると意味が分かりやすくなります。試してみよう。


動画で見てみよう

ステージに絵を置く方法、メガネの出し方、絵やメガネの消し方など、ビスケットプログラミングの基本を動画で覚えよう。なお、マウスカーソルが黄色になった時はクリックしていることを表すよ。黄色が続くときはドラッグ中ってことだよ。

 

7.絵の動きを変えてみよう

メガネが実際に働く様子を確認できるよ。ボールだけのときは1個目のメガネが働いて下に落ちるけど、ブロックの上に来たときは2個目のメガネが働いて右に動くよ。


動画で見てみよう

メガネの働きを確認しよう。ネガネに絵を置いた瞬間からメガネは働き出すよ。
左レンズに作った絵の状態を、右レンズに作った絵の状態に変えるというのがビスケットのプログラミング方法だよ。
どちらのメガネも当てはまるよ、って場合は左レンズに入ってる絵の個数の多い方のメガネが優先的に働くよ。絵の個数が同じの場合はランダムで働くよ。詳しくは9章の解説を見てね。

 

8.絵を自在に動かしてみよう

メガネは条件に当てはまれば何度でも働くよ。その様子を見てみよう。


動画で見てみよう

絵をどのようにステージに並べたかによって動きが変わるよ。いろいろやってみて発見しよう!

 

9.目的を作り、区切りをつけよう

ゴールに着いたら『ゴール』のメッセージが出現するようにして、プログラムにもゴールや目的を付け加えよう。


動画で見てみよう

文字のふちどりの簡単なやり方に注目。
また、メガネの優先順位のルールも覚えよう。絵が多い方が優先!

 

10.敵を作り、失敗のパターンを作ろう

プログラムにはうまくいった結果と失敗した結果、両方があるものです。失敗のパターンを作って、成功をもっと嬉しくしよう!


動画で見てみよう

具体的な方法を確認しよう。また、メガネが近すぎると隣のメガネに入ってしまったり、絵を置く位置を間違えた場合の直し方にも注目だ。

 

11.改造してみよう

仕掛けはそのままで、絵を変えるだけで印象や内容がガラリと変えることができるよ。
『もう一度作る』のではなく、『作ったもののキャラを変える』と言ったほうが適切かな。
ビスケットは、絵を変えるとメガネに置かれた絵も自動的に変わるから、メガネはそのままでいいんだ。


動画で見てみよう

絵の消し方など、実は前に出ていることなので復習して再確認しよう。

設定を変えて、動きを変える。実際のやり方を見て再確認しよう。

 

12.進化させよう ~動きを増やす~

動きを増やそう。右向きなら右へ、左にも行けるように左向きの絵を追加するよ。横断歩道を下に移動したり、動きのバリエーションを増やすとプログラムが楽しくなるね。


動画で見てみよう

絵が重なるようなメガネも作れるよ。具体的な方法を確認しよう。

 

13.新たな仕掛けを追加しよう

動きのバリエーションを増やしたら、どうなったら動きが変わるか、それを決めるよ。


動画で見てみよう

右向きと左向きの切り替わりがいつなのかに注目しよう。

 

14.追加に合わせて調整しよう

主人公キャラに見た目が何種類かあったなら、すべての種類で起こるイベントを設定しておく必要があるよ。ゴールできるのは右向きだけ、では変だよね。


動画で見てみよう

動きの確認をするために、キャラを追加するのもいい方法だよ。動きの確認ができたら消せばいいからね。

 

15.楽しんでみよう

作って終わりじゃもったいない。料理教室でも、そりゃ作ることを習いに行ってるだろうけど、できた料理は食べなきゃ意味がないよ。美味しくできたかは食べてみなくちゃわからないからね。
プログラムも、遊んでみるから楽しさが分かるよね!


動画で見てみよう

いろいろ試してみた結果の動きが正しいかどうかをこの動画で確認しよう。



 一般社団法人ピンタニーニャ・プログラミング学習協会


最後まで読んでいただきありがとうございます