子ども向けプログラミング学習アプリ「ビスケット」の使い方・ゲームの簡単な作り方

子ども向けプログラミング学習アプリ「ビスケット」について、東京情報大学総合情報学部の教授であり、プログラミング教育者やサイエンスライターとしても活躍する、松下孝太郎さんが解説。スクラッチとの違いも詳しく説明します。

おすすめの「ロボット・プログラミングスクール」一覧

Viscuit（ビスケット）とは

「Viscuit（ビスケット）」は、計算機科学者の原田康徳氏によって開発された主に子供を対象としたビジュアルプログラミング言語です。楽しみながらプログラミングを学習できるようになっており、小学校を中心としたプログラミングポータルでも小学校における実施例が報告されています。

ビスケットは、パソコンから ビスケットの公式サイト（https://www.viscuit.com）にアクセスして自由に使うことができます。また、スマホでも利用することができ、ビスケットの公式サイトからアプリをダウンロードしてインストールして使います。

ここでは、未就学児から小学校低学年の子どもが挑戦すること想定し、ビスケットの概要と使い方、スクラッチとの違い、ビスケットによるプログラミングについて解説します。

Viscuit（ビスケット）の特徴

ビスケットは子ども向けに作られており、操作は簡単です。大きな特徴としては、国産であることと、メガネを利用してプログラムが実行されることです。

基本的な使い方は、お絵描き画面でキャラクターを描き、それらをステージ（緑色のエリア）とメガネの左右のレンズの中に入れます。メガネの左右のレンズの中にある、キャラクターの形や位置の違いを認識し、その違いが変化の法則としてプログラムされ、ステージの中が変化します。

おすすめの「ロボット・プログラミングスクール」一覧

Viscuit（ビスケット）とScratch（スクラッチ）の違い・比較

ビスケットもスクラッチもどちらも子どもたちに人気のビジュアルプログラミング言語です。両方を使ってプログラミングを学習している人もいます。

では、2つのビジュアルプログラミング言語は主にどのような違いがあるのでしょうか。画面やプログラミング方法の違いについて見てみましょう。

• 画面の違い

ビスケットのプログラミングを行う場所（赤枠部分）

スクラッチのプログラミングを行う場所（赤枠部分）

ビスケットとスクラッチは、画面構成は異なりますが、どちらもプログラミングするエリアが中央にあります。

• プログラミングの方法

ビスケットのプログラミング方法

スクラッチのプログラミング方法

主なプログラミング方法として、ビスケットはメガネの左と右の違いによりキャラクターなどを動かします。スクラッチは指示がテキストで書かれたブロックをつなげてキャラクターなどを動かします。

• その他の編集画面など

ビスケットのお絵描き画面

スクラッチのお絵描き画面

ビスケットもスクラッチもキャラクターなどを作成するためのお絵かき用のエディタがあります。なお、スクラッチは多くの国の言語に対応しており、世界中の人が利用しているためサンプルが豊富です。ビスケットも今後は国際的に利用されることが期待されます。

また、この後に解説している動画でも、ビスケットとスクラッチの画面やプログラミング方法の違いなどを解説していますので参考にしてみてください。

Viscuit（ビスケット）の対応端末

ビスケットによるプログラミングは、パソコン、タブレット、スマートフォンで利用することができます。

小さなお子さんや、はじめてビスケットを使う人は、パソコンやタブレットで行うと画面も大きく学習しやすいでしょう。

おすすめの「ロボット・プログラミングスクール」一覧

Viscuit（ビスケット）の始め方・インストール方法

ビスケットはパソコンで利用する場合と、スマホやiPadで利用する場合とでやり方が異なります。

【パソコンの場合】Viscuit（ビスケット）の始め方

Webブラウザでビスケットの公式サイト（https://www.viscuit.com/）にアクセスして、Webブラウザ上で行います。詳しい使い方はこの後の解説を見て下さい。

【スマホやiPadの場合】Viscuit（ビスケット）の始め方

ビスケットの公式サイトからアプリをインストールして使います。ここでは、iOSでのアプリのインストール画面と、アプリを起動した画面を示します。

