CodeIQ MAGAZINECodeIQ MAGAZINE

シュン君とenchant.jsで作ったゲームを、Windowsストアアプリに移植してみよう#5jcup #html5j

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

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

UEI清水亮氏によるenchant.jsの特別講義を受け、障害物をよけて宇宙船を飛ばすゲームを作り上げたシュン君。

次は作ったゲームをさまざまなプラットフォームに移植する講義に挑む。

まずはWindowsストアアプリから。講師は日本マイクロソフト エバンジェリストの物江修氏。では、移植編スタート!
by 馬場美由紀 (CodeIQ中の人)

enchant.jsで作ったゲームをいろいろなプラットフォームに移植!

ユビキタスエンターテインメント(UEI)清水亮氏による特訓指導のもと、自動生成される障害物の壁をすり抜け、宇宙船を飛ばすゲームを作り上げることに成功したシュン君。(清水亮氏の講義・前編後編)しかし、話はここで終わらない。

次の講師は日本マイクロソフトエバンジェリストの物江修氏。この講義の目標は、Visial Studio 2013 を使って、Windows ストアアプリ(Windows 8 専用のアプリストア)やWindows Phone 8.1アプリに移植すること。

さらには、Multi-Device Hybrid Appsというアドインをインストールすれば、Apache CORDOVAを使って、Android用やiOS用アプリにも移植することができる。

簡単にゲーム開発できるHTML5+JavaScriptフレームワークとして活用されるenchant.jsだが、さまざまなプラットフォームへも容易に移植ができるというのも、このゲームエンジンの大きな特長。

そんな特長を活かし、シュン君のゲームを複数のプラットフォームに移植。「HTML5 Japan Cup 2014」に設けられたWebプラットフォーム賞を狙おうというのが、この企画の後半戦。

物江:先ほど作ったゲームは、今は9leapのWebサイトの中でしか動かない状態ですね。それをまずはMicrosoft Visual Studioや、Webブラウザで動くようにするところから始めましょう。

シュン:お願いします!

ちなみに、物江氏から事前に準備しておくようにと指示された作業は以下である。


<事前に準備しておくようにと指示された作業>

  1. Visual Studio Express 2013 for WebのダウンロードとVisual Studio Express 2013 for Windowsをダウンロード。それぞれインストール
    ⇒「for Web」は Webブラウザーで動作するアプリを開発する際に、「for Windows」は、Windows ストアアプリとWindows Phone 8.1アプリを開発するのに使用。
  2. Microsoft Visual Studio 2013 Update 2をダウンロードしてインストール
    ⇒このアップデートをVisual Studio 2013に適用すると、Windows ストアアプリとWindows Phone 8.1アプリを同時に開発することができるようになる。
  3. Visual Studioのアドイン、Web Essentials 2013 for Update 2 をダウンロードしてインストール
    ⇒このアドインは、Webコンテンツを書く際に強力な補助機能を提供。
  4. HTML5のゲームエンジンenchant.jsをダウンロード

まずは、Visual Studio IDE内で動作するように移植!

最初は、9leapの環境で動作していたゲームを Visual Studio IDE内で動作するように移植すること。「ゲームの開発ができるのなら、移植なんてカンタンだよ」と、物江氏。まずは移植の手順を説明する。

物江:では、Visial Studioに必要なファイルを追加しよう。

まずは作業用のWebサイトを作成します。
Visual Studio2013のメニュー[ファイル]-[新規作成]-[Webサイト]を選択します。[新しい Webサイト]ダイアログボックスが表示されるので「ASP.NET 空のWebサイト」を選択して[OK]ボタンをクリックします。これで作業用のWebサイトができました。

次に、html ファイルを追加します。[ソリューション エクスプローラー]内のWebサイトの名前の上で右クリックし、コンテキストメニューから[追加]-[新しい項目の追加]を選択します。

[新しい項目の追加]ダイアログボックスが表示されるので、[HTML ページ]を選択し「index.html」と名前をつけ、[追加ボタン]をクリックします。これでhtmlファイルが追加されました。

cssとjsファイル用のフォルダを作成しましょう。
[ソリューション エクスプローラー]内のWebサイトの名前の上で右クリックし、表示されたコンテキストメニューから[追加]-[新しいフォルダー]を使用してそれぞれフォルダを作成します。

作成したjsフォルダにenchant.jsを追加しましょう。
あらかじめダウンロードしておいたenchant.jsをフォルダからVisual Studio2013内[ソリューション エクスプローラー]のjsフォルダにドラックします。すると、そのままファイルが[ソリューション エクスプローラー]にコピーされます。

コピーしたenchant.jsをhtmlから参照させます。
[ソリューション エクスプローラー]内のjsフォルダからenchant.jsをhtmlのheadタグ内にドラック&ドロップします。すると、自動的にenchant.jsを参照するscriptタグが挿入されました。

htmlのbodyタグ内に、enchant.jsで作ったゲームを表示するためのタグを追加します。

  <div id="stage">
        <div id="enchant-stage"></div>
    </div>

