はじめに
久しぶりの投稿です。今回は渦中のコロナウイルスを題材に作ったタイピングゲームについてまとめたいと思います。
作った理由
知識向上 x タイピングスキルアップ！
- このゲームを通じてコロナウイルスへの関心を深め、また知識、対処方法を学んでもらいたい
- ステイホーム期間でタイピングスキルをあげたい人に貢献したい
という想いで作りました。
概要
開発期間
- 2020/4/25 〜 2020/4/28
成果物
- タイプで学ぼうコロナ対策
技術
フロントエンド
バックエンド
- サービス: Firebase
- データストア: Cloud Firestore
開発における感想
Firebaseがすごい楽
ビルドしてホストするだけ
今回のゲームはタイピングゲームということでバックエンドは充実していなくても良いというのがあります。とりあえずVuejsプロジェクトをホスティングできてちょっとしたデータ保存ができればいい、ということでFirebaseを選択しました。
ただ単にVuejsプロジェクトをビルドしてホスティングすればいいだけなのでとても楽でした。
Cloud Firestore
Vuejsから直接データストアであるCloud Firestoreにアクセスできるというのもとても楽でした。
Cloud Firestoreはちょっと癖があって、特に集計関数の使用時に爆発的に読み取り回数が増えてしまうというところでちょっと工夫が必要でした。最終的に読み取り回数を最小に抑えることができたと思います。
リアルタイムにデータ取得ができる firesql/rxも面白くていいなと思いました。
SSL対応
ホスティングサービスならすでに当たり前になっているのですが最初からSSL対応が入ってるのもいいですね。AWSなどALB設定でいけるのとかもありますが地味に面倒なので。そこらへんも省略できるのはありがたいです。
苦労したところはデザイン
いつもなのですがデザイン面は苦労します。
今回はVueJSをしました。理由は仕事でも使っていて使い慣れているからです。
Vuetify
VueJSということでスタイルはVuetifyを採用したのですが、これも使いやすかったです。ドキュメントも充実していますし。
アニメーションはkeyframes
アニメーションは全てCSSの keyframesを使っています。今回初めて使ったので手探りでした。でも作っているうちに理解できてきました。やっぱり何か作るといろんなことを学べるのがいいですね。
CSSのアニメーションはすごい楽だということがわかりました。
ソーシャル性
今ってソーシャルソーシャルって、他の人との繋がりを重視するものが流行ったりしてますよね。ということでこのタイピングにも他ユーザとの繋がりを持てるように工夫がなされています。
見える化
サイトのトップページにトータルプレイ回数とトータルタイプ回数などが見えるようになっています。しかもリアルタイムに更新されます。プレイしなくてもこの数字がどんどん積み上がっていくのを見るだけでも楽しかったりします。
Twitter投稿
ゲーム結果をTwitterに投稿できるようにしました。これで少しずつでも繋がりができてくれたらなと思っています。
反響
面白い！と言ってもらえるのが嬉しい
公開したのが昨日（2020/4/28）なので今のところは大きな反響はないです。でも知人にプレイしてもらったところ、「面白い！」という声をいただきました。こういうのは作り手としては嬉しいですね。
これからちょっとずつでもユーザが増えてくれればと思います。
さいごに
やっぱりこういうのを作るのは楽しいです。いろんなことを学べますし、人との繋がりもできるし、自分の作品として残るのも嬉しいですね。
これからも色々と作っていこうと思います。