CodeIQ MAGAZINECodeIQ MAGAZINE

【最終回】シュン君のゲームをChrome Web Storeで公開してみよう!#5jcup #html5j

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

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

シュン君がenchant.jsで作ったゲームを、Windowsストアアプリ、Windows Phone 8.1アプリ、Firefox OS、スマートフォンアプリなど、あらゆるプラットフォームに移植してきた。

最終回はGoogle Developer Expert吉川徹氏によるChrome Apps編を紹介する。
by 馬場美由紀 (CodeIQ中の人)

Chrome Appsとは何か?

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

ラストを飾るGoogle Developer Expert吉川徹氏は、まず「Chrome Appsとは何か?」から講義を始めた。

吉川:それじゃ今度は、シュン君が作ったゲームをChrome Appsにしてみましょう。まず、Chrome Appsって何か知ってるかな?

Chrome Web store Chromeで商品として並べられるアプリのプラットフォームで、Chromeブラウザ上で動作するのでHTML5をフル活用することができます。Chrome Web Storeのゲームのカテゴリを見ると、Chromeで使えるゲームがたくさん表示されています。

シュン:へえ~、いろんなゲームがあるんだ。

ちなみに、Chrome アプリ ランチャーという機能もあります。Windowsのランチャーもあるので、インストールしたアプリが表示されて、直接起動できるから便利です。

Chrome Web Storeにシュン君のゲームを移植しよう!

吉川:次にさっきVisial Studioでシュン君が作ったアプリとマニュフェストのファイルを用意してもらえるかな。マニュフェストファイルは、FirefoxOSアプリで作ったものがあればそれを書き換えてしまうのが早いです。エクスプローラーでフォルダを開いて、ファイル名をmanifest.jsonに変えておきましょう。

シュン:はい、準備ができました。

吉川:では、「Create Your First App」というマニュアルページを開いて、この通りに作業していきましょう。

まずStep1は、(以下のコードを)そのままコピーして貼り付けましょう。

{
  "name": "Hello World!",
  "description": "My first Chrome App.",
  "version": "0.1",
  "manifest_version": 2,
  "app": {
    "background": {
      "scripts": ["background.js"]
    }
  },
  "icons": { "16": "calculator-16.png", "128": "calculator-128.png" }
}

“name”は自分が作ったアプリの名前に、”description”は必須じゃないので消して、”version”は好きなバージョンにして大丈夫。”manifest_version”は消して、”app”はそのまま、”icons”も消しちゃってOKです。

Step2のbackground scriptはChrome Appsの機能の一つ。このbackground.jsを使ってアプリケーションのコントロールをしています。例えばアプリによっては、ウインドウは開いてないけど動いてる機能ってありますよね。例えば8:00にアラームを設定すると、時間が来たら起動するとか。今回のシュン君のゲームでは、ゲームの立ち上げのところをこれでコントロールします。

chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create('window.html', {
    'bounds': {
      'width': 400,
      'height': 500
    }
  });
});

まず、シュン君のゲームにbackground.jsを一つ足します。で、サイズはシュン君のゲームのサイズに合わせます。サイズはいくつだっけ?

シュン:320*320かな。

吉川:じゃあ、widthとheightをそのサイズに変えてもらって、window.htmlをシュン君のアプリファイル名のindex.htmlに変えます。

で、実際のデバッグはChromeから行います。メニューアイコンをクリックして、ツールで拡張機能を選びます。そして、デベロッパモードにチェック。「パッケージ化されていない拡張機能を読み込む」から、ファイルをフォルダに。

シュン:あ、入った!入った!

吉川:起動ボタンを押すとスタートします。

シュン:おおーかっこいいですね!

吉川:スタート画面にアプリがインストールされているから、Chromeが起動してなくてもできます。Chromeから起動するときは、新しいタブを開くとシュン君のゲームが表示される。さらにアイコンを入れたら、ひと目でシュンのゲームとわかるようになります。すごく簡単でしょ?

シュン:すごーい!表示されました!

これでWeb、Windowsストアアプリ、Windows Phone 8.1アプリ、Firefox OS、Android、iOS、Chrome Apps、7つのプラットフォームで動くアプリが完成した。(会場全員で拍手!)

シュン君のゲームをもっとブラッシュアップしよう!

