記事「Firebaseの概要」では、Firebaseの概要が説明されています。 Firebaseアカウントを設定し、Firebaseプロジェクトをすべて無料で作成する方法を説明しました。この記事では、NoSQLクラウドベースのデータベースをセットアップし、それにアイテムを追加するための非常に単純なWebページを作成することによって、学んだことを基に構築します。データベースは、カテゴリと識別子とともに駄洒落を保存するだけです。図1は、アイテムの追加に使用されるWebページを示しています。
図1： FirestoreNoSQLデータベースに書き込むWebページ。
FirebaseでのCloudFirestoreデータベースの設定
まず、Firebaseに戻り、新しいプロジェクトを作成します。 https://console.firebase.google.com/にアクセスすると、Firebaseにアクセスできます。このページには、図2に示すように、新しいプロジェクトを追加するオプションがあります。プロジェクトの作成に関する詳細については、前の記事を参照してください。
図2： 新しいFirebaseプロジェクトを追加します。
私は自分のプロジェクトに「ThePunProject」という名前を付けました。新しいプロジェクトを作成すると、図3に示すようにFirebaseコンソールが表示されます。
図3： Firebaseコンソール
コンソールでは、Webページが使用するデータベースを作成できます。これを行うための最初のステップは、左側のナビゲーションメニューの[データベース]オプションをクリックすることです。これにより、図4に示すような画面が表示され、NoSQLデータベースとなるCloudFirestoreを作成できます。
図4： CloudFirestoreを作成するためのスタート画面
[データベースの作成]ボタンをクリックすると、データベースを作成するための手順を実行するプロセスが開始されます。図5に示すように、最初に行う必要がある決定は、データベースを実稼働モードで開始するかテストモードで開始するかです。この記事をシンプルにし、データの追加に焦点を当てるために、テストモードが選択されます。本番環境に対応したデータベースベースを作成するときは、テストモードで提供されるものよりもセキュリティを強化する必要があります。
図5： Firestoreデータベースのモードの選択
モードを選択した状態で、次のステップは、データベースを作成する場所を指定することです。クラウドでデータベースを作成しているので、使用するサーバーの場所を選択できます。図6に示すCloudFirestoreの場所のドロップダウンをクリックすると、マルチリージョンまたはリージョナルの場所を選択できます。北米にいる場合は、nam5（us-central）の場所を選択することをお勧めします。他の場所にいる場合は、現在地に最も近い地域を選択してください。
図6： Firestoreデータベースのリージョンの選択
お住まいの地域を選択した状態で、[完了]ボタンをクリックすると、FirebaseがCloudFirestoreデータベースをプロビジョニングします。プロビジョニングが完了すると、図7に示すように、データベースコンソールページに移動する準備が整います。ここで、データベースのオンライン使用を開始できます。
図7： Firebaseのデータベースコンソール
NoSQLのコレクションとドキュメント
従った場合は、この時点で、FirebaseのCloudFirestoreにNoSQLクラウドベースのデータベースを作成しました。 NoSQLの詳細に入るのはこの記事の範囲を超えていますが、この記事で約束されたサンプルデータの追加を行うために知っておく必要があることのハイライトを提供します。
NoSQLデータベースはコレクションで構成されています ドキュメントを含む 。ドキュメントには基本的に、保存する予定のフィールドが含まれています。たとえば、この記事では、しゃれのコレクションが作成されています。駄洒落コレクションにはドキュメントが含まれます。各ドキュメントは異なるしゃれになります。
Firebaseでは、図7に示す[+コレクションの開始]リンクをクリックして、Punsコレクションを作成するためのダイアログを表示できます。図8に示すように、コレクションIDを追加するように求められます。この場合、コレクションを「しゃれ」と呼びます。
図8： CloudFirestoreコレクションの作成
コレクションが作成されると、図9に示すように、コレクション内にドキュメントを作成できるようになります。ここでも、ドキュメントは基本的にNoSQLデータベース内のレコードです。これはNoSQLであるため、すべてのフィールドがすべてのドキュメント（レコード）にあること、またはコレクション内のすべてのドキュメントが一致することを確認するように強制する厳密なルールはありません。これはあなたに任されています。
図9： コレクションへのドキュメントの追加
作成する各ドキュメントには、ドキュメントIDが必要です。このIDを入力するか、空白のままにするとIDが自動的に生成されます。駄洒落を使用した例で物事を読みやすくするために、最初のドキュメントにPun0001のIDを付けます。
コンソールを使用してドキュメントを追加する場合、ドキュメントごとに、データ値だけでなく、フィールドの名前とタイプも指定する必要があります。ドロップダウンを使用すると、追加するデータ型を選択できます。
図10では、Punの例で使用される2つの文字列フィールドが追加されています。これらはカテゴリです しゃれのテキスト（ PunText 。
図10： しゃれドキュメントを設定します。
図10に示すダイアログで[保存]ボタンをクリックすると、図11に示すようにドキュメント（基本的にはレコード）が作成されます。この時点で、Cloud Firestoreデータベースがクラウドとレコード（ドキュメント）が追加されました！より正確には、CategoryおよびPunTextというフィールドを含む「Pun0001」というドキュメントを持つ「Puns」というコレクションが作成されました。
図11： ドキュメントが追加されたCloudFirestoreデータベース！
この時点で、コンソールを使用してレコードを追加する場合は、図11の中央に表示されている[+ドキュメントの追加]リンクをクリックします。次に、ID、カテゴリ、およびしゃれテキストを使用してしゃれを追加できます。新しい駄洒落を追加するたびに、同じフィールド名を使用するように注意する必要があります。
フィールド名を再入力するのは面倒だと思うかもしれませんが、これはNoSQLの柔軟性によるものです。これを回避する1つの方法は、作業のその部分を実行するWebアプリケーションを作成することです！
注：図11で、新しいコレクションを開始できる場所がいくつかあることに気付くでしょう。 NoSQLコレクションとドキュメントの構造を掘り下げることはこの記事の範囲を超えています。
CloudFirestoreにアクセスするためのWebアプリケーションの作成
Cloud Firestoreを設定すると、Firebaseサイトの外部からデータを追加できるようになります。これを行うには、まずFirebaseから情報を取得して、ウェブアプリを作成したFirebaseプロジェクトに関連付ける必要があります。
ナビゲーションメニューの左上部分にある[プロジェクトの概要]リンクをクリックすることから始めます。これにより、図12に示すようなプロジェクトの概要ページが表示されます。
図12： Firebaseプロジェクトの概要ページ
このページには、選択可能な4つのプロジェクトタイプのアイコンがあります。これらは、iOS、Android、Web、およびUnity用です。 アイコンをクリックして、Webアプリが実行されていることを示します。これにより、アプリケーションの名前を尋ねる図13に示すダイアログが表示されます。作成される名前は、作成するWebアプリをFirebaseプロジェクトおよびFirebaseプロジェクト内の機能と調整するために使用されます。このデモでは、「My Punny Web App」という名前を使用して、[アプリの登録]ボタンをクリックします。
クリックすると、Webアプリケーションに追加するHTMLコードを含む画面が表示されます。このHTMLコードは、Firebaseをアプリに結び付けるものです。
図13： ウェブアプリのFirebaseコード。
このコードをコピーして、この記事の次のステップで後で作成するHTMLページに貼り付けることをお勧めします。図13に示すページを離れると、Firebaseコンソールからいつでもこのアプリコードに戻ることができます。右上隅にある[プロジェクトの概要]リンクの横にある歯車をクリックして、[プロジェクトの設定]を選択するだけです。結果のページには、プロジェクトに関する情報が含まれます
FirestoreにアクセスするためのWebページ/アプリの作成
Firebase側ですべてを設定したら、データを追加できるWebページを作成します。リスト1には、前の図1に示したページを表示するための基本的なHTMLが含まれています。
リスト1： パニーページの基本的なHTML。
<html>
<head>
<title>Punny or Not</title>
</head>
<body>
<div class="main-form">
<h1 id="punTimes">Punny or Not!</h1>
Pun Number/ID: <input type="text" placeholder="Pun ID: " id="PunID"><br /><br />
Pun Category: <input type="text" placeholder="Category: " id="Category"><br /><br />
Pun Text: <input type="text" placeholder="Enter Text here..." id="PunText"> <br /><br />
<br /><br />
<button id="saveButton" onclick="storeData()" >Submit</button>
</div>
<script src="./pun.js"></script>
</body>
</html>
リスト1は基本的なHTMLです。ユーザーがデータを入力できるように、3つのフィールドが設定されています。それぞれに、入力されたデータをFirestoreに追加されるドキュメントに関連付けるために必要なIDが与えられます。データを保存するためのボタンもイベントに含まれています。現在、その関数は作成されていません。それがこの記事の目標です。 pun.jsという外部JavaScriptファイルへのリンクも含めました。最初、そのファイルは空ですが、まもなく変更されます！
以前にFirebaseからコピーしたコードを貼り付けるのはリスト1の範囲内です。図13に示されているコードは、bodyタグの終わり近く、この場合はpuns.jsスクリプトを含める直前に貼り付ける必要があります。しゃれアプリのコードをリスト2に貼り付けました。
リスト2： Firestoreコードが追加されたhtmlページ。
<html>
<head>
<title>Punny or Not</title>
</head>
<body>
<div class="main-form">
<h1 id="punTimes">Punny or Not!</h1>
Pun Number/ID: <input type="text" placeholder="Pun ID: " id="PunID"><br /><br />
Pun Category: <input type="text" placeholder="Category: " id="Category"><br /><br />
Pun Text: <input type="text" placeholder="Enter Text here..." id="PunText"> <br /><br />
<br /><br />
<button id="saveButton" onclick="storeData()" >Submit</button>
</div>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.9.1/firebase-app.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/7.9.1/firebase-analytics.js"></script>
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "AIzaSyAJUQUXm_oYXAo2M1yukGT8lnTKeuMd53o",
authDomain: "the-pun-project.firebaseapp.com",
databaseURL: "https://the-pun-project.firebaseio.com",
projectId: "the-pun-project",
storageBucket: "the-pun-project.appspot.com",
messagingSenderId: "354041199852",
appId: "1:354041199852:web:4f9a613485174688f0f9c9",
measurementId: "G-4672MVCRK2"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
</script>
<script src="./pun.js"></script>
</body>
</html>
HTMLにスクリプトを追加することで、Firebaseにアクセスするようにアプリケーションを配線しました。ただし、コードをもう1行追加する必要があります。生成されたコードはFirebaseへの接続を提供しますが、Firebase内のCloudFirestoreデータベースにアクセスするコードを取得するにはリンクを追加する必要があります。次のスクリプトソース行をリストに追加することをお勧めします。
これは、次の呼び出しの直後に追加できます：
次のステップは、ユーザーから入力されたフィールドをFirestoreデータベースに追加されるフィールドに関連付けるロジックを追加することです。これは、コードをクリーンに保つためにpuns.jsファイルで行われます。
プロセスは、最初にFirebaseCloudFirestoreデータベースに関連付けられるデータベース変数を作成することです。次に、ユーザーがページに入力した値を入力できる変数を作成する必要があります。これは、標準のdocument.getElementById（）呼び出しで行われます。最後に、Webページから取得した変数を、Punsコレクション内のドキュメント内のフィールドとしてCloudFirestoreデータベースに追加する必要があります。リスト3は、これらすべてを実現できるJavaScriptを示しています。
リスト3： pun.jsJavaScriptファイル
var db = firebase.firestore();
function storeData() {
var inputPun = document.getElementById("PunID").value;
var inputCategory = document.getElementById("Category").value;
var inputText = document.getElementById("PunText").value;
db.collection("Puns").doc(inputPun).set({
Category: inputCategory,
PunText: inputText
})
.then(function() {
console.log("Doc successful");
})
.catch(function(error) {
console.error("Error writing doc", error);
});
}
リスト3では、データベースがdbという変数で作成されていることに注意してください。次に、この変数を使用して、図8に示すプロセスでPunsと呼ばれたコレクションの名前を指定することにより、新しいドキュメント（レコード）を作成します。その後にドキュメント名が続きます。この場合は、から収集されたPunIDです。ユーザーを変数inputPunに入れます。ドキュメント内に、セット内で行われる2つのフィールドが追加されています。フィールドを追加するには、フィールドの名前をリストし、次にコロンをリストして、最後に追加する文字列値をリストします。この場合、inputCategoryがCategoryフィールドに追加され、inputTextがPunTextフィールドに追加されます。
このリストには、メッセージをコンソールに記録するためのテストおよびエラーロジックも含まれています。ブラウザの開発者コンソールを開くと、図14に示すように、ドキュメントがCloudFirestoreに追加されたときに「Docsuccessful」メッセージが表示されます。
図14： 正常に追加されたドキュメント。
Firebaseコンソールでプロジェクトに戻り、データベースを確認することで、ドキュメントが追加されたことを確認できます（左側のナビゲーションメニューで[データベース]をクリックして実行します）。図15は、新しいしゃれの追加が成功したことを示しています。
図15： 新しいpun002ドキュメントを含むPunsコレクション
まとめ
この記事では、Firebase CloudFirestoreNoSQLデータベースへのドキュメントの追加について多くのことを取り上げました。コンソールと単純なWebアプリの両方からこれを行う方法を学びました。これは、追加がいかに簡単であるかを示すための出発点にすぎません。そうは言っても、CRUDシステムに1つのステップだけを追加します。学ぶべきことはまだまだあります！ああ、駄洒落が好きなら、Amazonで入手できる私の本「駄洒落の本かどうか」をチェックしてください！
＃＃＃