直感的な手法で低年齢から使えるビジュアルプログラミングツール「Viscuit（ビスケット）」

　「Viscuit（ビスケット）」は子供向けのビジュアルプログラミング言語で、独特のルールがあり、多くの他の子ども向けプログラミングツールとは違う特徴を持っています。アプリで作品作りをしているような感覚でプログラムが生成され、とても直感的な方法で描いた絵を動かすことができます。タブレットのアプリとパソコンのWebブラウザー利用の両方で提供されています。

独特の［メガネ］という仕組み

　ビジュアルプログラミング言語というのは、プログラムに必要な要素をグラフィカルにパーツ化し、ドラッグ＆ドロップのマウス操作でプログラミングできるようにしたものです。多くのビジュアルプログラミングツールは、一般的なプログラミング言語の指示の仕方と同じような思考でブロックを組み合わせてプログラムを作るようにできています。ところが、「Viscuit」はビジュアル化の考え方が全く違い、独特の直感的な手法でプログラムが生成されるようになっています。

「Viscuit」の基本制作画面。［メガネ］と呼ばれる独自のユーザーインタフェイスを持っている

　「Viscuit」を開いたら、［ひとりでつくる］に進み、背景色を選んで［ペン型のアイコン］で作成に進みます。作成画面が開いたら、まず、画面右上方の［鉛筆アイコン］で動かしたい絵を書いて登録しましょう。

「Viscuit」のホーム画面。背景色を選んで作成に入るところ

作成画面の初期状態。［鉛筆アイコン］で絵を描く画面に進む

描画画面。色や筆の太さを直感的に選べる

　描いた絵は画面右サイドのツール部分に表示されます。プログラムエリアに［メガネ］をドラッグし、その［メガネ］の左側と右側に同じ絵を入れて、左右で絵の配置に少し変化をつけます。
　その上で、描いた絵を画面左サイドのステージ上に配置すると、置いた絵が動き始めます。［メガネ］の左側の絵の位置と右側の絵の位置との差を「Viscuit」側が見て、それに応じて動きが生成されるのです。

この場合、赤い丸の顔は下に進み、グリーンの三角の顔は上に進む。［メガネ］内の配置をいろいろ変えると法則がわかってくる

直感的なため「Viscuit」のルールや法則の全体像はとらえにくい

　一般的なプログラミング言語の場合、文字で論理的に考えて指示をしたり数字で座標やサイズなどを指定するのに対して、「Viscuit」は、とても直感的な手法で、ある意味大雑把な指示をするのが特徴です。

　［メガネ］を複数使うと、［メガネ］同士の関係性も「Viscuit」側が判断してプログラムを生成し始めるので、複雑なアニメーションや、インタラクティブな仕組み、ゲームなども作ることができます。ただし、「Viscuit」側の法則を体系的に理解するのは逆になかなか難しく、特に［メガネ］同士の関係性は全体像がつかみづらくすっきりとはわかりません。ですから、全体像を理解しようとせずに、いくつかの作例を参考に法則をひとつずつ知って、使ってみるのがおすすめです。

　例えば、［メガネ］を2つ以上使うと、コマアニメのように少し違うポーズに切り替えつつ、特定の方向に移動させることができます。次の図のようにパクパクしながら移動するアニメーションが作れます。

1つ目の［メガネ］には左に1フレーム目、右に2フレーム目の絵を入れ、2つめの［メガネ］には逆にすると、両方の［メガネ］が連結して動きが作られる。この場合パクパクしながら左方向に進む

　また、“触ったら”という条件を入れることもできます。例えばりんごの絵を触ったらりんごという文字が表示されるプログラムが作れます。なお、“触ったら”の機能を試すには、制作画面のままではなく、右サイドのツールの［四角アイコン］で全画面表示にしてください。

1つ目の［メガネ］には左に“触る対象”であるりんごの絵と［指型アイコン］を入れ、右には、触った後に表示させたいりんごの絵と文字の絵を入れる。2つ目の［メガネ］で、表示させた文字の絵をすぐに消している

　これらのプログラムを含め、他にも例が動画で説明されているページが「Viscuit」のWebサイトにはあるので、これを参考にまずは始めてみるとよいでしょう。

　なお、作品の保存をしたい場合は、作成画面の上部右側の［四角に上向き矢印アイコン］ー［丸アイコン］でサーバー上に保存可能です。ただし、保存すると他の人からも見えるシェア状態になり、一度保存した作品は、消したり上書きしたりすることができないので、作品の内容に個人情報を含めないなど気をつける必要があります。また、誰でもどの作品でも再編集できる状態になります。

　保存した作品は、背景別に時系列で格納されていますが、全ユーザーの作品が混ざっていてわかりづらく、自分の作品を見つけるのには苦労するでしょう。また、保存される期間は明示されていません。

保存する場合の手順。保存確定をしても保存画面に移動するわけではないので、どこにどう保存されたのかが非常にわかりにくい

過去に保存した作品を見る手順。保存した作品と同じ背景を選び過去の作品を見るボタンを押すと全ユーザーの保存作品が時系列に表示される

プログラミングとしての体験が他の子ども向けツールとは異なる

　文字や数字で論理的に考えるタイプのビジュアルプログラミング言語は、その発想や論理構造の作り方が、順次、反復、条件分岐等、テキストで書く言語に近いので、一般的なプログラミング言語の入門になる可能性があります。一方「Viscuit」の場合は、ビジュアル化の前提が全く違うので、一般的なプログラミング言語の入門に直結する効果はありません。

　「Viscuit」での体験は方向性が違い、使ってみると、一般的にイメージするプログラミングというよりも、アプリケーションでもの作りをしている感覚に近いのではないかと思います。直感的に触りながら「Viscuit」の持つ法則を体感して、その法則を利用して自分が描いた絵を自分の意志で動かすという経験ができます。また、「Viscuit」の法則自体を探りながら試行錯誤する経験にもなるでしょう。

　文字や数字がわかならなくても直感的に使えて、低年齢でも使えるのが利点ですから子どもも大人も一緒になって試してみてください。