CodeIQ MAGAZINECodeIQ MAGAZINE

実作業10分足らず!?Mozilla清水智公氏×シュン君「Firefox OSにゲームアプリを移植してみよう」#5jcup #html5j

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

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

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

Windowsストアアプリ、Windows Phone 8.1アプリへの移植も無事完了し、今回はMozilla Japan清水智公氏の講義により、Firefox OSへの移植する。
by 馬場美由紀 (CodeIQ中の人)

enchant.jsで作ったゲームを移植!次のターゲットは、Firefox

UEI清水亮氏(前編後編)、日本マイクロソフト物江修氏(Windowsストアアプリ編)に続いて登場したのは、Mozilla Japanの清水智公氏。まずは、本日の講座の目標の確認から。

清水:では、何をするかというと、さっきシュン君が物江さんと一緒に作った、ブラウザコンテンツにしたものをシミュレータで動くようにして、そのあとにFirefox OSで動かしてみよう。

ここで清水氏が広げてみたのは、MDN(MOZILLA DEVEROPER NETWORK)の「アプリマネージャを使用する」というページ。ここにはいくつかのメニューがあるが、その中に「Firefox OSシミュレータのアドオンを使用する」という項目がある。ここから、シミュレータのページに飛ぶことができる。

App manager add-ons

アプリマネージャ(App manager)は、Firefox OS端末およびシミュレータ向けのアプリケーションのテスト、開発、デバッグをサポートするツール。OSのバージョンに合わせて、いくつかの種類がある。

清水:いくつかあるけれど、ここでは1.3を選んでみましょうか。

さて、実は今回、僕らがやることはとても少ないんです。こういうjsっぽいファイル(編集注:JSONファイル)を書いて、app.manifestという名前で保存すれば、それでいけるはず。ではさっそくやってみましょう。

    {
      "version": "0.1.0",
      "name": "hello world",
      "description": "A template with the bare minimum structure",
      "launch_path": "/index.html",
      "icons": {
        "128": "/img/icons/icon128x128.png"
      }
    }

清水:ではせっかくなので、シミュレータを起動してみようか。

シュン:はい!

念のため、ゲームの動作確認をしてみる2人。

清水:さっき、Webブラウザで動作できるようにしたものがあったね。あれをそのまま、別フォルダにしてみましょうか。

シュン:画面出ました。動きます。

清水:よしよし。ここで動けば簡単かな。では、さっきのアプリマネージャに戻って、シミュレータを動かしてみましょう。

今からやることは、ここにアプリを足すんだけれど、足すためにはアプリの名前、それから、まず一番最初にどのファイルを開かけばいいかなどを指定しないといけない。それを書くのが、このManifestです。バージョンは、好きに付けていいよ。最後にアプリの名前を付けてあげよう。

    {
      "name": "UFO-Escape",
      "description": "UFOを操作し、壁をよけていくゲームです。",
      "launch_path": "/index.html",
      "icons": {
        "32": "/logo/ufo32.png",
        "48": "/logo/ufo48.png",
        "128": "/logo/ufo128.png"
      }
    }

清水:それを保存したら、さっきのアプリマネージャに戻りましょう。そこで、「パッケージアプリの追加」を選んで。さっきのFirefox OSを開いて、フォルダの選択をすると、こんなふうに表示されるはず。

清水:これで、アプリになったはず。これで更新をすると、さっきのシミュレータのほうにもインストールされて、よし、移植終了!

シュン:やった!できた!

シミュレーター上でゲームの動作を確認。どうやら、問題なく動くようだ。「Firefoxのアプリは、Windowsのように.exeとかではなくて、単なるタブなんですよ」などと、さりげなくFirefoxの特長をアピールする清水氏。

清水:さて、これで動くことがわかったので、実機でも試してみましょうか。

シュン:できた!

清水:これでもう、販売待機状態ですよ。

なんと実作業10分足らずで、移植作業が完了してしまった。次回は、iPhone、Androidなどのモバイルで動作する環境への移植に挑戦する。

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

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

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

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

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

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

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

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

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

■関連記事

ブラウザ戦争、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/...
「Webこそがゲーム・プラットフォームである」──Mozilla開発者が語るWebブラウザ戦略 vo... Webこそがプラットフォームである──Mozillaが描くゲーム流通戦略 ──WebGLを活用して、Mozillaのゲーム・プラットフォームチームは、どのようなビジネスを展開しようとしているのでしょうか? Martin Best氏(以下、Best):前回も指摘したように、Webはゲーム開発の重要...
「WebGLでWebゲームの世界を変える」──Mozilla開発者が語るWebブラウザ戦略 vol.... WebGLでWebゲームの世界が変わる ──あらためてWebGLがどんな技術なのか、紹介していただけますか。 Martin Best氏(以下、Best):これからのWeb世界で、どんなゲームが可能になるか。私とVladimirは、Mozillaのゲーム・プラットフォーム部門で一緒に仕事をしながら...

今週のPickUPレポート

新着記事

週間ランキング

CodeIQとは

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

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

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