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

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

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

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

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

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

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

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

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

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


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

この先は会員の登録が必要です。今なら有料会員(月額プラン)が12月末まで無料!

日経 xTECHには有料記事(有料会員向けまたは定期購読者向け)、無料記事(登録会員向け)、フリー記事(誰でも閲覧可能)があります。有料記事でも、登録会員向け配信期間は登録会員への登録が必要な場合があります。有料会員と登録会員に関するFAQはこちら