■環境

Windows10

Arduino 1.8.18

■「package_esp8266com_index.json」を追加のボードマネージャに追加

まずは、Arduino 1.8.18を起動します。

起動後、上部のメニューから「ファイル」をクリックし、「環境設定」をクリックします。

クリックすると「環境設定」のウインドウが表示され、追加のボードマネージャのURLに「http://arduino.esp8266.com/stable/package_esp8266com_index.json」を追加し、「OK」をクリックします。参考:https://github.com/esp8266/Arduino

■FirebaseArduinoをダウンロードからのライブラリ追加

クリック後、FirebaseArduino（https://github.com/FirebaseExtended/firebase-arduino）のWebページにアクセスします。

アクセスすると、「Code」の緑色ボタンをクリックし、「Download ZIP」をクリックします。

クリックすると、Webブラウザで指定されている保存場所に「firebase-arduino-master.zip」が保存されます。

保存後、Arduinoのウインドウ上部にあるメニューから「スケッチ」の「ライブラリをインクルード」をクリックし、「.ZIP形式のライブラリをインストール..」をクリックします。

クリックすると、「インストールするライブラリを含むZIPファイルまたはフォルダを指定してください。」ウインドウが表示されますので、「firebase-arduino-master.zip」を指定し、「開く」ボタンをクリックします。クリックするとライブラリ追加が完了となります。

■依存関係のインストール

完了後、FirebaseArduinoの依存関係のインストールを行います。

Arduinoのウインドウ上部にあるメニューから「ツール」の「ライブラリ管理」をクリックします。

クリックすると、「ライブラリマネージャ」ウインドウが表示されますので、左上部の検索窓で「ArduinoJson」と検索すると、ArduinoJsonライブラリが表示されますので、バージョンを少なくとも「5.13.1」にします。バージョンを変更後、「インストール」ボタンをクリックします。

クリックすると「インストール中」なり、ライブラリのインストールが完了します。

■スケッチ例を開く

完了後、Arduinoのウインドウ上部にあるメニューから「ファイル」の「スケッチ例」をクリックし、「FirebaseArduino」の「FirebaseDemo_ESP8266」をクリックします。

クリックすると、「FirebaseDemo_ESP8266」のスケッチがArduino上に開かれます。

■コード

#define WIFI_SSID "SSID"
#define WIFI_PASSWORD "PASSWORD"

スケッチの上部の箇所の「SSID」と「PASSWORD」は、各自のWIFI認証情報を入力しておきます。

■Firebaseで新しいプロジェクトを作成する

入力後、Firebaseで新しいプロジェクトを作成します。Googleのアカウントを取得し、Firebase（https://console.firebase.google.com/u/1/）にアクセスし、プロジェクトの作成及び追加を行います。

プロジェクト名を入力し、「続行」ボタンをクリックします。今回は「eps8266test」とします。

クリックすると、プロジェクトの作成手順の「Google アナリティクス （Firebase プロジェクト向け）」の項目になります。今回はアナリティクスを使用するので、有効にする設定はそのままで「続行」ボタンをクリックします。

クリックすると、プロジェクトの作成手順の「Google アナリティクスの構成」の項目になります。今回は「Google アナリティクス アカウントを選択または作成します」では「Default Account for Firebase」に設定し、「プロジェクトを作成」ボタンをクリックします。

クリックすると、プロジェクトの作成が開始されます。

しばらくすると、「新しいプロジェクトの準備ができました」と表示されますので「続行」ボタンをクリックします。

■Realtime Databaseのデータベース作成

クリックすると、Firebaseのコンソール画面が表示されます。これでプロジェクトの作成は完了となります。

左側の「Realtime Database」をクリックします。

クリックすると、「Realtime Database」が表示され、「データベースを作成」ボタンが表示されているので、クリックします。

クリックすると、「データベースの設定」ウインドウが表示されます。ウインドウ内に「データベースのオプション」で「Realtime Database のロケーション」の設定が表示されていますので、今回は「米国（us-central1）」を選択し、「次へ」ボタンをクリックします。

クリックすると、「セキュリティルール」が表示され、今回は「ロックモードで開始」を選択し「有効にする」ボタンをクリックします。

クリックすると、有効になります。その後、「Realtime Database」の「ルール」をクリックし、「ルールを編集」画面を表示します。

■コード（修正前）

{
  "rules": {
    ".read": false,
    ".write": false
  }
}