次に、cssファイルを追加します。
[ソリューション エクスプローラー]内のWebサイトの名前の上で右クリックし、表示されたコンテキストメニューから[追加]-[新しい項目の追加]を選択します。

[新しい項目の追加]ダイアログボックスが表示されるので、[スタイルシート]を選択して[追加]ボタンをクリックします。これでスタイルシートが追加されます。
追加されたcssファイルにスタイルを記述します。

body {
      margin : 0px;
      padding :0px;
}

#stage {
    width: 100%;
}

記述を行ったcssファイルをhtmlに参照させます。
[ソリューション エクスプローラー]内のcssファイルを、htmlファイルのheadタグにドラッグ&ドロップすると、自動的にcssファイルを参照するscriptタグが挿入されます。

次に、シュン君が9leap上に書いたゲームのJavaScriptをコピーします。まずはコピーするためのファイルを作りましょう。

[ソリューション エクスプローラー]内のWebサイトの名前の上で右クリックし、表示されたコンテキストメニューから[追加]-[新しい項目の追加]します。

[新しい項目の追加]ダイアログボックスが表示されるので、[JavaScript]を選択して「index.js」という名前をつけて[追加]ボタンをクリックします。これでjsファイルが追加されました。

index.jsをダブルクリックして開き、9leap上に記述したゲームのコードをコピーして貼り付けます。

これでコードのコピーは完了です。

次にゲームが使用している画像などのAssetを用意しますが、これはダウンロードしたenchant.jsのzipファイルに同梱されているものを使用するか、9leapからダウンロードしたものを使用すればOKです。

物江:よし、これで試してみよう。うん、動いた!これでWebブラウザ上で動くようになりました。

ちなみに、今作ったWeb版は、Chrome Appsとか、Firefox OSとか作るときにもベースになるもの。マニフェストファイルとアイコンを追加すれば、すぐアプリになってしまいます。

▲物江氏のアドバイスを聞きながら、シュン君は必要な変更を一つひとつこなしていく

物江氏のこの講義は、その後の移植作業でも大活躍することになる。さて、ここからは第二段階に突入。

いよいよ、Windows Storeアプリを作る!

物江:今からは、Windows Storeアプリを作ります。まずはアプリのプロジェクトを作りましょう。

VisualStudio2013のメニュー[ファイル]から、[新規作成]-[プロジェクト]を選択します。 [新しいプロジェクト]ダイアログボックスが表示されるので、ダイアログボックス左の[インストール済み]のツリーを[テンプレート]-[JavaScript]-[ストア アプリ]-[Windows アプリ]と展開します。

次に中央のテンプレートリストから「空のアプリケーション(Windows)」を選択し、[OK]ボタンをクリックします。

これで、Visual StudioのIDEにアプリのプロジェクトがロードされます。

次に、先ほどVisual Studioで作ったWebサイト版のゲームから、index.html以外の使用しているファイル類を、VisualStudio2013の[ソリューション エクスプローラー]にそれぞれドラッグ&ドロップして追加します。

最後に、プロジェクトテンプレートが追加したdefault.htmlにenchant.js、index.js、cssファイルを参照させ、index.htmlからbodyタグ内の記述をコピーします。

これでWindowsストア アプリができあがりました。キーボードの[F5]キーを押して実行してみましょう。

▲ここでも、物江氏のアドバイスに従って、シュン君は淡々と細かい変更点をつぶしていく

これでいけるはず、という物江氏のコメントで、試してみるシュン君。「あっ、表示された」というものの、どうも画面が小さい。

物江:ゲームのサイズ指定を変えてみよう。main-CSSから設定できます。

シュン:enchant stageでしょうか。

物江:そうだね。zoom 200%で改行して、あとは幅を指定します。

すばやく手直しをする2人。どうやら、これでうまくいきそうだ。

物江:さて。Windows Storeアプリとして提出する場合――。パッケージマニフェストというのが、右側にあるでしょう?そこをダブルクリックしてみてください。

そのビジュアル資産というところをプルダウンすると、ロゴやアイコンを設定するところが出てきます。この画像を用意しないと提出できないので、アイコンを作って入れるようにしてください。

こうして、なんとか第二段階もクリア。矢継ぎ早に、第三段階へと突入する。

Windows Phoneのアプリを作ろう

物江:続いて、Windows Phoneのアプリを作ろう。Visual Studio 2013 Update2 からは、ユニバーサルアプリといってWindows ストア アプリとWindows Phone8.1のアプリをコードを共有して同時に開発できるのです。

ところがここで問題発生。シュン君のマシンがWindows 8.1 の Home Edition のため、Windows Phone 8.1 エミュレーターが動作しないことが判明。続きは物江氏のマシンですることに。

物江:さきほど作ったWindows ストア アプリのプロジェクトにWindows Phone 8.1 アプリのプロジェクトを追加します。

やり方は、[ソリューションエクスプローラー]でプロジェクト名を右クリックして、表示されたコンテキストメニューから[Windows Phone 8.1 の追加]を選択します。

