簡単にPWAアプリが作成できるサービス、Glide

ノーコードで簡単にPWAアプリが作成できるサービス、Glide

スマホアプリを作りたいけど、システム会社に見積もりを出してもらうと「こんなにコストが掛かるのか・・・」と、思うことも少なくありません。 そんな中、最近注目されている、プログラミング不要でPWAアプリを開発できるサービスの中から、今回は「Glide」というサービスを紹介します。
「カワリニ」編集部

PWAアプリとは?

Webサイトをスマホアプリのように使えるようにする仕組みです。

通常、スマホアプリを作成する場合は、iOS向けとAndroid向けなどを別々に作成する必要があり、それぞれに開発コストが掛かります。
また、アプリを公開するには審査が必要であったり、Webサイトを作る以上にコストが掛かってしまうのがスマホアプリ開発です。

PWAアプリの場合は、一度サイトを作ってしまえばiOS、Android問わず使用できてコストが抑えられるというメリットがあります。

Glideとは?

Googleのスプレッドシートを用いて、アプリを作成できるサービスです。

Glide

・Glide公式ページ(英語)
https://www.glideapps.com/

スプレッドシートに各種データを準備するだけで、プログラミングは必要ありません。

画面を操作しながらアプリが作成できるので、エンジニア以外の方でも簡単にアプリを作成することが可能です。

Create an app from a Google Sheet in five minutes, for free.
これはGlideのキャッチコピーですが、簡単なアプリなら5分間で作れるというのは本当です。(驚き)

今回作るPWAアプリ

社員やアルバイトの情報をExcelやスプレッドシートの名簿で管理している会社さんもいるかと思います。

人の管理をより簡単に、そして人ごとのマイページを作成して、個人の情報を集約して表示できるアプリを作成します。

Glideでアプリを作成する流れ

スプレッドシートを準備する

まずスプレッドシートでデータを準備します。

今回は社員の情報から、各社員のマイページを表示するアプリを作成するため、下記のように社員の情報をスプレッドシートに準備します。

スプレッドシートにデータを準備する

1行目は項目名を記述し、2行目からデータを記述します。

今回は3人分準備しました。

Glideで新規アプリを作成する

下記のリンクからGlideの画面を開きます。
https://www.glideapps.com/

ヘッダの「Get Started」ボタンをクリックします。

Glide GetStarted

「Sign Up」の画面が表示されるので「Continue with Google」をクリックし、Googleアカウントを選択します。

Glide Sign Up

サインインが完了すると、以下の画面が表示されるので、「Apps」の「Create app…」から「From Google Sheet…」をクリックします。

Glide 新しいアプリの作成

 

ファイルを選択する画面になるので、先ほど作成したスプレッドシートを選択し、「Select」ボタンをクリックします。

select a file

ファイルを選択すると、中身が自動的に解析され、以下のようにアプリ作成画面が表示されます。
デフォルトではデータが一覧形式で表示され、ここからカスタマイズしていくことができます。

Glideアプリの初期状態

 

左サイドメニューの「Layout」(メニューの一番上、デフォルトで選択済み)から、アプリのレイアウトに関する内容を設定できます。
今回作成するアプリはマイページで、個人ごとのページを表示したいので、レイアウトを変更します。

右サイドメニューの「STYLE」の部分が利用できるレイアウトの種類です。
ここで以下のように「Details」を選択すると、詳細ページのようなイメージで個人ごとのページが表示できます。

Glideアプリのレイアウト Details

 

「Details」を選択すると、真ん中のアプリ画面の表示が変わります。

Glideアプリ Detailレイアウトでの表示

 

これで個人の情報を表示できるレイアウトに変更できました。
スプレッドシートに準備したデータが縦並びで表示されるレイアウトになっています。

ログイン認証を付ける

ログイン認証の設定

ここまでで簡単なアプリが作成できましたが、マイページでは自分の情報だけが見れる必要があるので、ログイン認証を付けます。

左サイドメニューの「Settings」(歯車マーク)をクリックします。

Glideアプリの設定

右サイドメニューに設定できる内容が表示されます。

Glideアプリの設定

 