■コード（修正後）

{
  "rules": {
    ".read": true,
    ".write": true
  }
}

編集画面で上部の箇所を編集し、「公開」ボタンをクリックします。クリックするとルールが公開されます。

公開後、「Realtime Database」の「データ」で「esp8266test-***-default-rtdb.firebaseio.com」をコピーします。

■コード

#define FIREBASE_HOST "example.firebaseio.com"

コピー後、Arduino上で開いている「FirebaseDemo_ESP8266」スケッチ内の上記コードを編集します。

■コード

#define FIREBASE_HOST "esp8266test-***-default-rtdb.firebaseio.com"

編集すると、上記のような形になります。

編集後、Firebaseのコンソールで左側上部の歯車マークをクリックし、「プロジェクトの設定」をクリックします。

クリック後、「プロジェクトの設定」から「サービスアカウント」をクリックします。

クリック後「Database secrets」をクリックします。すると、「データベースのシークレット」が表示されますので、「シークレット」を「表示する」をクリックし、表示させます。

表示させたシークレットをコピーします。

■コード

#define FIREBASE_AUTH "token_or_secret"

コピー後、Arduino上で開いている「FirebaseDemo_ESP8266」スケッチ内の上記コードを編集します。

■コード

#define FIREBASE_AUTH "obYB30uVWUj********"

編集すると、上記のような形になります。

■ESPr® Developer（ESP-WROOM-02開発ボード）とPCを接続する。

編集後、ESPr® Developer（ESP-WROOM-02開発ボード）とPCを接続します。

今回、ESPr® Developer（ESP-WROOM-02開発ボード）はスイッチサイエンスさん（https://www.switch-science.com/catalog/2500/）で購入しました。

ESPr® Developer（ESP-WROOM-02開発ボード）はブレッドボードに接続するため、ピンヘッダー（10ピン）を、大阪の「デジット 共立電子産業」さんに出向き、1個50円で購入。

購入後、ハンダ付けします。

ハンダ付け後、ブレッドボードに接続し、Micro(マイクロ)USBケーブルは別途購入したものを利用し、PCに接続します。

接続後、Arduinoのウインドウ上部にあるメニューから「ツール」の「シリアルポート」をクリックし、今回は「COM3」を選択します。

選択後、Arduinoのウインドウ上部の「マイコンボードに書き込む」ボタンをクリックします。

