CodeIQ MAGAZINECodeIQ MAGAZINE

Monacaでenchant.jsで作ったHTML5ゲームを、シュン君とスマートフォンに移植してみよう #5jcup #html5j

2014.08.18 Category:技術コラム Tag: , , , , , , ,

  • 3
  • このエントリーをはてなブックマークに追加

UEI清水亮氏によるenchant.jsの特別講義、マイクロソフト物江修氏によるWindowsストアアプリ、Windows Phone 8.1アプリへの移植、Mozilla Japan清水智公氏によるFirefox OSへの移植も無事にクリアしたシュン君。

今回はいよいよMonacaを使ったスマートフォンアプリへの移植にチャレンジする。講師は、アシアル生形可奈子氏だ。
by 馬場美由紀 (CodeIQ中の人)

なぜ、スマートフォンアプリ化する必要があるの?

前回までの講師は、UEI清水亮氏(前編後編)、日本マイクロソフト物江修氏(Windowsストアアプリ編)、Mozilla Japanの清水智公氏(Firefox OS編)。

そして次なるターゲットは、スマートフォンアプリ移植。講師には、アシアル株式会社の生形可奈子氏を迎えた。

生形:まず、スマートフォンアプリというもの自体を知ってほしいと思います。このAndroid端末を貸ししますので、これを使ってみてください。

私、今日はあらかじめ、enchant.jsで試しにスマートフォン用アプリを作ってきました。クマのアイコンが表示されていると思うので、それをちょっと動かしてみてください。表示されたら、ちょっと傾けてみて。

シュン:あっ、動いた!

生形:そう。傾けると、加速度センサで動くように作りました。

端末を傾けると、画面の中、地面の上で左右に動く小さなクマ。上からは次々にリンゴが落ちてくる。

生形:落ちてくるリンゴを取るとスコアが増えます。

シュン:あっ、避けるのかと思っちゃった(笑)。

生形:それで、今「GAME OVER」になったとき、ブルブル震えたと思うんだけど、わかりました?つまり、傾きのセンサーとか、バイブレーションとか、PCにはない、スマートフォン端末特有の機能を使ってあるんです。

ここで、生形氏による「なぜ、スマートフォンアプリ化する必要があるのか」という前提についてのミニ講習。

それは当然、スマートフォンでこのゲームを使えるようにするためでしょう?という当たり前の答が頭に浮かぶかもしれないが、改めて考えると、スマートフォンにはWebブラウザも入っている。

先ほど、Webサイトでゲームを動かせるように対応は済んでいる。従って、単に「スマートフォンでシュン君のゲームを」ということなら、すでにできてしまっているとも言えるわけだ。

生形:では、なぜわざわざスマートフォンアプリ化する必要があるのか。それが、「Webではできることに限界があるよ」ということなんです。

例えば、今見てもらったバイブレーション機能や、傾きを感知する加速度センサー。これらの、スマートフォンのハードウェアが持っている機能は、Webブラウザで開くだけでは使えません。

それからもうひとつ、Webサイトの場合、当然ながらネットに繋がっていないとだめ。だから、例えば地下鉄に乗っていて、「今、ヒマだからちょっとゲームでもやりたいな」と思っても、電波が入らなければ遊べない。

もちろん、単なるWebコンテンツでは、アプリのマーケットで売って、ちょっとお小遣い稼ぎを……なんてこともできない。それらが、アプリ化する理由ということになる。

スマートフォンアプリはどうやって作る?

ここで、生形氏からシュン君に、「では、そもそもスマートフォンアプリの一般的にどういうふうに作るか、知っていますか?」という質問。

シュン:えーっと、IDE……?

生形:そう。開発環境はIDEですね。ではプログラム言語は?

シュン:AndroidだとJavaで、iPhoneだとObjective-C……?

生形:そうですね。それから、WindowsならC#とかVisual Studioとか。要するに、OSによって違う言語を使わないといけないというわけですね。

けれど、そんなふうにいちいち作るのは大変。その一方で、HTML5で作れば、そこからそれぞれに移植して、簡単にそれぞれ用のアプリを揃えることができる。

HTML5から各OSに対応させる方法として有名なのが、少し前にも一度出てきたCordova(Apache CORDOVA)。Cordovaはライブラリの一種で、HTMLやJavaScriptで書かれたコードを、OSに合わせて、適宜置き換えて動かしてくれる。

OSによる違いを吸収してくれるわけで、アプリの作り手は、それぞれのOSの違いを意識することなくて済む。

ただし、このCordovaにも少々面倒な点もある。Visual Studioのように、さまざまな機能が最初からセットされているわけではなく、自分で必要なものを足して、そろえていかなければならないため、その分インストールも面倒になるのだ。

生形:そこで、ウチの会社ではMonaca(モナカ)というサービスをやっています。これはスマートフォンアプリを作ることに特化した、Visual Studioのような存在。そこでこれを使えば、先ほどWebサイトで動くようにしたものを、たぶん5分くらいあれば、スマートフォンアプリにすることができるんじゃないかな。

シュン:すごい!

Monacaをつかってみよう!

生形:ではさっそく、やってみましょう。

まずはMonacaの推奨ブラウザ、Chromeでサイトにアクセス。アカウント登録をして、Monacaを使えるようにする。

生形:まずは「新しいプロジェクト」というところを押して、次に「最小限のプロジェクト」を選択してください。それから「IDEを起動」というボタンを押してください。

シュン:あれっ。あっ、これって、Web上でできちゃうんですね。

生形:そうなんです。だから例えば、iPhoneアプリは普通、Macがないとだめなんだけれど、これはブラウザさえあればいいので、iPhoneアプリもWindows上で作れてしまう。

