firebaseでカルタつくった話

firebase html5 AdventCalendar2017

おはようございます！こんばんは！

Tech KAYAC Advent Calendar 2017の9日目の記事をお届けします。
受託事業部でWebフロントエンドエンジニアをしております、新卒２年目のゆみこふ @yumikokh です。

はじめに

今年9月に開催されたHTML5CONFERENCE2017で、弊社のブースを出展させていただくことになり
展示作品の１つとして「フロントエンドあるあるカルタ」というものを制作しました。
そのときに使ったのがFirebase！
ほぼサーバーサイドの経験が０に等しいフロントエンドエンジニア（私）が、
簡易ではあるけどもオンライン通信ゲームを作ることができる！すごい！ということで
あるあるカルタの紹介とともにFirebaseの始め方について書こうと思います。

f:id:wyumikokh:20171210030142j:plain
カンファレンスブースの様子
カルタの他にFinalFlash2020やシェアガチャも展示してわいわいだった

この記事のターゲット

サーバーは全く触ったことないけどWebアプリに挑戦してみたい！という方
Firebaseを手っ取り早く使いはじめてみたい！という方
※てっとりばやく作り始めたい方は「はじめかた」からお読み下さい↓

Firebaseでできること

FirebaseはBaas（Backend as a Service）の１つです。
実装者がバックエンド側の実装をすることなく、決められたAPIを叩くだけでクラウド上に用意された機能群を使うことが出来ます。
Firebaseは多機能すぎるほど多機能なのでここで全て紹介するのは控えますが、
主な機能をサーバーの細かいことはよくわからない人向けにすごく噛み砕いてご紹介します。

  • Realtime Database
    １番の目玉商品！ほぼ※リアルタイムにデータの編集・呼び出しができるデータベースです。
    しかもデータはJSONツリーを介したとってもシンプルなもの（後述）
    設定すればデータのバックアップもちゃんととってくれます。
    クエリが分からなくてもとりあえず大丈夫です。
    ※公式には「数ミリ秒で同期され」とあります

  • Cloud Storage
    画像や音声などのアセットをクラウドに保存できます。（サーバー上で生成したアセットも可）
    他のFirebase機能との親和性も高いです。

  • Firebase Hosting
    コマンド１つで静的サイトを公開できます。無料のSSL証明書つき！

  • Cloud Functions
    バックエンド側で処理してほしい（フロントで見られたらまずい）コードなどはこちらに。

  • Firebase Auth
    SNSログイン機能までつけられちゃいます。

全機能紹介はこちらに　
</> アイコンがついているものがWebで使える機能です。
初心者からベテランまで、ユーザーを厭わないのがFirebaseのすごいところ。

でもお高いんでしょ？

どの機能を使うかにもよりますが、
１番使うであろう Realtime Database だと無料プランで 同時接続100、保存容量1GB、ダウンロードされた容量10GB/月なので
ちょっと触ってみる分には無料プランで十分なようです。
ただ従量制プランもありスケールもしやすいし、なによりバックエンドエンジニアの人件費が削減できるのは大きいですね。

詳しい料金プランはコチラ

フロントエンドあるあるカルタについて

ルールはシンプルなカルタと同じ、読み手が読んだ札をすばやくとって、札がなくなったとき一番多く持ち札を持っていた人が勝ちです。（競技カルタなどでは他にもルールはあると思いますが）

f:id:wyumikokh:20171210023647p:plain

違いは、絵札が表示されるプレイヤーページと、読み札ページがあり、iPadなどのモバイル端末を並べて遊ぶところです。
札はオンラインですが、読み手は真心を込めて肉声で読み上げるため
プレイヤーはその場にいる必要があります。（札を並べるのがらk...

ドタバタで作っていろいろと突っ込みどころは満載だったものの、
当日メンバーが全力でガヤを頑張ってくれたおかげでユーザーの方も楽しんでくれているようで一安心でした。
ガヤの大切さを痛感しましたね・・・（大事）

