【国分寺・国立・府中】子ども向けプログラミング教室

今週のひなテック(9/19)

ハートの目のアルくんが「こんにちはアル」と1文字ずつしゃべっている画面

こんにちは!ひなテックです。少し間があいてしまいましたが、今週の教室の様子をお届けします。9月19日のレッスンは、小6・小4の4人が「プログラムをまとめよう」、小3のSくんが「メッセージの使い方」と「デジタルアニメ」に取り組みました。

「プログラムをまとめよう」— 同じコードを2回書かない

今週の題材は、キャラクターのセリフが1文字ずつ現れる「タイプライター風」のしゃべり方です。「セリフの長さ」の回数だけ繰り返して、「文字の順番」番目の文字を1つずつ足しながら0.1秒ずつ言う——この仕組みで、ゲームのメッセージウィンドウのような演出になります。

見本のプログラムでは、この同じ仕組みが「こんにちは!」用と「キジムンもこんにちは」用の2か所に、まったく同じ形で書いてありました。そこで今週の課題は、この2つを1つの「自分だけのブロック」にまとめること。プログラミングでは「関数」と呼ばれる考え方です。

「1文字ずつしゃべる」ブロックの定義と、それを呼び出すメインのプログラム

上の画像はSiちゃんの完成形です。右側の「定義 1文字ずつしゃべる(セリフ)」が自分で作ったブロックで、左側のメインのプログラムからは「1文字ずつしゃべる アルゴンおはぽよ!」と一行呼ぶだけ。セリフを入れ替えたければ、そのピンクの枠の中身を変えるだけで済みます。仕組みを1か所に集めておけば、直すときも1か所で済む。これが「まとめる」ことの一番のごほうびです。

Siちゃん(小6)— セリフは「おはぽよ」

アルぴが「アルゴンおはぽよ」と1文字ずつしゃべっている画面

ブロックができあがったら、あとはセリフを自分の言葉にする番。Siちゃんは主人公の名前を「アルぴ」に変えて、「アルゴンおはぽよ!」「キジムンもおはぽよ~」とごあいさつ。教科書どおりの「こんにちは」が、いっきに本人の作品になりました。

Saくん(小6)— 登場人物は明治の偉人

ドラゴンが「こんにちは!犬養」と1文字ずつしゃべっている画面

Saくんの作品を開いて驚いたのは、スプライトの名前です。アルくん・アルごん・キジムンが、「犬養毅」「大隈重信」「北里柴三郎」に改名されていました。ブロックの名前も「1文字ずつ喋る」、引数の名前も「台詞」と、きっちり漢字で統一。ドラゴンが「こんにちは!犬養毅」と1文字ずつしゃべる画面は、なかなかシュールで楽しいです。

Hちゃん(小6)— あと1ブロックで完成

にらみ顔のドラゴンがキジムンに詰め寄って「こんにちは!」と言っている画面

Hちゃんは「1文字づつしゃべる」ブロックを作って、セリフを「こっち見んな」などのツッコミ調に。にらみ顔のドラゴンがキジムンに詰め寄る、コント仕立ての一場面です。

ただ、画面の吹き出しをよく見ると「こんにちは!」のまま。画面の左上の変数には「こっち見んな」がちゃんと1文字ずつたまっているのに、最後の「言う」ブロックにその変数ではなく「こんにちは!」の文字がそのまま入っていました。差し替えるのはブロック1つ。あと一歩のところまで来ているので、次回の最初に仕上げましょう。

Mちゃん(小4)— メッセージと効果音で「かけ合い」に

ハートの目のアルくんが「こんにちはアル」と1文字ずつしゃべっている画面

Mちゃんは「ひともじずつしゃべる」ブロックを作ったあとが長かった。しゃべり終わったらメッセージを送って、受け取ったアルごんが笑い声を上げる。アルくんのコスチュームはハートの目の「一目ぼれ」バージョンに。「あwwwこんにちはww」と笑いながらしゃべるあいだ、効果音の笑い声も重なります。

今週の課題は「関数」でしたが、Mちゃんは前に習った「メッセージ」と「音」を自分から持ち込んで、ひとりしゃべりを2人のかけ合いに変えてしまいました。習ったことを組み合わせて使えるのは、道具が自分のものになっている証拠です。

Sくん(小3)— 「メッセージ」でキャラクターに会話させる

小3のSくんは、別の題材で「メッセージ」を学びました。メッセージとは、あるスプライトから別のスプライトへ「合図」を送る仕組み。まずは「じゃんけん」で練習です。グー・チョキ・パーのボタンを押すと、それぞれのメッセージが飛んで、受け取った手のスプライトが形を変えます。

グー・チョキ・パーのボタンと、グーの手が表示されたじゃんけん画面

この「メッセージの使い方」、Sくんの作品一覧にはなんと4つ並んでいました。何度も組み直して、最後の1つには「じゃんけんの手を押すと『ボタンを押してね』と教えてくれる」という自分なりの追加も入っています。

そして仕上げが「デジタルアニメ」。フリエと赤ちゃんが再会するお話です。「あ!」「やっとみつけた!」「あー!フリエだ!」と2人が交互にしゃべるのですが、この「相手がしゃべり終わったら自分の番」という順番待ちを、覚えたばかりのメッセージでつないでいます。見本では「○秒言う」の時間を合わせて順番を作っていたところを、Sくんは「しゃべり終わったらメッセージを送る→受け取ったら次のセリフ」に組み替えました。

街の背景で赤ちゃんが「フリエだ!」と話しかけているアニメの一場面

さらに「場面きりかえ」という専用のスプライトを用意して、幽霊の効果でじわっとフェードしながらお家の背景に切り替え。ステージにはBGMまで鳴っています。これで「デザイン」と「イベント」がどちらも★3。3年生でここまで組み立てられるのは立派です。

お家の背景に切り替わり、フリエと赤ちゃんが並んでいるアニメのラストシーン

みんなのスキルアップ

今週の作品で獲得したスキルバッジです。

  • Siちゃん・Saくん・Hちゃん・Mちゃん:関数 ★3、変数 ★1(プログラムをまとめよう)
  • Mちゃん:さらにデザイン ★2、イベント ★2
  • Sくん:デザイン ★3、イベント ★3(デジタルアニメ)/デザイン ★2、イベント ★3(メッセージの使い方・アニメ)

「関数★3」は、この教室では初めて並んだバッジです。自分でブロックを定義して、引数(セリフ)を受け取って動かすところまでできた証です。

「2回書いたら、まとめどき」

今週の「まとめる」は、見た目には地味な作業です。動いているプログラムを、動いたまま組み替えるだけで、ゲームが派手になるわけではありません。でもプロのプログラマーが毎日いちばん時間をかけているのは、実はこの作業です。同じことを2回書いていたら、まとめられないか考える。まとめておけば、直すのも増やすのも1か所で済む。

そして今日作った「1文字ずつしゃべる」ブロックは、そのまま次の作品にも持っていけます。RPGの会話シーンでも、クイズの問題文でも、この一行を呼ぶだけ。今週みんなが手に入れたのは、自分専用の部品を作る力でした。

来週も楽しみに!

来週もみんなの新しい作品が楽しみです。ひなテックでは無料体験も受付中です。プログラミングに興味があるお子さまは、ぜひお気軽にお問い合わせください!

トップへ戻る