こんにちは、イトナブ石巻のたまちゃんです。
なんだか、一気に寒くなりましたね〜！
寒がりな私からすると、秋を通り越して冬のようです☃️
石巻は年中風が強いので、この時期になるともうストーブが欠かせません。（個人的には）
日中と夜の気温差がかなり激しいので、体調を崩さないように気をつけていきたいですね。
さて、今回のコラムでは、コラム内で何度か登場している、ビジュアルプログラミング言語「viscuit」を詳しくご紹介していきたいと思います。
viscuitとは？
「viscuit」は、自分が描いたイラストを動かすことのできるビジュアルプログラミング言語です。
キーボードはほとんど使わず、すでにプログラミングされているメガネという仕組みを使います。メガネを使うと、「左の状態から右の状態に変化して」という命令をイラストに送ることができます。この仕組みを使ってアニメーションはもちろんのこと、ゲームを作ることも可能です。
PCでできる他には、iPadやAndroidのアプリも配信されているので、タブレットを使っての学習も行えるというすごいもの！
よくワークショップで体験してもらったあと、
「お家に帰ってやったよ！」なんて声をいただいたりも。
家のタブレットでも気軽にプログラミング体験ができるのがいいですよね。
また、色々組み合わせて自分で作るScratchよりも、メガネで命令してすぐ動くviscuitの方が分かりやすいし試しやすいので、低学年の子どもたちやプログラミング初心者の子供たちに人気な印象があります。
ビジュアルプログラミング言語とは？
さて、viscuitの説明の中で「ビジュアルプログラミング言語」という言葉が出てきましたが、なかなかピンとこない方もいるかもしれません。
簡単に説明すると、子どもたちが学びやすいように工夫されたプログラミング言語で、
キーボードをほとんど使わず、マウスの操作だけで直感的にプログラミングできることが特徴です。
以前紹介した「Scratch」もパソコン内でブロックを動かし組み立てるビジュアルプログラミング言語ですね！
「viscuit」も、マウスの操作だけでプログラミングすることができるため、このビジュアルプログラミング言語であると言えます。
・・・なんとなくイメージがついたでしょうか？
viscuitの使い方
では早速使い方についてです。
まずはWebブラウザでviscuitのページを開きます。
粘土で作られたかのようなアイコンが可愛いですね。
早速、「あそぶ」をクリック。
クリックすると、スクロールでこのボタンの位置へ移動するはずです。
早速「やってみる」を押してみましょう。
次の画面に行く前に「Flash」の画面が出た際には、許可を押してくださいね。
「みんなでつくる」は初心者用モード。
イラストを描いて、動かすことがメインのモードです。
作り終わった後は、描いたイラストたちを世界中のみんなのイラストが集まる「ビスケットランド」に送り楽しむことができます。
「ひとりでつくる」は上級者モードで、自由度の高いのが特徴です。
背景の色を変えることができたり、タッチや音を設定することも可能です。
今回は「みんなでつくる」で簡単にイラストを動かしていきたいと思います。
みんなでつくるの文字の横にある人が描いてある丸いボタンを押すと、
さらに12個の背景のボタンが出てきます。この中から好きな色の背景を選んでOKです。
背景のボタンを押すと・・・
ペンのボタン、四角のボタン、矢印のボタンが出てきますが
今回は「作る」の意味のペンのボタンを押してください。
ここでも、もし次の画面に行く前に「Flash」の画面が出た際は許可を押してください。
この画面がviscuitの基本の画面になります。
左側は先ほど選んだ背景になっていると思います。この部分を世界と読んでいきます。
右半分の大きなグレーの背景部分はプログラミングエリア。後ほどここでイラストへ命令していきます。
さっそく、右上のペンのボタンをクリックしてイラストを描いていきましょう。
大きく表示されている丸の中が画用紙のイメージです。
そして、右側にあるのが絵の具のパレットというイメージ。
使いたい色をクリックするとその色にジャンプしてその色で描くことができます。
真ん中にあるたくさんの丸では色の調整ができます。これも「この色！」と思ったところでクリックするとその色に変わるので、調整しましょう。
右下の方にある大きい丸から小さい丸に変わっている部分では、ペンの太さ調節ができます。左にいけばいくほど小さい（細い）筆に、右にいけばいくほど大きい（太い）筆に変更ができます。
また、その下にある色の濃さが違う5つの丸の部分では色の濃さを変えることができます。こちらも左にいけばいくほど薄く、右に行けばいくほど濃い色に調節できます。
では、早速イラストを描いていきましょう。
私が選んだ青い背景の世界は、海の中という設定なのでお魚を描いてみたいと思います。
画用紙の丸の右下にある、矢印のボタンを押すと1回だけ戻ることができます。
もしまちがえてしまったり、やり直したいときに使いましょう。
絵が下手でごめんなさい・・・😰
イラストが完成したら画面左下の丸のボタンを押してください。
すると、画面が戻り画面の右側に自分がさっき描いたイラストがいると思います！
この絵を、まずは世界に置いていきましょう。
右にあるイラストをクリックして、そのまま、画面左の背景エリアへドラッグ＆ドロップ！
世界の中に、イラストが置いてあればOKです。
早速動かしていきましょう。
まずは動かすためのメガネがないと何も始まらないので、
右側にあるイラストのさらに上にあるメガネを、画面右のグレーのエリアへドラッグ＆ドロップして置いておきましょう。
そうしたら、その中にさっき描いたイラストを入れていきます。
まずは左のレンズの中へ。次に右のレンズの中へ入れてみてください。
右のレンズへイラストを入れる際、うっすらとイラストが見えるかと思います。
この状態で右の絵を動かしたい方向へずらしておきましょう。
今回、私はこのお魚を画面の左に進ませたいのでこんな感じで設定しています。
さぁ、この状態で世界の方をみてみましょう！
魚が、動いていれば命令成功です！おめでとうございます。
というように、イラストを動かすことでプログラミングを学ぶことができるのがこのviscuitです。
すごく簡単に触ることができますので、ぜひ試してみてくださいね。
この他にも、すごいビジュアルプログラミング言語がまだまだあります。
次のご紹介では、Hour of codeをご紹介していきたいと思います。
お楽しみに！
Writer：たま（イトナブ）