FirebaseのStorageを使ったWEBアプリを作る

Firebase Storageは、ファイルや画像を自由にアップロード・ダウンロード管理できるGoogle管轄のストレージサービスです。

クライアントアプリやWEBアプリからUPしたデータは、FirebaseのConsole上で管理する事ができます。

用意するのはアップロード部分だけであり、それ以外のバックエンド機能は全てFirebase側が担当してくれます。

FirebaseのStorageとは

Cloud Storage for Firebase（以下：Firebase Storage）は、写真や動画などのバイナリーデータなどを保存する事ができるサービスです。

Googleの基準や規模をもとに構築され、強力かつシンプルでコスト効果が高いとされています（無料枠あり）。

Cloud Storage用の「Firebase SDK」を使用し、 クライアントからファイルのアップロード・ダウンロードができます。

画像をアップするWEBアプリ

本記事では、このFirebase Storageサービスを使ったWEBアプリを作成していきます。

アプリからUPした画像は、Firebase Console上から管理できる様になっています。

ストレージとしてのバックエンド機能はFirebase側に任せ、ファイルをUPするスクリプトを準備するだけです。

Hostingも併用

クライアントアプリを作ったら、本記事ではそれをHostingでFirebaseにデプロイします。

ドメイン名をつけて、ファイルUPアプリを一般公開する事もできる訳ですね。

ユーザーから書類などの撮影画像などを送ってもらい、画像を保存・確認するアプリなどに使える事でしょう。

Firebase Hosting

Firebase HostingによるWEBページの開設方法については、以下の記事で詳しく解説しています。

では早速構築してみましょう。

Storageの準備

プロジェクトの作成

アプリを作る前に、Firebase側で初期準備をしておきます。

Firebase Console画面TOPから「プロジェクトを追加」をクリックします。

名前は自由に決定して下さい。

今回もGoogleアナリティクスの設定はOFFにして、プロジェクトの作成をクリックします。

Storageの開設

プロジェクトを作成したら、右の構築メニューから「Storage」を選択して下さい。

画面が変わったら、中央の「始める」をクリックしましょう。

Cloud Storageの設定

Cloud Storageの設定ページが開きます。

まず2つのマークのうち、「本番環境モードで開始する」にマークがついた状態で右下の「次へ」をクリックします。

次の「Cloud Storageのロケーション設定」では、左下にロケーションのコードが表示されています。

これはこのまま何もせず、右の「完了」を押しましょう。

ストレージ枠の開設ができると、ファイル管理をする画面に切り替わります。

セキュリティルールの編集

画像をアップする前に、まずは「Files」の隣のタブ「Rules」を開きましょう。

以下の様なコードが表示されているはずです。これの一部分を書き換えます。

編集し始めると上部に「公開」「破棄」のボタンが表示されます。編集後に「公開」を押して下さい。

これにより、誰でもデータUPができるルールとなります。

画像のアップロード、確認

ではテスト画像をアップしてみましょう。

「ファイルをアップロード」ボタンを押すと、PC内の画像を選択できるようになります。

画像を選択して「OK」してみましょう。

画像がFirebase Storageにアップされ、一覧に追加されます。

画像左のチェックをつけて、UPした画像を消す事もできます

アップロード画像の詳細

追加されている画像名をクリックすると、画像サムネイルや詳細情報が表示されます。

右欄の「名前」をクリックすれば、画像URLを表示する事ができます。

アプリの登録

では次に、プロジェクト内にFirebaseアプリを登録します。

プロジェクト名が、先程作ったプロジェクト名になっている事を確認してくださいね。

左上の「プロジェクトの概要」をクリックすると、右下に各種アプリのマークが横並び表示されます。

アプリ追加となる「</>」マークをクリックしましょう。

ウェブアプリへFirebaseを追加

アプリのニックネームを適当につけて、「アプリの登録」をクリックします。

次の画面では一番下にある「コンソールに進む」をクリックしましょう。

これでアプリが追加されました。

アプリIDの確認

自動的に画面が変わり、プロジェクト設定の「全般」タブページが開くと思います。

画面が変わらない場合は、左上の「プロジェクト設定」欄にある歯車マークをクリックして下さい。

ページの下に、Firebase SDKのアプリID情報が表示されているはずです。

3種類の表記がありますが3つとも中身は同じです。後ほどコピーしますので開ける様にしておきましょう。

ここまででFirebase側の設定はほぼ終了しました。

次はローカル環境上でアプリを作成していきます。

コマンドラインによるFirebaseの初期化

今回はWindows11環境ですので、コマンドプロンプトを使って構築していきます。

まずはアプリを入れるフォルダを一つ作りましょう。

今回はプロジェクト名と同じ名前でフォルダを作りました。

Firebase初期化

コマンドプロンプトを開き、まずは作ったディレクトリまで移動しましょう。

cd C:\Users\info\デスクトップ\ディレクトリ名

このディレクトリ内で、Firebaseを初期化していきます。

firebase init

Are you ready to proceed？

上の様に聞かれるので「Y」を押しましょう。

利用サービスの選択（2つ）

次に利用するサービスを選択します。今回はHostingとStorageの2つを利用します。

上下矢印で該当サービスに合わせて、スペースを2か所押しましょう。

スペースを押すのは以下の2つです。

上記2つに※印が付いたことを確認したら、Enterを押して下さい。

