オープンデータとGoogleの相性が最高だった件（コード無し・SaaS・PWA利用）

# はじめに
だれでも利用できるオープンデータを、Googleサービスで爆速で利用しちゃおう！
ってことで、とりあえず難しい話は無しで活用してみましょう。

## そもそもオープンデータって何？
[ウィキペディア](https://www.google.com/url?sa=t&source=web&rct=j&url=https://ja.m.wikipedia.org/wiki/%25E3%2582%25AA%25E3%2583%25BC%25E3%2583%2597%25E3%2583%25B3%25E3%2583%2587%25E3%2583%25BC%25E3%2582%25BF&ved=2ahUKEwiFp9GjsNXnAhVLc3AKHaPuDUIQmhMwDXoECA8QHQ&usg=AOvVaw3cUqqIKWbCwlVDpCwN6_Jx&cshid=1581836914475)
>オープンデータ（Open Data）とは、特定のデータが、一切の著作権、特許などの制御メカニズムの制限なしで、全ての人が望むように利用・再掲載できるような形で入手できるべきであるというアイデアである。

[オープンデータ | 政府CIOポータル](https://cio.go.jp/policy-opendata)
>オープンデータの定義
 国、地方公共団体及び事業者が保有する官民データのうち、国民誰もがインタ
ーネット等を通じて容易に利用（加工、編集、再配布等）できるよう、次のいず
れの項目にも該当する形で公開されたデータをオープンデータと定義する。3
① 営利目的、非営利目的を問わず二次利用可能なルールが適用されたもの
② 機械判読に適したもの
③ 無償で利用できるもの 

色々検索すれば出てくるのですが、個人的にこの資料がすごくわかりやすかったのでご参考に。
[自治体が行うオープンデータ]
(https://koukita.github.io/opendata/pptx/jichitai_opendata_2018_12.pptx)
公開元
https://koukita.github.io/opendata/

## 今回のゴールとルート
オープンデータの位置情報を利用して、マップ表示できる仕組みを爆速で構築する。

### とにかく便利 Googleマイマップ　5分コース（自分で利用・仲間で共有）
- [Google マイマップ](https://www.google.co.jp/intl/ja/maps/about/mymaps/)作成
    - 自治体サイトからcsvファイルをダウンロード
    - Google Earthに流し込む

### これからの本命　GlideappsでPWA　10分コース（みんなに公開）
- [Glideapps](https://www.glideapps.com/)で簡易アプリ作成
    - 自治体サイトからcsvファイルをダウンロード
    - Google スプレッドシートにインポートして編集
    - GlideappsをGoogleスプレッドシートに接続してアプリ自動作成（PWA）

### Google Earth　＋5分（いい感じにしたい）
- クラウド版[Google Earth](https://www.google.co.jp/intl/ja/earth/)で表示
    - GoogleマイマップからKMZファイルをダウンロード
    - Google Earthに流し込む


# 早速作成しましょう
##必要なもの
Googleアカウント
ない人は作ってください。
[Googleアカウントの作成](https://support.google.com/accounts/answer/27441?hl=ja)

## [Google マイマップ](https://www.google.co.jp/intl/ja/maps/about/mymaps/)作成
まずオープンデータをダウンロードします。
参考に徳島県の美波町役場で公開している**AED設置箇所一覧**のオープンデータをダウンロードします。
csvをダウンロードしておきましょう。
**美波町公式ホームページ　オープンデータ**
https://www.town.minami.lg.jp/docs/820.html
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/75ee0ed4-b2eb-f6d2-b85a-9179e415a531.png)


csvを保存後、**Googleマイマップ**を開きます。
https://www.google.co.jp/intl/ja/maps/about/mymaps/
初めての場合は**利用を開始**します。
次のページで、**新しい地図を作成**をクリックしてマイマップを作っていきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/cbecac1d-1390-ea9a-6d75-b5774ebb61bf.png)

インポートをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/30ca0196-7ac1-1fe2-3e7c-0c2979ad4778.png)

デバイスのファイルを選択をクリックして、先程ダウンロードしたcsvファイルを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/a92664d4-9ae5-0f7f-64af-2f1b8b662b16.png)

位置情報を紐付ける必要があるので、緯度、軽度をチェックして適切に選択し、続行をクリックします。
反対にならないように注意しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/f4545b06-c45f-6de6-16e2-cbb027bd63e5.png)

続いてマーカーのタイトルに名称を選択肢て完了をクリックします。
すると、いきなり位置情報がポイントされたマップが完成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/ddfc1229-e7d4-41b4-09e6-196ba6dfc7c4.png)

名称が無題の地図になっているので美波町AEDマップに変更します。
名称部分（無題の地図）をクリックして、名称を変更し、合わせて説明に**AED設置箇所一覧 © 美波町 クリエイティブ・コモンズ・ライセンス（表示4.0 国際）
https://www.town.minami.lg.jp/docs/820.html**を入力しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/b93fa59f-548d-f682-5195-34df4dac66f4.png)


作成したマップは共有の設定をすることが出来ます。
例えば、自分だけ、招待した友達（Googleアカウント必須）、誰でもみたいな感じで、自由度が高く、無料サービスにおいてセキュアな共有ができるのもGoogleマイマップの魅力です。　
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/27ad9a70-ed12-8be3-93a6-f2ab72bf65ee.png)


