オープンデータとGlideで，PWAの避難所マップ作った話

# 作ったもの
<img width="994" alt="ss 2019-06-20 13.18.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116688/0dd397ae-f867-7aaa-291a-2c09ae718570.png">
[福井市避難所マップ](https://go.glideapps.com/app/RWNSZiaKbW2vwDjwGu57)

## 使った技術
- [Glide](https://www.glideapps.com/)
- Googleスプレッドシート
- [福井市のオープンデータを使います](http://www.city.fukui.lg.jp/sisei/tokei/opendata/opengov.html)

## Glideとは
> Y Combinatorの2019冬季クラスを受けているGlideのファウンダーたちは、一般企業がモバイルアプリを作ることの難しさを痛感している。そこで彼らは、そのプロセスをスプレッドシートから始めて、そのコンテンツを自動的に、すっきりしたモバイルアプリに変える方法を考えた。([*1](https://jp.techcrunch.com/2019/02/13/2019-02-12-glide-helps-you-build-mobile-apps-from-a-spreadsheet-without-coding/))

とあるように，コーディング不要で，Googleスプレッドシートからアプリケーションを作れてしまうサービスです．
モバイルアプリ，とありますがAppStoreやPlayStoreで配信するようなネイティブアプリではなく，PWA([*2](https://www.seohacks.net/basic/terms/pwa/))アプリです．

私はこの↓ページみて作ってみました！
![](http://capture.heartrails.com/120x120/cool?https://paiza.hatenablog.com/entry/2019/04/10/%E7%B0%A1%E5%8D%98%E9%81%8E%E3%81%8E%E3%82%8B%EF%BC%81Google%E3%82%B9%E3%83%97%E3%83%AC%E3%83%83%E3%83%89%E3%82%B7%E3%83%BC%E3%83%88%E3%81%8B%E3%82%89PWA%E3%82%A2%E3%83%97%E3%83%AA%E3%82%92%E9%96%8B) [簡単過ぎる！GoogleスプレッドシートからPWAアプリを開発できる「Glide」を使ってみた！](https://paiza.hatenablog.com/entry/2019/04/10/%E7%B0%A1%E5%8D%98%E9%81%8E%E3%81%8E%E3%82%8B%EF%BC%81Google%E3%82%B9%E3%83%97%E3%83%AC%E3%83%83%E3%83%89%E3%82%B7%E3%83%BC%E3%83%88%E3%81%8B%E3%82%89PWA%E3%82%A2%E3%83%97%E3%83%AA%E3%82%92%E9%96%8B)

言ってしまえば，ここ見ればめちゃくちゃ簡単にできます笑

## 作りかた(簡易版)
#### ① スプレッドシートを作っておく
(今回は地元である福井市の避難所のオープンデータ)
<img width="992" alt="ss 2019-06-20 13.47.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116688/8d43f66d-5047-0f27-9dcd-e057515eb193.png">

#### ②GlideのAppsを作成する
(Templeteも使えるっぽい)
<img width="570" alt="ss 2019-06-20 13.49.08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116688/9bdac982-5a32-906a-478e-1ad90b8f1b86.png">

どのスプレッドシートを使うか聞かれます．
<img width="806" alt="ss 2019-06-20 13.52.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116688/1913828c-89e8-9375-ed10-5cb973a30178.png">

表示されるタイトルなどを設定したらほぼ完成です．
<img width="1003" alt="ss 2019-06-20 13.54.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116688/72ca777d-6c11-854d-e009-7fae51614c20.png">

こんな感じでマップ+ピン形式で表示することも可能です．
<img width="999" alt="ss 2019-06-20 13.56.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116688/4e56b85b-1a71-71aa-b90c-6f99be5df2a9.png">
Addressのところに，住所カラムを設定してあげれば
<img width="1002" alt="ss 2019-06-20 13.57.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116688/0f37eff7-3362-df02-52c4-93c7854c048a.png">
いい感じですね！

詳細画面もこんな感じで見れます．
<img width="999" alt="ss 2019-06-20 14.00.50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116688/48879c95-20d3-9f05-7126-9d10e9358602.png">

右のメニューから，いろんなコンポーネントが追加できます．
今回はマップを追加しました．
<img width="992" alt="ss 2019-06-20 14.01.08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116688/357968ea-0e77-7856-36af-d7fa2faac85b.png">
<img width="1000" alt="ss 2019-06-20 14.01.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116688/562d645d-7c56-fd28-cd56-b169f2971b74.png">

あとは，Settingという項目からIconやアプリ名，URL等を設定してあげれば完成です．
<img width="987" alt="ss 2019-06-20 14.03.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116688/11d76a77-4610-d801-51e4-ceac06a131da.png">

#### ③リリース(リンクを共有するだけ)
App URLを開くだけでアプリが使えます．
Safari(AndroidならChrome)から，「ホームに追加」するだけでオフライン時でも避難所検索ができるアプリが完成しました！
※Mapはオフライン時は表示不可

というわけで，コード不要で驚くほど簡単に避難所マップアプリができてしまいました．
今回のように自治体のオープンデータの活用をはじめ，様々な用途で活躍しそうですね！

## 参考
- *1) https://jp.techcrunch.com/2019/02/13/2019-02-12-glide-helps-you-build-mobile-apps-from-a-spreadsheet-without-coding/
- *2) https://www.seohacks.net/basic/terms/pwa/