PWA 作成サービスの Glide（グライド） を使ってみた

# はじめに
PWA について調べていた時に Glide(グライド) という PWA を簡単に作成するサービスがあったため、実際に使ってみました。
その備忘録として記載します。

※実際に Glide についてググると、色々な方々の使い方記事がヒットします。
　その一つとして参考になれば良いと思います。

# まずは PWA とは…
PWA とは、Web サイトを「ネイティブ・アプリ」のように動作させる技術です。

ユーザは、フルスクリーン表示で、あたかもアプリを使っているかのように利用できます。

（参考）導入サイト
・Retty（レッティ・グルメ情報）
・ SUUMO（スーモ）
・ Twitter Lite
・日経電子版
・ The Weather Channel （ウェザーチャンネル・天気）
・ Wego（ウィゴー・旅行）

また、PWA は基本的にウェブサイトのため、マルチプラットフォーム(iOS、Android)に対応可能です。

しかし、Android ではできるプッシュ通知が iOS ではできないなど、 PWA についてのメリット・デメリットがあります。(2019/11 調べ)


# Glide とは…
Glide とは、ノーコード（プログラミングなし）で、Google のスプレッドシートを使って、その内容をアプリ化できるサービスで、ブラウザ上で作業します。
プログラミングの専門知識が無くても、簡単にアプリが作れます。

そもそも、元 Xamarin の CEO などのメンバー達が、一般企業がモバイルアプリを作ることの難しさを痛感して、その問題を解決するために立ち上げたサービスのようです。

# 使い方
### アカウント登録
https://www.glideapps.com/
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543326/206977a2-01da-aed0-0191-68d18daae340.png)


Glide のサイトでアカウント登録します。
Google アカウントを紐付ける必要があります。


### 料金
お試しの無料から個別ドメインやサポートなどで料金が異なります。
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543326/199c9aa0-c313-d9b4-c91e-625db8687705.png)


### ログイン
新規作成画面、ページ下方にテンプレートがあります。
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543326/768b2cdc-e42d-2a4b-ea38-114ebee8b344.png)


### スプレッドシート作成
予めスプレッドシートを作成して、
登録した Google アカウントのドライブに保存しておきます。
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543326/cfef8f56-81c3-de58-c391-7607f82a15db.png)



### アプリ作成
新規作成を選ぶとシートの選択が出ます。
![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543326/28a76e10-0d39-e9d0-715d-7eddf194d582.png)

【編集メイン画面】
スプレッドシートを読込み、自動で生成してくれます。
（※シート毎にタブで作成される）
![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543326/a08eb1d7-ebf0-cffb-276b-037efdc0dada.png)



シート1で、秋葉原をクリックすると詳細ページが表示されます。
先程のスプレッドシートと同じ内容が表示されます。
![7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543326/24e16299-768a-4870-678f-28f50c7cf2d8.png)

同様にシート2です。
![8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543326/59ecad21-46da-c2d0-a513-85c79fe17a15.png)


### アプリ作成/設定いろいろ
編集メイン画面の右側にある設定項目で編集します。
この項目でシート名やアプリ名なども設定できます。
（画像は真中の黒いレイアウトを選択したものです）
![9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543326/303c8042-dd77-cc65-f33b-2a39bf81e0e8.png)


### アプリ公開
上記編集メイン画像の画面左メニューにある「Share app」でWebに公開できます。
自動でQRコードを生成してくれたり、URLをメールで送信したりできます。
サンプルで作成したサイト：https://fwbv4.glideapp.io
![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543326/031d0f36-dc1f-34c7-aa9d-faa1e2ee1a51.png)


### アプリ確認
上記で公開したサイトにスマホでアクセスして確認します。
![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543326/0aa4bdf4-a356-824b-59b9-138b200d1913.png)


### アプリ確認 （PWA）
上記で追加した PWA のショートカットでアプリを実行し各ページを確認します。
![12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543326/ad85d738-6e5e-01b4-41e4-1d4a44eff6ca.png)

実際はブラウザ（Chrome）経由で表示されてますが、フルスクリーンのためアプリの様に見えます。

# まとめ
このように Glide を使うと簡単に PWA を作成して公開することができます。

実際には、お問い合わせやアンケートフォームを作ったり、外部 API 連携したりなど、もっと細かく設定や作成ができるようです。
詳しい機能は公式 HP に動画やドキュメント（英語）があります。

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

しかし、簡単に使える反面、基本的にテンプレート素材を組み合わせる形で作成するので、画面レイアウトや機能の柔軟性が乏しく感じます。
また、インフラが Glide 頼りになるのも懸念点かと思います。

少しずつバージョンアップしているようなので、今後できることが多くなっていけば、個人で使用したり、小規模な PWA 開発で Glide を選択肢に入れるのもありかもしれません。



以上