前々回、Firebaseについて、前回、スマートフォンで位置情報を扱う方法について紹介しました。今回は、位置情報をFirebaseで共有して、友人が自分の近くにいるかどうかリアルタイムに確認するサービスを作ってみましょう。

今回作るリアルタイム位置情報共有サービス
今回作るリアルタイム位置情報共有サービス
[画像のクリックで拡大表示]

Firebaseで新規プロジェクトを作成しよう

 それでは、さっそく作ってみましょう。Firebaseへのサインアップと、開発に必要なコマンドラインツールのインストールは完了しているのもとします。もし、まだなら、本シリーズの第1回をご覧の上、準備してください。

 プロジェクトを始めるには、まず、こちらのFirebaseのコンソール画面にアクセスしましょう。そして、「新規プロジェクトを作成」のボタンを押して、プロジェクトを作成します。今回は、share-locationという名前のプロジェクトを作ります。

Firebaseのコンソール画面、新規プロジェクトを作成のボタンをクリックしましょう
Firebaseのコンソール画面、新規プロジェクトを作成のボタンをクリックしましょう
[画像のクリックで拡大表示]

 プロジェクトが生成されたら、「ウェブアプリにFirebaseを追加」をクリックして、Firebaseを使うのに必要なコードをメモしておきましょう。

HTMLに追加するFirebaseのコードを取得します
HTMLに追加するFirebaseのコードを取得します
[画像のクリックで拡大表示]

 そして、コンソール画面左側にある「Authentication」をクリックして、画面上部の「ログイン方法」のタブをクリックします。そして、ログインプロバイダの「Google」を有効に変更します。

 さらに、画面左側にある「Database」をクリックして、画面上部の「ルール」のタブをクリックし、ルールを以下のように変更します。以下の設定は、ログインしてはじめて、データベースの読み書きができるようになる設定です。デフォルトではこの設定となっています。


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