FirebaseとVue.jsで作るオンライン○✕ゲーム


# はじめに
過去記事にてGoogle HomeからIFTTTを経由しローカルのラズパイを操作するにあたり、グローバル→ローカルの接続に[Firebase](https://firebase.google.com/)を使用してみました。
そのときはRealtime Databaseのみの使用でしたが、FunctionsやHosting等結構色んなことができそうだったので試しにオンライン○✕ゲームを作ってみました。

Webアプリは5年ぐらい前にXAMPP+WordPressとかでめちゃくそ簡単なコンテツ管理サイトを作ったことがあるぐらいで、現在のWeb環境は浦島太郎状態です。
調べてみたら今はJSフレームワークが主流でもうjQueryも使わない時代になってるんですね…
[【翻訳】 2016年にJavaScriptを学んでどう感じたか](http://kikuchi1201.hateblo.jp/entry/2016/10/26/172404)

とりあえず学習コストも低いらしい[Vue.js](https://jp.vuejs.org/index.html)ってのを使ってFirebase上で○✕ゲームを実装してみようと思います。

なお完成品は[こちら](#完成品)です。

**※2017/11/11追記　Google Homeでも○✕ゲームできるようにしました。**
[Google Homeと○✕ゲームしてみる](https://qiita.com/miso_develop/items/7a41e74d178920e926a8)


# Firebaseプロジェクトの作成
まずはFirebaseの[コンソール画面](https://console.firebase.google.com/)へアクセスしプロジェクトを作成しましょう。

「ox-game」とか適当にプロジェクト名をつけて、国を日本にして作成をクリックしたらコンソール画面での操作は完了です。

![Firebase console_20171105_185257.png](https://qiita-image-store.s3.amazonaws.com/0/207109/f3256690-9dbd-b82e-2d17-f8fac5a502c7.png)

以降の作業はNode.jsにて行います。



# Node.jsのインストール
Firebaseのローカルでのプロジェクト管理はNode.jsで行います。
まずはNode.jsをインストールしましょう。
なお私はWindows10 Proにて操作しました。

以下の記事あたりを参考にインストールしてみて下さい。
[Windowsでnode.jsをバージョン管理する](https://qiita.com/t_kojima/items/780b3b3133a17cceb175)



# firebase-toolsのインストール
続いて「firebase-tools」というFirebaseプロジェクトを管理するツールをインストールします。
`-g`オプションをつけてグローバルでインストールして下さい。

```
npm install -g firebase-tools
```



# Firebaseへのログイン
以下のコマンドを実行し、表示されるウインドウよりログインして下さい。

```
firebase login
```



# ローカルプロジェクトの作成
次にローカルプロジェクトを作成します。
適当にプロジェクト用のフォルダをきって以下のコマンドを実行します。

```
firebase init
```

コマンド上で色々聞かれます。

```
? Are you ready to proceed? (Y/n)
```

ここはそのままEnter。

```
? Which Firebase CLI features do you want to setup for this folder? Press Space
 to select features, then Enter to confirm your choices. (Press <space> to sele
ct)
>( ) Database: Deploy Firebase Realtime Database Rules
 ( ) Firestore: Deploy rules and create indexes for Firestore
 ( ) Functions: Configure and deploy Cloud Functions
 ( ) Hosting: Configure and deploy Firebase Hosting sites
 ( ) Storage: Deploy Cloud Storage security rules
```

これは`Database`と`Hosting`の2つをスペースで選択しEnter。

```
=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.

? Select a default Firebase project for this directory: (Use arrow keys)
> [don't setup a default project]
  ox-game (ox-game-85a2f)
  [create a new project]
```

これは先ほどコンソールにて作成したプロジェクトを選びます。


```
=== Database Setup

Firebase Realtime Database Rules allow you to define how your data should be
structured and when your data can be read from and written to.

? What file should be used for Database Rules? (database.rules.json)
```

Databaseの読み書き権限を定義するファイルです。
そのままEnterしちゃいましょう。


```
=== Hosting Setup

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory? (public)
```

Hositingするファイルを格納するフォルダ名の指定です。
ここもそのままEnterで。


```
? Configure as a single-page app (rewrite all urls to /index.html)? (y/N)
```

SPA(Single Page Application)にしますかと聞かれます。
とりあえず`y`で

```
+  Wrote public/index.html

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

+  Firebase initialization complete!
```

これでローカルプロジェクトが初期化されます。
フォルダ内に色々ファイルが作成されました。

このうち`database.rules.json`がDatabaseへの読み書き権限を定義するファイルになります。
デフォルトだと認証しないと読み書きできないようになっているので、今回は誰でも読み書きできるよう、以下のように書き換えちゃいましょう。


```json:database.rules.json
{
  "rules": {
    ".read": "true",
    ".write": "true"
  }
}
```

以上でローカルプロジェクトの作成は完了です。



# 実装
アプリのソースは`public`フォルダ配下になります。
このフォルダの中身がFirebaseのサーバにアップされます。

今ある`index.html`を書き換え、Vue.jsで実装したjsファイルを追加しましょう。

ソースは以下のGithubリポジトリにあります。
初めてGithubにアップしてみました。
（アップって言い方はもしかしてナウくない…？）

[miso-develop/ox-game/public/
](https://github.com/miso-develop/ox-game/tree/master/public)

ポイントとしては`data.sync`にDatabaseとまるっきり同じデータを持ち、更新時にはそれをそのままDatabaseへ上書きし、Database更新時にそのまま受け取ってローカルデータを上書いてます。
`data.sync.host`や`data.sync.guest`は一度書き込まれれば更新のないデータなので通信の無駄ですが、mBaaSっぽさを味わうべくまるっとやりとりしてます。



# デプロイ
最後に以下のコマンドでFirebaseへデプロイします。
少し時間かかります。

```
firebase deploy
```

デプロイが完了すると
以下の結果が表示されます。

```
=== Deploying to 'ox-game-85a2f'...

i  deploying database, hosting
i  database: checking rules syntax...
+  database: rules syntax is valid
i  hosting: preparing public directory for upload...
+  hosting: 2 files uploaded successfully
i  database: releasing rules...
+  database: rules released successfully

+  Deploy complete!

Project Console: https://console.firebase.google.com/project/ox-game-85a2f/overview
Hosting URL: https://ox-game-85a2f.firebaseapp.com
```

最後の`Hosting URL`がWebアプリのURLになります。



# 完成品
こうしてできたアプリがこちらになります。
**「[OX GAME](https://ox-game-85a2f.firebaseapp.com/)」**

[ロビー画面]
![OX GAME_20171105_201023.png](https://qiita-image-store.s3.amazonaws.com/0/207109/2e2b36ce-afd3-51ff-07ba-61064167c59a.png)

[ゲーム画面]
![OX GAME_20171105_201045.png](https://qiita-image-store.s3.amazonaws.com/0/207109/7853a901-4a01-2531-099a-3a6c075aeefd.png)

なお以下のブラウザで動作確認しています。
* Windows Chrome
* Windows Firefox
* Android Chrome



# おわりに
Firebaseすごいですね。
これだけの機能が簡単に使えちゃうなんて。
FunctionsでWeb APIの実装もできたりするし、認証機能もあるので、簡単なWebサイトやアプリはこれだけで十分作れちゃいますね。

Vue.jsは私のような化石jQuery脳には戸惑うことも多かったですが、手を動かして実装してみるとこれは便利かもって実感が沸いてきます。
今回の○✕ゲームのような見た目放置なプログラムだとほとんどjs側ばかりいじってれば済みました。