さて、そこに先ほどのゲームをアップロードしていきたいんだけれど、丸ごとは無理なので、3つほどフォルダを作って下さい。CSSとimages、jsと作って下さい。そうしたら、それぞれのフォルダの中身を、ドラッグで移していってください。

必要なファイルの移し変えを行いながら、必要なソースコードの書き換え。とはいえ、これも数箇所の変更のみだ。

生形:HTMLのタグの中に以下の2行を追加します。

<script src="components/loader.js"></script>
<link rel="stylesheet" href="components/loader.css">

それで保存してください。

そうこうしている間に、アップロードも終了。「これでもういけるはず」と生形氏。

シュン:えっ、もう?

生形:いま、インターネット上にあるんだけれども、そのソースコードを実機ですぐに確認するためのアプリが入っています。クラウド上からソースコードをダウンロードしてきて、変更があればリアルタイム反映されます。では、今作った「shungame(シュン君のゲームファイルの名前)」を試してみてください。

シュン:うわあ、動く!

生形:ではさっき見せたように、「スマートフォンならでは」の機能を、何か足してみましょうか。さっきの私のゲームは、Game Overでバイブレーションだったけどやってみたいことはある?

シュン:じゃあ、宇宙船が爆発したときにバイブレーションするようにしたい!

さっそく、そんな一工夫を付け加えることに没頭する2人なのだった。
次回は、Google Chromeで動作する環境への移植に挑戦する。

Monacaを使ったHTML5アプリ開発については、こちらでも詳しく書かれているので、興味のある方はどうぞ!

<関連レポート>
* 小学生プログラマ・シュン君、UEI清水亮氏とenchant.jsでゲームを作る(前編
* 小学生プログラマ・シュン君、UEI清水亮氏とenchant.jsでゲームを作る(後編
* シュン君とenchant.jsで作ったゲームをWindowsストアアプリに移植してみよう
* Mozilla清水智公氏×シュン君「Firefox OSにゲームアプリを移植してみよう

自分の書いたコードを誰かに評価されたいエンジニアは、けっこう多い?

ITエンジニアのための実務スキル評価サービス『CodeIQ』で出題されている「コード銀行」問題に挑戦すると、あなたのコードが評価されます。

評価(1)出題者からの評価  ⇒評価フィードバック例を見る

  • 企業ではたらくという観点からあなたのコードをチェックします
  • フィードバックされた観点をふまえてコードを書くと世の中の企業にとって「いいコード」が書けるようになります

評価(2)企業からの評価  ⇒評価フィードバック例を見る

  • 「あなたと一緒にはたらきたい」という企業からスカウトが届きます
  • あなたのコードが社会でどこまで通用するか、リアルな評価が得られます

興味を持った方はこちらからチャレンジを!

  • 3
  • このエントリーをはてなブックマークに追加

■関連記事

ブラウザ戦争、HTML5の標準化、ブラウザの未来──歴史を語り尽くすWebブラウザ談義【後編】... 「ブラウザ戦争」とは何だったのか Webブラウザの歴史を辿ると、歴代のブラウザが、技術的にもビジネス的にも激しい覇権競争を繰り広げたことが、結果としてWebの普及を促したことがわかる。 94年12月にリリースされた Netscape Navigatorは順調にバージョンを重ねるが、これに対抗して...
インターネットとWebの誕生が、いつか知ってる?──歴史を語り尽くすWebブラウザ談義【前編】... 今あらためてWebブラウザの歴史を辿る意味 Webブラウザはたかだか四半世紀の歴史とはいえ、世界を変えたこの25年はあまりにも劇的で、細かい歴史は忘れられていることも多い。 しかし、Webブラウザの歴史をたどることで、インターネット技術がどのように発展してきたのか、そしてこれからはどのようにそれ...
Siriに聞いてみた!音声認識を成立させる「音響モデル」と「言語モデル」について... Siriは何でも知っている 自分自身のことでさえも… Siriの面白さの一つは問答の作り込みで、その種のコンテンツが後を絶ちませんが、検索機能にアクセスできることによって、「Google先生」に続く物知りキャラが誕生した感もありますね。 彼女は何でも知っています。 そう、自己を確立させている音...
「Visual Studio+Cordova」は、なぜクロスプラットフォームでのアプリ開発に適してい... 現在のモバイルデバイス向けアプリ開発における問題とは 今や先進国などでは一人で複数台のさまざまな電子デバイスを使用している時代。PCはもちろんスマートフォン、タブレット端末、電子書籍端末…。開発者はこれらの多種多様なデバイスに向けて、アプリケーションを構築していかねばならない。 中でもこれから最...
佐々木俊尚氏を顧問に、オウンドメディアも開設!家事シェアサービス「Any+Times」は、個人のスキ... 誰かのニーズと誰かのスキルを、Webとリアルで交換 仕事で毎日遅くなるので、掃除や洗濯をする時間が取れない。そんな悩みを持つエンジニアも少なくないのではないだろうか。ハウスクリーニングサービスはいくつもあるが、安心して頼めて、かつ低コストのサービスはそうそうあるものではない。 「私自身が、便利屋...
Azureで仮想マシンを作り、リモートデスクトップ接続で『Visual Studio』を使ってみよう... AzureならインストールすることなくVisual Studioが使える!? 現在、CodeIQで展開されているキャンペーン問題、日本マイクロソフト・エバンジェリストである物江修さんが出題する「HTML5+JSで落ちものゲームを作ってみよう」と、同じくエバンジェリストの高橋忍さんが出題する「きゃん...

今週のPickUPレポート

新着記事

週間ランキング

CodeIQとは

CodeIQ(コードアイキュー)とは、自分の実力を知りたいITエンジニア向けの、実務スキル評価サービスです。

CodeIQご利用にあたって
関連サイト
codeiq

リクルートグループサイトへ