家庭でプログラミング教育にトライ

未踏スーパークリエータが作った「ハックフォープレイ」でゲームをプログラミング!

文部科学省により、2020年以降に施行される新学習指導要領において小学校でのプログラミング教育必修化が決定しました。この連載では、元小学校教員でITジャーナリストの高橋暁子氏が、プログラミングに詳しくない保護者でも家庭で子どもにトライさせられるかどうかを確認しながら、実際にご自身のお子さん(算数好きの小学2年生・男児)と使ってみた際の反応や学習効果を交えながら、様々な教材を紹介していきます。

「HackforPlay(ハックフォープレイ)」は、子どもがゲーム感覚でプログラミングを学べるRPGゲーム風プラットフォームだ。ワープゾーンを設置したり、マップを増やしたりできるので、RPGゲーム好きでなくともわくわくするだろう。

ダウンロードの必要はなくブラウザー上で楽しめるので、公式サイトにアクセスすれば誰でも無料でプログラミングが楽しめる。

開発者の寺本大輝氏は、IPA(独立行政法人 情報処理推進機構)の認定する2015年度の未踏スーパークリエータに認定されている天才プログラマーの一人。株式会社ハックフォープレイの代表でもある。1994年生まれの若きクリエイター寺本氏が生み出したプラットフォームは、子どもウケ抜群だ。以下のプレゼンテーション動画を見ると、大体の様子がつかめるだろう。

ハックフォープレイのプレイ動画

今回は小学校2年生の息子(7歳9ヶ月)と共にハックフォープレイにトライしてみたい。

未踏スーパークリエータが作った「ハックフォープレイ」でゲームをプログラミング! ハックフォープレイにトライ
ハックフォープレイにトライ

数値を書き換えてクリアする旧バージョン

ハックフォープレイは以前に息子と使ってみたことがある。現在、元からあったハックフォープレイは、「旧ステージ」になっている。初めてやる場合は、ぜひこちらからやってみることをおすすめしたい。

未踏スーパークリエータが作った「ハックフォープレイ」でゲームをプログラミング! 旧ステージ
旧ステージ

旧ステージは、「旧ステージ」を選び、「プレイ」をクリックし、「今すぐプレイ」をクリックすれば始められる。言語が切り替えられるので、英語になっている場合は右上の「Language」をクリックして「日本語」を選ぶといいだろう。

まず、画面右側のYouTubeを再生しよう。動画を見ればステージの目的が分かるので、左側でコードを組んでみよう。最初のステージでは、移動と攻撃ができる。二つ目のステージでは、魔導書が登場する。魔導書を入手するとコードで居場所を変えることができるようになり、先のステージに進めるという具合だ。

未踏スーパークリエータが作った「ハックフォープレイ」でゲームをプログラミング! まず画面右側のYouTube動画を見よう
まず画面右側のYouTube動画を見よう

三つ目のステージでは、そのままではいくら戦ってもモンスターが倒せないようになっている。バグでモンスターの体力が極めて高くなっているので、コードを書き換える必要があるのだ。「99」を「1」などに書き換えて「コードをおくる」をクリックしてから戦うと、簡単に倒せるようになる。

未踏スーパークリエータが作った「ハックフォープレイ」でゲームをプログラミング! モンスターの体力を書き換えると倒せるようになる
モンスターの体力を書き換えると倒せるようになる

この調子でコードを書き換えて、モンスターの体力、自分の強さや位置などを変えることで、ゲームがクリアできるようになる。すべてをクリアした後は、ゲームを改造したり、新しいステージを作ったりできるようになっている。

未踏スーパークリエータが作った「ハックフォープレイ」でゲームをプログラミング! クリア後は改造や新ステージ作成が可能になる
クリア後は改造や新ステージ作成が可能になる

ゲームをハックして、数字を自分で入力してHPや位置などを自由に決められるというのは、決められたとおりにゲームをプレイしたことしかない子どもたちにとってはかなり刺激的なはずだ。

息子は、YouTube動画を見るだけですぐに理解できたようで、次々とコードを書き換えてクリアしていた。ゲーム的な見た目で子どもの食いつきはとても良い。

ただし、ここまではゲームを解いていくようなものであり、実際にゲームを作るとなると、段階が上がって難しいように感じた。

