こんにちは。 VOYAGE GROUP でエンジニアをしています tatenosystem です。
最近は本ブログで「ネタ担当ポジション」を期待され、地味なプレッシャーをシステムの偉い人から受けながらホソボソと生きています。

先日知人から「うちの子供にプログラミングを教えて欲しい」という変わった依頼がやってきました。
小学４年生のゲーム好きな子で、「将来ゲームを作ってみたいからプログラムをやってみたい！」という理由とのこと。
いちおう私もプログラマなので、面白そうなので引き受けました。

そんなわけで プログラム初心者小学生でも勉強できるツール を調べてみました。

MITメディアラボのスクラッチ や google-blockly 、前田ブロック など、子供向けプログラミングツールはいろいろありました。
そこで、「前田ブロック」を使って実際に教えて見ました。が、

 簡単なゲームを作ってもらおうと思ったのですが、プログラム初心者の小学4年生にはゲーム制作は敷居が高い。
むしろ 私が 「前田ブロック」にハマりました。

「もっとゲーム感覚でプログラミングが学べるもの無いかなぁ。。。」

「わかりやすいといえば、ぴゅう太の日本語BASICか？　しかし今更どこで、ぴゅう太を売っているんだ？」

みたいなことを本気でいろいろ考えてましたが、

そういえばアメリカでは（日本でも） 教育系のスタートアップ がひとつのトレンドとして注目されることを思い出しました。
EdTech（エドテック） とも呼ばれて、なかなかのトレンドぶり。
日本でも、政府の成長戦略素案に「プログラミング教育」が盛り込まれたりと、今後の注目トレンド間違いなし！

ビジネスチャンス キタコレ！！！


そんな訳で作ってみました。

ゲーム感覚で学べる「子供向けブロックプログラミング学習ツール」、


sample_game01

ツール名は、「前田ブロック」の パク  リスペクト です。ネーミングセンスに感嘆しました。
JavaScriptフレームワークの enchant.jsで作成しました。
キーボード入力は一切使わない学習ツールを目指しました。iPad(タブレット)でも動作します。

ブロックを配置しクマを動かすプログラムを作ります。 
クマが全ての「りんご」を取ったらゲームクリアとなります。 

ブロックは「ドラッグ＆ドロップ」で左のプログラムエリアに配置できます。

 use_001

配置したブロックは、クリックで「チェックを行う向き」や「クマの移動方向」を変えることができます。

use_002

ループブロック が実行されると、再び左上からプログラムが実行されます。

use_003

プログラム実行ボタンを押すと、赤い四角（「実行」）が左上から下に落ちてきて、赤い四角のブロックが実行されることになります。

vg_use_004

code_area_01

IFブロックや「実行」を左の列に移動させとこが出来ます。
制御ブロックを置くと、「実行」を右や左の列に移動させとこが出来ます。

（例）クマの上に障害物があったら、クマを左に動かす

code_area_03

■ この学習ツールで教えたいこと
  • プログラムって凄そうだけど、所詮は1つずつ順番に処理しているだけなんだよ－。ね、簡単でしょ？(*1)
  • IF処理。なにかをチェックして、そのチェック結果で処理を変えることが出来るんだよ(*2)
  • ループ処理。同じ処理を何度もグルグルまわして処理ができるんだよ(*3)
(*1) マルチスレッド的な処理は除く
(*2) たてのブロックでは、障害物の有無、リンゴ・毒りんごの有無、フラグの有無をチェックできます
(*3) たてのブロックでは、プログラムエリア全体が大きなループ処理の中に入っているイメージです

では、見て行きましょう。

クマをループ処理で上に歩き続けさせたい場合は、次のようにブロックを配置します。

 vg_code001

プログラムのイメージだとこんな感じです。
while(true) {
    kuma.y--;
}

上に歩き続け、前方に障害物があった時に、右に歩くコードは、次のようにブロックを配置します。

vg_code002

プログラムのイメージだとこんな感じです。
while(true) {
    kuma.y--;
    if (MAP[kuma.x][kuma.y - 1] == WALL) kuma.x++;
}

上に歩き続け、右にリンゴがあった時に、右に歩くコードは、次のようにブロックを配置します。

vg_code003

プログラムのイメージだとこんな感じです。
while(true) {
    kuma.y--;
    if (MAP[kuma.x + 1][kuma.y] == APPLE) kuma.x++;
}

デモゲーム の下の２つのリンゴをとるプログラムは、
 
sample_code101

となります。
プログラムのイメージだとこんな感じです。
while(true) {
    kuma.y--;
    if (MAP[kuma.x + 1][kuma.y] == APPLE) kuma.x = kuma.x + 2;
    if (MAP[kuma.x][kuma.y - 1] == WALL) kuma.x++;
}

すこしプログラムらしいフラグを使ったブロックプログラムも作れます。

vg_code100

プログラムのイメージだとこんな感じです。

while(true) {
    if ( FLAG[1] ) {
        kuma.x++;
        if (MAP[kuma.x + 1][kuma.y] == WALL) kuma.y--;
        continue;
    }
    kuma.y--;
    if (MAP[kuma.x + 1][kuma.y] == APPLE) {
        kuma.x++;
        continue;
    }
    if (MAP[kuma.x][kuma.y - 1] == WALL) FLAG[1] = true;
}

これはまったく同じ処理をするプログラムですが、こっちのプロック配置のほうがわかりやいかも知れませんね。
（FLAG[1] == true 時の処理を上に持ってきました）

vg_code101


具体的な遊び方（プログラミングのやり方）は、下記ページを参考にしてください。


ブロックの種類の説明は、下記ページになります。


さらに自由にゲームを作成できるエディタも用意しました。
ゲーム作成後、作成したゲームを遊べるURLが出力されます。


そんな訳で、来月この「たてのブロック」を持って、知人の子供にリベンジしに行ってきます ( ｰ`дｰ´)ゞ
 
カリキュラム的なゲームを充実させて、これを使って近い将来「子供向けのプログラミングセミナー」とか開催出来たら面白いですね。
 
「たてのブロック」の今後にご期待ください！


オレはようやく登りはじめたばかりだからな
このはてしなく遠いプログラミング学習ツール開発道をよ…

vgblog_last01


未完