RailsのCRUD管理画面をローコードで10分で作ってみた
今回の対象読者
ActiveAdminやRailsAdminなどを使って管理画面を作り、負債が溜まり、メンテナンス性が著しく低くなってしまった経験はありませんか?
今回は、以下のような方に向けて、ローコードツールの『Querier(クエリア)』を使って、10分でCRUD操作のできる管理画面を構築する方法を紹介していきます。
- Ruby on Railsでサービス開発をしている
- 管理画面のメンテナンス性は犠牲にしたくない
- とにかく早く管理画面を構築したい
今回作る管理画面
今回は、以下の要件を満たす管理画面を作ってみます。
- MySQLからユーザー一覧を取得し、テーブルに表示する
- ユーザー名と性別を入力してユーザーデータを挿入する
クエリアとは
クエリアは様々なデータベースやAPIと連携し、社内向けの管理画面やツールをローコードで構築できるサービスです。
実際に管理画面を構築する前に、クエリアの編集画面の構成を解説します。
大き分けて、 データフロー というロジックを記述する部分と、 コンポーネント というUIに関わる部分に分かれています。
右ナビゲーションのコンポーネント一覧から、中央のキャンバスにドラッグ・アンド・ドロップでコンポーネントを配置し、左ナビゲーションで各データソースに対するリクエストやロジックを記述していきます。
3分で分かるクエリアの紹介動画もあるので、ご興味ある方はぜひ見てみてください。
クエリアとMySQLを連携する
早速、クエリアとMySQLを連携する設定をしていきます。
準備が整ったら、クエリアに移動し、左の [データ連携] タブから、データ連携の設定ページに行きます。
[新規作成] > [MySQL] と選択し、MySQLへの接続情報を入力して、保存します。
踏み台サーバーを経由する場合は、こちらから踏み台サーバーを設定し、データ連携画面の [踏み台サーバーを設定する] から紐づけてください。
これで、クエリアとMySQLを連携する初期設定を完了です。
詳細な接続方法はこちらの公式ドキュメントをご覧ください。
新しいページを作成する
データ連携が完了したら、新しいページを作成します。
プロダクトトップ右上の、 [新規作成] > [ページを作成] から、新しいページを作成します。
クエリアでは、フォルダとページという概念があり、ページをフォルダリングして、階層構造で管理できるので、ページが増えてきても管理が煩雑になることはありません。
ユーザー一覧をテーブルに表示する
以下の手順でMySQLからユーザーを取得し、テーブルに表示していきます。
MySQLからデータを取得するデータフローを作成する
- 作成したページの [ページを編集] から編集画面に行く
- 左ナビゲーションの [新規作成] から、データフローを作成しする
- [アクションを選択] パネルで、先程連携したMySQLを選択する
-
[SQL] で、
SELECT * FROM users LIMIT 100
を選択する - [アクションをテスト] ボタンを押し、正しくデータが取得できているか確認する
テーブルを配置し、データフローと紐付ける
- 右ナビゲーションの [テーブル] を中央にドラッグ・アンド・ドロップする
- 右ナビゲーションの [データ] に
{{ dataflow1.data }}
と入力する
- 右ナビゲーションの [カラム] の設定から、カラム名を変更する
- 右ナビゲーションの [カラム] の設定から、カラムタイプを変更する(タイプを
Image
などにすると自動で画像表示になったりします)
ユーザーの追加機能を実装する
今回は、ユーザー名と性別を使ってユーザーを作成する例を紹介します。
フォーム系コンポーネントを配置する
- 右ナビゲーションの [インプット] を中央にドラッグ・アンド・ドロップする
- 右ナビゲーションの [ラベル] に
ユーザー名
と入力する - 右ナビゲーションの [セレクト] を中央にドラッグ・アンド・ドロップする
- 右ナビゲーションの [ラベル] に
性別
と入力する - 右ナビゲーションの [Values] に
["male", "female"]
と入力する - 右ナビゲーションの [Labels] に
["男性", "女性"]
と入力する - 右ナビゲーションの [ボタン] を中央にドラッグ・アンド・ドロップする
- 右ナビゲーションの [ラベル] に
追加する
と入力する
MySQLにデータを追加するデータフローを作成する
- 作成したページの [編集する] から編集画面に行く
- 左ナビゲーションの [新規作成] から、データフローを作成しする
- [アクションを選択] パネルで、先程連携したMySQLを選択する
- [SQL] に以下のSQLを入力する
INSERT INTO users (`name`, `gender`)
VALUES ('{{ input1.value }}', '{{ select1.value }}')
※クエリアでは、{{ }}
という記法を使って、コンポーネントの値を参照することができます。
ボタンとデータフローを紐付ける
ボタンを押下したら、上で作成したデータフローが実行されるようにしたいので、以下の手順で設定していきます。
- 配置した [ボタン] を選択する
- 右ナビゲーションの [イベントを追加する] をクリックする
-
[実行するアクション] を
データフローの実行
にする -
[データフロー] で、先程作成した
dataflow2
を選択する
ユーザーを作成した後にテーブルをリフレッシュする
- [dataflow2] を選択する
- [成功時に実行するアクション] から [イベントを追加] をクリック
-
[実行するアクション] を
データフローの実行
にする -
[データフロー] で、ユーザーデータの取得をする
dataflow1
を選択する
これで、ユーザーの追加が成功したら、再度ユーザー一覧を取得し直す設定が完了しました。
同じような要領で更新や削除、ファイルのアップロードなども行えるので、基本的な管理画面の要件は満たす十分な機能を備えています!
ユーザーに関連するデータを取得する
クエリアでは、関連するデータを取得することもできます。今回は、ユーザーに関連する投稿を取得して表示してみましょう。
データフローの [SQL] に以下のSQLを記述することで、テーブルで選択されたユーザーに関連する投稿を取得することも可能です。
SELECT * FROM posts
WHERE user_id = {{ table1.selectedRow.data.id }}
LIMIT 100
権限管理
権限管理をツール側に移譲できるのは、ローコードツールを利用する大きなメリットの一つです。
クエリアでは、様々な権限管理をGUIで操作するだけで完結します。
クエリアでは、各ページに対して、メンバーごとに、「フルアクセス」、「閲覧のみ」、「アクセス不可」の権限を割り振ることができます。
その他にも様々な権限管理をすることができますので、詳しくは公式ドキュメントをご参照ください。
ローコードであれば、とにかく早く、メンテナンス性も担保できる
今回は、ローコードツールとMySQLを使ってCRUD操作のできる管理画面を構築していきました。
Ruby on Railsで管理画面を迅速に作成する際には、ActiveAdmin、RailsAdminなどのGemがよく使用されます。
これらのGemは、短時間で質の高い管理画面を構築できる点で非常に便利ですが、いくつかの課題があります。その中で特に大きな問題が、メンテナンス性の低さです。
これらのGemは基本的な機能は非常に簡単に追加できますが、特定のカスタマイズが必要になった場合、その実装は複雑になる可能性があります。
管理画面というのは、ビジネスの成長に応じて常に形を変えて、最適なオペレーションの手助けをするツールでなければいけません。
そこで私が提案したいのが、ローコードを利用して管理画面を開発するという選択肢です。
開発速度が格段に向上し、保守や拡張も容易になります。特にスタートアップや時間とリソースに制限があるプロジェクトにおいて、このアプローチは非常に有用です。
ぜひ一度試して、その効果を実感してください。
Discussion