C:\Users\Karan\Documents\Arduino\libraries\firebase-arduino-master\src\FirebaseHttpClient_Esp8266.cpp: In member function 'virtual void FirebaseHttpClientEsp8266::begin(const string&)':
C:\Users\Karan\Documents\Arduino\libraries\firebase-arduino-master\src\FirebaseHttpClient_Esp8266.cpp:47:50: error: no matching function for call to 'begin(const char*, const char [60])'
47 | http_.begin(url.c_str(), kFirebaseFingerprint);
| ^
In file included from C:\Users\Karan\Documents\Arduino\libraries\firebase-arduino-master\src\FirebaseHttpClient_Esp8266.cpp:9:
C:\Users\Karan\AppData\Local\Arduino15\packages\esp8266\hardware\esp8266\3.0.0\libraries\ESP8266HTTPClient\src/ESP8266HTTPClient.h:166:10: note: candidate: 'bool HTTPClient::begin(String, uint16_t, String)' (near match)
166 | bool begin(String host, uint16_t port, String uri = "/") attribute ((error("obsolete API, use ::begin(WiFiClient, host, port, uri)")));
| ^~~~~
C:\Users\Karan\AppData\Local\Arduino15\packages\esp8266\hardware\esp8266\3.0.0\libraries\ESP8266HTTPClient\src/ESP8266HTTPClient.h:166:10: note: conversion of argument 2 would be ill-formed:
C:\Users\Karan\Documents\Arduino\libraries\firebase-arduino-master\src\FirebaseHttpClient_Esp8266.cpp:47:30: error: invalid conversion from 'const char*' to 'uint16_t' {aka 'short unsigned int'} [-fpermissive]
47 | http_.begin(url.c_str(), kFirebaseFingerprint);
| ^~~~~~~~~~~~~~~~~~~~
| |
| const char*
In file included from C:\Users\Karan\Documents\Arduino\libraries\firebase-arduino-master\src\FirebaseHttpClient_Esp8266.cpp:9:
C:\Users\Karan\AppData\Local\Arduino15\packages\esp8266\hardware\esp8266\3.0.0\libraries\ESP8266HTTPClient\src/ESP8266HTTPClient.h:167:10: note: candidate: 'bool HTTPClient::begin(String, const uint8_t*)' (near match)
167 | bool begin(String url, const uint8_t httpsFingerprint[20]) attribute ((error("obsolete API, use ::begin(WiFiClientSecure, ...)")));
| ^~~~~
C:\Users\Karan\AppData\Local\Arduino15\packages\esp8266\hardware\esp8266\3.0.0\libraries\ESP8266HTTPClient\src/ESP8266HTTPClient.h:167:10: note: conversion of argument 2 would be ill-formed:
C:\Users\Karan\Documents\Arduino\libraries\firebase-arduino-master\src\FirebaseHttpClient_Esp8266.cpp:47:30: error: invalid conversion from 'const char*' to 'const uint8_t*' {aka 'const unsigned char*'} [-fpermissive]
47 | http_.begin(url.c_str(), kFirebaseFingerprint);
| ^~~~~~~~~~~~~~~~~~~~
| |
| const char*
C:\Users\Karan\Documents\Arduino\libraries\firebase-arduino-master\src\FirebaseHttpClient_Esp8266.cpp: In member function 'virtual void FirebaseHttpClientEsp8266::begin(const string&, const string&)':
C:\Users\Karan\Documents\Arduino\libraries\firebase-arduino-master\src\FirebaseHttpClient_Esp8266.cpp:51:60: error: invalid conversion from 'const char*' to 'const uint8_t*' {aka 'const unsigned char*'} [-fpermissive]
51 | http_.begin(host.c_str(), kFirebasePort, path.c_str(), kFirebaseFingerprint);
| ^~~~~~~~~~~~~~~~~~~~
| |
| const char*
In file included from C:\Users\Karan\Documents\Arduino\libraries\firebase-arduino-master\src\FirebaseHttpClient_Esp8266.cpp:9:
C:\Users\Karan\AppData\Local\Arduino15\packages\esp8266\hardware\esp8266\3.0.0\libraries\ESP8266HTTPClient\src/ESP8266HTTPClient.h:168:70: note: initializing argument 4 of 'bool HTTPClient::begin(String, uint16_t, String, const uint8_t*)'
168 | bool begin(String host, uint16_t port, String uri, const uint8_t httpsFingerprint[20]) attribute ((error("obsolete API, use ::begin(WiFiClientSecure, ...)")));
| ~~~~~~~~~~~~~~^~~~~~~~~~~~~~~~~~~~
exit status 1
Error compiling for board NodeMCU 1.0 (ESP-12E Module).

書き込んだ際に、上記のエラーで書き込みできない場合は、Arduinoのウインドウ上部にあるメニューから「ツール」の「ボード」をクリックし「ボードマネージャ..」をクリックし、検索窓で「esp8266」と検索し、「’esp8266′ by  esp8266 community」を表示させます。このボードのバージョンを「2.7.X」に変更し、インストールする。3.0.Xになると、マイコンボードへの書き込みが失敗する（https://github.com/FirebaseExtended/firebase-arduino/issues/520）。

なお、今回はESP8266 Boards(2.7.4)の「Generic ESP8266 Module」,「Upload Speed:115200」に設定すると、マイコンボードへの書き込みが完了しました。

書き込み完了後、Arduinoのウインドウ上部にある「シリアルモニタ」をクリックします。

クリックすると、「connected（密接）」といった出力が表示されます。これでFirebaseにデータが送信されました。

送信後、Firebaseのコンソールから「Realtime Database」の「データ」を確認すると、送信されたデータが、Realtime Databaseに格納されたことを確認できました。

■「Setting/number failed」と出力されデータが送信されない場合

マイコンボードへの書き込みが完了し、シリアルモニタを確認すると、Firebaseにデータが送信されず、「Setting/number failed」と出力される場合は、「C:\Users\user_\Documents\Arduino\libraries\firebase-arduino-master\src」内にある「FirebaseHttpClient.h」というファイルをコードエディタ等で開きます。

■コード

static const char kFirebaseFingerprint[] =
      "93:49:BD:13:3F:AD:AE:EB:44:**:**:**:**:**:**:**:**:**:**:**"; // 2021-12

開くと、上記のようなコードがありますので、「”93:49:BD:13:3F:AD:AE:EB:44:**:**:**:**:**:**:**:**:**:**:**”」のFingerprintsを変更します。

