ノーコードでWebアプリ作成～glide編～

2020年11月19日 19:37

みなさんはプログラミングの知識不要でWebアプリが制作できる「ノーコードツール」はご存知でしょうか？
ノーコードツールを提供しているサービスはたくさんありますが、今回は「Glide（グライド）」というサービスを使って、簡単な社員管理Webアプリを作成しようと思います！

Glideとは

Glideは2018年にスタートしたノーコードツールのサービスです。
Googleスプレッドシートをデータベースとして使え、PWAが簡単に制作出来ます。
PWAとは「Progressive Web Apps」の略で、モバイル向けWebサイトをスマホ向けアプリ（ネイティブアプリ）のように使える仕組みのことです。
Glideはあらかじめたくさんのテンプレートが用意されているので、簡単にWebアプリが制作出来ます。

完成版アプリ

完成した「社員管理アプリ」がこちらです。
社員の名前、メアド、電話番号、働いている場所などが分かるようになっています。

アプリの作成手順

ではテンプレートを使用してアプリを作成していきます！

１．Glideにサインアップ（ログイン）
まずGlideに「Log in」します。
まだ登録していない場合は「Sign UP」します。
サインアップ時にはGoogleアカウントを聞かれるので設定しておきます。
（Googleアカウントと連携することでGoogleスプレッドシートをデータベースとして利用可能になります）

２．テンプレート選択
こちらがログイン後のメイン画面になります。
左下のメニューから「Templates」をクリックします。

３．テンプレートを選択
たくさんアプリのテンプレートが表示されました。
今回はこの中から「Employees」を選択します。

４．テンプレートをコピーする
「Copy Template」をクリックします。

もう一度右上の「COPY TEMPLATE」をクリック！

５．編集画面
Glideのアプリ編集画面が表示されました。
左側にはメニュー、右側にはプロパティーが表示されています。

左側のメニュー項目はこんな感じになっています。

５−１．レイアウト
まずレイアウトの編集画面を見てみます。

デフォルトのスタイルは「タイル」になっていますね。
スタイルはタイルのまま、タイルの行数を変更してみます。
「Tiles per row」のスライダーを変更して、タイルの行数を２行から３行に変更しました。

スタイルは「タイル」の他に「リスト」「コンパクト」「カレンダー」「マップ」「チェックリスト」「カード」などが用意されています。

５−２．タブ
次はアプリの下部に表示されるタブ項目の設定を見てみます。
現状タブ項目は「Stuff」「Locations」「Me」の３つに設定されています。
右上の＋ボタンで新しいタブ項目を追加可能です。

タブ項目のラベル、アイコン変更できます。

５−３．データベース
データベースの編集画面です。
テンプレートからアプリを作成した段階で、自分のGoogleスプレッドシートにデータベースが作成されます。
現状では「Stuff」「Locations」「User Profile」の３つのデータベースが存在しています。（左下のシートタブ）
右下の「+」ボタンでシート（データベース）を増やすこともできます。
右上の「Add Column」ボタンでDBの列を追加可能です。

５−４．Preview as
「Preview as」のユーザーを選択すると、そのユーザーにログインした状態で画面表示を確認することができます。

５−５．Settings
その他の設定です。

設定項目はたくさんありますが、今回は「Privacy」の項目でプライバシー設定を見ておきます。
誰でも閲覧可能な「Public」、e-mail登録が必要な「public with email」が選択できます。さらにパスワード認証が必要であれば「PRIVATE SIGN-IN」で「Limit access by password」を設定します。