<!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」というエラーが発生しますので、注意が必要です。
選択すると、「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へのログインは完了となります。
エンターキーを押すと、「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（既存のプロジェクトの利用）」を選択し、エンターキーを押します。
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でアップロードするホスティングアセットを格納します。もし アセットのビルドプロセスを行っている場合は、ビルドの出力ディレクトリを使用します。）
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 ホスティングのセットアップが完了しましたのでご紹介します。いよいよ、素晴らしいものを作りましょう。）
コメント