ホーム -> ラボ -> キッズWS -> プログラミングでお絵かき水族館

ラボ

2017.10.09
プログラミングでお絵かき水族館

2020年から始まるプログラミング教育必修化にむけてプログラミングを題材に扱うキッズ向けのイベントが増えてきましたね。今回紹介するのは、無料でできる「プログラミング+お絵かき水族館」の方法です。

使用するプログラミングツールは「Viscuit」
http://www.viscuit.com/
「Viscuit」は、総務省平成28年度第2次補正予算(クラウドや地域人材を活用)や、平成29年度(障害のある児童生徒を対象)「若年層に対するプログラミング教育の普及推進」に採択されているものすごくきちんとしたツールなのです。

「なんだか難しそう。。。」そう思いますよね。
でも、ぜんぜん。簡単です。

「Viscuit」は驚くほど簡単で、教室やイベントなどみんなで取り組むと楽しさ倍増!な素敵ツールです。

詳しい使い方は、書籍「ビスケットであそぼう 園児・小学生からはじめるプログラミング」で学ぶとして、ここでは「プログラミングでお絵かき水族館」イベントを行うときの方法に特化して説明します。

■使用する機材
アプリ:iPhone 用Android 用
参加者側:iPad or iPhone or Android 端末
主催側:PC or iPad + 壁投影用のプロジェクター

■準備
(1)グループコードを発行してもらう
「viscuit」
http://www.viscuit.com/サイトにアクセスします。
MENU の [おしえる]リンクから下記の画面に遷移します。
IMG_7057.PNG
ここで [授業やワークショップを実施する]をクリックします。

IMG_7058.PNG
ここで、[サイトはこちら]を押すと次の画面が表示されます。

IMG_7059.PNG
ここで、[ビスケットランド]ボタンを押すと、別の画面に切り替わり8桁のグループコードが発行されます。
今回発行されたのは「70088629」
イベントのフロー確認のために、毎回グループコードを発行するとご迷惑になるかもなので、お試ししてみたい方は、上記の「70088629」をご使用ください。
※使用数に上限があるようなのでクローズされたらごめんなさい。

(2)Viscuitにグループコードを設定する
○PCのとき:
Flashplayerがインストールされているブラウザでグループコードを引数につけたURLを開きます。
https://develop.viscuit.com/env/schoolopen.html?sid=70088629

○アプリのとき:
IMG_0065.PNG
(1)Viscuitを開いて、最初の画面で[さんかする]をタップします。

IMG_0066.PNG
(2)テキストフィールドにグループコードを入力し、[さんかする]をタップします。

■イベント当日
○絵を描く
IMG_0067.PNG
(1)青のグラデーションの背景のものが「海」の背景です。位置は再読み込みで変化しますので、同じ位置ではありませんが、同じ配色のものをタップします。

IMG_0068.PNG
(2)メニューが表示されますので、左端の鉛筆マークを選びます。

IMG_0069.PNG
(3)編集画面です。ここでプログラミングをしますが、何もないのでまず絵を描きましょう。絵を描く画面には左下の[鉛筆]アイコンから切り替えます。

IMG_0070.PNG
(4)絵を描く画面です。上の丸の中に絵を描いたら、左にある[○]アイコンで絵を描く画面を終了します。

IMG_0071.PNG
(5)編集画面に戻りました。下に描いた絵が加わっています。青い海のステージに描いた絵をおきましょう。ステージまでドラッグ(押したまま引っ張り、良い位置で離す)します。

○絵に動きをつける
IMG_0072.PNG
(6)ステージにたくさん絵を置けました。次に動きをつけましょう。動きは、めがねを使ってつけます。まず、めがねをドラッグします。

IMG_0073.PNG
(7)めがねの左側に絵をドラッグします。これが最初の位置です。

IMG_0075.PNG
(8)めがねの右側に絵をドラッグします。すると、上に白いまるが現れ、左の位置との対比が確認できます。この図の場合は左より右が少し下がっています。これは、絵が下がる動きをするような命令になります。


○水族館に送る

IMG_0077.PNG
(9)めがねをひとつ増やして、あがるような動きをつけました。みんなで見られるように水族館に送りましょう。みんなで見られる画面に送るには、左下のアイコンをタップします。

IMG_0078.PNG
(10)確認画面が表示されました。[○]ボタンをタップします。

■動画で復習

IMG_7068.JPG
iPadでもiPhoneでも同じように使えます。


  


このページを編集する(内部専用)