今回の対象読者
Googleスプレッドシートでデータを管理している際に、データ入力にばらつきが出たり、データ量が多すぎてシートが重くなったりしたことはありませんか？
今回は、GoogleスプレッドシートのデータをCRUDする社内向けシステムを構築したい方に向けて、ローコードツールの『Querier（クエリア）』を使って、10分で画面を構築する方法を紹介していきます。
今回作る社内向けシステム
今回は、以下の要件を満たす管理画面を作ってみます。
- Googleスプレッドシートからデータを取得し、テーブルに表示する
- バリデーションの設定されたフォームから、安全にデータを入稿する
クエリアとは
クエリアは様々なデータベースやAPIと連携し、社内向けの管理画面やツールをローコードで構築できるサービスです。
実際に管理画面を構築する前に、クエリアの編集画面の構成を解説します。
大き分けて、 データフロー というロジックを記述する部分と、 コンポーネント というUIに関わる部分に分かれています。
右ナビゲーションのコンポーネント一覧から、中央のキャンバスにドラッグ・アンド・ドロップでコンポーネントを配置し、左ナビゲーションで各データソースに対するリクエストやロジックを記述していきます。
3分で分かるクエリアの紹介動画もあるので、ご興味ある方はぜひ見てみてください。
クエリアとGoogleスプレッドシートを連携する
早速、クエリアとGoogleスプレッドシートを連携する設定をしていきます。
まずは、クエリアに移動し、左の [データ連携] タブから、データ連携の設定ページに行きます。
[新規作成] > [Google Sheets] と選択し、[Sign in with Google] からGoogle認証をします。
次に、[ファイルを選択する] から連携したいスプレッドシートを選択します。
これで、クエリアとGoogleスプレッドシートを連携する初期設定は完了です。
詳細な接続方法はこちらの公式ドキュメントをご覧ください。
新しいページを作成する
データ連携が完了したら、新しいページを作成します。
プロダクトトップ右上の、 [新規作成] > [ページを作成] から、新しいページを作成します。
クエリアでは、フォルダとページという概念があり、ページをフォルダリングして、階層構造で管理できるので、ページが増えてきても管理が煩雑になることはありません。
社員データを取得し、テーブルに表示する
以下の手順でGoogleスプレッドシートから社員を取得し、テーブルに表示していきます。
Googleスプレッドシートからデータを取得するデータフローを作成する
- 作成したページの [ページを編集] から編集画面に行く
- 左ナビゲーションの [新規作成] から、データフローを作成する
- [アクションを選択] パネルで、先程連携したGoogleスプレッドシートを選択する
-
[Action] で、
Get valuesを選択する -
[シート名] に
社員名簿と入力する - [アクションをテスト] ボタンを押し、正しくデータが取得できているか確認する
テーブルを配置し、データフローと紐付ける
- 右ナビゲーションの [テーブル] を中央にドラッグ・アンド・ドロップする
- 右ナビゲーションの [データ] に
{{ dataflow1.data }}と入力する
- 右ナビゲーションの [カラム] の設定から、任意でカラム名やカラムタイプ、カラムの順番を変更する
- テーブルの表示を確認する
社員の追加機能を実装する
今回は、氏名、年齢、性別、入社日で社員を作成する例を紹介します。
フォーム系コンポーネントを配置する
- 右ナビゲーションの [モーダル] をページ上部にドラッグ・アンド・ドロップする
- 右ナビゲーションの [インプット] を 4つ [モーダル] 内部に配置する
- 右ナビゲーションの [ラベル] にそれぞれ
氏名,氏名（カナ）,年齢,入社日と入力する -
年齢のインプットは [タイプ] をNumberに変更する -
入社日のインプットは [タイプ] をDateに変更する - 右ナビゲーションの [セレクト] を [モーダル] 内部にドラッグ・アンド・ドロップする
- 右ナビゲーションの [ラベル] に
性別と入力する - 右ナビゲーションの [Values] に
["男", "女"]など、性別の配列を入力する - 右ナビゲーションの [ボタン] を中央にドラッグ・アンド・ドロップする
- 右ナビゲーションの [ラベル] に
作成すると入力する
Googleスプレッドシートにデータを追加するデータフローを作成する
- 左ナビゲーションの [新規作成] から、データフローを作成しする
- [アクションを選択] パネルで、先程連携したGoogleスプレッドシートを選択する
-
[Action] で、
Append valuesを選択する -
[シート名] に
社員名簿と入力する - [パラメーター] に画像のように入力する
※クエリアでは、{{ }} という記法を使って、コンポーネントの値を参照することができます。
ボタンとデータフローを紐付ける
ボタンを押下したら、上で作成したデータフローが実行されるようにしたいので、以下の手順で設定していきます。
- 配置した [ボタン] を選択する
- 右ナビゲーションの [イベントを追加する] をクリックする
-
[実行するアクション] を
データフローの実行にする -
[データフロー] で、先程作成した
dataflow2を選択する
社員データを作成した後にモーダルを閉じ、テーブルをリフレッシュする
- [dataflow2] を選択する
- [成功時に実行するアクション] から [ウィジェットの操作] をクリック
-
[ウィジェット] で
modal1を選択 -
[モーダルの状態] で
Closeを選択 - [成功時に実行するアクション] から [イベントを追加] をクリック
-
[実行するアクション] を
データフローの実行にする -
[データフロー] で、商品データの取得をする
dataflow1を選択する
これで、社員データの追加が成功したら、モーダルを閉じ、再度社員一覧を取得し直す設定が完了しました。
同じような要領で更新や削除、ファイルのアップロードなども行えるので、基本的な管理画面の要件は満たす十分な機能を備えています！
権限管理
権限管理をツール側に移譲できるのは、ローコードツールを利用する大きなメリットの一つです。
クエリアでは、様々な権限管理をGUIで操作するだけで完結します。
クエリアでは、各ページに対して、メンバーごとに、「フルアクセス」、「閲覧のみ」、「アクセス不可」の権限を割り振ることができます。
その他にも様々な権限管理をすることができますので、詳しくは公式ドキュメントをご参照ください。
クエリアであれば、スプレッドシートのデータ入力の課題を解決できる
今回は、ローコードツールのクエリアを使ってGoogleスプレッドシートのCRUD操作ができる管理画面を構築していきました。
スプレッドシートは、データ量が多くなってくると急激に重たくなったり、バリデーションが難しく、入力規則のズレや入力漏れが発生してしまうなどの課題が存在します。
ローコードツールを使ってUIを構築すれば、そういった悩みを解決することができます。
ぜひ一度試して、その効果を実感してください。
Discussion