例えば家族や友達と共有する場合、招待のボックスに名前かメールアドレスを入力して完了を押すと共有できます。
共有していない人は見ることができません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/86a6be0d-122f-4c3f-ab00-4ff8c7bc99b1.png)

また、自分のスマホのグーグルマップ、左上のハンバーガーメニュー（三本線）、マイプレイス、上部タブの一番右の地図をクリック（スライドしないと無いかも）すると今作ったマイマップの名前が出てきているのでクリックすると、なんと自分のGoogleマップ上に美波町AEDマップが表示されて便利です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/bf3dd33d-ca82-f4e4-67d9-73b4517e8b6a.png)
↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/e9dd5fc9-6aa6-c113-04e7-2aff499e1622.png)
↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/2d904ffb-24e5-31e2-4b6f-09ab8faeeb0d.png)
↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/4777f085-087e-db9d-fb2e-94bb2c6aa41f.png)

完了！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/982abb51-5e8a-236b-7e3e-ee603c8ce7b4.png)

## [Glideapps](https://www.glideapps.com/)で簡易アプリ作成
続いて、アプリっぽいやつをコードとかごちゃごちゃイジらずにパリッと作る方法です。
こちらは、PWAで作ります。
Googleマイマップの共有設定に対して、こちらは基本的には、公開を前提とします。
特徴としては、アプリっぽいのだけれども、あくまでもWEBサイトの一部です。いちいちアプリインストールしたり、アップデートでスマホの動作が不安定になったりめんどくさいの嫌！って人からは喜ばれます。

参考
> PWA（Progressive Web Apps）とは？PWAの機能と導入するメリットについて
> https://www.seohacks.net/basic/terms/pwa/

先程ダウンロードしたcsvファイルを利用します。
まず、Googleスプレッドシートを開きます。
https://docs.google.com/spreadsheets/u/0/
**「＋」空白**をクリックして、新規作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/6b879f8e-8a15-b379-0ef6-00729203add2.png)

ファイル、インポート、アップデートからcsvをインポートします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/826f4cd0-299b-e1ff-21c3-dc395412b9a2.png)

特に設定はデフォルト（そのまま）で**データをインポート**します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/fcec83a5-7d66-8749-2e29-1a246d1e2364.png)

表ができるので、ファイル名を**美波町AED一覧**に変更しておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/c26ba1bc-1ba9-05ff-c774-aa401b45b679.png)

セルw1に**緯度経度**、w2に`=(ARRAYFORMULA(I2:I&","&J2:J))`を入力します。
**ARRAYFORMULA**については、表計算サービスを簡易データベースサービスにするためのGoogleが作り出した平成の大発明関数です。これを使うことで、結果的にスプレッドシート利用してオートメーション化することが可能になりました。