すると、[ソリューションエクスプローラー]内にWindows Phone用のプロジェクトと、「(プロジェクト名).shared」という、Windows ストア アプリと、Windows Phone 8.1 アプリで共有するファイルを格納する共有プロジェクトが作成されます。

(プロジェクト名).shared に、jsフォルダとcssフォルダを作成し、Windows ストア アプリのプロジェクトから index.js、enchant.js、index.cssを各フォルダに移動します。同じように画像が入っているimagesフォルダも(プロジェクト名).shared に移動します。

次に、Windows Phone 8.1用アプリのdefault.htmlを開き、headタグ内にindex.js、enchant.js、index.cssへの参照を追加し、bodyタグの内容もWindows ストアアプリのdefault.htmlと同じに書き換えます。

これで Windows Phone8.1 用アプリも作成できました。
Windows Phone8.1 用アプリを実行するには、[ソリューションエクスプローラー]内で、Windows Phone8.1 用アプリのプロジェクトを右クリックし、コンテキストメニューから[スタートアップ プロジェクトに設定]を選択します。

これでVisualStudio2013のデバッグ実行ツールバーに、Windows Phone エミュレーターがサポートしているデバイスが表示されるので、選択して実行します。

物江:ここでエミュレータを起動してきて、ちょっと待っていると、ほら。いまコンパイルしているでしょう。「フレームワークをインストールしています」と出てますね。

シュン:本当だ。

物江:それが終わると……ほら、もうゲームが動いた。Windows Phoneではもうゲームができますよ。どうかな?

シュン:すごい!

物江:ではせっかくなので、新規設定プロジェクトで、iPhone、Androidのソースだけ作っておきましょう。

この後も着々と、各プラットフォームへの移植の布石も進んでいくのであった。Visal Studio 2013 を使用した Universal Windows App(ユニバーサルアプリ) の開発については、物江氏のブログで紹介されているので、興味のある方はぜひこちらもご覧いただきたい。

──次回(Mozilla Japan清水智公氏による「Firefox Appsにしてみよう!」編)に続く!

<関連レポート>
* 小学生プログラマ・シュン君、UEI清水亮氏とenchant.jsでゲームを作る(前編
* 小学生プログラマ・シュン君、UEI清水亮氏とenchant.jsでゲームを作る(後編

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

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

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

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

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

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

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

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

■関連記事

ブラウザ戦争、HTML5の標準化、ブラウザの未来──歴史を語り尽くすWebブラウザ談義【後編】... 「ブラウザ戦争」とは何だったのか Webブラウザの歴史を辿ると、歴代のブラウザが、技術的にもビジネス的にも激しい覇権競争を繰り広げたことが、結果としてWebの普及を促したことがわかる。 94年12月にリリースされた Netscape Navigatorは順調にバージョンを重ねるが、これに対抗して...
インターネットとWebの誕生が、いつか知ってる?──歴史を語り尽くすWebブラウザ談義【前編】... 今あらためてWebブラウザの歴史を辿る意味 Webブラウザはたかだか四半世紀の歴史とはいえ、世界を変えたこの25年はあまりにも劇的で、細かい歴史は忘れられていることも多い。 しかし、Webブラウザの歴史をたどることで、インターネット技術がどのように発展してきたのか、そしてこれからはどのようにそれ...
Azureで仮想マシンを作り、リモートデスクトップ接続で『Visual Studio』を使ってみよう... AzureならインストールすることなくVisual Studioが使える!? 現在、CodeIQで展開されているキャンペーン問題、日本マイクロソフト・エバンジェリストである物江修さんが出題する「HTML5+JSで落ちものゲームを作ってみよう」と、同じくエバンジェリストの高橋忍さんが出題する「きゃん...
HTML5、C#を使ったスマートフォン・タブレット向けアプリ開発を基礎から学ぼう!... 中学1年生になったシュン君とゲームアプリ問題に挑戦! タブレットやスマートフォンのエンタープライズ環境への導入が増えているとはいえ、そのような端末向けのアプリケーション開発に携わっているITエンジニアはまだまだ少ない。 今回のキャンペーン問題は、「HTML5/JavaScript」と「XAML/...
【最終回】シュン君のゲームをChrome Web Storeで公開してみよう!#5jcup #htm... Chrome Appsとは何か? 前回までの講師は、UEI清水亮氏(前編・後編)、日本マイクロソフト物江修氏(Windowsストアアプリ編)、Mozilla Japanの清水智公氏(Firefox OS編)、アシアル生形可奈子氏(スマートフォン編)。 ラストを飾るGoogle Developer...
Monacaでenchant.jsで作ったHTML5ゲームを、シュン君とスマートフォンに移植してみよ... なぜ、スマートフォンアプリ化する必要があるの? 前回までの講師は、UEI清水亮氏(前編・後編)、日本マイクロソフト物江修氏(Windowsストアアプリ編)、Mozilla Japanの清水智公氏(Firefox OS編)。 そして次なるターゲットは、スマートフォンアプリ移植。講師には、アシアル株...

今週のPickUPレポート

新着記事

週間ランキング

CodeIQとは

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

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

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