ここでひと通りの講義は終わったわけだが、シュン君はバグ修正や、ゲームをもっとブラッシュアップしたいと言う。若狭氏とゲームの完成度を上げるべく、二人は知恵を絞る。ISAC Tokyo2014の子ども向けワークショップで一緒にArduinoを使ったゲームを作った二人は、息もぴったり。

そして、ホワイトボードに向かうシュン君と若狭氏。

シュン君:こういうコースを作ってみたい

シュン君:もっとステージをきれいに、今みたいにバーを並べるんじゃなくて、二次元配列とかで、迷路のようなものにしたいんです

若狭氏:マップ機能の2次元配列で直線を引いたり、変形させたらどう?

シュン君:mapをスクロールさせたいんだけど…

講義後も毎日ブラッシュアップを続けたシュン君の努力

約5時間の講義を終えてからも、シュン君はゲームのブラッシュアップに夢中で、その場の誰よりも楽しそうにゲームを作っていた。それは講義が終わってからHTML5 Japan Cup 2014の応募締切まで、毎日続けていたのだそう。

そして、「UFO-Escape ゲーム」は完成した。以下はシュン君が自分で工夫したところを挙げてもらったものだ。大人から教えてもらって終わりではなく、自分で努力を続けて成長していくのが、シュン君の素晴らしいところ。

<シュン君が自分で工夫したところ>

  1. ステージを作るのにbarV, Hよりも効率が良い方法は、と探して、mapを勉強して、二次元配列のステージにした。
  2. LTでも発表したが、ランダムなステージのスクロールを実現するため、mapを二つ用意し、それを交互にスクロールした。
  3. 上から爆弾がUFOめがけて落ちてくるようにして、ゲームの難易度を高めた。
  4. 上の1~3により、ゲームが難しくなり過ぎたため、清水さんに教えてもらったベクトルの方式ではなく、PCでは十字キー、その他では左下コントローラーで操作できるように変更した。
  5. その後、スクロールの速さが速くなるようにしたり、ぶどうを取らなければいけないようにしたり、などの難易度を上げる方法を、新しく考えた。

ゲームのアイコンも得意のPowerPointで作成し直した。とてもPowerPointで作ったとは思えない出来映えだ。

得意のパワポでアイコンもLTスライドも作成

見事Webプラットフォーム賞を獲得したシュン君は、表彰式のイベントでLTも披露。しかもトップバッターというプレッシャーにも負けず、堂々とプレゼンし、会場の拍手を浴びた。

翌日は修学旅行で朝が早いため、トップバッターでLTをするシュン君

表彰式を終えてすぐ、調子の悪かったPCが壊れてしまい、修理に出したというシュン君。帰って来たら、またアプリ開発を再開しますという嬉しいメッセージと御礼のメールが届いた。

これからもプログラマとしてどんどん成長していくであろうシュン君に、次に会える日が今から楽しみである。

<関連レポート>

SpecialThanks

  1. HTMLのゲームエンジンenchant.jsを使ってゲームを作成(清水亮さん)
  2. Windowsストアアプリにしてみよう (マイクロソフト 物江修さん)
  3. Firefox Appsにしてみよう(Mozilla Japan清水智公さん)
  4. iPhone、Android アプリにしてみよう (アシアル生形可奈子さん)
  5. Chrome Appsにしてみよう(吉川徹さん)
  6. ゲームをもっと面白くしてみよう(html5j若狭正生さん)

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

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

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

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

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

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

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

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

■関連記事

ブラウザ戦争、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/...
Monacaでenchant.jsで作ったHTML5ゲームを、シュン君とスマートフォンに移植してみよ... なぜ、スマートフォンアプリ化する必要があるの? 前回までの講師は、UEI清水亮氏(前編・後編)、日本マイクロソフト物江修氏(Windowsストアアプリ編)、Mozilla Japanの清水智公氏(Firefox OS編)。 そして次なるターゲットは、スマートフォンアプリ移植。講師には、アシアル株...
実作業10分足らず!?Mozilla清水智公氏×シュン君「Firefox OSにゲームアプリを移植し... enchant.jsで作ったゲームを移植!次のターゲットは、Firefox UEI清水亮氏(前編・後編)、日本マイクロソフト物江修氏(Windowsストアアプリ編)に続いて登場したのは、Mozilla Japanの清水智公氏。まずは、本日の講座の目標の確認から。 清水:では、何をするかというと、...

今週のPickUPレポート

新着記事

週間ランキング

CodeIQとは

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

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

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