1. SokkouEng

    Posted

    SokkouEng
Changes in title
+噂のNoCodeサービスGlideで、一瞬でPWAがつくれた
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,78 @@
+# ✅ はじめに
+こんにちは!「あったらいいなを速攻で!」をモットーに活動している有志エンジニアチーム`速攻エンジニアリング`です。
+
+去る10月に始まったGoToイートキャンペーンは、近所の飲食店を改めて開拓する良い機会となりましたが、真っ先に感じたのが、
+「対応店舗が調べにくい。。。」
+ということでした。サイトによって掲載されている店舗が違っていたり、サイト内でフィルタができなかったりしていたためです。
+
+無いなら作るがエンジニア。リリース速度を優先し、流行りのNoCodeサービスを使ってみました。
+
+今回はGlideを使用しました。Google SheetをDBとして扱い、ブラウザ上からGUI操作のみでPWAをつくることができます。
+公式のドキュメンテーションもしっかりしていましたが、それを見ずともさくさくと作りたいものが作れる、良いサービスでした。
+
+以下、Glide内で作成するアプリケーションのことはApp、Google SheetsのことはSheetsと記述します。
+
+# ✅ 今回のアプリ作成の流れ
+今回どのような流れで作成したか、ざっくり記載します。
+
+## Googleアカウントでログインする
+GlideはGoogle SheetsをDBとして用います。Googleアカウントでログインするだけで、Google Drive内にあるGoogle Sheetsと接続させることができます。
+
+## Appを作成
+DBとして用いたいGoogle Sheetsを選択する、もしくは、テンプレートからAppを作成できます。
+テンプレートは、無償有償含め今日現在(2020年11月27日)で、なんと297もの種類が用意されています。
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/855392/5f4741f1-14c0-d409-b534-e6f5d2c85cf6.png)
+
+## レイアウトを整える
+リスト形式, タイル形式, カード形式、はたまたカレンダーやマップ等、Sheetsに保存されているデータをどのようなUIで表示するかを8種類から選択することができます。
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/855392/04759939-59cc-b6dd-07cf-37f9f952ac60.png)
+
+## 機能を整える
+ユーザーが使える機能として、フィルタ, 検索ボックス, ソートなどを設定できます。
+
+## コンポーネントを整える
+詳細ページには、様々なコンポーネントを置くことができます。TextやMedia等の静的なコンテンツはもちろん、Buttons, Pickers, Entry Fields等、ユーザーからのアクションを受付けるものも用意されており、それらに関してはSheetsの値を書き換えることも可能です。
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/855392/06b05e91-5800-185e-0c75-a91e1c453f52.png)![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/855392/54165586-d0ac-7d70-f8b1-9831ddca7226.png)
+
+## その他を整える
+今回利用はしていませんが、レコードに対してユニークな採番をしたり、レコード同士のリレーションを設定したりといった機能もGlide側で用意されています。
+
+### 独自ドメイン
+Pro版から、独自ドメインを設定可能です。
+
+### Google Analytics
+Pro版から、Google Analyticsも設定可能です。Tracking IDを入力するだけと、お手軽に設定ができます。
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/855392/cdfe997c-6985-a5e6-fcbb-00d2e67e5687.png)
+
+# ✅ TIPSと感想
+たいしたものではありませんが、今回の開発で得たTIPSと感想を共有します。
+
+## テスト環境がない
+テスト環境を提供するような機能は用意されていません。今回の私のように、Glide自体にまだ慣れていない場合、アプリに機能を追加/改善するにしても多少の試行錯誤が必要になりますが、サービスの一般公開後にそれを行おうとする場合、当たり前ですがそれがそのまま本版環境に反映されてしまいます。
+そこで今回は次善策として、次のように実装を行っていきました。
+1. 本番Appのプロジェクトをコピーする
+2. 本番Sheetsのコピーを作成する
+3. コピーAppのDB接続先をコピーSheetsにする
+これによって、Glideで用意されている機能で自分のやりたいことを実装できるか試行錯誤する場をつくりました。
+
+## 件数が増えるともっさりする
+レコードが2万件を超えてくると、ユーザー環境により差はありそうですが、動作がもっさりしだす傾向にありました。
+
+## 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`をクリックしファイルを選択