どれ使う?プログラミング教育ツール

CSSで絵が描ける!「Make Art」~子ども向け自作PC「Kano」シリーズのプログラミング学習用アプリ

“Kano PC”

 イギリス発のKanoは子ども向け自作コンピューターで知られ、もともとRaspberry Piを使い独自のKano OSで動かすコンピューターキットで有名でしたが、現在は、Windows 10搭載のタブレットPCキット“Kano PC”も扱っています。日本でもこの“Kano PC”は販売がスタートしていて、日本語JISキーボードで別売のカメラをもあり、GIGAスクール構想の標準仕様を満たすスペックです(国内総販売代理店/リンクスインターナショナル)。コンピューターの仕組みを学びながら組み立て体験ができる上、親しみを感じられるデザインの良さが際立っていて、他のタブレットPCとは一線を画す独特の存在感があります。

 Kanoのコンピューターには独自のプログラミング学習用アプリが付属しているのが特徴で、現在ではWebベースのコミュニティ機能を備えて「Kano World」として公開されています。もちろん、“Kano PC”以外のパソコンでも利用可能です。今回は、子ども向けながらもテキストでコードを入力して絵を描く「Make Art」を紹介しましょう。

コードで絵を描く「Make Art」

 まず、ウェブブラウザで「Make Art」(https://art.kano.me)にアクセスします。ここでまず、[基本]カテゴリー[晴れた日]のチャレンジを試してみましょう。アカウント作成をしなくても使用でき、日本語化されているので安心して取り組めます。アカウントを作らなくても利用できます。

「Make Art」のトップページ。たくさんの学習サンプルから選べる。[基本]カテゴリーに入る
[基本]カテゴリーに入ったところ。1つステップに取り組むごとにロックがはずれて次のステップに進める

 プログラム画面は次の図の通りです。ていねいな説明にしたがってコードを入力していきます。コードは1文字でも間違っていると動きません。一行ずつていねいに誘導してくれて、正しく書けると次の行の説明が表示されます。日本語圏の子どもの場合、半角・全角の違いに気づかないことが多いので、お子さんが取り組むときには、英数入力状態になっていることを確認してあげてください。

「Make Art」のプログラム画面。❶ステップごとの説明、❷コード入力エリア、❸プログラムで描画した絵が表示されるエリア

 文字でコードを入力するプログラミングは単純なタイプミスでつまづくことが多いですが、適宜、補助ツールを使うと良いでしょう。お子さんが大文字小文字の打ち方、よく出てくる記号の打ち方などに慣れるまでは、大きく紙にメモして貼っておくなど、アナログなサポートも効果的です。

入力ができた行から描画されるので、背景がブルーに塗られている。❶[Autocomplete]をONに設定すると、❷入力中にコードヒントが出る。❸構文エラーがあるとアラートを表示してくれる
左サイドの[?]アイコンでコードのリファレンスが表示される。[+]アイコンで入力させることができる

 最初の課題で作るのは、ブルーの空に黄色いお日様。たった3行の記号なしのコードです。色の名前を変えたり数値を変えたりして変化を確認しましょう。

完成した課題。❶色のテキストにカーソルをあわせるとカラーパレットが表示されるのでタイプせずに色を変えられる。❷数字はスライダーが表示され、絵を見ながら調整できる

地道に絵を描いたり、ループやランダムを使って描画

 あとから記述したコードの図形が上層に描画されるので、座標をコントロールして図形を重ねれば、さまざまな絵を描くことができます。また、繰り返しのループを使って効率よく描画したり、ランダム値を使って描画することもできます。チャレンジの課題をどんどんやってみると、この「Make Art」のコード表記ルールがだんだんわかってきます。

[サマーキャンプ]カテゴリーの1つめのステップでは立て看板の絵を描く。テキストを書くことも
[中級]カテゴリーの1つめのステップではループを使って円を描画。アウトラインだけの丸をサイズを大きくしながら重ねて描画している。図は課題を少しアレンジしたもの

 ある程度わかったら、メニューから新しい作品を作成すれば自由にコードが書けるので、好きな絵を描いてみましょう。

自由にコードを書いてクマを描画した例。背景にはランダムな座標に小さな四角をたくさん配置した

 テキストで記述するコードは、アウトプットとの関係がすぐに把握できる方が、楽しく取り組めます。その点、「Make Art」は短いコードですぐに結果が描画されるのでやる気を持続しやすく最初に取り組むにはぴったりのアプリです。アクセスするだけですぐに使えますからぜひ試してみてください。

 2020年度から小学校でプログラミング教育が実施されています。これに伴い家庭でも手軽にプログラミングを学習できるツールが多数登場していますが、どんなツールを使えばいいのか迷ってしまう方も多いのではないでしょうか? そこで本連載では家庭でのプログラミング教育にピッタリなお勧めツールを紹介していきたいと思います。