Heroku＆Phaserでかんたん環境構築 #Heroku

はじめに

こんにちは！
CYBIRDエンジニア Advent Calendar 1４日目担当の@cy-n_aoです。
サーバサイドエンジニアをしております。

13日目は@ohmihaさんによる「ポケモンのデータ設計をしてみた」でした。
おなじみポケモンをデータ設計するという発想が素晴らしいです！テーブル構成を「なるほど確かにこんな感じだ…」と思いながら見ていました。
ポケモン好きなので、楽しく拝見させていただきました♪

概要

本日は、私がインターン対応で講師として従事させて頂いた際の経験をもとに、「Heroku＆Phaserでプログラミング初心者でも簡単に環境構築をする」ための手順をご紹介します。
お時間ある方は見て行っていただければ幸いです。

Herokuとは

(https://jp.heroku.com/home)
会員登録や必要なものをちょっとインストールするだけで誰でも簡単にweb上の環境が作れるサイトです。
がっつりサーバ立てて環境作るのは大変・時間や維持費がかかる…など色々ありますが、さっくり無料※でお手軽に環境が作れます。
今回は使用していませんが、PHP・Rubyなどの多様な言語やDBも動かせるので、「個人で何か作りたいけどサーバ立てるところは省略したいな」と思っている方にもおすすめです。

※数種類のプランがあり、有料版も存在します。

Phaserとは

(https://phaser.io/)
JavaScriptで動く2Dゲームエンジンです。
htmlとjsちょっといじったことあるよ、くらいの人でも簡単にゲームが作れるフレームワークとなっています。

必要なもののインストール

インストールしていないものがあれば、インストールします

git
Herokuへデプロイする際gitを使用します
インストールされているかを確認

$ git --version
git version 2.30.1 (Apple Git-130)

node.js
ミドルウェアとしてnode.jsを使用します
必要バージョンは8以降なので、インストール済みの場合もバージョンを確認しておきます

$ node --version
v14.18.0

Homebrew ※macのみ
Heroku CLIインストール時に使用します。
こちらも、インストール済みであるかを確認します。

$ brew --version
Homebrew 3.2.14
Homebrew/homebrew-core (git revision fceeb98d285; last commit 2021-09-30)
Homebrew/homebrew-cask (git revision 5b10204dc7; last commit 2021-09-30)

Herokuの準備

Herokuに会員登録する

下記URLから会員登録を行います。
https://signup.heroku.com/jp

Heroku CLIをインストール

windowsの場合は下記よりインストーラをダウンロードしてインストール
https://devcenter.heroku.com/articles/heroku-cli

macの場合は下記実行

$ brew tap heroku/brew && brew install heroku

インストール後バージョンが表示されればOK

$ heroku --version
heroku/7.59.0 darwin-x64 node-v12.21.0

Herokuへログインする

$ heroku login

Web ブラウザで Heroku ログインページが開きます。
ブラウザですでに Heroku にログインしている場合は、ページに表示されている[Log in] (ログイン) ボタンをクリックします。
ターミナル上でログイン認証する場合はheroku login -iとすれば可能です。

Herokuのサンプルアプリケーションをcloneする

$ cd [任意のディレクトリ]
$ git clone https://github.com/heroku/node-js-getting-started.git

デプロイ用のアプリケーションを作成する

$ cd node-js-getting-started.git
$ heroku create

heroku createのみの場合、アプリケーション名はランダムな名称となります。
heroku create　[任意のアプリケーション名]で実行すると好きなアプリ名で作成することもできますが、既に作成済みの名前は使えません。

デプロイ実行

$ git push heroku main

これで、Heroku上にサンプルアプリケーションが配置されたので、確認してみます

$ heroku open

heroku openするとブラウザが開きます。
下記のようなページが表示されていればデプロイまで問題なく完了しています。

ローカル上で実行する

毎回heroku上へデプロイしなくても、ローカルで動作確認を行うことができます。
ローカルで実行できるように必要なものをインストール

$ npm install

ローカル環境起動

$ heroku local web
17:37:36 web.1   |  > node-js-getting-started@0.3.0 start /Users/*****/node-js-getting-started
17:37:36 web.1   |  > node index.js
17:37:36 web.1   |  Listening on 5000

上記の状態でブラウザでhttp://localhost:5000 にアクセスすると、作成したローカル環境を表示することができます。

Phaserのインストール

下記を実行してPhaserをインストールします。

$ npm install phaser

新しいページをつくる

新しいページを作ってローカルやHerokuにデプロイして表示するには、必要なものをnpm install ***するほかに、index.jsを編集する必要があります。
index.jsはcloneしてきたディレクトリ直下にあります。

$ vi index.js

const express = require('express')
const path = require('path')
const PORT = process.env.PORT || 5000

express()
  .use(express.static(path.join(__dirname, 'public')))
  .set('views', path.join(__dirname, 'views'))
  .set('view engine', 'ejs')
  .get('/', (req, res) => res.render('pages/index'))
  .listen(PORT, () => console.log(`Listening on ${ PORT }`))

任意のエディタで編集してOKです。

Heroku側で用意されているページを追加してみます。
cool-ascii-facesインストール

$ npm install cool-ascii-faces

index.jsには、下記を追加します。

// constの記述があるエリアに追記
const cool = require('cool-ascii-faces')

// express()以降に追記(.get('/',... の下あたりがベター)
.get('/cool', (req, res) => res.send(cool()))

編集が終わったindex.jsは、下記のようになります。

$ cat index.js

const cool = require('cool-ascii-faces')
const express = require('express')
const path = require('path')
const PORT = process.env.PORT || 5000

express()
  .use(express.static(path.join(__dirname, 'public')))
  .set('views', path.join(__dirname, 'views'))
  .set('view engine', 'ejs')
  .get('/', (req, res) => res.render('pages/index'))
  .get('/cool', (req, res) => res.send(cool()))
  .listen(PORT, () => console.log(`Listening on ${ PORT }`))

この状態でhttp://localhost:5000/cool にアクセスすると、更新するたびに絵文字が表示されるページが新しく作成されています。

Phaserチュートリアルをやってみる①

下記ページを参考に、新しいページを作ってみます。
https://phaser.io/tutorials/getting-started-phaser3/part5
index.htmlのサンプルコードがあるので、それをそのまま使用します。
今回の環境では.htmlではなく.ejsの拡張子で格納する必要があるので、注意してください。

index.htmlの内容をHelloworld.ejsとして作成しviews/pages配下に格納
下記をindex.jsの、前述で作成した/cool設定の下あたりに追記します。

.get('/Helloworld', (req, res) => res.render('pages/Helloworld'))

http://localhost:5000/Helloworld にアクセスすると、ページが表示されることが確認できます。
アクセスするURLを変更したい場合は'/Helloworld'の部分を、ファイル名や配置先を変更したい場合には'pages/Helloworld'とファイル名を変更したものにすればOKです。

Herokuに再デプロイしたいとき

通常のgit操作をすればOKです。
プッシュするとHeroku上で公開されます。

変更ファイルを追加

$ git add .

変更内容をコミット

$ git commit -m "******"

デプロイ実行

$ git push heroku main

Phaserチュートリアルをやってみる②

次は実際に遊べるチュートリアルゲームを作成してみます。
https://phaser.io/tutorials/making-your-first-phaser-3-game
このページから言語を選択すると、説明付きのページが表示されます。(日本語はないです)
ページの内容をよく読みながら、順番に作成していきます。

ページの最後まで実装すると、星を集めるゲームを動かせるようになります。

カスタマイズしてみる

記述してある内容を反映できて実際にプレイまでできたら、他にも色々アレンジしてみるとよりゲームらしくなります。

各パラメータをいじって難易度を変えてみる
ステージの形を変更してみる
星以外のアイテムを追加してみる
タイトル画面を追加
BGM&SE音の追加
ゲームオーバー後に結果画面を追加

などなど…

最後に

いかがでしたでしょうか？
HerokuもPhaserも調べれば作業手順は出てきますが、Heroku(node.js)&Phaserでひとまとめにしているページを見つけられなかったので、「ここだけ見れば環境構築できる！」ようなページがあればいいなと思いこの記事を書きました。
少しでも何かの参考になれば嬉しいです。
ここまで読んでいただきありがとうございました！

「CYBIRDエンジニア Advent Calendar 2021」15日目は@utamakuraさんの「Amplify+React+Node.jsを使ってWebSocket通信の簡単なチャットアプリを作ってみる」です。
チャットアプリを作った事がないので是非読んで参考にしたいです…！公開が楽しみですね！

参考

・ Getting Started on Heroku with Node.js
・ Herokuスターターガイド（Node.js） (上記の日本語訳版)
・ Phaser