Google大先生が提供しているFirebaseと言うサービスがある。
これはDatabaseからpush通知,S3のようなストレージまで幅広く無料で提供されていてとても敷居が低い。
今回は概要から簡単なデータの挿入までやっていく。
タダなら開発して遊ぼうよ!
簡単なWebサービスを作ろうかなと思っている人は候補にしても良いと思うの。
サーバーレスで開発やってるよとかいうと今時。
Firebaseでは何が提供されているの?
- Firebase Cloud Messaging
- いわゆるPush通知
- AWSでいうとSNSとかPinpoint
- Firebase Authentication
- 認証システム
- メールアドレス登録やSNSでのアカウント登録ができる
- AWSでいうとちょっと違う気もするがCognito
- Firebase Realtime Database
- NoSQLなのでクセがすごい
- Json形式でデータが保存されている
- AWSでいうとDynamoDB
- Firebase Storage
- 画像とか色々なファイルを保存できる
- AWSでいうとS3
- Firebase Hosting
- 静的HTMLを簡単に公開できる
- CDNで公開してくれるのでサクサク
- AWSでいうとS3の静的Hostingなようなもの
- Cloud Functions for Firebase
- Node.jsで簡単にREST APIが作れる!
- 作ったAPIはFirebase内の様々なアクションでキックできる!
- AWSでいうとLambda
他にも色々あるけどこんな感じ
Firebaseでプロジェクトを作る
Firebase consoleでプロジェクトを新規で作る!
できたら準備完了。
じゃ早速Realtime DatabaseにJavaScriptで書き込んでみよう
Realtime Databaseのルールを一時的に以下で設定する。
今回は認証周りはやらないので説明は特にしないけどこれが終わったら元に戻してね。
1 2 3 4 5 6 |
{ "rules": { ".read": true, ".write": true } } |
適当なテキストに以下のHTMLをコピペしてindex.htmlとかで保存して試してみる。
ウェブ API キーとプロジェクト IDはプロジェクトの設定で見れるよ。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<!DOCTYPE html> <html> </head> <script src="https://www.gstatic.com/firebasejs/live/3.0/firebase.js"></script> <script> var config = { apiKey: "<ウェブ API キー>", databaseURL: "https://<プロジェクト ID>.firebaseio.com/" }; firebase.initializeApp(config); </script> </head> <body> <div> <h1>Firebase確認</h1> <p>push:<input type="text" id="text_id" onchange="push()"></p> <p>set:<input type="text" id="text_id2" onchange="set()"></p> <p>update:<input type="text" id="text_id3" onchange="update()"></p> <p>delete:<input type="text" id="text_id4" onchange="remove()"></p> </div> <script> function push() { firebase.database().ref('users').push({ username: document.getElementById('text_id').value }); } function set() { firebase.database().ref('users').set({ username: document.getElementById('text_id2').value }); } function update() { firebase.database().ref('users').update({ username: document.getElementById('text_id3').value }); } function remove() { firebase.database().ref('users').remove(); } </script> </body> </html> |
無事Realtime Databaseに書き込むことができましたね。
ソースはかなり雑なので適当に直しながら使ってみましょう。
次は認証してからRealtime Databaseにデータを書き込んでみるよ!
次回はこちら
参考
Firebase を JavaScript プロジェクトに追加する | Firebase
Cloud Functions for Firebase | Firebase
スポンサードリンク