Firebase Storage に画像を保存する方法の解説

Firebase Storage に画像を保存する方法の解説
     

最近気になっていたFirebaseに手を出してみました。

バックエンドに関して丸投げできるということで、開発の効率化を狙う意味では触っておきたいと思っていました。

Firebaseの中で更に幾つか細分化された機能がありますが、とりあえず今回は

  • 認証(Authentication)
  • 保存(Storage)

を使ってみます。

前提

Firebaseには、1.プロジェクト、2.それに紐づくアプリという概念がありますが、

この2つは既に作成されているものとします。

尚、アプリに関してはプラットフォームに「Web App」を指定しているものとします。

Authenicationにユーザーを追加

あらかじめ認証するユーザーを追加しておきます。

サンプルなのでメールアドレスも適当に。

ソース

使用するソースは以下の2つです。

  • index.html
  • main.js

極論、index.htmlにscriptを埋め込めばindex.html1つで済みますが、可読性の面から2つに分けます。

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を確認すると、画像が登録されています。

IT系の雑記カテゴリの最新記事