ゲームが作りやすくなった「RPGキット」

そこで今回加わった「RPGキット」が生きてくる。トップページにアクセスし、「RPGステージ」をクリックすると、新しいゲーム作成モードが楽しめる。「ゲームが作れる!RPGキット」が開くので、「プレイ」をクリック。なお、「ドキュメント」から説明が見られるので、保護者が事前にチェックしておくと進めやすいだろう。

未踏スーパークリエータが作った「ハックフォープレイ」でゲームをプログラミング! RPGキット
RPGキット

続いて「START NEW」をクリックすると、新規ゲーム作成画面が開く。右側の「もくじ」で「ゲームのコード」を選ぶとゲームのコードが組める。同様に、「魔導書のコード」で魔導書のコード、「マップのコード」で新規マップのコードが組める。「ゲームのルール」では、ゲームのルールを決めることができる。つまりタブを切り替えてコードを組んでいけば、簡単にRPGゲームが作れてしまうというわけなのだ。

未踏スーパークリエータが作った「ハックフォープレイ」でゲームをプログラミング! タブを切り替えてコードを組んでいく
タブを切り替えてコードを組んでいく

ハックフォープレイはJavaScriptを使って作られている。通常、JavaScriptをプログラムする場合はコードを一から書かねばならない。ところが、RPGキットを使うと、選択するだけでアイテムやモンスターなどのコードが書けるようになっている。それ故、オリジナルゲームもかなり容易に作成できるのだ。

以前の旧バージョンでも自由に作れるようになっていたのだが、そのときはまだ今のように、選択するだけで複数のマップを行き来させたりするなどのコードが書けるわけではなく、少々ハードルが高かった。しかし、これなら詳しくない子どもでももっと複雑なものが簡単に作れるだろう。「ゲームは遊ぶもの」と思いこんでいる子どもに、新しい視点を与えることができるはずだ。

詳しい保護者はいきなり子どもと一緒に始めてもいいが、詳しくない場合は事前に軽くハックフォープレイをいじっておくと進めやすいだろう。

子どもと簡単なRPGゲームを作る

小学2年生の息子は、移動したり戦ったりというゲーム的要素と、位置を変えたら脱出できるなどのプログラミング要素の両方を気に入っており、初めてプレイして以来、「あのゲームがまたやりたい!」というくらいお気に入りだ。旧バージョンは楽しんで何度もトライしていた。

未踏スーパークリエータが作った「ハックフォープレイ」でゲームをプログラミング! 小学2年生の息子とハックフォープレイ
小学2年生の息子とハックフォープレイ

今回は、新しいRPGステージに挑戦することにした。「自分でゲームを作れるんだけど、やってみる?」というと、早速食いついてくる息子。「前やったものと同じようにやればできるよ」と私。言語設定は日本語に変更できるが、英語のままにしておくと英語に親しむきっかけになりそうなので、今回は英語のままで進めてみた。なお英語を選んでも、ところどころで日本語訳も表示されるので、ほとんど困らなかった。

「Costume(スキン)」では、騎士の他、スライムやドラゴンなどから自由にキャラクターを選べる。「Skills(スキル)」で「体力UP」や「パワーUP」、「ばくだん」や「カラーチェンジ」など、キャラクターのスキルを設定していく。「Monsters Items Objects Systems(モンスターアイテムせっちシステム)」からは、モンスターやコイン、ワープゾーン、階段などのアイテムが設置できる。

未踏スーパークリエータが作った「ハックフォープレイ」でゲームをプログラミング! ボタンをクリックして選択するだけでコードが入力できる
未踏スーパークリエータが作った「ハックフォープレイ」でゲームをプログラミング! ボタンをクリックして選択するだけでコードが入力できる
ボタンをクリックして選択するだけでコードが入力できる

息子は喜んで次々とモンスターやアイテムを追加した。ところが、モンスターがすべて同じ場所に登場してしまった。重なって動いていて個別に認識できないくらいだ。おまけにアイテムも同じ位置にあるので、モンスターを倒さないと入手できそうにない。

「ここを見て。位置情報が全部同じだからだよ。最初は全部、『7,5』という位置に登場するみたいだよ」と言うと、「そっか」と表示したい場所を決めて数字を変え、位置情報を変え始めた。

