GlideでスプレッドシートからPWAアプリを作ってみた!

GlideではノーコードでPWAアプリを開発することが出来ます。今回は、そのGlideの始め方と、どうやってアプリを作れるのか?を実際にテストアプリを作成しながら説明していきます。

こんにちは、普段はゲーム開発に携わるフリーランスプログラマのエルと言います。

今回は紹介するGlideというサービスは、Googleスプレットシートを利用する形で、PWAアプリ開発が可能になります。また、GUIでの操作によるノーコード開発での出来るサービスになっています。
スマホで使えるアプリを、ノーコードで開発が出来るということで、用意された機能を組み合わせることでお手軽に作成することが可能です。

 

PWAとは

PWAとは「Progressive Web Apps」の略で、モバイル向けWebサイトをスマートフォン向けアプリのように使える仕組みの事を指します。

インストール・更新が不要

皆さんはスマートフォン向けのアプリというと、どんなイメージがあるでしょうか?
僕自身は、アプリストアからインストールしたり、アップデートがあるとストアに飛ばされ更新をするイメージがあると感じています。
PWAの仕組みで作成したアプリは元々はWebサイトのためインストールは不要ですし、アップデートの際も更新する必要がありません。そのため、スマートフォンのスペックに依存しませんし、不具合の修正なども更新せずに反映されます。

ホーム画面にアイコンを置ける

Webサイトですが、スマートフォンのホーム画面にアイコンを置く事が出来ます。
そのため使用者側から見た際は、一般的なアプリと同じように使う事が可能になっています。

 

ノーコードで開発可能

やはり大きい利点として、ノーコードで作成可能という点です。GUI上での操作だけで、アプリ開発をすることが出来ます。

Glideのアカウントを作成するのも非常に簡単です。
公式サイト(https://www.glideapps.com/)にアクセスし、GetStartedからログイン画面に行き、Googleアカウントを選択すれば終わりです。簡単ですね。

 

 

スプレットシートの準備

ホーム画面まで来れたなら、次は実際にアプリを作成することになります。
アプリを作成する際に、スプレットシートと紐づける必要があるため、準備をしていきましょう。
読み込ませる際に、何も記載されていないシートだと、エラーとなって先へ進めないので注意が必要です。

アプリを作成する

何かしらのデータが入力されていれば作成可能ですが、今回このようなデータを用意してみました。

このシートを使用し、Glideでアプリを作成するとこのようになります。項目が羅列されている状態で、既にそれっぽく表示されています。

データの項目を見てみると、先ほど選択したスプレッドシートの内容が表示されているのが確認できます。
右上にある「Add Column」を押すと、縦列を追加することが出来、項目を追加することが可能です。

 

 

UIに変更を加える

最初に記載したように、GUIでUIを変えることが出来るので、いくつか試してみます。
画面右側にある「Properties」の項目をポチポチ押していくだけで、UIが変更されていきます。

 

STYLEの変更

STYLEの部分を見ると、最初Listが選択されています。ここをTilesに変更するとこのような画面になります。
全体的に表示のされ方が変わるのが分かります。

 

DATAの変更

DATAの部分に表示されている、TitleとDetailsを変更してみます。
TitleをNameからJob、DetailsをJobからIDに変更してみます。すると表示されていた項目が変更されます。
この時に選択できる名前は、スプレッドシートで1行目に記述されていた項目名になっています。

OVERLAYSの変更

OVERLAYSの項目に変更を加えると、現在表示されている部分の上に重なる形で表示をすることが可能になっています。
実際に適当なものに変更を加えてみました。

公開してみる

真ん中上部に「SHARE」というボタンがありましたが、そこを押した後に「Publish app」を押すと公開が可能なQRコードと、URLが表示されます。

 

そして、実際にスマートフォンでアクセスした画面がこちらになります。
先ほど編集していた画面を、スマートフォンで確認が出来ました!

 

 

まとめ

このようにGlideでは、Googleスプレッドシートのデータを元に、アプリを作成することが出来ます。

今回は触れませんでしたが、DESIGNやTEXT SYTLEの項目を変更すると、表示されている枠に変更がかかったり、フォントの文字や位置を変更することが可能です。
そういった操作も、全てマウス操作のみ可能になっています。無料で試せるものなので、気軽に練習できるのは良い点だと感じました。もし気になった方は、是非実際に触っていただければと幸いです。

また別途具体的なアプリを、テストで作成出来ればと思います。

 

 

私が参加しているギルドプロジェクトでは、こういったGlideのようなサービスの導入や、サービス間を連携するプログラムの作成などを通して業務効率化を行っており、様々な効率化事例から業務効率化を代行する「カワリニ」というサービスを展開しています。

お問い合わせは無料で対応させていただいていますので、職場に専門の方がいらっしゃず、データ管理をどうしたら良いか分からないなどお困りの場合は、お気軽にお問い合わせください。