変更する際は、GRC | SSL TLS HTTPS Web Server Certificate Fingerprints（https://www.grc.com/fingerprints.htm）にアクセスします。アクセス後、「Custom Site Fingerprinting」の項目があり、URLの入力欄があります。

入力欄にFirebaseのコンソールから「Realtime Database」の「データ」に記載されているURLをコピーし、このURLを貼り付けて「Fingerprint Site」ボタンをクリックします。

クリックすると、「Security Certificate’s Authentic Fingerprint（セキュリティ証明書のオーセンティック フィンガープリント）」が出力されます。この欄に出力されているFingerprintをコピーします。

■コード

static const char kFirebaseFingerprint[] =
      "**:**:**:**:**:**:**:**:**:**:**:**:**:**:**:**:**:**:**:**"; // 2021-12

コピー後、先程のコードでFingerprintが記述された箇所（**:**:**:**:**:**:**:**:**:**:**:**:**:**:**:**:**:**:**:**）に貼り付けてファイルを保存します。保存後、再度マイコンボードへの書き込みを行うと、Firebaseにデータが送信されます。

■PC環境

Windows10

firebase cli 9.10.0

Visual Studio Code 1.55.0

■Firebase Realtime Databaseの設定

まず、Firebase Realtime Databaseの設定を行いますので、Googleアカウントを取得（登録）した後に、「Firebase – Google」にアクセスします。

アクセスすると、「使ってみる」というボタンがありますので、こちらをクリックします。

クリックすると、「Firebaseへようこそ」と表示されます。ページ内の「プロジェクトを作成」ボタンをクリックします。

クリックすると、「プロジェクトの作成」のページが表示されますので、「プロジェクト名」でプロジェクトの名前を入力します。その後、「Firebase の規約に同意します」でFirebase の規約を確認し、チェックボックスにチェックを入れます。入れた後に「続行」ボタンをクリックします。

クリックすると、「Google アナリティクス （Firebase プロジェクト向け）」を有効にするかどうかを設定するページが表示されます。今回は「このプロジェクトで Google アナリティクスを有効にする」と設定し、「続行」ボタンをクリックします。

クリックすると、「Googleアナリティクスの構成」ページが表示されますので、「アナリティクスの地域」を「日本」に設定し、Google アナリティクス利用規約を読み、「Google アナリティクス利用規約に同意します。」のチェックボックスにチェックを入れます。その後、「プロジェクトを作成」ボタンをクリックします。

クリックすると、プロジェクトの作成が開始されます。

しばらくすると、「新しいプロジェクトの準備ができました」と表示されますので、「続行」ボタンをクリックします。

■Firebaseコンソールでデータベースを作成する

クリックすると、プロジェクトの作成が完了します。完了後、Firebaseコンソールの左側に「構築」という項目がありますので、こちらをクリックします。

クリックすると、プルダウンメニューが表示されますので、「Realtime Database」をクリックします。

クリックすると、「Realtime Database」のページが表示されます。ページ内の「データベースを作成」ボタンをクリックします。

クリックすると、「データベースの設定」というウインドウが表示されます。ウインドウ内では、まず「データベースのオプション」が表示されますので、今回は「Realtime Database のロケーション」で「米国」を選択し、「次へ」ボタンをクリックします。

クリックすると、「セキュリティ ルール」が表示されます。「セキュリティ ルール」では、「ロックモードで開始」か「テストモードで開始」のいずれか選択します。今回は「テストモードで開始」を選択し、「有効にする」ボタンをクリックします。

クリックすると、データベースの作成が開始されます。その後、表示されます。これでデータベースの作成は完了です。

■ウェブアプリにFirebaseを追加する

次にウェブアプリにFirebaseを追加しますので、「プロジェクトの概要」をクリックします。

「プロジェクトの概要」が表示されますので、概要から「ウェブ」ボタンをクリックします。

クリックすると、「ウェブアプリにFirebaseを追加する」と表示されますので、「アプリの登録」で「アプリのニックネーム」でニックネームを入力します。入力後、「アプリを登録」ボタンをクリックします。なお、「このアプリのFirebaseHostingも設定します。」にはチェックを入れません。

クリックすると、「Firebase SDK の追加」が表示されます。表示後、「コンソールに進む」ボタンをクリックします。

クリックすると、「プロジェクトの概要」に戻ります。

