2017.10.09
プログラミングでお絵かき水族館
使用するプログラミングツールは「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 の [おしえる]リンクをクリックすると画面の下の方に遷移します。
ここで [学校で使用する方へ]をクリックします。
新しいページで画面をしたのほうにスクロールして「学校向けの環境をインターネットで利用する」のブロックの一番下にある、[サイトはこちら]を押すと次の画面が表示されます。
[授業やワークショップを実施する]画面で[学校でビスケット3]ブロックの真ん中あたりにある、[このリンク]を押すと、別の画面に切り替わり8桁のグループコードが発行されます。
切り替わった画面で[参加(さんか)する]ボタンを押すとviscuit画面に入れます。
イベントでは、水色の[1]を使うことが多いです。
今回発行されたのは「64678110」
イベントのフロー確認のために、毎回グループコードを発行するとご迷惑になるかもなので、お試ししてみたい方は、上記の「64678110」をご使用ください。
※使用数に上限があるようなのでクローズされたらごめんなさい。
(2)Viscuitにグループコードを設定する
○PCのとき:
Flashplayerがインストールされているブラウザでグループコードを引数につけたURLを開きます。
https://develop.viscuit.com/env/schoolopen.html?sid=70088629
○アプリのとき:
(1)Viscuitを開いて、最初の画面で[さんかする]をタップします。
(2)テキストフィールドにグループコードを入力し、[さんかする]をタップします。
■イベント当日
○絵を描く
(1)青のグラデーションの背景のものが「海」の背景です。位置は再読み込みで変化しますので、同じ位置ではありませんが、同じ配色のものをタップします。
(2)メニューが表示されますので、左端の鉛筆マークを選びます。
(3)編集画面です。ここでプログラミングをしますが、何もないのでまず絵を描きましょう。絵を描く画面には左下の[鉛筆]アイコンから切り替えます。
(4)絵を描く画面です。上の丸の中に絵を描いたら、左にある[○]アイコンで絵を描く画面を終了します。
(5)編集画面に戻りました。下に描いた絵が加わっています。青い海のステージに描いた絵をおきましょう。ステージまでドラッグ(押したまま引っ張り、良い位置で離す)します。
○絵に動きをつける
(6)ステージにたくさん絵を置けました。次に動きをつけましょう。動きは、めがねを使ってつけます。まず、めがねをドラッグします。
(7)めがねの左側に絵をドラッグします。これが最初の位置です。
(8)めがねの右側に絵をドラッグします。すると、上に白いまるが現れ、左の位置との対比が確認できます。この図の場合は左より右が少し下がっています。これは、絵が下がる動きをするような命令になります。
○水族館に送る
(9)めがねをひとつ増やして、あがるような動きをつけました。みんなで見られるように水族館に送りましょう。みんなで見られる画面に送るには、左下のアイコンをタップします。
(10)確認画面が表示されました。[○]ボタンをタップします。
■動画で復習
iPadでもiPhoneでも同じように使えます。