Firebaseを使ってみたい

Firebaseを使ってみたい

こんにちは。てつです。

最近プライベートでFirebaseを使用する機会があってとっても便利でした。

なのでFirebaseのRealtime Databaseを使用して簡単なWEBチャットを作成していこうと思います。

今回はデータを送信するところまでを説明していきます。

 

プロジェクトを作ろう


まずコンソールにログインして、Firebaseを使用するプロジェクトを作ります。

今回はチャットを作成するのでプロジェクト名を「SimpleChat」としました。

[プロジェクトを作成]をクリックすれば作成完了です。

 

Firebaseを使用する下準備をしよう


WEBアプリにFirebaseを追加します。

プロジェクト画面のOverViewページからFirebaseを使用するためのコードをコピーして使用します。

説明文にもあるようにHTML の一番下、他のスクリプトタグの前に貼り付けます。

 

つぎにWEBアプリからFirebaseにアクセスするときの認証方法を設定します。

サイドバーの[Authentication]を選択して表示された画面の[ログイン方法]タブをクリックして設定画面を開きます。

ここではFirebaseにアクセスするユーザのログイン方法を設定できます。

今回は匿名でアクセスできるようにするので匿名の部分を有効にします。

これで下準備はOKです。

 

Firebaseにデータを送ってみよう


テキストボックスに入力した文字列をRealtime Databaseに保存してみます。

以下のようなHTMLを用意して、ボタンを押したときにデータを送るようscript.jsにコードを書いていきましょう。

 

ユーザの認証

まずはRealtime Databaseと通信するためにユーザの認証が必要です。

ユーザの認証のために以下のようなプログラムを使用します。

authオブジェクトのsignInAnonymouslyメソッドを使用して匿名でのユーザを作成します。

エラーが発生した場合にはエラーコードを返します。

次にonAuthStateChangedメソッドでユーザ情報に変更があった場合にユーザ情報を取得します。

ここで返ってきたユーザ情報をデータの送受信に使用します。

 

データの送信

次にRealtime Databseにメッセージデータを保存してみます。

今回はメッセージとユーザIDを送信してみます。

メッセージを保存するためにpushメソッドとupdateメソッドを組み合わせて使用します。

まずはpushメソッドを使用して追加したいリストの新しいIDを作成・取得します。

このIDを使用することでデータの意図しない上書きが防止できます。

次にupdateメソッドでメッセージを保存します。

messagesリストに新しいIDで送信者(uid)とメッセージ(message)を送ります。

updateメソッドはPromiseを返すので成功時の処理と失敗時の処理を書いておきます。

 

結果を見てみよう

ここまでのプログラムと[送る]ボタンを押したときのプログラムを組み合わせると以下のようになります。

このプログラムを読み込んで送信してみましょう。

するとコンソールでRealtime Databaseにデータが保存されてるのが確認できると思います。

送信できています!

 

今回はここまで


どうでしたか?意外に簡単でしたよね。

今回はユーザの認証とデータの送信までを行いました。

次回はRealtime Databaseの魅力であるリアルタイムにデータを取得する機能を使用します。

お楽しみに!

 


Previous: Chrome拡張機能でルーチンワークを自動化しよう Next: 毎回起こるCSSの競合がヤバイ

© 2017 ALL CONNECT Inc. All Rights Reserved.