目的

以前に投稿した、Node.jsでアプリを作る方法が個人開発では結構楽で、それと組み合わせてFirebaseを使ったのが楽でだったのでシェアします。
ほとんど個人的なメモに近いので、細かい部分で間違えていても大目に見てください。

環境

環境についてはこちら（https://qiita.com/yujiro0102/items/0bc30ab0a73de62c4e2d）を参考にしてください。
Firebaseの公式ドキュメント（https://firebase.google.com/docs/web/setup?hl=ja）では、Firebaseサーバへのホスティングを紹介しています。
実際に使用してみて、拡張性などを考えるとサーバだけはAWSなどで行い、それ以外はFirebaseを利用するのが便利だと感じました。

できること

Firebaseには様々な機能が盛り込まれていますが、実際にウェブアプリを作るのに必要な機能だけをまとめました。

Hosting

自分でウェブサーバを立てずにウェブアプリを作成する場合は、Firebaseのサーバにホスティングを行います。
将来性や拡張性を考えるとあまり良いとは感じません。

Realtime Database

リレーショナルデータベースではなく、JSON形式のファイルが格納されたものだと考えています。

Authentification

ログイン機能を実装することができます。
メールでのログインやGoogle、FacebookやTwitterのOAuthに対応しています。

Cloud Storage

写真などを保存することができます。

作業内容

1. 初期化

Firebaseを使用する際には毎回必ずスニペットを記入する必要があります。
それぞれのパラメータは自分の環境のものを使用してください。
私は普段、NavBarのテンプレートをejsで作成し、その中で以下の初期化スニペットを書き込んでいます。
そうすれば内容変更があっても対応が楽です。

initialize.html

<script src="https://www.gstatic.com/firebasejs/4.10.1/firebase.js"></script>
<script>
  // Initialize Firebase
  // TODO: Replace with your project's customized code snippet
  var config = {
    apiKey: "<API_KEY>",
    authDomain: "<PROJECT_ID>.firebaseapp.com",
    databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
    storageBucket: "<BUCKET>.appspot.com",
    messagingSenderId: "<SENDER_ID>",
  };
  firebase.initializeApp(config);
</script>

2. Authentification

ここでは最も簡単なメール認証でのログイン機能についてまとめます。

<input id="email" name="email" type="email" placeholder="email">
<input id="password" name="password" type="password" placeholder="password">
<button type="button" onclick="signin()">ログイン</button>
<script type="text/javascript">
var signin = function() {
            var email = document.getElementById("email").value;
            var password = document.getElementById("password").value;
            firebase.auth().signInWithEmailAndPassword(email, password)
              .then(user => {
                   console.log(user.uid);
                }, function(errorObject) {
                  console.log("The read failed: " + errorObject.code);
                });
              });
          }
</script>

新規ユーザ登録

inputタグでメールアドレスとパスワードを取得し、新規ユーザを作成

createnewuser.html

<input id="email" name="email" type="email" placeholder="email">
<input id="password" name="password" type="password" placeholder="password">
<button type="button" onclick="signup()">ログイン</button>
<script type="text/javascript">
var signup = function() {
            var email = document.getElementById("email").value;
            var password = document.getElementById("password").value;
            firebase.auth().createUserWithEmailAndPassword(email, password)
              .then(user => {
                console.log(user.uid);
              });
          }
</script>

ログイン状態の確認

ログインしていればユーザIDを出力する。

onauth.html

<script type="text/javascript">
          firebase.auth().onAuthStateChanged((user) => {
            if (!user) {
              console.log("not signed in");
            } else {
              console.log(user.uid);
            }
          });
</script>

3. Realtime Database

データベースにデータを保存する方法と取得する方法についてまとめます。

データの保存

inputタグで保存したいデータを取得し、ボタンを押すとそれが送られる。

transmitdata.html

<input id="data1">
<input id="data2">
<button type="button" onclick="trdata()">データを送信</button>
<script type="text/javascript">
var trdata = function() {
            var db = "/data";
            var db_ref = firebase.database().ref(db);
            var dataresource = {
               "data1": document.getElementById("data1").value,
               "data2": document.getElementById("data2").value
            }
            db_ref.set(dataresource).then(() => {
               console.log("データの送信完了");
            });
          }
</script>

データの更新

上記のやり方でやると全て上書きされてしまう。
inputタグで保存したいデータを取得し、ボタンを押すとそれが送られる。

updatedata.html

<input id="data1">
<input id="data2">
<button type="button" onclick="trdata()">データを更新</button>
<script type="text/javascript">
var updatedata = function() {
            var db = "/data";
            var db_ref = firebase.database().ref(db);
            var dataresource = {
               "data1": document.getElementById("data1").value,
               "data2": document.getElementById("data2").value
            }
            db_ref.update(dataresource).then(() => {
               console.log("データの送信完了");
            });
          }
</script>

データの取得

ボタンを押すとデータが表示される。

getdata.html

<script type="text/javascript">
<button type="button" onclick="rdata()">データを取得</button>
var rxdata = function() {
            var db = "/data";
            var db_ref = firebase.database().ref(db);
            db_ref.on("value", function(snapshot) {
               var data = snapshot.val();
               console.log(data);
            }, function(errorObject) {
                  console.log("The read failed: " + errorObject.code);
               });
          }
</script>

4. Cloud Storage

ストレージにファイルを保存する方法と取得する方法についてまとめます。
ここではinputタグを用いて画像と保存するを取得し、ボタンを押すとその画像をアップロードします。

uploadfile.html

画像<input type="file" name="upfile" id="upfile" accept="image/*">
名前<input id="filename>
<button type="button" onclick="uploadfile()">画像をアップロードする</button>
<script type="text/javascript">
var registermanga = function() {
  var filename = document.getElementById("filename").value;
    if (inputFile) {
      var storageRef = firebase.storage().ref();
      var imagesRef = storageRef.child(filename);
      imagesRef.put(inputFile).then(function(snapshot) {
         console.log("ファイルのアップロード完了");
      });
    } else {
    }
}
</script>

Firebaseを用いた軽量アプリの作成方法

目的

環境