Share via


[Azure for DreamSpark] HTML5 + JavaScript の落ちものゲームをクラウド上に展開 & 編集しよう ~学生プログラミングプロジェクト 2015 Summer

弊社エバンジェリスト物江修が作成したゲームのサンプル「HTML5 + JavaScript の落ちものゲーム」を、クラウド上に展開・編集するための手順をご紹介します。
完成イメージ画像は以下のようになります。


(1) https://portal.azure.com/ にアクセスし、DreamSpark のアカウント、パスワードを入力してログインします。

ログイン後は以下の画面が表示されます。

(2) Azure Web App を作成します。[+新規] 、[Web + モバイル], [Web App] の順にクリックします。

Web App 作成に必要な設定を行います。

  1. URL: ユニークな文字列を入力します。入力後に [✔] が表示されることを確認します。
  2. [新しい App Service プランを作成する] には [dreamspark] と入力します。
  3. [新規リソースグループの作成] には [dreamspark] と入力します。
  4. 場所: Web App のサーバーをたてる場所を指定します。[場所] をクリックして、 [Japan East] を選択します。
  5. [作成] をクリックして、サーバーを構築します。

(3) github にあるサンプルコードを Web App のサーバーと連携させます。
[継続的なデプロイのセットアップ] をクリックします。

[ソースの選択]、[外部レポジトリ] の順にクリックします。

以下のように入力します。

  1. リポジトリの URL: https://github.com/takedamasaki555/html5_2dGame と入力します (本手順書用に物江のサンプルプロジェクトをフォークして若干のカスタマイズをしています。)。
  2. 分岐: [master] と入力します。
  3. [OK] をクリックします。

以下のように表示されればgithub との連携は完了です。

(4) ブラウザーで https://[サーバー作成時に入力した文字列].azurewebsites.net/pages/polyfill.html にアクセスし、ゲームが動いていることを確認します。
[←]、[→] で雪だるまが動きます。落ちてくる雪の結晶にあたると[ヒットしました] というメッセージと音がでます。

(5) ゲームのクラウド上への展開は完了しましたが、せっかくなのでオンラインエディターを使ってゲームの簡単な編集をしてみましょう。
まずは、オンラインエディター[Visual Studio Online] を有効化して起動します。Azure の管理画面に戻り、[設定]、[拡張機能] の順番にクリックします。

[インストールされた Web アプリ拡張機能]の[追加] ボタンをクリックします。

[拡張機能の選択]をクリックして、[Visual Studio Online] をクリックします。

続いて、[法律条項]をクリックして、[OK]ボタンをクリックして同意します。

 

最後に[OK]ボタンをクリックしてVisual Studio Online を追加します。

 

追加された[Visual Studio]をクリックして、[参照]ボタンをクリックして Viusal Studio Online を起動します。

ブラウザー上に Visual Studio Online が起動しました。

(6) 雪だるまが雪の結晶に当たった時に表示されるメッセージ[ヒットしました]を変更します。
[js]、[polyfill.js] の順にクリックして、polyfill.js を開きます。

259 行目を以下のように変更します。セーブは自動で行われます。

 

 ブラウザーで https://[サーバー作成時に入力した文字列].azurewebsites.net/pages/polyfill.html に再度アクセスし、ヒット時のメッセージが変更されていることを確認します。

  

このゲームを作成した人は、ぜひ以下のキャンペーンにご応募ください。(締切 9/15)

 


以上です!

日本マイクロソフト株式会社 武田正樹