おすすめの「ロボット・プログラミングスクール」一覧

Viscuit（ビスケット）の基本的な使い方

ビスケットの基本的な使い方（プログラミングの仕方）は、絵を描いて動かすことです。ここでは、PCの画面により解説します。

Webブラウザでビスケットの公式サイト（https://www.viscuit.com/）にアクセスします。ビスケットの公式サイトが表示されたら、「あそぶ」をクリックします。

「やってみる」をクリックします。

「じゆうにつくる」をクリックします。

あとでプログラムを作る際に、キャラクターを動かすステージの背景色となる色選びます。

ここでは、緑色を選びます。

鉛筆をクリックします。

ビスケットのプログラミングの画面が表示されます。

鉛筆のボタンをクリックします。

色を選んで、絵を描きます。

ここでは、紫色の丸を描きます。

絵を描いたら丸のボタンをクリックします。

画面の右の部品置き場に、さきほど描いた丸の絵（キャラクター）が表示さます。

キャラクターをドラッグして、画面左上にあるステージに置きます。

画面右側の部品置き場からメガネをドラッグして、画面中央に置きます。

キャラクターをドラッグして、メガネの左に入れます。

キャラクターをドラッグしてメガネの右に入れます。このとき、左側のメガネに入れたキャラクターより、メガネの中の位置を少し前（左）に置きます。右側のメガネの薄い線で表示されたキャラクターは、左側のメガネの中に置いたキャラクターの位置です。

この場合、キャラクターは前（左）に向かって動きます。つまり、キャラクターはメガネの左の状態から、メガネの右の状態に変化します。

おすすめの「ロボット・プログラミングスクール」一覧

Viscuit（ビスケット）のゲームの作り方

ビスケットはゲームを作成することもできます。マウスなどによるイベント入力ができますので、マウスを使ったゲームも作ることができます。

簡単なゲーム作成に挑戦しよう

シューティングゲームのように遊べるゲームを作ってみましょう。ここでは、赤色の玉に青色の球を当てるゲームを作ってみます。赤色の球が左から右に向かって動いています。紫色の球をクリックすると青色の球が画面上方に向かって発射されますので、赤色の球に当たるように、紫色の球をクリックして、青色の球を発射します。

実際にどう操作すればよいか解説します。

• キャラクターとプログラム

はじめに、お絵描き画面でキャラクターを作成します。ここでは、紫色の球、青色の球、赤色の球を作成します。

次に、メガネを使ってキャラクターを動作させるプログラムを作成します。それぞれのメガネで次のようにキャラクターを動作させます。

1番上のメガネ
紫色の球をクリックすると、青色の球が出るようにします。クリックによって変化をさせるためのマウスクリックの指示は、部品置き場にある手のボタンをドラッグしてメガネの左に入れます。

2番目のメガネ
青色の球が上に向かって進むように設定しましょう。

3番目のメガネ
赤色の球が左に向かって進むように設定しましょう。

4番目のメガネ
赤色の球と青色の球が触れると両方とも消えるように設定しましょう。具体的には、メガネの左に赤色の球と青色の球をくっつけて入れます。メガネの右には何も入れません。これにより、赤色の球に青色の球が当たると、両方の球が消える状態を表すことができます。

• プログラムの動作

マウスクリックによるイベントがある場合は、画面右の四角のボタンをクリックして全画面表示にしてから行います。

赤色の球が左に向かって動きますので、タイミングよく紫色の球をクリックして青色の球を発射しましょう。

• 難易度の変更

ゲームの難易度も簡単に変えることができます。赤色の球が画面の上にあるほどタイミングをよく青色の球を赤色の球に当てることが難しくなります。赤色の球をドラッグして画面の下の方に置くと、青色の球を当てやすくなります。

また、赤色の球の大きさを大きくすると的の大きさが大きくなりますので、青色の球を赤色の球に当てやすくなります。

いろいろなゲームに挑戦してみよう

