はじめに
過去記事にてGoogle HomeからIFTTTを経由しローカルのラズパイを操作するにあたり、グローバル→ローカルの接続にFirebaseを使用してみました。
そのときはRealtime Databaseのみの使用でしたが、FunctionsやHosting等結構色んなことができそうだったので試しにオンライン○✕ゲームを作ってみました。
Webアプリは5年ぐらい前にXAMPP+WordPressとかでめちゃくそ簡単なコンテツ管理サイトを作ったことがあるぐらいで、現在のWeb環境は浦島太郎状態です。
調べてみたら今はJSフレームワークが主流でもうjQueryも使わない時代になってるんですね…
【翻訳】 2016年にJavaScriptを学んでどう感じたか
とりあえず学習コストも低いらしいVue.jsってのを使ってFirebase上で○✕ゲームを実装してみようと思います。
なお完成品はこちらです。
※2017/11/11追記 Google Homeでも○✕ゲームできるようにしました。
Google Homeと○✕ゲームしてみる
Firebaseプロジェクトの作成
まずはFirebaseのコンソール画面へアクセスしプロジェクトを作成しましょう。
「ox-game」とか適当にプロジェクト名をつけて、国を日本にして作成をクリックしたらコンソール画面での操作は完了です。
以降の作業はNode.jsにて行います。
Node.jsのインストール
Firebaseのローカルでのプロジェクト管理はNode.jsで行います。
まずはNode.jsをインストールしましょう。
なお私はWindows10 Proにて操作しました。
以下の記事あたりを参考にインストールしてみて下さい。
Windowsでnode.jsをバージョン管理する
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への読み書き権限を定義するファイルになります。
デフォルトだと認証しないと読み書きできないようになっているので、今回は誰でも読み書きできるよう、以下のように書き換えちゃいましょう。
{
"rules": {
".read": "true",
".write": "true"
}
}
以上でローカルプロジェクトの作成は完了です。
実装
アプリのソースはpublicフォルダ配下になります。
このフォルダの中身がFirebaseのサーバにアップされます。
今あるindex.htmlを書き換え、Vue.jsで実装したjsファイルを追加しましょう。
ソースは以下のGithubリポジトリにあります。
初めてGithubにアップしてみました。
（アップって言い方はもしかしてナウくない…？）
ポイントとしては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」
[ロビー画面]
[ゲーム画面]
なお以下のブラウザで動作確認しています。
- Windows Chrome
- Windows Firefox
- Android Chrome
おわりに
Firebaseすごいですね。
これだけの機能が簡単に使えちゃうなんて。
FunctionsでWeb APIの実装もできたりするし、認証機能もあるので、簡単なWebサイトやアプリはこれだけで十分作れちゃいますね。
Vue.jsは私のような化石jQuery脳には戸惑うことも多かったですが、手を動かして実装してみるとこれは便利かもって実感が沸いてきます。
今回の○✕ゲームのような見た目放置なプログラムだとほとんどjs側ばかりいじってれば済みました。