14
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2019-06-20

作ったもの

ss 2019-06-20 13.18.57.png [福井市避難所マップ](https://go.glideapps.com/app/RWNSZiaKbW2vwDjwGu57)

使った技術

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はオフライン時は表示不可

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

参考

14
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
14
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?