PWA爆速作成：GlideでPWAの作成（日本の世界遺産、法則のまとめ）


##はじめに

最近、PWA（Progressive Web Apps）というものを知りました。（聞いたことはあったんですが、なにものかよくわかっていませんでした）

【参考】PWA（Progressive Web Apps）とは
https://www.seohacks.net/basic/terms/pwa/
https://digital-marketing.jp/seo/what-is-progressive-web-apps/

##PWAが爆速で作れる

PWAを調べていると、Glide Apps というものを見つけました。

Create an app from a Google Sheet in five minutes, for free.
https://www.glideapps.com/
Glide Library
https://docs.glideapps.com/all/guides/getting-started/installing-your-app#scanning-qr-codes


**Google Spread SheetだけでPWAがとても簡単に作成できます。実際に作ってみると、簡単どころの話ではなく、何を作りたいかが定まっていれば、本当に5～10分でつくることができました。すごいサービスだなと思いました。**

【参考URL】
- [【Glideスゴイ】スプレッドシート1カラムのみで掲示板PWAアプリつくってみた(Qiita)](https://qiita.com/shojimotio/items/2fcb4ea0ccca6fcfd3e3)
- [オープンデータとGlideで，PWAの避難所マップ作った話(Qiita)](https://qiita.com/HaruPON/items/9ff042803b4f2a9f6ad4)


##実際につくってみた1（作成したアプリ１：日本の世界遺産リスト）
https://japanworld.glideapp.io
(下図のQRコードでアクセス可能)
![0001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167772/19984865-1c0e-67f8-ee09-6e7daaf85aaa.png)

####用意したもの
・Googleスプレッドシート
以前の投稿（[【Google MAP】スプレッドシートAPI連携による日本世界遺産の表示](https://qiita.com/yoshi_yast/items/9e58e515d67d2251f802)）で利用した「日本の世界遺産」のデータを利用。登録年月日や住所データなどいくつか足らない項目を追加。

![0002.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167772/bf2f4cda-8363-20ba-f12f-0514711ccd8a.png)

####glideにGoogleアカウントでログインして作成：手順
①「+NewApp」で新規作成
②「Layout / Tabs / Settings」を設定
  **各プロパティは直感で設定可能。変更すると、プレビューですぐに確認できる。**
  **Tabsは、スプレッドシートのシートと同じ扱いになるので、複数シートある場合は、勝手にTabを作ってくれる。**
③「Share app」で URLにアクセス & シェア

**→スマホの「ホーム画面」に追加で、アプリのような感じで使用できる。**


##実際につくってみた2（作成したアプリ2：法則・効果・論理のまとめ一覧）
https://listofprinciple.glideapp.io
(下図のQRコードでアクセス可能)
![0003.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167772/47b49871-a74e-49d1-5396-3da3e69431bd.png)

####用意したもの
・Googleスプレッドシート
Wikipediaをはじめ、いろいろなサイトを参考にさせてもらって、自分でまとめておいた法則・効果・論理のまとめ一覧をGoogleスプレッドシートにいれる。
![0004.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167772/3008e040-0208-59ef-a31e-07522fcdd8be.png)

まとめ一覧には下記のような法則をいれてみました

|No  |タイトル   |  |No   |タイトル  |
|---|---|---|---|---|
|1|ハインリッヒの法則(1:29:300)| |27|コンコルド効果|
|2|パレート(80:20)の法則| |28|ホーソン効果|
|3|マーフィーの法則| |29|ツァイガルニク効果|
|4|パーキンソンの法則| |30|ファインマン効果|
|5|メラビアンの法則| |31|カリギュラ効果|
|6|ムーアの法則| |32|ゲインロス効果|
|7|1万時間の法則| |33|プラシーボ効果|
|8|限界効用逓減の法則| |34|アンダーマイニング効果|
|9|ポッターの法則| |35|ザイオンス効果|
|10|78対22の法則| |36|カクテル・パーティー効果|
|11|ピーク・エンドの法則| |37|ダニング・クルーガー効果|
|12|as if の法則| |38|ストループ効果|
|13|ピーターの法則| |39|ブラック・スワン理論|
|14|ブルックスの法則| |40|フロー理論|
|15|メイヤーの法則| |41|イノベーター理論|
|16|決定(選択)回避の法則| |42|キャムズ理論|
|17|ランチェスターの法則| |43|オッカムの剃刀|
|18|マーチンゲール法則| |44|ジョハリの窓|
|19|努力逆転の法則| |45|タッグマンモデル|
|20|ジャネーの法則| |46|六次の隔たり|
|21|引き寄せの法則| |47|エビングハウスの忘却曲線|
|22|マジックナンバー7±2の法則| |48|アトキンソンモデル|
|23|MACの法則| |49|学生症候群|
|24|ピグマリオン効果| |50|アビリーンの逆説|
|25|カラーバス効果| |51|囚人のジレンマ|
|26|ラダー効果| |||

![0005.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167772/35233d2d-d688-b315-5a45-31c7c50f175c.png)

##まとめ
- Glide Apps 簡単すぎるってこういうことを言う、って感じです。
- プログラムを一切かかないので、非エンジニアでもOKなところもすごいところだと思います。
- コンポーネントの種類（動画やコメント機能など）が結構あるので、アイデア次第でいろいろなものが作れそうです。

##他参考URL
- [コーディング不要でスプレッドシートから簡単にモバイルアプリを作れるGlide](https://jp.techcrunch.com/2019/02/13/2019-02-12-glide-helps-you-build-mobile-apps-from-a-spreadsheet-without-coding/)