なにがしたい？
Firebaseのデータベースを使ってみる。
Web（フロントエンド）のJavaScriptから操作してみる。
はじめに
FirebaseのセッティングとHostingできるところまでは持っていってください。
単なるHostngだけならそんなに苦労しないです。
簡単言うと、Firebaseのサイト（コンソール）から、
- 新しいプロジェクトの作成
- Hostingを使ってみるを選ぶとコマンドが出てくる
- パソコンのターミナルから
firebase login→init→deployを実行
という感じです。
Basic認証付きという状態で良ければ、手前味噌ながらにこの記事を参考にしてくれてもいいです。
（もっとわかりやすい記事も探せばあると思います）
FirebaseでBasic認証をかけてHostingをする(Windows)
DBの作成
ここからが本題です。
Firebaseのサイト上のメニューから Database を選択して、「データベースの作成」をクリックします。
とりあえず、テストモードで開始します。
後で変えられるので大丈夫です
画面が切り替わるので、「＋コレクションを追加」します。RDBで言うところのでいわゆるテーブル名です。
適当に「data」という雑な名前を付けておきます。
実際は「
users」とか意味ある名前にするほうが吉です。
次に、フィールドの設定を行います。RDBで言うところのいわゆるカラム名です。
今回はJavaScriptからカラムを追加したいので、もしフィールドが出ていたらマイナスのボタンを押して消して、空の状態にします。
「保存」を押して終了です。
これでサーバ上にDBの準備が出来ました。
Webからアクセスする準備をする
Firebaseのサイト上のProject Overviewを押して+アプリを追加をクリック。
メニューが開くのでWebのマーク</>をクリック。
スクリプトのコードが出てくるのでコピーしておきます。
本来これをヘッダに張り付けてHTMLを作りますが、いろいろTipsがあるのですが一気にコードに行ってみたいと思います。
Webからデータ追加するHTMLを作る
下記がDBに値を追加するコードです。
APIキーやドメインといった部分だけ上でコピーしたコードをうまく使って埋めてください。
<html>
<head>
<script src="https://www.gstatic.com/firebasejs/5.5.9/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.5.9/firebase-firestore.js"></script>
<script>
// Initialize Firebase
// ここの各値を書き換える
var config = {
apiKey: "xxxx",
authDomain: "xxxx",
databaseURL: "xxxx",
projectId: "xxxx",
storageBucket: "xxxx",
messagingSenderId: "xxxx"
};
firebase.initializeApp(config);
const firestore= firebase.firestore();
const settings = { timestampsInSnapshots: true };
firestore.settings(settings);
// この data をドキュメント名にする。
// 今回は、サンプルなので LA のデータをいれてみる
firestore.collection("data").doc("LA").set({
name: "Los Angeles",
state: "CA",
country: "USA"
})
.then(function() {
console.log("Document successfully written!");
})
.catch(function(error) {
console.error("Error writing document: ", error);
});
</script>
</head>
<body>
<p>add data!!</p>
</body>
</html>
ここで作るデータはチュートリアルからとってきた適当なものです。
いわゆるNoSQL系のDBなので、フィールドを事前に用意してなくても勝手に作ってくれます。
ファイルができたら、デプロイしてみましょう。
> firebase deploy
URLにアクセスしてみます。
https://xxxxxx.firebaseapp.com/add.html
画面にはadd data!!など出てるはずです。
次に、Firebaseのサイトのdatabaseを見てみます。
コレクションdataに、ドキュメントLAが追加されているのがわかると思います。
これにてデータ追加が完了です。
いったんまとめ
これで一通りの流れができました。
あとは、チュートリアルなど参考にJavaScriptからコールするAPIを変えることで、参照でもなんでもできると思います。
次は、セキュリティルールなど、実運用を考えた設定をしたいと思います。
次の記事書くまで少々お待ちください。