LoginSignup
6

More than 3 years have passed since last update.

Firebase Realtime Databaseを使用する準備(備忘録)

Last updated at Posted at 2020-10-07

1. 概要

FirebaseのRealtime databaseを設定する手順です。
こちらが公式のページです。基本的にはこのサイトの通りに進めれば設定などできました。己への備忘録として記事を書きました。
https://firebase.google.com/docs/database/web/start?hl=ja

2020/8/29に設定したものです。

CLIで行う方法がありますが、今回はFIrebaseのコンソール画面から設定していきます。

1-1.プロジェクトを作る

Firebaseのコンソール画面に入り、プロジェクトを作成します。
image.png

Realtime Databaseの項目をクリック。
image.png

「データベースを作成」をクリック。
image.png

次に「ロックモード」と「テストモード」の選択画面が現れます。ロックモードでは認証されたサーバーのみアクセス可能のようです。詳しくはFirebase Realtime Database ルールについてを参照。

今回はプロトタイプイング用として自分のみ利用しますので「テストモード」にします。

1-2. プロジェクトの設定

「Realtime Database のルールを構成する」
現状はテストモードで作成している記述がされていています。詳細なルールを決めたいときに書くようです。

1-3. Realtime Database JavaScript SDK を初期化する

Firebase を JavaScript プロジェクトに追加する

の使用可能なライブラリから、適切なものを選択します。今回はCDNを利用しました。
次のタグをhtmlファイルに記述します。

<script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-database.js"></script>

image.png

次にfirebaseにアクセスするための設定(スぺニット)をコピーします。
ウェブアプリ用の設定スニペットを入手するには、

  1. Firebase にログインし、プロジェクトを開きます。
  2. [概要] ページで [アプリを追加] をクリックします。
    image.png

  3. [ウェブアプリに Firebase を追加] を選択します。
    image.png

  4. スニペットをコピーしてアプリケーション HTML に追加します。
    image.png

const firebaseConfig = {
    apiKey: "API key",
    authDomain: "~.firebaseapp.com",
    databaseURL: "https://~.firebaseio.com",
    projectId: "~",
    storageBucket: "~.appspot.com",
    messagingSenderId: "~",
    appId: "~"
  };

この実装ではページのソースコードを見られると認証キーが全てばれてしまうので、Hosting等を行うようです。
こちらを参照。

2. データベースへの書き込み

Webページの特定のボタンを押すと書き込みを行うコードです。
タイムスタンプを記録しています。

document.querySelector('button').addEventListener('click', () => {
        db.ref('timestamp/').set({
            timestamp: Date.now()
        });
    });

3. データベースからの読み出し

const ref = db.ref('timestamp/');

    ref.on('value', (snapshot) => {
        console.log(snapshot.val());
    });

参考

Firebase ウェブでのデータの読み取りと書き込み

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6