続いて、Glideapps用にGoogleスプレッドシートを少し編集します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/cabaf700-8ae0-039a-e2f6-72fc46a660ba.png)

続いて、21行から下を削除します。
21行目を選択し、Shiftキーを押したまま1000行目を選択して削除します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/73feaa69-5b9c-ee4c-cfb8-9fcdfe1deb20.png)
これでGoogleスプレッドシートの設定は完了です。

ここからPWAを作っていきます。
[Glideapps](https://www.glideapps.com/)
にアクセスします。

サインインします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/a7406adb-d994-f8ae-4a66-b4883104f214.png)

ここ重要です。
Googleアカウントと紐付けします。
自分のアカウントを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/9e76d105-6138-bd6a-a74e-2c16b62965fe.png)

サインイン後、新規で作成します。
大きな＋ボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/cb3dc8d5-2751-a25a-6af6-0e268594af9a.png)

先程のGoogleスプレッドシートを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/a7c7288e-f53c-3b26-7561-3223b879bc09.png)

ほぼアプリできてますが、ここからデータを選択していきます。
まず、Titleに名称、Datalistに住所を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/05016b6a-43ba-9404-6a06-28e814132436.png)

次に、STYLEでMAPを選択し、Addressを**緯度経度**にします。（住所でもOKですが、緯度経度が最も正確にポイントをプロットできます。）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/5d024e91-8450-498f-9d6d-2639634db4dd.png)

続いて、デザインと公開をします。
左上のApps下のアイコンをクリックし、右のSettingsからアイコンを選択します。
MAPのデザインなどもここから編集できます。
好みに合わせて編集してみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/ab4a8d78-2d7f-c61f-f042-801302372219.png)

真ん中の**GENERAL**を選択し、**Description**に**AED設置箇所一覧 © 美波町 クリエイティブ・コモンズ・ライセンス（表示4.0 国際）https://www.town.minami.lg.jp/docs/820.html**を入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/4fa96060-f0e6-66bc-635a-b48b693cb403.png)



アプリの名称を変更できます。
美波町AEDマップに変更しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/60236233-5eb2-f371-3433-9ae22f3958a8.png)

Share app、Pablish appをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/1d6e402d-794a-ca85-8f1c-2c11f9c26873.png)

きました！出来ました。完成です。
QRコードをスマホで読み取れば、アプリっぽい感じでオープンデータを可視化できているはずです。
SHARE OPTIONS　で、リンクを共有することもできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/310165c7-be9d-2b05-50e1-ff4c7f25aad8.png)

インストール不要です。
そして、Googleスプレッドシートを編集すればデータ反映されます。
運用管理も超楽ちんです。

ちなみに、パスワードを設定することも出来ます。
Settings→PRIVACY→Sign inをPasswordに変更して、下のフォームにパスワードを入力することで設定可能です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/055c9273-e68b-74d2-e7ec-364e9913028a.png)
スマホの画面にショートカットを保存すればアプリっぽい感じで利用できるはずです。
お疲れ様でした！

## [Google Earth](https://www.google.co.jp/intl/ja/earth/)で表示
ここまできたら、せっかくなのでクラウド版のGoogle Earthにデータを乗せてみましょう。
先程作成したGoogleマイマップから、kmz（Google Earth用ファイル形式）ファイルを作成します。
※KMLでも可能ですが、アイコン表示に不具合が出るのでKMZを推奨いたします。
一番上の3つ並んだ点をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/133dfa88-d35f-6506-e4d6-c1b62bdcd524.png)

KML/KMZにエクスポートを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/6dea6e75-2cc7-1e82-0bf6-ab4ea91a8cd3.png)

マップ名を選択し、ダウンロードをクリックします。
するとKMZファイルがダウンロードされます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/b5c38737-3aa7-d331-9f31-78d6b0fe51a9.png)

続いて、Google Earthのサービスを開きます。
今回は、ダウンロード版ではなく、クラウド版を利用したいと思います。
https://www.google.co.jp/intl/ja/earth/

まず**Earthを起動**します。
少し待ちましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/a38b99ce-7b60-b58e-b51f-0f9a061e232e.png)