■ウェブアプリを作成する

戻った後、Windows10のデスクトップ上に、「firebase_realtime_database」というフォルダを作成し、コードエディタ（Visual Studio Code）を開きます。

Firebase Realtime Databaseを使用し、データベース作成を行い、データの登録を行いますが、データを入力し送信するために、今回は簡易のウェブアプリを作成します。

■index.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>Firebase Realtime Databaseのテスト</title>
        <meta name="description" content="ディスクリプション">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <main>
            <form>
                <label for="userid">ユーザーID</label><br>
                <input type="text" name="userid" id="userid"><br>
                <label for="firstname">苗字</label><br>
                <input type="text" name="firstname" id="firstname"><br>
                <label for="lastname">名前</label><br>
                <input type="text" name="lastname" id="lastname"><br>    
                <button id="addbtn">追加</button>                            
            </form>
        </main>
<script src="./functions.js"></script>
    </body>
</html>

■functions.js

const userid = document.getElementById('userid');
const firstname = document.getElementById('firstname');
const lastname = document.getElementById('lastname');
const addbtn = document.getElementById('addbtn');

const database = firebase.database();

addbtn.addEventListener('click',(e) => {
    e.preventDefault();
    database.ref('/users/'+ userid.value).set({
        first_name: firstname.value,
        last_name: lastname.value,
    });
});

コードエディタ（Visual Studio Code）上で「firebase_realtime_database」の中に、今回は「index.html」と「functions.js」という2つのファイルを作成し、保存します。

■Firebase SDK snippetを追加する

保存後、Firebaseコンソールの左側に「プロジェクトの概要」で歯車のマークがありますので、こちらをクリックします。

クリックすると、メニューが表示されますので「プロジェクトを設定」をクリックします。

クリックすると、「Firebase SDK snippet」という項目がありますので、「CDN」になっていることを確認し、表示されたのスクリプトをコピーします。

■index.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>Firebase Realtime Databaseのテスト</title>
        <meta name="description" content="ディスクリプション">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <main>
            <form>
                <label for="userid">ユーザーID</label><br>
                <input type="text" name="userid" id="userid"><br>
                <label for="firstname">苗字</label><br>
                <input type="text" name="firstname" id="firstname"><br>
                <label for="lastname">名前</label><br>
                <input type="text" name="lastname" id="lastname"><br>    
                <button id="addbtn">追加</button>                            
            </form>
        </main>
        <!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-database.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
     https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-analytics.js"></script>

