ツイート47小学5年生でC#、Unity、JavaScript、PHPを使いこなし、一昨年末に日本マイクロソフト・テクノロジーセンターを訪問したことで、さらにプログラマとしてメキメキ成長したシュン君。1年3カ月ぶりに同センター長の澤円さんと再会し、成長した姿を作品を通して披露した。前回・前々回の記事でも紹介した、今回のキャンペーン問題「HTML5+JSで落ちものゲームを作ってみよう」と、「きゃんちのジグソーパズルアプリを作ってみよう」にチャレンジするために、日本マイクロソフトを久しぶりに訪問したシュン君。実はプログラマとして成長した姿を物江修さんや高橋忍さんはもちろん、もし会うことができれば砂金信一郎さんや澤円さんに見てもらえたらと、自作のアプリを持参してきたのだ。シュン:マリオみたいなゲームを作ったんです。見た目はかわいくないんですけど。ACTION(ハルスターアクション)」。主人公がジャンプして障害物を避けたり、次のルートに進んだり、エネルギーを受け取ったりしてゴールと得点を目指していくゲームだ。披露されたゲームを観た一同からは「おっ、すごい」という声が...。物江:これはUnityで開発したの?シュン:そう。開発環境はUnity、言語はC#で開発しました。すごくこだわっているところがあるんです。シュン君がこだわったのは、一つひとつのシーンをUnityで作るのではなく、ステージをWeb上からダウンロードするようにしているところ。シュン:プログラミングをしたことがない友達とも一緒にステージ作りを楽しめるように、ステージ生成装置も作ったんです。それがUnity2D向けのステージ自動生成言語「PLANET2.0.0(プラネット)」だ。物江:それはすごいね。編集機能も持っているんだ。感心した様子の物江さん。このゲームは友達2人と一緒に作っているのだが、プログラミングができるのはシュン君のみ。このようなステージ生成装置を使って、プログラミングをすることなくコースを編集できるようにシュン君はPLANETを使って友達2人と「こういう風にするとさらに面白くなるのでは」とアイデアを出し合いながら、夢中になってゲーム作りを楽しんでいるのだそう。シュン:ぼくたち3人は中学から違う学校に通っているので、学校でゲームのことを話せないんですよね。週1回の割合でぼくの家に集まってゲーム作りをしているんです。一人は、ステージ構成のアイデアがすごくて、もうひとりは、イラストのデザインと音楽作りがすごいんです。それを出し合って、しゃべりまくって作るのが、楽しすぎます!その説明を聞いて高橋さんは、シュン君の成長ぶりに頼もしそうな顔を向けた。高橋:自分でカスタマイズしたゲームで遊べるんだ。これはもうプロの手法だよね。最近の有名なRPGゲームなども自社でそれ開発ツールを作って、フィールドを作る人、キャラを作る人という様な分業を可能にしました。シュン君の手法はまさにそれ。いう作り方ができるのはプログラマとして2歩も3歩も先に進んでいる。格段にステップアップしているね。キャラクターデザインや背景の絵などはどうやって作っているのかも気になるところ。物江:デザインはどうやって作っているの?シュン:PowerPoint(パワーポイント)です。物江:パワポの発想はなかったな。自社にいながら、パワポでこんなところまでできるなんて知らなかったよ。シュン君のパワーポイントの活用ぶりに驚きを隠せないでいた。それから、WebGL(Three.js)を使った3Dゲームも物江さんや高橋さんに披露した。Riftで観たらすごいんじゃない。持ってくればよかったな~。Cardboardを持ってきたので、ぜひ、のぞいてください。Cardboardの内部にスマートフォンをセットし、Chromeリモート・デスクトップでスマートフォン(スマホ)の画面に動画を映し出した。物江:スマホを使うのはすごくいいアイデアだよね。スマホにはジャイロセンサーや電子コンパスが搭載されているので、振り向いたときの風景なども観ることができるようになるからね。上を向いているとか下を向いているとか、そういうことがわかるので面白いよね。物江:Windows10に搭載される新ブラウザ(開発コードネーム:Spartan)では、asm.js(JavaScriptを高速で実行するサブセット)をサポートするから、Unityからそのまま出せるよ。シュン:本当!?そっか、Windows10が出るのが楽しみです。マイクロソフトのデータセンターのセキュアさにビックリシュン君が作ったゲームでかなり盛り上がり、訪問から約2時間近くが経過。お別れの時間が近づいてきた。物江さん、高橋さんからは、「プログラマとしてかなり成長したシュン君にとって、今回のキャンペーン問題は簡単かもしれないけど、いろいろアレンジできるので、ぜひ、自分なりに工夫してみて応募してね」と伝えられる。最後に澤さんが、「シュン君も使っているAzureなどのクラウドサービスの鍵を握るのがデータセンター。マイクロソフトはソフトウェアの会社と思われているけど、クラウドサービスをする上で非常に高いセキュリティを保っているんだよ」と、シュン君をデータセンターの技術が紹介されているコーナーへと誘った。目的のマイクロソフトのデータセンターのコーナーへ。澤さんはシュン君にマイクロソフトのデータセンターがどれだけセキュアにできているかを解説。建物の免震性や耐震性はもちろんのこと、物理的なテロに対しても万全の仕組みを強いていることなど、あらゆる脅威に対して考えられる対策を施していることをシュン君に説明した。通常、データセンターの場所は明らかにされていないことが多いが、マイクロソフトでは顧客が要望した場合、現地を案内するという。澤:実は案内する人にはある条件があるんだよ。何だと思う?シュン:うーん、技術を知っていることかな。澤:もちろん、技術的に解説できることもそうなんだけど、必要に応じて人を取り押さえられることなんだよね。それにはシュン君もビックリした様子。万一、見学者がテロリストだったら、捕まえないといけないからか。納得し、このような数々のセキュアな仕組みに「未来のことまでも考えているのがすごいですね」と感心することしきりだった。「ゲームクリア」とクリア時間が表示されるアレンジを追加このようにマイクロソフトのエバンジェリストたちと楽しい再会をしたシュン君は、自宅に戻り、早速高橋さんと物江さんの問題にもチャレンジしたのだそう。送ってくれたのが次の作品だ。シュン君なりのアレンジが施された作品となっている。高橋さん出題の「ジグゾーパズルアプリ」。本来は画像をきゃんち画像にして、スタートボタンが機能するようになれば出来上がりだが、シュン君はすべてパーツをつなぐと、「ゲームクリア!」となり、クリア時間が表示されるようにアレンジ。それ自体で使用できる空白ページまたはフレーム内に移動できる空白ページ。//タッチした時点での位置を覚えておく。}}このアレンジに対し、高橋さんは次のようにコメントを寄せてくれた。高橋:タイマーとクリア処理入れてきましたね。クリア処理の判定は完璧です。プログラムが読めていて、UIオブジェクトの構造がちゃんと理解できてないとできない処理なので、本当に素晴らしい。人が作った処理を読むのは、自分でコードを描くよりも何倍も難しいですが、完璧に読めていますね。処理は100点、そしてゲームの機能としては......残念ながら60点。ジグソーパズルの楽しみは2つあります。1つはパズルを解いていくこと。一つは完成したパズルを眺めること。パズルを飾っておく人もたくさんいるので、パズルを眺める方が楽しみとしては大きいかもしれません。今の処理ではようやく完成し、ゆっくり眺めようとした瞬間にクリア画面が出てしまいます。これでは楽しむこともできませんし、もしかしたらきゃんちが好きな人は怒って2度と遊んでくれないかもしれません。クリアしたら画面の真ん中に『クリア!』の文字が出て、しばらくすると消える、という処理にした方がいいかもしれません。クリア画面の背景を半透明の水色にして、少し見えるようにして、さらにクリア画面をタップするとクリア画面が消えるとか。今度機能を追加するようなことがあるときは、「遊ぶ人にとって、この方法が一番いいのかな?」というのを考えてみてください。レベルが高いかもしれませんが、シュン君のプログラミングレベルは十分高いので、次はこういったところにも注意するとよりよいプログラマになれると思います。好きな画像にして、ピースを小さくしてレベルを上げるとか、興味があればぜひまた楽しんでくださいね。「落ちモノゲーム」は爆弾に当たるとゲームオーバーになるようアレンジ続いて、物江さんが出題した雪だるまが空から降る雪を集めるという「落ちものゲーム」は、シュン君いわく「背景色を変えて、爆弾に当たったらゲームオーバーになるようにしました」とのこと。}})();このアレンジに対し、物江氏は次のようにコメント。物江:音が出るようになっていることはもちろんなのですが、障害物である複数の爆弾が降るようになっています。この『複数の障害物を出す』『降らす』というところは、クラス/インスタンスの概念を理解していないと実装できないのですが、みごとに実装してあります。(JavaScriptなので厳密には関数)をうまく再利用してあります。素晴らしいと思います。ここまでできるのであれば、雪だるまの壊れた画像もこちらで用意しておけばよかったかなと。爆弾とぶつかったときに雪だるまが壊れる、といったエフェクトも追加してくれたことでしょう。ここまでで本当に十分なのですが、あえて、アドバイスするならば次の2点です。今は音を鳴らすためにhtmlファイルにaudioタグを追加していますが、以下のようにすればJavaScriptのみで完結できます。オブジェクトのプロパティに値として持たせれば、インスタンスごとに違った音を指定することができるようになります。イメージとしては以下のような感じです。//説明のためにコードは簡略化してあります。}};鳴らすときには以下のようにします。bom.sound.play();}もう一点は、複数の爆弾のインスタンスを生成する際の変数として、雪のインスタンスを生成するのに使用している変数と同名のsprite_snowをfor文の中で使用していますが、これは別の名前に変えることをお勧めします。}なぜかというと、JavaScriptの変数のスコープは関数単位なので、記述の仕方によっては意図しない値が設定される可能性があるからです(今回のコードは毎回nullクリアしているので実質問題はない)。今回の場合、もともとの私の書いたコードの変数の定義位置が誤解を与えているような場所にあるのがよくなかったのですが...。このことについては、私のブログの以下の記事の「変数を宣言する場所」の項を読んでいただくと理解が深まるでしょう。JavaScript』フォローアップ?<その2>JavaScriptの慣例的な記述方法とマナーHTML5+JavaScriptのゲームをゼロから開発するためのハンズオン資料も、ブログで書いているので、こちらも参考にしてください。(画像のロード)現在は、友達と一緒にいろいろ開発をしているそうですが、そこがまたいいですね。優秀な技術者でも1人でできることは限られていますので。いつかシュン君が世界中の技術者とつながり、彼らと一緒に面白いものを作ってくれることを切に願っております。今回のマイクロソフト訪問で、ますますプログラミング、ITの面白さにはまった様子のシュン君。シュン:Azureもすごくはまっています。Serverの仮想マシンを作って、それをファイルサーバーにしようとしたり、単純に仮想マシンで遊んでみたりしています。Studio』を使ってみようファイルサーバーを作ってみたいのですが、ネットワークが別で、仮想ネットワークでつないで、ファイルを共有するとか、今、いろいろと勉強中です。Directoryとか、知らないことが多くて...。その知らないことにチャレンジすることも本当に楽しいんです。このようにITの面白さをキラキラとした目で語るシュン君。みなさんも今回の問題でオリジナルアプリ作りを楽しんだり、改めてITの面白さを実感してみてくださいね。挑戦お待ちしています!ちなみに、今回のキャンペーン問題参加者には、クラウド型Windowsアプリ開発環境が、先着100名様限定で体験できるという特典がある。締切は、5月8日(金)AM12:00まで。2まつもとゆきひろ氏がSpeeeで語った、勉強会・英語・プログラミングの話3永江一石さんが語った、WebメディアにおけるSEOと著作権、その利活用例とは?4GMOペパボの新技術「Haconiwa」、新アーキテクチャ「FastContainerアーキテクチャ」とは?5綺麗なコードと汚いコード。#Elixir6本日の調理実習は「スパゲッティコード」です。RSSCodeIQとはCodeIQ(コードアイキュー)とは、自分の実力を知りたいITエンジニア向けの、実務スキル評価サービスです。Tech総研ページ上部へリクルートグループサイトへCodeIQとはCodeIQ(コードアイキュー)とは、自分の実力を知りたいITエンジニア向けの、実務スキル評価サービスです。Co.,Ltd.リクルートグループサイトへ。