噂のNoCodeサービスGlideで、一瞬でPWAがつくれた

✅ はじめに

こんにちは！「あったらいいなを速攻で！」をモットーに活動している有志エンジニアチーム速攻エンジニアリングです。

去る10月に始まったGo To Eatキャンペーンは、近所の飲食店を改めて開拓する良い機会となりましたが、真っ先に感じたのが、
「対応店舗が調べにくい。。。」
ということでした。サイトによって掲載されている店舗が違っていたり、サイト内でフィルタができなかったりしていたためです。

無いなら作るがエンジニア。リリース速度を優先し、流行りのNoCodeサービスを使って作ってみました(※ Go To Eatキャンペーン終了に伴いサービスは終了しています)。

今回はGlideを使用しました。Google SheetをDBとして扱い、ブラウザ上からGUI操作のみでPWAをつくることができます。
今回こういったNoCodeのサービスは初めて触りましたが、たった数時間で大枠を完成させることができました。公式のドキュメンテーションもしっかりしていましたが、それを見ずともさくさくと作りたいものが作れる、良いサービスでした。

(以下、Glide内で作成するアプリケーションのことはApp、Google SheetsのことはSheetsと記述します。)

✅ 今回のアプリ作成の流れ

今回どのような流れで作成したか、ざっくり記載します。

Googleアカウントでログインする

GlideはGoogle SheetsをDBとして用います。Googleアカウントでログインするだけで、Google Drive内にあるGoogle Sheetsと接続させることができます。

Appを作成

DBとして用いたいGoogle Sheetsを選択する、もしくは、テンプレートからAppを作成できます。
テンプレートは、無償有償含め今日現在(2020年11月27日)で、なんと297もの種類が用意されています。

レイアウトを整える

リスト形式, タイル形式, カード形式、はたまたカレンダーやマップ等、Sheetsに保存されているデータをどのようなUIで表示するかを8種類から選択することができます。

機能を整える

ユーザーが使える機能として、フィルタ, 検索ボックス, ソートなどを設定できます。

コンポーネントを整える

詳細ページには、様々なコンポーネントを置くことができます。TextやMedia等の静的なコンテンツはもちろん、Buttons, Pickers, Entry Fields等、ユーザーからのアクションを受付けるものも用意されており、それらに関してはSheetsの値を書き換えることも可能です。

その他を整える

今回利用はしていませんが、レコードに対してユニークな採番をしたり、レコード同士のリレーションを設定したりといった機能もGlide側で用意されています。

独自ドメイン

Pro版から、独自ドメインを設定可能です。

Google Analytics

Pro版から、Google Analyticsも設定可能です。Tracking IDを入力するだけと、お手軽に設定ができます。
今回は17,621ユーザーにご利用いただけました。

✅ TIPSと感想

たいしたものではありませんが、今回の開発で得たTIPSと感想を共有します。

テスト環境がない

テスト環境を提供するような機能は用意されていません。今回の私のように、Glide自体にまだ慣れていない場合、アプリに機能を追加/改善するにしても多少の試行錯誤が必要になりますが、サービスの一般公開後にそれを行おうとする場合、当たり前ですがそれがそのまま本番環境に反映されてしまいます。
そこで今回は次善策として、次のように実装を行っていきました。

1. 本番Appのプロジェクトをコピーする
2. 本番Sheetsのコピーを作成する
3. コピーAppのDB接続先をコピーSheetsにする

これによって、Glideで用意されている機能で自分のやりたいことを実装できるか試行錯誤する場をつくりました。

件数が増えるともっさりする

ユーザー環境により差はありそうだったのですが、レコードが2万件を超えてくるあたりから動作がもっさりしだしました。具体的には、トップの(ヘッダーやフッター以外の)コンテンツ表示まで5秒程度、検索時に表示まで数秒程度、といった具合です。1万行未満のときは瞬時に表示されたので差を感じました。
どうやらGlideのFirestoreとの通信に時間がかかっているようです。
CDNを挟む等の処置を加えたかったですが、こちら側でできることはなかったため、レコード数を1万5千件まで減らすことで対処しました。

Sheetsを使っているので拡張性がある

これはTIPSというよりほぼ感想に近いですが、GlideではGoogle SheetsをそのDBとして用いているため、GASを使えばDB側をかなり拡張できることが期待できます。データを自動で更新したり、フラグ的なカラムをSheetsに持たせることでGlideで表示する項目をダイナミックに制御したり等です。
関連して、Sheets内のセルの再演算には注意が必要です。処理に時間のかかる関数がある場合、その間App上ではその値がブランクになってしまいます。キャッシュ的な役割をもたせるために、関数を入れるセルとその演算結果を入れるセルを分けても良いかもしれません。

アイテムの個別設定

各アイテムで違うコンポーネントを表示させることもできました。アイテム1の中ではtableとmap、アイテム2の中ではtableとコメント欄、といった具合です。
しかし、各アイテムごとに手動で設定をしなければならず、かつ「最初の1件だけこう」という設定もできなかったため、1万4千件ほどレコードのある今回のシステムでは利用が現実的でなく断念しました。

右ペインProperties→FEATURESタブ→ACTIONにて、Independent screen configuration per itemにチェックをすると設定できます。

都度迷うところ

「あれってどこからいじるんだっけ」となった項目についてのメモです。

DBを、同一Sheetsファイルの別シートに変更したい

左メニュー内Tabsタブ → 右ペインTABSセクションで表示されているものをクリック → Sourceをクリックしてシートを選ぶ

DBを、別Sheetsファイルに変更したい

左メニュー内Settingsタブ → 右ペインData Syncをクリック → DATA SOURCESセクションで表示されているファイル名の右、三点リーダメニューからReplaceをクリックしファイルを選択

✅ GlideおよびNoCodeのメリット・デメリット

メリット

圧倒的に手間が減る

今回、工数の削減を目的にNoCodeを利用しましたが、当初の目論見通りに手間をかけずにローンチまですることができました。文字通りコードを一行も書かずに公開まで行うことができ、ホスティングに関してもなにも考えなく良いというのはとても楽でした。
ことGlideに関しては、DBをGoogle Sheetsで代替するため、サービス側が予めデータを持っている(ユーザー投稿型じゃない)サービスおいては非常に使い勝手がいいように感じます。

デメリット

細かいところは諦めるしかない

NoCodeに多くを求めてはいけませんが、細かいところで、〇〇できないのか〜〜となります。今回の例で言えば、複数項目でのANDのフィルタを断念しました。具体的には、地名×ジャンルのフィルタです。今回は、地名は検索で、ジャンルはフィルタで絞ってもらうことによって、擬似的に実現しました。

その他

フロントでできることが限られている

これはメリットでもデメリットでもあるためその他に分類しました。できることが限られているからこそ使いやすく、機能を洗練させられる側面があるからです。また、飛び道具的な解決策として、編集した画像を用いる、という手段も取り得るかなとおもいます。Glide側でUIを調整するのでなく、そこに表示している画像に加工を加え、追加の情報を表示する等です。

そもそも

上記をまとめると「いわゆるMVPの要件にマッチする場合、非常に強力なツールになる」といったところになりますが、そもそも操作もわかりやすくたった数時間で大枠完成するため、最初に「Glideでやりたいことが実装できるのか試してみる」というステップを挟むのはありなんじゃないかとおもいます。

---

速攻エンジニアリング
Web系のエンジニア数人で「あったらいいなを速攻で！」をモットーに活動してます。これからもなにか役立つものをつくっていきたいとおもっています！随時Twitterで発信していこうとおもいます！ →Twitter