ログイン認証をするためには、「SIGN-IN」タブをクリックします。
デフォルトでは「Sign In」が「Public」となっていて、アプリを公開すると誰でも見ることができる設定になっています。

Glideアプリのサインイン設定

「Sign In」を「Public with email」に変更します。

Glideアプリの設定 メールアドレス認証でサインイン

 

「Public with email」とは、ログイン時にメールアドレスの入力が必要になる設定です。
メールアドレスを入力すると、PINコードがメールで送られてくるので、そのコードを入力するとログインできる、という仕組みになります。

ログインしたユーザーでフィルタを掛ける

再度、左サイドメニューから「Layout」メニューをクリックします。

Glideアプリのレイアウト

フィルタを掛けるには右サイドメニューから「FEATURES」タブをクリックします。

レイアウト機能

ここで表示内容にフィルタを掛けることができます。
「Add Filter」をクリックします。

「メールアドレス」と「is signed-in user」を選択します。
これでメールアドレスがログインしたユーザーと同一のものが表示されるようになります。

メールアドレスがサインインユーザー

上記の設定を行うと、フィルタが適用され、真ん中のプレビュー画面に何も表示されなくなります。
メールアドレスがログインしたユーザーと同一のものを表示する、というフィルタが掛かったためで、アプリの編集中は未ログインなので何も表示されなくなるということです。

ログインした状態にして表示の確認をするには、左サイドメニューの「Preview as」(人型マーク)をクリックします。

Glideアプリのプレビュー

ログインユーザーのメールアドレスを指定する形でプレビューを確認することができます。

Glideアプリのプレビュー入力

 

メールアドレスを指定すると、真ん中のアプリの画面が指定したメールアドレスに一致するユーザーの内容で表示されます。

Glideアプリのプレビュー確認

 

アプリの公開

作成したアプリを公開して利用できるようにするには、アプリ表示部分の右上(右サイドメニューの左隣)の「SHARE」をクリックします。
公開のウインドウが表示されるので、「Publish app」をクリックします。

Glideアプリを公開

 

これでアプリが公開されました。

Glideアプリの公開が完了

 

「APP LINK」という項目でURLを変更することが可能です。
「APP LINK」の隣の「Copy」ボタンをクリックすると、URLがコピーできます。

表示されているQRコードを読み取って、アプリを開くことも可能です。
また、GlideのPWAアプリは、PC/スマホどちらからでも利用可能となります。

アプリを開くと、以下の画面のようにサインイン画面になるので、メールアドレスを入力して、「続行する」ボタンをクリックします。

Glideアプリのサインイン

 

PINコードがメールで送られてくるので、それを入力し、「サインイン」ボタンをクリックします。
※万が一、メールが届かない場合は、迷惑メールフォルダを確認してみてください。

GlideアプリのPINコード入力

ログインすると、ログインしたユーザーに基づいて、画面が表示されます。

Glideアプリのログイン完了

 

Glideを使うと、ノーコードで簡単にアプリを公開できる

実際にアプリを公開する手順を紹介しましたが、簡単なアプリであれば作成から公開まで数分で出来ます。

Glideでは利用できる項目や機能などがたくさん用意されていますし、今後も様々な機能が追加されていくと思います。
アイデア次第でいろんなアプリが作成できると思いますので、ぜひ使ってみてください。

今後もGlideの使い方を紹介していきたいと思います。

▼以下、公式ドキュメント(英語)

・Twitter
https://twitter.com/glideapps

・イントロダクション
https://www.glideapps.com/learn-to-glide

・ライブラリ
https://docs.glideapps.com/all/

・テンプレート
https://www.glideapps.com/templates

Glideには予め用意されているテンプレートがあり、気に入ったものがあれば利用することが可能です。

・フォーラム
https://community.glideapps.com/

英語ですが、たくさんの開発者の方によって、質問などがたくさんやり取りされています。

 

ギルドプロジェクトではサービス、システムの導入や、日々の業務の自動化などの業務効率化を代行する「カワリニ」というサービス展開しております。

問い合わせは無料で対応させていただいております。
社内にエンジニアがおらず、専門ではない方がシステムに関する作業を行っている場合や、外部に委託したかった等、お気軽にお問い合わせください。

カワリニに相談する