正月っぽい謎ゲームつくった&Netlify使ってみた所感

正月っぽいゲームを作りたいとふと思い立ち、結果ゲームなのか?と言う感じのよく分からないものが出来あがった。 明けましておめでとうございます。

初夢ラッキー詰め放題キャンペーン

初見で200000縁起パワーを超えたらかなり運が良い…かもしれない。

そもそもは現在制作中のアクションゲームが絶賛滞っており、その素材を流用してなんか作りたかったというのが本音である。 こちらは今年中に何らかの形にはしたい…。

f:id:pentamania:20190107221138g:plain

技術的な話

今回のゲーム?について、 ゲームフレームワークは例によってphina.js
開発ツール的なものとしては自作のwebpackスターターキットを使用した。
概ねいい感じに開発できた。

そして今回は初めてホスティングNetlifyを利用した。
Netlifyの説明は他サイトに譲るが、 要するにレンタルサーバーとか使わず、静的なサイトを無料で公開できるサービスである。

「無料ホスティングならgithub pages(GHP)でええやん」となるが、Netlifyを使う利点も結構あった。

無料でプライベートリポジトリをホスティングに使える

諸事情により、リポジトリはプライベートにしたかったが、githubは有料アカウントでないとプライベートリポができない。 GHPは当然githubリポジトリを置く必要があるので無料でやりたいとなるとNG。

代わりにBitbucketなら無料でプライベートリポが作れる。 Bit~のホスティング機能は微妙だが、そこをNetlifyでカバーすることでいい感じにできる。

<1月8日 追記>
この記事を書いた翌日、つまり今日なんとgithubでもプライベートなリポジトリを無料作成できるようになりました。

jp.techcrunch.com

Bitbucket君…😐

出力先をgit管理しなくて良い・ビルドを手動でやらなくて良い

GHPで内容を公開・更新したい時は

  • 出力先ディレクトリをgit管理下におき、
  • buildコマンドを手動で走らせたあとにcommit & push

する必要がある。とてもダルい。
しかしNetlifyはgit pushするだけで再ビルド&更新までやってくれるナイスガイである。

また指定したディレクトリだけが公開されるので、URLが
http://pentamania.github.io/[リポジトリ名]/dist/
みたいにちょっと不格好になったりにならずに済む

詰まったところ

環境の違いによるビルドの失敗

ホスティング設定は簡単で概ね詰まらずに進めたが、 ビルドに失敗してデプロイがうまくいかないという事態に遭遇。

色々ググってみても原因がよく分からなかった。 が、エラーログをよ~く読むとwebpackによるビルドで読み込みに失敗している箇所があった。

f:id:pentamania:20190107174427p:plain

結論としてはOS環境による、パスの大文字小文字に対する扱いが違ったのが原因だった。

筆者の環境はwindows10だが、 例えばPlayer.jsというファイルを読み込もうとした時、

import Player from "./player.js";

という風にファイル名を小文字に変えてもビルドが通ってしまう。 しかしLinux環境(多分)であるNetlifyではエラーになってしまった模様。

うっかりしてるとやりかねないミスだが、幸いwebpackにはこれを防ぐためのプラグインがあるので導入しておいた。

環境の違いには気をつけよう。 あとエラーログはちゃんと読もう。

その他所感

ゲームとして微妙な感じだが、とりあえず何かを作ることに成功したので今年は早くもロスタイムということにします。 ただ去年まではツール系に偏ってたので、今年はもうちょっと創作色を強めていく感じにしていきたい。