自分専用のダッシュボードをオンライン化する｜Firebaseでバックエンドを繋ぐ手順
AIに作ってもらったツール、自分のPCに置いたままになっていませんか？
私もつい最近まで、その状態でした。売上や案件をまとめて管理できる業務ダッシュボードを作ったものの、使えるのは自分のMacだけ。スマホからも確認したいし、PCの故障でデータが消えてしまうのも心配でした。
そこで、ダッシュボードをオンラインで使えるようにしてみました。今では、PCからもiPhoneからも、同じデータを確認できます。
今回の構成なら、無料で利用でき、クレジットカードの登録も不要です。
この記事では、Firebaseを使ってデータの保存先やログイン機能を用意し、ダッシュボードを公開するまでの手順を紹介します。実際につまずいたところもまとめました。
この記事はこんな方におすすめ
AIに作ってもらったHTMLのツールを、自分のPCだけで使っている方
「バックエンド」と聞くと難しそうに感じる方
自分で作ったツールをスマホからも使いたい方
コードの修正はAIに手伝ってもらいながら進められます。ターミナルも使いますが、入力するコマンドは記事内に載せています。
なお、Firebaseの設定に加えて、ツール側にもログインやデータ保存の処理を組み込む必要があります。 その部分は、作ったツールに合わせてAIに修正を依頼します。
そもそも、バックエンドとは？
まずは、今回使う仕組みを簡単に整理します。
AIにツールを作ってもらうと、index.html というファイルができることがあります。画面の表示や、入力した数字の計算などを、このファイルにまとめたものです。
ただし、入力したデータをどこに保存するかは、ツールの作り方によって異なります。
保存機能がなければ、画面を閉じると入力内容は失われます。ブラウザに保存する仕組みがあっても、そのままではPCとスマホで同じデータを共有できません。
そこで、インターネット経由で使えるデータの保存先を用意します。
今回の構成では、役割を次のように分けます。
バックエンドとは、データの保存や認証など、画面の裏側で動く仕組みのことです。
今回は、その仕組みをFirebaseで用意します。
Firebaseを選んだ理由
いくつか候補を比較して、今回はFirebaseを選びました。決め手は3つです。
1. 今の使い方なら無料枠で十分だった
私のダッシュボードに入っている案件・請求・クライアントなどのデータは、全部で89件。データ自体の容量は約28KBでした。
Cloud Firestoreの無料枠には、1GiBのデータ保存容量があります。保存容量の計算にはインデックスなども含まれますが、今回のような小規模なツールなら、十分な余裕があります。
参考：Cloud Firestoreの使用量と上限
2. クレジットカードを登録せずに使える
無料のSparkプランは、支払い情報を登録せずに始められます。
Sparkプランのまま利用していれば、無料枠を超えた分が自動で課金されることはありません。 ただし、上限に達するとサービスの利用が制限される場合があります。
料金を気にしすぎず、まず試してみられるのは助かりました。
参考：Firebaseの料金プラン
3. Googleアカウントでのログインを導入できる
売上や取引先の情報を扱うので、URLを知っているだけでデータを見られてしまう状態は避けたいところです。
Firebaseには認証機能があり、Googleアカウントでログインできるように設定できます。
さらに、データの読み書きを制限する「セキュリティルール」を設定すれば、ログインした人が自分のデータだけにアクセスできるようにできます。
用意するもの
Googleアカウント
AIに作ってもらったHTMLファイル
ターミナル（Macには標準で入っています）
Node.jsとnpmが使える環境
今回のコマンドを実行するには、ターミナルだけでなくNode.jsとnpmも必要です。未導入の場合は、先に対応するNode.jsをインストールしてください。
参考：Firebase CLIリファレンス
Firebaseの設定自体は、ブラウザでの操作が中心です。所要時間は、PCの準備状況やツールの修正内容によって変わります。
手順1｜Firebaseプロジェクトを作る
Firebaseコンソールを開き、「新しい Firebase プロジェクトを作成」を選びます。
プロジェクト名は、用途がわかる名前であれば何でも構いません。
私は 屋号＋Dashbordという名称にしました。あとから気づいたのですが、Dashboard の a が抜けていました……。
なお、プロジェクト名とプロジェクトIDは別のものです。 プロジェクト名は変更できますが、プロジェクトIDは作成後に変更できないので、確定前に確認しておきましょう。
名前とは別もので、こちらは後から変更できない
プロジェクト名を入力すると、入力欄の下にプロジェクトIDが自動で表示されます。
Googleアナリティクスは、今回はオフで進めます。自分用のツールなので、アクセス解析は設定しません。
途中で「FirebaseでGeminiを有効にする」という項目が表示された場合も、今回はオフで構いません。
手順2｜Googleアカウントでログインできるようにする
コンソールの検索ボックスに Authentication と入力し、該当するページを開きます。
「始める」を押し、ログイン方法の一覧から Google を選んで有効にします。
設定画面に「プロジェクトの公開名」が表示されたら、自分でわかりやすい名前に変更しておきましょう。
ここは、ログイン時にユーザーへ表示される名前です。初期設定の英数字のままよりも、ツール名にしておくと、何にログインするのかわかりやすくなります。
サポートメールには自分のメールアドレスを選び、保存します。
手順3｜データベースを作る
検索ボックスに Firestore と入力し、「データベースを作成」を選びます。
今回は、Cloud FirestoreのStandardエディションを使う構成です。選択画面が表示された場合は、Standardを選んでください。
続いて、ロケーションとセキュリティルールの初期設定を確認します。
ロケーション：asia-northeast1（東京）
今回は日本から使うため、東京を選びます。
データベースのロケーションは作成後に変更できないので、選択内容を確認してから進めてください。
モード：本番環境モード
今回は売上や取引先の情報を扱うため、本番環境モードを選びます。
テストモードでは、初期設定のままだと一定期間、誰でもデータを読み書きできるルールになります。
本番環境モードでは、最初はアプリからデータを読み書きできません。あとで、ログインした人が自分のデータだけを扱えるルールに変更します。
手順4｜ウェブアプリを登録し、設定情報を取得する
歯車アイコンから 「プロジェクトの設定」→「全般」 を開きます。
「マイアプリ」までスクロールし、</>（ウェブ） のアイコンをクリックします。
アプリのニックネーム：dashboard など、わかりやすい名前
「このアプリのFirebase Hostingも設定します」：今回はチェックを入れずに進む
Hostingは、後ほど設定ファイルとコマンドで設定します。
アプリを登録すると、次のような設定情報が表示されます。
const firebaseConfig = {
apiKey: "AIza...",
authDomain: "あなたのプロジェクト.firebaseapp.com",
projectId: "あなたのプロジェクト",
storageBucket: "...",
messagingSenderId: "...",
appId: "..."
};
この設定情報をコピーしておきます。 次の手順で使います。
「APIキーをHTML側に置いて大丈夫？」と思うかもしれません。
Firebase用のAPIキーは、ウェブアプリのコードに含まれることを前提としています。ただし、APIキーが公開されてもよいことと、データを誰でも読めるようにしてよいことは別です。
データへのアクセスは、認証とセキュリティルールで制限します。なお、この説明はFirebase用のキーについてのもので、他のサービスの秘密のAPIキーにも当てはまるわけではありません。
参考：FirebaseのAPIキーについて
手順5｜公開用のファイルを用意する
ここからは、PCで作業します。
dashboard というフォルダを作り、その中に public フォルダを用意します。HTMLファイルと設定ファイルは、次の場所に保存します。
元のHTMLファイルに加えて、4つの設定ファイルを作る形です。
public/firebase-config.js
手順4でコピーした設定情報を保存します。
const firebaseConfig = {
apiKey: "ここに貼る",
authDomain: "ここに貼る",
projectId: "ここに貼る",
storageBucket: "ここに貼る",
messagingSenderId: "ここに貼る",
appId: "ここに貼る"
};
続いて、index.html の <head> 内に、次の4行を追加します。
以下は、元のツールで使っていたSDKバージョンの例です。すでにFirebaseの読み込み処理がある場合は、重複して追加しないようにしてください。
<script src="https://www.gstatic.com/firebasejs/10.12.2/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/10.12.2/firebase-auth-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/10.12.2/firebase-firestore-compat.js"></script>
<script src="./firebase-config.js"></script>
この4行を追加しただけでは、ログインやデータ保存はまだ動きません。
ツール側には、Firebaseの初期化、ログイン、Firestoreへの保存・読み込みなどの処理も必要です。
AIに修正を依頼する場合は、HTMLファイルと一緒に、たとえば次のように伝えます。
このHTMLのツールに、Firebase AuthenticationによるGoogleログインと、Cloud Firestoreへのデータ保存・読み込みを実装してください。
設定情報はfirebase-config.jsから読み込み、データはusers/{uid}/配下のコレクションに保存してください。
未ログイン時は業務データを表示せず、ログアウト時にも画面から消してください。
既存の保存データがある場合は、移行方法も説明してください。
.firebaserc
使用するFirebaseプロジェクトのIDを指定します。
{
"projects": {
"default": "あなたのプロジェクトID"
}
}
ここに入れるのは、表示用のプロジェクト名ではなく、プロジェクトIDです。
firebase.json
公開するフォルダと、セキュリティルールのファイルを指定します。
{
"firestore": {
"rules": "firestore.rules"
},
"hosting": {
"public": "public",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
],
"headers": [
{
"source": "**",
"headers": [
{
"key": "Cache-Control",
"value": "no-cache, no-store, must-revalidate"
}
]
}
]
}
}
この例では、更新した内容を確認しやすくするため、公開ファイルをブラウザに保存しない設定にしています。
キャッシュとは、一度読み込んだファイルを保存して、次回の表示を速くする仕組みです。便利な一方、設定によっては更新前のファイルが表示されることもあります。
画像などを長期間キャッシュしたい場合は、運用に合わせて設定を分けてください。
参考：Firebase Hostingのキャッシュ動作を管理する
firestore.rules
データを誰が読み書きできるかを設定します。
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
// ログインした人が、自分のデータだけを読み書きできる
match /users/{uid}/{document=**} {
allow read, write: if request.auth != null
&& request.auth.uid == uid;
}
// それ以外の場所へのアクセスは禁止
match /{document=**} {
allow read, write: if false;
}
}
}
このルールの意味は、次のとおりです。
users/ユーザーID/ 配下のデータを読み書きできるのは、ログイン中のユーザーIDと、保存先のユーザーIDが一致する場合だけ。
この設定なら、ほかの人がログインしても、私のデータにはアクセスできません。
ただし、ログインできる人を私一人に限定するルールではありません。 ほかの人も、自分のユーザーIDに対応する保存先は利用できます。
また、このルールで保護できるのはFirestoreに保存したデータです。HTMLやJavaScriptに売上情報などを直接書き込んだまま公開しないようにしてください。
動作確認のためであっても、安易に if true へ変更するのは避けましょう。そのルールが適用される場所を、誰でも読み書きできるようになってしまいます。
手順6｜公開する
ターミナルを開き、作成したフォルダに移動します。
次の例は、「書類」フォルダ内に dashboard を作った場合です。別の場所に作った場合は、パスを変更してください。
cd ~/Documents/dashboard
続いて、Firebaseにログインします。
npx firebase-tools@latest login
ブラウザが開いたら、Firebaseプロジェクトを作成したGoogleアカウントを選び、ログインを許可します。
最後に、公開用のコマンドを実行します。
npx firebase-tools@latest deploy --only hosting,firestore:rules
完了すると、次のようなメッセージと公開URLが表示されます。
✔ Deploy complete!
Hosting URL: https://あなたのプロジェクト.web.app
これで、サイトの公開と、Firestoreのセキュリティルールの反映が完了します。
公開後は、ログイン、データの保存、再読み込み後の表示を確認しましょう。PCで保存した内容をiPhoneでも確認できれば、端末をまたいで使えるようになっています。
実際につまずいた3つのこと
手順だけを見るとシンプルですが、私も途中で何度か手が止まりました。
特に時間がかかったのは、次の3つです。
1. npmでインストールできなかった
最初は、記事で見かけた次のコマンドを実行しました。
npm install -g firebase-tools
ところが、こんなエラーが表示されました。
npm error code EEXIST
npm error EACCES: permission denied, mkdir '/Users/あなたのユーザー名/.npm/_cacache/...'
私の場合は、過去に sudo を付けてnpmを実行した影響で、キャッシュの一部が管理者の所有になっていました。そのため、通常のユーザー権限では書き込めなくなっていたようです。
そこで、キャッシュの所有者を自分に戻しました。
sudo chown -R "$(whoami)" "$HOME/.npm"
これは、自分のホームフォルダ内にあるnpmキャッシュの所有者が原因だった場合の対処法です。同じようなエラーでも、原因が違えば必要な対応も変わります。
その後は、グローバルインストールではなく、npx で実行する方法に切り替えました。
npx firebase-tools@latest login
npx を使うと、Firebase CLIをグローバルインストールせずに実行できます。
ただし、npx もnpmのキャッシュを使うため、キャッシュの権限エラーまで自動で解消されるわけではありません。私の場合は、先に所有者を修正する必要がありました。
2. iPhoneでログイン画面に戻されてしまった
公開が終わり、Macではログインできました。
ところが、iPhoneで開いてみると、ログインしたはずなのに、またログイン画面へ。何度試しても同じ状態でした。
調べると、リダイレクト方式のログインでは、アプリのドメインと認証に使うドメインが異なる場合、ブラウザのストレージ制限の影響を受けることがあるとわかりました。Firebaseの公式ドキュメントでも案内されています。
参考：リダイレクト方式のログインに関するベストプラクティス
私の設定では、認証に使う authDomain が次の形式になっていました。
プロジェクト名.firebaseapp.com
そこで、ダッシュボードも同じドメインで開くようにしました。
変更前：
https://プロジェクト名.web.app
変更後：
https://プロジェクト名.firebaseapp.com
Firebase Hostingでは、この2つの標準ドメインから同じサイトを開けます。
私の場合は、開くURLを変えることで解消しました。 ファイルを公開し直す必要もありませんでした。
ただし、同じ症状でも原因は一つとは限りません。.web.app のURLを使いたい場合や、変更しても直らない場合は、authDomain などの設定を確認してください。
3. プロジェクトIDを書き換えたつもりになっていた
もう一つは、設定ファイルの保存漏れです。
.firebaserc のプロジェクトIDを変更したつもりが、実際には反映されておらず、次のエラーが出ました。
Error: Invalid project id: ここにプロジェクトIDを入れる.
つまり、「ここにプロジェクトIDを入れる」という説明文が、そのまま残っていたということです。
エラーが出ると焦りますが、まずは表示された文章を読んでみるのが大事だと実感しました。今回も、原因はメッセージに書かれていました。
無料枠でどのくらい使える？
Cloud Firestoreの主な無料枠と、今回のダッシュボードの規模を比べてみました。
無料枠の数値は、Cloud Firestoreの公式情報に基づきます。実際の読み取り回数は、データの取得方法やリアルタイム更新の有無などによって変わります。
参考：Cloud Firestoreの使用量と上限
ウェブページを配信するFirebase Hostingにも、別途上限があります。Sparkプランのデータ転送量は360MB／日です。
参考：Firebaseの料金
今の私の使い方では、無料枠に十分収まっています。ただ、使い方やデータ量が変わることもあるので、ときどき管理画面で使用量を確認しておくと安心です。
画像を別ファイルにしたら、HTMLが軽くなった
容量を確認した際、背景画像を直接埋め込んだHTMLファイルが、約368KBあることに気づきました。
画像を別ファイルに分けると、HTML本体は約111KBに。
画像の読み込み自体が不要になるわけではありませんが、画像側にキャッシュを設定すれば、次回以降の読み込みを減らせます。
HTMLに大きな画像を埋め込んでいる場合は、ファイルを分ける方法も検討してみてください。
iPhoneのホーム画面に追加する
スマホからよく使うなら、ホーム画面に追加しておくと便利です。
Safariでダッシュボードを開き、共有メニューから 「ホーム画面に追加」 を選びます。
ホーム画面のアイコンから直接開けるようになるので、毎回URLを入力したり、ブックマークを探したりする必要がなくなります。
アドレスバーのないアプリのような表示になるかどうかは、サイト側の設定などによって異なります。また、ログイン状態が切れた場合は、再ログインが必要です。
安心して使うために、やっておきたいこと
Googleアカウントの2段階認証を設定する
今回のツールでは、Googleアカウントで本人確認を行います。
そのため、データを守るには、Googleアカウント自体を安全に管理することも大切です。2段階認証を設定しておきましょう。
定期的にバックアップを取る
私はダッシュボードに「JSONで書き出す」ボタンを付けて、月末にデータを保存しています。
クラウドに保存していても、誤って削除したり、プログラムの不具合で上書きしたりする可能性はあります。
元に戻せるデータを別に残しておくと安心です。
動かないからといって、ルールを安易に緩めない
保存できないときは、まずログイン状態やデータの保存先が、セキュリティルールと一致しているかを確認します。
エラーを解消するためだけに if true へ変更すると、第三者もデータを読み書きできる状態になってしまいます。
AIに修正を依頼するときも、「アクセス制限を維持したまま原因を調べて」と伝えておくとよいと思います。
おわりに
「バックエンド」と聞くと難しそうに感じていましたが、作業を一つずつ分けると、何を設定しているのか少しずつわかるようになりました。
Firebaseで保存先とログイン機能を用意し、AIにツール側の修正を手伝ってもらう。最後に公開すると、自分のMacだけで使っていたダッシュボードを、iPhoneからも確認できるようになりました。
一番時間がかかったのは、設定そのものよりも、途中で出たエラーの原因を調べることでした。同じところで困った方の参考になればうれしいです。
🎁 完成版のダッシュボードを販売しています
この記事で紹介したダッシュボードを、だれでもそのまま使える「完成版」に整えました。
案件・売上・請求書・見積書を1画面でまとめて管理できます。請求書・見積書のPDF発行や、6つの配色にも対応しています。
👉 一人仕事のためのダッシュボード｜案件・売上・請求書・見積書をまとめて管理【ダウンロード版】
買う前に、無料デモで画面を触ってみることもできます。
🔗 https://dashboard-demo-dbc.pages.dev/
よかったチェックしてみてくださいね❤️
