Edited at

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


作ったもの

ss 2019-06-20 13.18.57.png

福井市避難所マップ


使った技術


Glideとは


Y Combinatorの2019冬季クラスを受けているGlideのファウンダーたちは、一般企業がモバイルアプリを作ることの難しさを痛感している。そこで彼らは、そのプロセスをスプレッドシートから始めて、そのコンテンツを自動的に、すっきりしたモバイルアプリに変える方法を考えた。(*1)


とあるように,コーディング不要で,Googleスプレッドシートからアプリケーションを作れてしまうサービスです.

モバイルアプリ,とありますがAppStoreやPlayStoreで配信するようなネイティブアプリではなく,PWA(*2)アプリです.

私はこの↓ページみて作ってみました!

簡単過ぎる!GoogleスプレッドシートからPWAアプリを開発できる「Glide」を使ってみた!

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


作りかた(簡易版)


① スプレッドシートを作っておく

(今回は地元である福井市の避難所のオープンデータ)

ss 2019-06-20 13.47.23.png


②GlideのAppsを作成する

(Templeteも使えるっぽい)

ss 2019-06-20 13.49.08.png

どのスプレッドシートを使うか聞かれます.

ss 2019-06-20 13.52.06.png

表示されるタイトルなどを設定したらほぼ完成です.

ss 2019-06-20 13.54.46.png

こんな感じでマップ+ピン形式で表示することも可能です.

ss 2019-06-20 13.56.33.png

Addressのところに,住所カラムを設定してあげれば

ss 2019-06-20 13.57.13.png

いい感じですね!

詳細画面もこんな感じで見れます.

ss 2019-06-20 14.00.50.png

右のメニューから,いろんなコンポーネントが追加できます.

今回はマップを追加しました.

ss 2019-06-20 14.01.08.png

ss 2019-06-20 14.01.33.png

あとは,Settingという項目からIconやアプリ名,URL等を設定してあげれば完成です.

ss 2019-06-20 14.03.41.png


③リリース(リンクを共有するだけ)

App URLを開くだけでアプリが使えます.

Safari(AndroidならChrome)から,「ホームに追加」するだけでオフライン時でも避難所検索ができるアプリが完成しました!

※Mapはオフライン時は表示不可

というわけで,コード不要で驚くほど簡単に避難所マップアプリができてしまいました.

今回のように自治体のオープンデータの活用をはじめ,様々な用途で活躍しそうですね!


参考