PWA対応のWebゲームアプリ作成（Vue.js、Nuxt.js、CreateJS、Firebase）
3年前、正月用にブログサイトのヘッダーに表示して遊べるゲームを作ったのですが、それっきり、まったく陽の目を浴びてなかったので、PWA対応のWebゲームアプリとして作り直しました。
データベースにFirebaseのFirestoreを使用しているので、ホスティングもFirebaseで行えばサーバーレスアプリケーションと銘打つことができましたが、今回はとりあえず、自分で用意した環境に配置しています。
目次
- 作成したアプリ
- 使用しているフレームワークやライブラリ
- 苦労した点
- 良かった点
- 使用している画像や音楽について
- 最後に
作成したアプリ
作成したアプリは「干支ゲット」というHtmlのCanvas要素を使用したゲームアプリです。
なぜ干支なのかというと、3年前に作成したアプリの名残になります。
この時は酉年だったので、使用している画像がそれにちなんだものになっています。
使用しているフレームワークやライブラリ
作り直した後のアプリで使用しているフレームワークやライブラリは以下の通りです。
- Nuxt.js（Vue.js）
- CreateJS
- Firebase Cloud Firestore
- Firebase Cloud Functions
以前はjQueryとCreateJSを使っていましたが、画像の差し替えや動作を変えるだけではつまらなかったので、jQueryで作成していたコードをNuxt.js（Vue.js）に置き換えて、スコアの登録や一覧のデータ取得にFirerbaseのFirestoreやFunctionsを利用するようにしました。
CreateJSにしても、ES Module版を使うように変更しましたが、一部、実装されていない機能があったので、通常の外部スクリプト参照で読み取ったライブラリを使っています。
苦労した点
作り直しで一番苦労したのは、CreateJSをES Module版に置き換えるように変えた点です。
数年前にCreateJSのES Module版が公開されたようですが（@createjs/easeljs - npm）、最新はあくまでベータ版となっていて、さらに、ここ最近はまったく更新されておらず、開発がストップしているので、使い方や詳しい情報を探してもES Module版についてはほとんど出てきませんでした。
今回のアプリではImageLoaderやSound系の機能が必要だったのですが、node_modules配下のコードを確認しても関連した機能が見当たらなかったので、そういった機能は外部スクリプト参照で読み込んだライブラリを使って、これまでと同じような形で実装しています。
ちなみにjQueryからVue.jsの置き換えはそこまで難しくなく、むしろ、すっきりしてコードが見やすくなりました。
良かった点
作り直して良かったのは、Nuxt.jsを使うことで開発環境が整理されたところです。
また、スコア登録は旧環境からの移行時に削除していた機能なのですが、今回の作り直しでFirebaseのFirestoreを使用するようにしたので、機能として復活させることができました。
元々、Firebaseを何かしらのアプリで使ってみたいと思っていたので、それが実現できて個人的には嬉しく思っています。
サイトについてはほとんどアクセスがないと思うので、使用状況についても無料枠を超えることはなく、運用する上での問題はありません。
使用している画像や音楽について
最後に
まだ、どうするか決めていませんが、こちらのアプリについてはGitHubにパブリックリポジトリで登録して、最終的にGitHub Pagesなどと連携して、自動ビルドやホスティングをしてみたいと考えています。
もしかしたらやらないかもしれないので、今のところはなんとも言えません。