プロジェクトの選択

次にプロジェクトの利用方法を選びます。矢印で次の項目を選びましょう。

Use an existing project

上記に合わせてEnterを押します。

これまでに作ったプロジェクト一覧が表示されますので、今回作成したプロジェクト名を選択して下さい。

オプション選択

What do you want to use as your public directory?

これに「Y」を押す事で、「public」が公開フォルダとして作られます。

Configure as a single-page app (rewrite all urls to /index.html)? (y/N)

Spaは今回無視しますので、これに「N」を押します。

Set up automatic builds and deploys with GitHub?

今回GitHubも無視しますので、これに「N」を入力してEnterキーを押します。

Firebase initialization complete! と表示されれば、初期化が完了したことになります。

アプリの作成

初期化が終了したら、フォルダの中を確認してみましょう。

おおよそ以下のような構成になっているはずです。

ディレクトリ構成

├― 作成ディレクトリ ├─ public/フォルダ ├─ .firebase/フォルダ ├─ .firebaserc ├─ .gitignore ├─ firebase.json ├─ storage.rules

さらに、「public」フォルダの中身は以下です。

├― 作成ディレクトリ ├─ public └─ index.html └─ 404.html

中にはindex.htmlと404.htmlファイルのみが入っている状態になります。

今回アプリ記述するページはindex.htmlのみで、後は触りません。

index.html内ソース

ではいよいよindex.html内にファイルをアップするコードを入れていきます。

以下が完成ソースになります。

コードの解説

ここからは、上のindex.htmlソース内の各説明になります。

head内の読込パスは、もともと記載されていたfirebaseコードのままでOKです。

実物にはstyleタグが入っていますが、わかりやすくなる様ソース上では削除しています。

formタグソース

body部分に以下の様なフォームタグソースを入れます。

<form> <input type="file" value="画像選択"> <input type="submit" value="アップロード"> </form>

ごく普通のファイルをアップロードするソースコードですね。

firebaseアプリのID登録

次にfirebaseアプリのID登録です。

アプリIDは先程確認した、Firebase Consoleのプロジェクト設定「全般ページ」に記載されています。

真ん中の「cdn」欄に記載されているコードを、丸ごとコピペしてきましょう。

<script type="module"> import { initializeApp } from "https://www.gstatic.com/firebasejs/9.12.1/firebase-app.js"; const firebaseConfig = { apiKey: "○○○○○○○○○○○○○○○○", authDomain: "○○○○.firebaseapp.com", projectId: "○○○○", storageBucket: "○○○○.appspot.com", messagingSenderId: "○○○○○○○○", appId: "1:○○○○○○○○○○○○○○○○" }; const app = initializeApp(firebaseConfig); </script>

アップロード操作js

次にフォーム上で選択した画像をFirebase Storageにアップするjsコードです。

<script> var form = document.querySelector('form'); form.addEventListener('submit', function (e) { e.preventDefault(); var imgs = form.querySelector('input'); var uploads = []; for (var file of imgs.files) { var storageRef = firebase.storage().ref('form-uploaded/' + file.name); uploads.push(storageRef.put(file)); } Promise.all(uploads).then(function () { alert('アップロード完了'); }); }); </script>

Storage内では「form-uploaded/」専用フォルダを作って、その中にUPする様にしています。

ファイル名ができるだけ被らない様にするためですね。

アップロードが完了したら、アラート表示されるようにしています。

以上でアプリ作成は終わりです。非常に簡単でシンプルですよね。

WEBアプリとして公開する

localhostでの実行

ではこのアプリをまずはローカル環境上で実行してみましょう。

コマンドプロンプトで「cd」をし、対象フォルダへ移動します。

次に以下のコマンドを入れましょう。

firebase serve

完了すると、http://localhost:5000/で確認できる様になります。

上記ページを開いたら「ファイル選択」ボタンを押して、PC内画像を一つ選びましょう。

OKすると、画像名が隣に表示されます。右の「アップロードボタン」を押して下さい。

ちょっと時間が掛かりますが、「アップロード完了」のアラート画面が表示されると思います。

これでFirebaseへのアップが完了しました。

Console画面の確認

Firebase Consoleの左メニュー欄から「Storage」をクリックして、先程のファイル管理画面を出します。

画像リスト一覧（Filesタブ）に、「form-uploaded」のフォルダが表示されているのがわかると思います。

そのフォルダを開くと、先程UPした画像が表示されているはずです。

Firebaseへデプロイ

ではWEBアプリを一般公開するため、アプリをFirebaseへデプロイしましょう。

コマンドプロンプトで「cd」をし、対象フォルダへ移動します。

次に以下のコマンドを入れましょう。

firebase deploy

これによりFirebaseのHostingへデプロイされます。

Hostingダッシュボードを確認

デプロイが無事に完了したら、Firebase Consoleの画面へ戻ります。

左のメニュー欄から「Hosting」をクリックしましょう。すると「デプロイされました」という結果が表示されていると思います。

そこをクリックするとHostingのダッシュボードに移動します。

クライアントアプリと同じ動作

2種類のURLが生成されており、どちらのURLも同じWEBページが表示されます。

いずれもクライアントアプリと同じ動作をするはずです。

これでFirebase上にファイルアップロードアプリを公開する事ができましたね。

人気記事

Firebase関連記事