簡単なゲームが作れるようになったら、いろいろなゲームを作ってみましょう。キャラクターの数を増やして本格的なシューティングゲームを作ったり、ゲームのストーリーを考えてロールプレイングゲームなどを作ったりしてみるのも良いでしょう。

ゲームのサンプルは、ビスケットを開発した原田康徳先生のYouTubeチャンネル、「ViscuitKids ビスケットキッズ公式」にも沢山あります。詳しい解説もされていますのでぜひ見てください。

おすすめの「ロボット・プログラミングスクール」一覧

Viscuit（ビスケット）の学び方

ビスケットはさまざまな学び方があります。オンラインスクールや動画による解説は、実際の動きを見ることができるので小さな子どもにも理解しやすいでしょう。また、市販の書籍もありますので、先生や保護者と一緒に読んで学べます。

オンラインスクール

ビスケットには、ビスケットを開発したデジタルポケットが主宰するオンラインの学校「ビスケットスクール」があります。達成目標に応じた学習日数やカリキュラムが設定されています。

参考にできる動画

YouTubeなどの動画サイトやWebページでは、多くの解説動画や体験動画などを見ることができ、プログラミングに関する動画も多数あります。

ビスケットの使い方や作品例も動画で紹介されており、ビスケットの公式ホームページにもあそび方動画のページがあります。

Viscuit（ビスケット）の本

ビスケットの本はいくつか市販本がありますが、おすすめは原田康徳、渡辺勇士、井上愉可里：『ビスケットであそぼう – 園児・小学生からはじめるプログラミング-』です。

開発者の原田康徳先生をはじめとする方々の執筆で、内容もやさしいので、子どもやはじめてビスケットでプログラミングを行う人が学習する本として良いと思います。

まとめ

ビスケットは、小さなこどもから楽しめるビジュアルプログラミング言語です。単純な動きを組み合わせて、思いもよらないものを作る楽しみがあります。スクラッチとともに学習するとアルゴリズムの共通点や違いもわかり、プログラミングに対する理解が一層深まると思います。ぜひ挑戦してみて下さい。

なお、みらのびではビジュアルプログラミングやロボットプログラミングが学べる教室の無料体験レッスンへの申し込みが可能です。

 LITALICOワンダーでは、Scrachやビスケットによるプログラミングやレゴを使ったロボットプログラミングが体験できます。

・LITALICOワンダー
URL：「LITALICOワンダー」の教室ページ一覧
運営会社：株式会社 LITALICO（LITALICO lnc.）
主な学べる言語：Scratch、Viscuit、Unity（C＃）、HTML / CSS、JavaScript、レゴ®WeDo2.0ソフトウェア、レゴ®エデュケーション SPIKE™プライム専用ソフトウェアなど
カリキュラムの特徴：最大4人までの少人数レッスン制。プログラミングやロボット、デジタルファブリケーションを活用したもの作りの機会を提供、論理的思考力や問題解決能力が身につき、すぐに修正、改善できるデジタルデータを扱うことで、試行錯誤する力もつく。オンラインにも対応
月謝の目安：週1回/月4回　2万6400円など

「LITALICOワンダー」の教室ページ一覧

 2003年に設立された「ロボット科学教室Crefus（クレファス）」では、レゴなどを用いた実践的なロボットプログラミングが体験可能。

・ロボット科学教育Crefus
URL：「ロボット科学教育Crefus」の教室ページ一覧
運営会社：株式会社ロボット科学教育（英文名：Crefus）
主な学べる言語：レゴ®WeDo2.0ソフトウェア、教育版レゴ®マインドストーム®EV3ソフトウェア、C言語など
カリキュラムの特徴：テクノロジー×社会の関わりを実践重視で学ぶ。ロボット製作を通じ、知的好奇心や探求心、論理的な思考力、表現力の育成を目指し、低学年ではレゴ社の教育用教材、高学年は本格的なロボットを教材として授業を行う
月謝の目安：9900円～など

「ロボット科学教育Crefus」の教室ページ一覧

ビスケットの簡単なプログラミングをきっかけに、ゲームやロボットをより深く学びたいご家庭はぜひ無料体験に申し込んでみてはいかがでしょうか。