Firebase Realtime Databaseを使用しデータベース作成しデータを登録する

Firebase Realtime Databaseを使用し、データベース作成しデータを登録するまでを解説しています。

■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:

〇〇

エンターキーを押すと、上記のメッセージが表示され、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」の「ルール」をクリックします。

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

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

コメント

タイトルとURLをコピーしました