位置を変えたモンスターたちと戦うものの、強いモンスターがいたので「GAME OVER」になってしまった。「何かを変えたらいいんじゃない?」というと、以前やった旧バージョンを思い出したのか「そうか、強くすればいいんだ!」と言い出した。「体力UP」「パワーUP」を使って自分のキャラクターの体力と攻撃力を上げてから戦いに行くと、今度はあっさりとモンスターを倒すことができた。

「マップも増やせるよ」と言うと、マップを選んで追加していた。「ここに『map2へ行くには、くだりかいだんが必要』と書いてあるよ」とアドバイスして、下り階段と上り階段を設置すると、自由にマップ間を行き来できるようになった。

あとは一切口出しの必要なく、本人が勝手に作りたいように作り始めた。自分でビームが出るようにしたり、キャラクターの位置や体力を書き換えたりし始めたのだ。

面白かったのは、しゃべる壁を設置して「どうだ おれさまは だめだろう!」と台詞を変更。さらに、しゃべる壁の近くに行くようにワープゾーンのコードを書き換えて、ワープして壁に喋らせて喜んでいたことだ。

未踏スーパークリエータが作った「ハックフォープレイ」でゲームをプログラミング! ワープゾーンでしゃべる壁の近くに行くコードを書いていた
ワープゾーンでしゃべる壁の近くに行くコードを書いていた

その他にもマップを複数作って移動してモンスターを倒したり、ハートを拾って体力を増やしたりなど、考えて色々と設置していた。ゲームとしては大したことはないが、自分でコードを組んで思い通りに動かすことができていたのだ。

ゲームは名前をつけて保存しておけば、次回以降はそのゲームを開いて遊んだり、作り直したりもできる。公開すれば他の子ども達に遊んでもらうこともできる。チャットで質問もできるので、もっといくらでも作り込めるだろう。

息子は非常に楽しかったようで、作った後、「ママがミノタウロスで体力は11。僕は騎士で体力は20。倒す!」などとふざけて攻撃してきたりして面白かった。

プレゼン、発表の授業に活用も

以前、小金井市立前原小学校の見学に行ったところ、「ハックフォープレイ」を使ってプログラミングを体験させる授業を行っていた。子どもたちは熱心に次々と旧バージョンをクリアしていた。このように、“ゲーム”なら子どもたちは喜んで自分で考え、コードを組む。

「RPGキット」を使えばオリジナルのゲームが作れる。たとえばグループごとに友だちに遊んでもらうことを目標としてゲームを作らせる授業などが行えるだろう。

グループで登場キャラクターとおおまかなストーリー展開を考えさせた後、ゲームに落とし込ませ、完成したら他のグループに対してゲームのプレゼンの時間をとる。最後に、完成したゲームはお互いに遊べる時間をとり、遊んだ後は感想を送り合わせるような授業が行えそうだ。

「楽しい」は子どもにとって大きなモチベーションになる。「ハックフォープレイ」を使えば、子どもたちはきっと思わぬものを作り出して、大人を驚かせてくれるはずだ。ぜひ楽しんでトライしてみてほしい。

教材名HackforPlay(ハックフォープレイ)
利用料無料
対象小学校高学年程度を想定されていると思われるが、やる気があればそれより低い年齢でも可能。
環境インターネットにアクセスして、Webブラウザーが利用できるパソコンが必要(コードを書き換えるため、キーボード付きの端末を推奨)
保護者に求められる知識とスキルパソコンの基本操作や文字入力ができること/動画を見て使い方をマスターし、子どもにアドバイスできること
学習効果プログラミングに興味を持つ、論理的思考力、JavaScriptを身につける、英語に親しむ
学習時間のめやす1時間~数時間以上

※学習効果や学習時間は個人差があります

高橋暁子

ITジャーナリスト。 LINE・Twitter・Facebook・InstagramをはじめとしたSNSなどのウェブサービスや、情報リテラシー教育などについて詳しい。元小学校教員。「ソーシャルメディア中毒 つな がりに溺れる人たち」(幻冬舎エデュケーション新書)ほか著書多数。書籍、雑誌、ウェブメディアなどの記事の執筆、監修、講演、セミナーなどを手がける。http://akiakatsuki.com/