最終更新日から90日以上経過しています。
最近気になっていたFirebaseに手を出してみました。
バックエンドに関して丸投げできるということで、開発の効率化を狙う意味では触っておきたいと思っていました。
Firebaseの中で更に幾つか細分化された機能がありますが、とりあえず今回は
- 認証（Authentication）
- 保存（Storage）
を使ってみます。
前提
Firebaseには、1.プロジェクト、2.それに紐づくアプリという概念がありますが、
この２つは既に作成されているものとします。
尚、アプリに関してはプラットフォームに「Web App」を指定しているものとします。
Authenicationにユーザーを追加
あらかじめ認証するユーザーを追加しておきます。
サンプルなのでメールアドレスも適当に。
ソース
使用するソースは以下の２つです。
- index.html
- main.js
極論、index.htmlにscriptを埋め込めばindex.html１つで済みますが、可読性の面から２つに分けます。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.21.0/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.21.0/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.21.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.21.0/firebase-storage.js"></script>
</head>
<body>
<input id="input-file" type="file"></input>
<script src="script/main.js"></script>
</body>
</html>
画面は以下のようになります。
シンプルです。
script部分はfirebaseのプロジェクトの設定から表示されるスニペットをベースとしています。
（プロジェクトの設定は以下から表示します。）
スニペットに書いてあるconfig部分は別ソースに記載したいので、config部分は以下のmain.jsに記載します。
main.js
var firebaseConfig = {
apiKey: "hoge",
authDomain: "hoge",
databaseURL: "hoge",
projectId: "hoge",
storageBucket: "hoge",
messagingSenderId: "hoge",
appId: "hoge",
measurementId: "hoge"
};
const myBase = firebase.initializeApp(firebaseConfig);
const email = "hoge@hoge.com";
const password = "hogefuga";
firebase.auth().signInWithEmailAndPassword(email, password).catch(function(error) {
console.log(error);
});
const save = document.getElementById("button-save");
save.addEventListener("click", function (e) {
const file = document.getElementById("input-file");
const storageRef = myBase.storage().ref();
const storageFileRef = storageRef.child(file.files[0].name);
storageFileRef.put(file.files[0]);
});
Firebaseの初期化、「登録する」クリック時の登録処理を記載。
config部分はスニペットをコピーします。
（上記は値部分をhogeとしています。）
注意として、認証のメールアドレス／パスワードをベタで書いていますが、
本当は入力フィールドを用意してhtml⇨JavaScriptに値を渡すべきです。
確認
FirebaseのStorageを確認すると、画像が登録されています。