続いて、**kml**ファイルを利用する準備をします。
左上のハンバーガーメニューを展開します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/c69ca3e4-6539-77c0-af4a-345ef43939b6.png)
続いて、設定をクリックすると設定内容がポップアップされるので、**全般設定のKMLファイルのインポートを有効にする**をオンにして保存します。
このとき、このデバイスのファイルの保存についての許可を求めてきますので、許可します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/388cb72b-680a-094f-6f57-5bda37af5b9f.png)

左のロケーションマークをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/84afcf0d-24af-ee82-4434-f691edceb25d.png)

開くをクリックして、パソコンからKMLファイルをインポートを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/5562b461-764f-0860-457c-417ec3be6655.png)

いきなりマップができます。
鉛筆マークをクリックして美波町AEDマップに名前を変更します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/4f7630d5-76f2-749a-786d-83e2095ae0e1.png)
説明に**AED設置箇所一覧 © 美波町 クリエイティブ・コモンズ・ライセンス（表示4.0 国際） https://www.town.minami.lg.jp/docs/820.html**を入力して完了です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/af16dc7b-303f-4f6d-5d35-ab6456bfd60b.png)




# おまけ
Googleがサービスやーめた！って時のために。

まず、[地理院地図（電子国土地図）](https://maps.gsi.go.jp/)にcsvをインポートします。
機能、ツール、作図・ファイルからインポートできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/7ea49731-d35c-5fe3-afbf-a1b68cf6fda3.png)
ディレクトリを開くアイコンをクリック、ファイルを選択、先程のcsvを選択し、読込を開始します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/5510aaed-8ef2-3937-a4f8-d45a95c663ea.png)

上記の内容で読込開始をクリックします。
これでマップ上にデータを可視化できます。
さらに踏み込んで、[QGIS](https://www.qgis.org/ja/site/)など、レイヤを自由に整備したいときなどのためのファイル作成もしておきましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/36b93279-93c6-d761-6983-72021b07acb4.png)

新規作図情報のチェックを外し、保存ボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/49c9d66c-0dfa-c1fe-abbf-69a8df7420af.png)

KML形式を選択肢、上記の内容で保存を選択します。
これで様々なGISソフト等で読み込めるはずです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/c49bcb11-9ecc-19b4-fd98-44600813e8b4.png)

# 諸注意
利用規約はしっかり確認してください。
オープンデータの利用規約や利用するサービスの利用規約をご確認ください。
例えば、次のマーク。![by.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/7a00da82-12b0-dc24-2699-e74c7254c672.png)
>原作者のクレジット（氏名、作品タイトルなど）を表示することを主な条件とし、改変はもちろん、営利目的での二次利用も許可される最も自由度の高いCCライセンス。
https://creativecommons.jp/licenses/

また、Googleサービスの場合、サービス内で作ったデータの権利はGoogleにあったりする場合があります。
また、サービス向上が多い反面、サービス廃止等（例えば、[Google Fusion Table](https://support.google.com/fusiontables/answer/9551050?visit_id=637166833094212523-610785585&rd=1)は、GoogleのSaaS型データベースとして9年間続いたサービスだったのですが、2019年に廃止）もあるので注意が必要です。
打開策として、おまけで紹介した地理院のサービスや、QGISなどのソフトでの代替管理ができる方法をバックで持っておくといいかと思います。

# まとめ
オープンデータの普及には、とにもかくにも、まず**多くの人が触れること**が大切だと感じたので、Googleサービスを利用した方法を紹介してみました。
SDGsとか、Society5.0にむけた取り組みに、オープンデータは大きな役割を担うかもしれません。
そもそも法律で行政の整備が義務化されています。※官民データ活用推進基本法（平成28年法律第103号）
今後、オープンデータをいい感じ利用したシステム開発の前段で、まず使ってみることが一番いいかなと考えました。
行政が頑張って公開したデータをみんなで有効に利用して、豊かな生活ができる社会に発展するための一助となればうれしく思います。
最後まで見ていただき、ありがとうございました。