ちなみにUIのデザインやイラストは弊社のデザイナーオブザイヤー @mazenda_mojya が描いてくれました！
キャラクターモチーフはファイ部（フロントエンドチーム）メンバーですヽ(´ｴ`)ﾉ

画像をアップロードしてオリジナル絵札をつくることもできます（ただしConference当日は使う機会がなかった・・）

f:id:wyumikokh:20171210024214p:plain

Firebaseはじめかた

さてここからが本題です。さっそくセットアップしていきましょう。
今回はRealtime Databaseを使えるようになるのがゴールです。
ここからは黒い画面を使います

あると便利なCLIインストール

Node.jsとnpmが必要です。ない方はNode.jsもインストールしておきましょう。

npm install -g firebase-tools

グローバルにCLI（コマンドラインツール）をインストールしました。

firebase --version

を実行してインストールが成功したか確認します。
成功していたら

firebase login

を実行
ブラウザが立ち上がり、googleアカウントの紐付けを行ってくれます。簡単！

プロジェクトの作成

Firebase Consoleでプロジェクトを作成します。
『プロジェクトの追加』から適当な名前を入力してプロジェクトを作るとこんな画面がでてきます

f:id:wyumikokh:20171210023747p:plain

メニューの『DEVELOP』というグループが主にお世話になる機能です。

初期設定

黒い画面にもどって、作業ディレクトリをつくりましょう（今回はpomにします）

mkdir pom
cd pom //作ったディレクトリに移動

さきほどインストールしたFirebase CLIを使ってサイトを初期化します

firebase init

f:id:wyumikokh:20171210023753p:plain

英語で色々きかれてきますね
『RealtimeDatabaseとCloudFunctionsとFirebaseHostingどれを使いたい？（複数選択可）使いたいものをSpaceで選択して、大丈夫だったらEnterキーをおしてね！』と言っています。
次に『プロジェクトを選んでね！』と言ってきます。
先程作ったプロジェクトが表示されていると思うので、選択します。
あとはよしなにfirebaseが設定してくれるので、エンターしておきましょう。

/public以下にhtml、
.firebaserc,database.rules.json,firebase.jsonが生成されたはずです。

Realtime database ルールの設定

先程つくられた database.rules.jsonはデータベースの書き込み権限と読み取り権限の設定を行います。
初期設定は

"rules": {
   ".read": "auth != null",
   ".write": "auth != null"
 }

になっていて、認証されているときしか読み書きができないようになっているので
とりあえず↓のように書き換えましょう。

"rules": {
   ".read": true,
   ".write": true
 }

これで誰でも読み書きができるようになってしまいます。
プロジェクトとして公開するときは厳密に設定する必要があります、が今回は大丈夫です。
https://firebase.google.com/docs/database/security/?hl=ja

書き換えたら、

firebase deploy --only database

でFirerebase consoleにも反映します。
Firebase consoleメニュー＞Database＞ルール　も書き換わっているはずです！

フロントの下準備

フロントのjsでfirebaseを使えるように下準備します。
npmでもfirebaseのモジュールは配布されているのですが、今回は手っ取り早くCDNを使います。
Firebase Consoleで作ったプロジェクト画面の「ここから始めましょう」の右下に『ウェブアプリにFirebaseを追加』というのがあると思うのでクリックします。

f:id:wyumikokh:20171210023639p:plain

ここに出てくるコピーをまるっとコピーして、HTML の一番下、他のスクリプトタグの前に貼り付けましょう。

ようやく下準備が終わりました！

データを追加してみる

const db = firebase.database();
db.ref('/hogehoge').set('pom');

これでfirebase console上でデータが書き換わっているのが確認できました

f:id:wyumikokh:20171210023803p:plain

他にもpushやupdateなどのデータの保存方法があります。
https://firebase.google.com/docs/database/admin/save-data?hl=ja

データを読み取ってみる

下記のように読みとれます。

db.ref('/hogehoge').on('value', function(snapshot) {
    console.log(snapshot.val());
});

valueイベントは、ロード時に１回、その後指定したパス以下のデータが変更される度にJSON形式で呼び出されます。
他の取得イベントはこちらを参照してみて下さい！
https://firebase.google.com/docs/database/admin/retrieve-data?hl=ja

これだけだ！

おわり

いかがでしたか？
私はFirebaseのおかげで自力でできることの可能性が広がりましたヽ(´ｴ`)ﾉ

面白法人カヤックでは新しい技術大好き！な人を募集しております！

風邪も流行ってるのでしっかり予防していきましょう・・・！(-_-)

明日は @mamimumemoomoo さんのすごい記事です！