<script>
  // Your web app's Firebase configuration
  // For Firebase JS SDK v7.20.0 and later, measurementId is optional
  var firebaseConfig = {
    apiKey: "******",
    authDomain: "******",
    databaseURL: "******",
    projectId: "******",
    storageBucket: "******",
    messagingSenderId: "******",
    appId: "******",
    measurementId: "******"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  firebase.analytics();
</script>
<script src="./functions.js"></script>
    </body>
</html>

コピー後、「firebase_realtime_database」のindex.htmlに貼り付けます。この時に「<script src=”./functions.js”></script>」のタグより上に「<script src=”https://www.gstatic.com/firebasejs/8.4.1/firebase-app.js”></script>」などのタグを貼り付けます。これでfirebase.jsを先に読み込ませることができます。先に読み込ませないと、「ReferenceError: firebase is not defined」というエラーが発生しますので、注意が必要です。

貼り付けた後、「<script src=”https://www.gstatic.com/firebasejs/8.4.1/firebase-app.js”></script>」の直下に「<script src=”https://www.gstatic.com/firebasejs/8.4.1/firebase-database.js”></script>」のタグを追加しておきます。追加後、保存します。

■プロジェクトをローカルで起動する

保存後、「firebase_realtime_database」を、今回は「C:\Users\Administrator」という場所に移動しておきます。

移動後、Firebase CLIのインストールが完了している状態で、Windows10の「ここに入力して検索」で「cmd」を入力し、コマンドプロンプトを起動します。

C:\Users\Administrator>cd firebase_realtime_database

起動後、上記のコマンドを入力し、エンターキーを押します。「firebase_realtime_database」に移動します。

C:\Users\Administrator\firebase_realtime_database>firebase login

移動後、上記のコマンドを入力し、エンターキーを押します。

Allow Firebase to collect CLI usage and error reporting information? (Y/n)（ FirebaseがCLIの使用状況やエラー報告情報を収集することを許可しますか？(Y/n)）

エンターキーを押すと、上記の質問が表示されますので、「Y」と入力しエンターキーを押します。

Visit this URL on this device to log in:

ログイン - Google アカウント

accounts.google.com

〇〇

エンターキーを押すと、上記のメッセージが表示され、Webブラウザが起動します。

起動後、上記の「Googleにログイン」という表示がされますので、Firebaseでデータベース作成を行ったアカウントを選択します。

選択すると、「Firebase CLI が Google アカウントへのアクセスをリクエストしています」と表示されますので、許可するために「許可」ボタンをクリックします。

Firebase CLI Login Successful

You are logged in to the Firebase Command-Line interface. You can immediately close this window and continue using the CLI.(Firebase Command-Line インターフェイスにログインしています。このウィンドウをすぐに閉じて、CLIの使用を続けることができます。)

クリックすると、Webブラウザに上記のメッセージが表示されます。またコマンドプロンプトでは「Success! Logged in as 〇〇〇〇@gmail.com」と表示されます。これでFirebaseへのログインは完了となります。

C:\Users\Administrator\firebase_realtime_database>firebase init

ログイン後、上記のコマンドを入力し、エンターキーを押します。これでFirebase プロジェクトを初期化します。

エンターキーを押すと、「Firebase」と表示され、「Are you ready to proceed? (Y/n)続行する準備はできていますか？(Y/n)」と質問されますので、「Y」を入力し、エンターキーを押します。

エンターキーを押すと、「Which Firebase CLI features do you want to set up for this folder? （このフォルダにどのFirebaseCLI機能を設定しますか？）」と質問されますので、「Hosting: Configure and deploy Firebase Hosting sites」をスペースキーで選択しエンターキーを押します。

エンターキーを押すと、「Please select an option: (Use arrow keys)（選択してください。(矢印キーを使用)）」と表示されますので、「Use an existing project（既存のプロジェクトの利用）」を選択し、エンターキーを押します。

エンターキーを押すと、今回Firebaseで作成したプロジェクトの名前が表示されますので、選択し、エンターキーを押します。

=== Hosting Setup

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build’s output directory.（パブリックディレクトリは、Firebase deployでアップロードするホスティングアセットを格納するフォルダ（プロジェクトディレクトリからの相対パス）です。
firebase deployでアップロードするホスティングアセットを格納します。もし
アセットのビルドプロセスを行っている場合は、ビルドの出力ディレクトリを使用します。）

エンターキーを押すと、上記のメッセージが表示され、「パブリック・ディレクトリには何を使いますか？」と質問されますので、そのままエンターキーを押します。

エンターキーを押すと「Configure as a single-page app (rewrite all urls to /index.html)? (y/N)（シングルページアプリとして構成しますか）」と質問されますので、「y」と入力しエンターキーを押します。

エンターキーを押すと「 Set up automatic builds and deploys with GitHub? (y/N)（GitHubで自動ビルドとデプロイを設定するには？）」と質問されますので、「N」と入力しエンターキーを押します。

エンターキーを押すと「public/index.htmlというファイルがすでに存在しています。上書きしますか？」と質問されますので、「y」と入力しエンターキーを押します。

i Writing configuration info to firebase.json…
i Writing project information to .firebaserc…
i Writing gitignore file to .gitignore…

+ Firebase initialization complete!

エンターキーを押すと、「Firebase initialization complete!（Firebaseの初期化が完了しました。）」と表示されます。これで初期化は完了となります。

C:\Users\Administrator\firebase_realtime_database>firebase serve

完了後、Firebase プロジェクトをローカルで実行するために、上記のコマンドを入力し、エンターキーを押します。

=== Serving from ‘C:\Users\Administrator\firebase_realtime_database’…

i hosting: Serving hosting files from: public
+ hosting: Local server: http://localhost:5000

エンターキーを押すと、ローカルサーバーが起動します。

■Firebase Realtime Databasにデータを保存する（検証）

起動後、Webブラウザを起動し、アドレスバーに「http://localhost:5000/」を入力し、アクセスします。

Welcome
Firebase Hosting Setup Complete
You’re seeing this because you’ve successfully setup Firebase Hosting. Now it’s time to go build something extraordinary!（ようこそ
Firebase ホスティング設定完了
Firebase ホスティングのセットアップが完了しましたのでご紹介します。いよいよ、素晴らしいものを作りましょう。）

アクセスすると、上記のように表示されます。

表示後、「C:\Users\Administrator\firebase_realtime_database」フォルダを確認します。

確認すると、「public」というフォルダが作成されています。これが先ほど「http://localhost:5000/」をアクセスしたときに確認できたindex.htmlが保存されているフォルダになります。

今回は検証で、「index.html」と「functions.js」をコピーして、「public」というフォルダにコピーしたファイルを移動します。

移動後、「http://localhost:5000/」に再びアクセスすると、入力フォームが表示されますので、仮でユーザーIDと苗字、名前を入力し、「追加」ボタンをクリックします。

クリックした後に、Firebaseコンソールの「Realtime Database」を確認すると、送信されたデータがRealtime Databaseに登録されていることが確認できました。

なお、送信されたデータが登録できない、もしくはデータベースが更新されない場合は、Firebaseコンソールの「Realtime Database」の「ルール」をクリックします。

クリックすると、上記のようなルールになっています。これを下記のように変更します。

これでルールを保存すると、データが登録できるようになります。

以前、Firebaseを使ってWebアプリを制作していたのですが、制作してからFirebaseにはほとんど触れていなかったのですが、Gmailを確認すると、Firebaseから突然「Hosting ドメインの所有権を再確認してください」という通知が届きました。

■内容

プロジェクトの Hosting ドメインの所有権が確認できなくなりました。www.○○○.com の所有権の再確認期日まで残り 30 日 日です。これを過ぎると、削除されてコンテンツの配信が停止されます。
プロジェクト名 に接続しているドメイン www.○○○.com の所有権を再確認してください。
このドメインの前回の確認が無効となりました。これは、ユーザーがサイトの確認用 DNS レコードをドメイン プロバイダから削除した場合か、所有権の確認を実施したユーザーが Firebase プロジェクトでドメインを追加する権限を失った場合に起こる可能性があります。権限が付与されているロールには、オーナー、編集者、開発管理者などが該当します。

無効になった所有権確認
○○○
Hosting ドメイン
www.○○○.com
残り日数
30 日

届いた内容を確認すると、上記の内容でした。

■原因について調べて対処について考える

このような通知が突然届き、さらに「残り日数 30 日」という表示がこちら（制作者）を焦らせますが、こちら（制作者）の方で、Firebaseの設定は何も変更しておらず、届いた原因がわかりません。

もしかしたら、無料で利用できるSparkプランにしていることが原因かと考えましたが、そういうわけでもなさそうです。

とりあえず、通知のメールに表示されていた「ドメインの確認」ボタンをクリックしてみます。

クリックすると、「Firebase」の「Hosting」のダッシュボードが表示されました。ダッシュボード内の情報を確認するのですが、「ドメイン」の「ステータス」は「接続されています」となっていますと表示されています。それ以外はエラーなどは発生していません。

発生していませんが、「Firebase」の「Hosting」のダッシュボードの上部に、

You may have received one or more unexpected emails with the subject “[Firebase] Re-verify ownership of your Hosting domain”. These were sent by mistake and your domains’ verification status have not changed. No action is required, and your domains continue to serve traffic as normal.

（件名が「[Firebase] あなたのホスティングドメインの所有権を再確認する」の予期しない電子メールを受信した可能性があります。これらは間違って送られたもので、あなたのドメインの認証状態は変わっていません。アクションは不要で、ドメインは通常どおりトラフィックを処理し続けます。）

上記のメッセージが表示されており、翻訳して内容を読んでみると、「Hosting ドメインの所有権を再確認してください」という通知は間違って送られたものの可能性があるということで、何かこちら（制作者）で対処しなければいけないこと（アクション）はないよう。

アクションは不要だということで安心はしましたが、少々不安なので、不定期ではありますが「Firebase」の「Hosting」のダッシュボードを確認していきます。

■追記

Firebaseから突然「Hosting ドメインの所有権を再確認してください」という通知が届いた後に、またFirebaseから「Firebase Hosting domain re-verification email sent in error（エラーで送信されたFirebase Hostingドメイン再検証Eメール）」というメールが届きました。

Hi ○○○,
We are writing to let you know that an error in our domain verification check process for Firebase Hosting caused a number of emails with a subject line of: [Firebase] Re-verify ownership of your Hosting domain to be sent incorrectly. You’re receiving this email because you were sent one or more ownership re-verification notices between February 23 to February 24, 2021.

No action is required on your part to address this issue, and your domains have continued serving content as normal during this time. We are restoring any records that may have been mistakenly marked as unverified, and your domains will continue to serve content to users as normal.

We apologize for any inconvenience this may have caused.

If you continue to see errors in the console or to have problems with verifications, feel free to reach out to our support team.

Thanks,
Michael on behalf of the Firebase team

（こんにちは○○○
Firebase Hostingのドメイン検証プロセスでエラーが発生したため、 [Firebase] Re-verify ownership of your Hosting domainという件名のEメールが不正に送信されました。2月23日から2021年2月24日までの間に所有権の再確認通知が送付されたため、このEメールを受け取りました。

この問題に対処するためにユーザー側で対処する必要はありません。この期間、ドメインは通常どおりコンテンツを提供し続けています。誤って未確認とマークされたレコードを復元しており、お客様のドメインは通常どおりユーザーにコンテンツを提供し続けます。

ご迷惑をおかけして申し訳ございません。

コンソールにエラーが引き続き表示される場合、または検証で問題が発生する場合は、サポートチームにお問い合わせください。

ありがとう
Firebaseチームを代表するMichael）

メールの内容は上記です。

Firebase Hostingのドメイン検証プロセスでエラーが発生し、Eメールが不正に送信されたため、今回のメールを送信したようです。なお、「この問題に対処するためにユーザー側で対処する必要はありません。」ということなので、こちら（製作者）では何もしなくても良いということですが、ちょっと驚きました。

■PC環境

・Windows10、Administrator（管理者）アカウント

■Firebase CLI のバイナリをダウンロード

まずは、Firebase CLI のバイナリをこちらにアクセス（https://firebase.tools/bin/win/instant/latest）し、ダウンロードします。

アクセスすると、Webブラウザで指定されたファイルの保存場所に「firebase-tools-instant-win.exe」というファイルがダウンロードされます。このファイルをダブルクリックします。

ダブルクリックすると、「WindowsによってPCが保護されてました。」というウインドウが表示されます。ウインドウ内の「詳細情報」をクリックします。

クリックすると、「実行」ボタンが表示されますので、こちらをクリックします。

クリックすると、「Firebase CLI」のウインドウが表示されます。

ウインドウ内に「FIREBASE」と表示され、インストールが開始されます。

~ Let’s make sure your Firebase CLI is ready…
~ Looks like your CLI needs to be set up.

~ This may take a moment
+ Alright, your CLI is set up!

~ Looks like you’re not authenticated. Let’s log in!
i Firebase optionally collects CLI usage and error reporting information to help improve our products. Data is collected in accordance with Google’s privacy policy (https://policies.google.com/privacy) and is not used to identify you.

? Allow Firebase to collect CLI usage and error reporting information? (Y/n)

上記のメッセージが表示されます。「FirebaseによるCLI使用状況およびエラー報告情報の収集を許可しますか?（Allow Firebase to collect CLI usage and error reporting information?）」と質問されていますので、「Y」と入力し、Enterキーを押します。

Enterキーを押すと、「Windowsセキュリティの重要な警告」というウインドウが表示されます。「このアプリの機能のいくつかがWindows Defender ファイアウォールでブロックされています」と書かれて、「Node.js: Server-side JavaScript」の機能のいくつかがブロックされていますので、これを許可するために、今回は「パブリックネットワーク」にチェックし、「アクセスを許可する」ボタンをクリックします。

クリックすると、Googleアカウントのログインページが表示されていますので、お持ちのGoogleアカウントのメールアドレス、または電話番号を入力し、「次へ」ボタンをクリックします。

クリックすると、パスワードの入力が表示されますので、お持ちのGoogleアカウントのパスワードを入力し、「次へ」ボタンをクリックします。

クリックすると、「Firebase CLI が Google アカウントへのアクセスをリクエストしています」と表示されますので、許可するために「許可」ボタンをクリックします。

クリックすると、「Firebase CLI Login Successful（FirebaseCLIログインに成功しました）」と表示されます。表示後、Googleアカウントのログインページを閉じます。

+ Success! Logged in as （Googleアカウント）

+ You can now use the ‘firebase’ or ‘npm’ commands!
~ For more help see https://firebase.google.com/docs/cli/

閉じた後に、「Firebase CLI」に戻ります。戻ると上記のメッセージが表示されます。

これが表示されれば、インストールは完了となります。また’firebase’または ‘npm’コマンドが使用可能となります。