今回の対象読者
Firebase Authでユーザーを管理する際、ユーザー情報のCRUD操作を行う管理画面の開発に苦労した経験はありませんか？
今回は、 とにかく早く、Firebase Authのユーザー管理画面を作りたい方に向けて、ローコードツールの『Querier（クエリア）』を使って、10分で管理画面を構築する方法を紹介していきます。
今回作る管理画面
今回は、メールアドレスでFirebase上に存在知るユーザーの情報を検索する管理画面を作ってみます。
クエリアとは
クエリアは様々なデータベースやAPIと連携し、社内向けの管理画面やツールをローコードで構築できるサービスです。
実際に管理画面を構築する前に、クエリアの編集画面の構成を解説します。
大き分けて、 データフロー というロジックを記述する部分と、 コンポーネント というUIに関わる部分に分かれています。
右ナビゲーションのコンポーネント一覧から、中央のキャンバスにドラッグ・アンド・ドロップでコンポーネントを配置し、左ナビゲーションで各データソースに対するリクエストやロジックを記述していきます。
3分で分かるクエリアの紹介動画もあるので、ご興味ある方はぜひ見てみてください。
クエリアとFirebaseを連携する
早速、クエリアとFirebaseを連携する設定をしていきます。
まずは、FirebaseやGCP上から、適切な権限が付与されたサービスアカウントを取得します。
次に、クエリアに移動し、左の [データ連携] タブから、データ連携の設定ページに行きます。
[新規作成] > [Firebase] と選択し、Firebase/GCPの [Project ID] と [Credentials JSON] を入力して、保存します。
これで、クエリアとFirebaseを連携する初期設定は完了です。
詳細な接続方法はこちらの公式ドキュメントをご覧ください。
新しいページを作成する
データ連携が完了したら、新しいページを作成します。
プロダクトトップ右上の、 [新規作成] > [ページを作成] から、新しいページを作成します。
クエリアでは、フォルダとページという概念があり、ページをフォルダリングして、階層構造で管理できるので、ページが増えてきても管理が煩雑になることはありません。
ユーザー情報を取得し、KeyValueコンポーネントに表示する
以下の手順でメールアドレスで検索し、Firebase Authからユーザー情報を取得します。
Firebase Authからユーザー情報を取得するデータフローを作成する
- 作成したページの [ページを編集] から編集画面に行く
- 左ナビゲーションの [新規作成] から、データフローを作成する
- [アクションを選択] パネルで、先程連携したFirebaseを選択する
-
[サービス] で、
Authを選択する -
[Action] で、
Get user by emailを選択する - [Email] にテスト用のメールアドレスを入力する
- [アクションをテスト] ボタンを押し、正しくデータが取得できているか確認する
必要なコンポーネントを配置し、データフローと紐付ける
- 右ナビゲーションの [カラム] を中央にドラッグ・アンド・ドロップする
- 右ナビゲーションの [インプット] を [カラム] の左にドラッグ・アンド・ドロップする
- 右ナビゲーションの [ラベル] に
メールアドレスと入力する - 右ナビゲーションの [ボタン] を [カラム] の右にドラッグ・アンド・ドロップする
- 右ナビゲーションの [ラベル] に
検索すると入力する - [カラム] の左右の幅を調整する
- 右ナビゲーションの [KeyValue] をドラッグ・アンド・ドロップする
- 右ナビゲーションの [データ] に
{{ dataflow1.data }}と入力する - 右ナビゲーションの [Row] の設定から項目名を変更する
- 右ナビゲーションの [Row] の設定からタイプを変更する（タイプを
Imageなどにすると自動で画像表示になったりします）
ユーザーの入力によって検索できるようにデータフローを調整する
- 左ナビゲーションから [dataflow1] をクリックする
- [action1] をクリックする
-
[Email] を
{{ input1.value }}に書き換える
これで、インプットに入った情報をもとに、ユーザーを検索する機能を実装することができました。
もちろん、その他色々なアクションに対応しているので、Firebase Auth内のユーザー情報をCRUDする機能も作成することができます！
権限管理
権限管理をツール側に移譲できるのは、ローコードツールを利用する大きなメリットの一つです。
クエリアでは、様々な権限管理をGUIで操作するだけで完結します。
クエリアでは、各ページに対して、メンバーごとに、「フルアクセス」、「閲覧のみ」、「アクセス不可」の権限を割り振ることができます。
その他にも様々な権限管理をすることができますので、詳しくは公式ドキュメントをご参照ください。
ローコードであれば、管理画面開発がエンジニア1人で完結する
今回は、ローコードツールを使ってFirebase Authのユーザー情報を検索する管理画面を構築していきました。
管理画面の開発は、常にエンジニアのリソースを圧迫し、悩みの種の一つになっていると思います。
ローコードツールを使えば、ツールが提供する整ったUIコンポーネントをドラッグ・アンド・ドロップで配置するだけなので、UIに関して考えることは一切ありません。
データ構造を一番理解しているバックエンドエンジニア一人で管理画面の開発が完結します。
これにより、手を動かす時間はもちろん、デザインバグやAPIのデータ設計のやり取りなどの時間を削減でき、大幅に管理画面開発全体の工数を削減することができます。
このように、管理画面をローコードで開発する方法は、エンジニアのリソースを削減する有力な手段です。特にスタートアップや時間とリソースに制限があるプロジェクトにおいて、このアプローチは非常に有用です。
ぜひ一度試して、その効果を実感してください。
Discussion