Querierで名簿管理画面を作成する①

# Querier(クエリア)とは
社内向けの管理画面を、柔軟かつ速く作成することができるローコードツールです。
[公式HP](https://www.querier.io/)では大きな特徴として以下の3点が紹介されています。

 - コンポーネントをドラッグ＆ドロップでカンタンに構築できます。
 - 様々なデータソースと連携できます。
 - コードが書けることで高い自由度をキープ。

なお、料金形態は以下のとおりで、初回アカウント作成後14日間は無料ですべての機能が使用できる「プロ」プランが利用可能です。
※今回作成した機能は完全無料の「パーソナル」プランでも問題なく実装できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3128319/6a316ec5-c177-50d3-50de-676e4d2a9731.png)

# 完成イメージ
[ユースケース](https://www.querier.io/usecases)を参考に「社内名簿管理画面」を作成しました。
連携したデータソースはGoogleSpreadsheetです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3128319/f5e27102-ef27-3120-1d75-dcd4f0ed9807.png)
この画面では、ユーザーの`追加` `更新` `削除` `検索`の操作ができます。

以下「社内名簿管理画面」の作成手順について2回に分けて記事を投稿します。
今回の記事はデータ連携や実際に画面にデータを表示する方法について記載します。
 - データ連携　
 - 画面作成
 - データ表示
 
 [次回の記事](https://qiita.com/matsuko003/private/c19ddc92b55ad22f3918)では連携したデータに対して、以下の実装方法について記載します。
 - 追加
 - 更新
 - 削除
 - 検索

 # 事前準備
 ①クエリアのアカウントを作成し、ログインしておく。
 ②クエリアと連携するデータを用意しておく。
 今回はGoogleSpreadsheetでダミーの社内名簿を作成しました。
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3128319/297a4847-99ad-2bc2-e770-b3330b7c2a19.png)

# データ連携
①まずクエリアと名簿のデータを連携します。
トップページのデータ連携をクリックし、新規作成をクリックします。
![無題1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3128319/3d354914-b34b-3c7d-baa9-42cc5a793b41.png)

②連携するデータタイプで「Google Sheets」を選択します。
![無題2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3128319/0d4f6fbf-5157-af91-cfdc-61574fe4d69f.png)

③Googleアカウントとの連携を行います。「Sign in with Google」をクリックします。
![無題3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3128319/d8009916-4294-505c-45a2-68f8a55341da.png)

④連携するアカウントをクリックします。
![無題4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3128319/7aeaae6d-855c-0b6a-3676-fe0f7d7d83b6.png)

⑤すべて選択をクリックし、続行をクリックします。
![無題5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3128319/48ea8389-5437-1309-4c44-9a036a2ac2f3.png)

⑥アカウントの連携が完了しました。
最後に、任意の表示名と、ファイル名欄に連携したいスプレッドシートを設定し、作成するをクリックします。
![無題6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3128319/c0b845a0-3717-94f4-a71f-ce9ad6a784b8.png)

⑦データの連携が完了し、⑥で設定したスプレッドシートが登録されました。
![無題7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3128319/6d45eecb-4d36-346b-1c5d-c7b9816792f2.png)

# 画面作成
連携したスプレッドシートのデータを表示させる、新しい画面を作成します。
①アプリ一覧を開き、新規作成をクリックし、フォルダを作成をクリックします。
![無題8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3128319/e40c6da2-a6db-0e75-1537-da19331d85f3.png)

②フォルダ名は画面右で変更できます。
次にフォルダの中にページを作成します。作成したフォルダから新規作成をクリックし、ページを作成をクリックします。
![無題9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3128319/dc4716c7-0c08-fd83-a6f2-30993fa1ed94.png)

③ページ名も画面右で変更できます。
作成したページからページを編集をクリックすることで画面の編集が可能になります。
![無題10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3128319/476d0192-cb17-626e-14bb-8a6364483d41.png)

④ページを編集をクリックし編集画面を開くと、ダミーのテーブルデータが表示されているので削除します。
画面中央のテーブルをクリックすると、上部にゴミ箱アイコンが表示されるのでクリックし、「本当に削除しますか？」のポップアップも削除するをクリックします。
![無題12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3128319/c1b58a4d-e6a7-074b-2431-f14835c7ea0d.png)

⑤ダミーのデータフローも使用しないので削除します。
画面右の「dataflow1」をクリックし、・・・ボタンからデータフローを削除するをクリックします。
![無題13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3128319/8965a5e7-c934-eaac-c969-1e33d8d7944a.png)
![無題14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3128319/78b4e288-2161-ae33-80e7-3de040885e45.png)

# データ表示
①スプレッドシートのデータを表示します。
データフローリストの新規作成をクリックします。
![無題15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3128319/b32e3ecd-8cf3-ecee-530a-82d4af3eeb4b.png)

②何のデータを登録するか聞かれるので、「データ連携」で連携したスプレッドシートのアイコンをクリックします。
![無題16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3128319/e1d1b0f5-399e-45ee-b9ea-8e60d94556e6.png)

③スプレッドシートのデータに対してのアクション(操作方法)を設定します。
アクションは`Get values` `Append values` `Update values` `Delete values` `Bulk Insert` の中から選択できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3128319/b529092c-cabe-ba3b-10c3-998732a9f682.png)

今回はデータを表示したいので`Get values`を選択し、シート名に連携したいシート名を入力後、実行するボタンをクリックします。
![無題20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3128319/2f32154d-b7f7-6b66-32ec-02f2db783821.png)

連携が完了すると「成功しました」が表示されるので×ボタンを押下しアクション画面を閉じます。
![無題21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3128319/834f097a-5b35-fde2-bc97-78006033f231.png)

④画面右のコンポーネントから「テーブル」を選択し、ドラッグ&ドロップで画面中央に配置します。
![無題18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3128319/8f7be70b-6442-705f-c418-d20ba4323e4e.png)

⑤③で連携したデータが自動でテーブルに反映されました。
もし、連携したいデータを変更したいときは、エディターのデータ欄`{{ dataflow1.data }}`のデータフロー名を変更することで対応できます。
エディターでは他にも、テーブルの列の順番を変更したり、表示する行数を変更したりできます。
![無題19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3128319/5d051f6c-523b-adfc-f444-291b4327b6af.png)

# おわりに
今回の記事はクエリアの概要、データ連携、画面表示まで説明しました。
次回の記事では画面に表示したデータに対して`追加` `更新` `削除` `検索`の機能を実装したいと思います。

# 次回の記事
https://qiita.com/matsuko003/private/c19ddc92b55ad22f3918