Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

はじめに

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

そもそもオープンデータって何?

ウィキペディア

オープンデータ(Open Data)とは、特定のデータが、一切の著作権、特許などの制御メカニズムの制限なしで、全ての人が望むように利用・再掲載できるような形で入手できるべきであるというアイデアである。

オープンデータ | 政府CIOポータル

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

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

今回のゴールとルート

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

とにかく便利 Googleマイマップ 5分コース(自分で利用・仲間で共有)

  • Google マイマップ作成
    • 自治体サイトからcsvファイルをダウンロード
    • Google Earthに流し込む

これからの本命 GlideappsでPWA 10分コース(みんなに公開)

  • Glideappsで簡易アプリ作成
    • 自治体サイトからcsvファイルをダウンロード
    • Google スプレッドシートにインポートして編集
    • GlideappsをGoogleスプレッドシートに接続してアプリ自動作成(PWA)

Google Earth +5分(いい感じにしたい)

  • クラウド版Google Earthで表示
    • GoogleマイマップからKMZファイルをダウンロード
    • Google Earthに流し込む

早速作成しましょう

必要なもの

Googleアカウント
ない人は作ってください。
Googleアカウントの作成

Google マイマップ作成

まずオープンデータをダウンロードします。
参考に徳島県の美波町役場で公開しているAED設置箇所一覧のオープンデータをダウンロードします。
csvをダウンロードしておきましょう。
美波町公式ホームページ オープンデータ
https://www.town.minami.lg.jp/docs/820.html
image.png

csvを保存後、Googleマイマップを開きます。
https://www.google.co.jp/intl/ja/maps/about/mymaps/
初めての場合は利用を開始します。
次のページで、新しい地図を作成をクリックしてマイマップを作っていきます。
image.png

インポートをクリック
image.png

デバイスのファイルを選択をクリックして、先程ダウンロードしたcsvファイルを選択します。
image.png

位置情報を紐付ける必要があるので、緯度、軽度をチェックして適切に選択し、続行をクリックします。
反対にならないように注意しましょう。
image.png

続いてマーカーのタイトルに名称を選択肢て完了をクリックします。
すると、いきなり位置情報がポイントされたマップが完成します。
image.png

名称が無題の地図になっているので美波町AEDマップに変更します。
名称部分(無題の地図)をクリックして、名称を変更し、合わせて説明にAED設置箇所一覧 © 美波町 クリエイティブ・コモンズ・ライセンス(表示4.0 国際)
https://www.town.minami.lg.jp/docs/820.html
を入力しましょう。
image.png

作成したマップは共有の設定をすることが出来ます。
例えば、自分だけ、招待した友達(Googleアカウント必須)、誰でもみたいな感じで、自由度が高く、無料サービスにおいてセキュアな共有ができるのもGoogleマイマップの魅力です。 
image.png

例えば家族や友達と共有する場合、招待のボックスに名前かメールアドレスを入力して完了を押すと共有できます。
共有していない人は見ることができません。
image.png

また、自分のスマホのグーグルマップ、左上のハンバーガーメニュー(三本線)、マイプレイス、上部タブの一番右の地図をクリック(スライドしないと無いかも)すると今作ったマイマップの名前が出てきているのでクリックすると、なんと自分のGoogleマップ上に美波町AEDマップが表示されて便利です。
image.png

image.png

image.png

image.png

完了!
image.png

Glideappsで簡易アプリ作成

続いて、アプリっぽいやつをコードとかごちゃごちゃイジらずにパリッと作る方法です。
こちらは、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

ファイル、インポート、アップデートからcsvをインポートします。
image.png

特に設定はデフォルト(そのまま)でデータをインポートします。
image.png

表ができるので、ファイル名を美波町AED一覧に変更しておきます。
image.png

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

続いて、Glideapps用にGoogleスプレッドシートを少し編集します。
image.png

続いて、21行から下を削除します。
21行目を選択し、Shiftキーを押したまま1000行目を選択して削除します。
image.png
これでGoogleスプレッドシートの設定は完了です。

ここからPWAを作っていきます。
Glideapps
にアクセスします。

サインインします。
image.png

ここ重要です。
Googleアカウントと紐付けします。
自分のアカウントを選択します。
image.png

サインイン後、新規で作成します。
大きな+ボタンをクリックします。
image.png

先程のGoogleスプレッドシートを選択します。
image.png

ほぼアプリできてますが、ここからデータを選択していきます。
まず、Titleに名称、Datalistに住所を選択します。
image.png

次に、STYLEでMAPを選択し、Addressを緯度経度にします。(住所でもOKですが、緯度経度が最も正確にポイントをプロットできます。)
image.png

続いて、デザインと公開をします。
左上のApps下のアイコンをクリックし、右のSettingsからアイコンを選択します。
MAPのデザインなどもここから編集できます。
好みに合わせて編集してみましょう。
image.png

真ん中のGENERALを選択し、DescriptionAED設置箇所一覧 © 美波町 クリエイティブ・コモンズ・ライセンス(表示4.0 国際)https://www.town.minami.lg.jp/docs/820.htmlを入力します。
image.png

アプリの名称を変更できます。
美波町AEDマップに変更しました。
image.png

Share app、Pablish appをクリックします。
image.png

きました!出来ました。完成です。
QRコードをスマホで読み取れば、アプリっぽい感じでオープンデータを可視化できているはずです。
SHARE OPTIONS で、リンクを共有することもできます。
image.png

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

ちなみに、パスワードを設定することも出来ます。
Settings→PRIVACY→Sign inをPasswordに変更して、下のフォームにパスワードを入力することで設定可能です。
image.png
スマホの画面にショートカットを保存すればアプリっぽい感じで利用できるはずです。
お疲れ様でした!

Google Earthで表示

ここまできたら、せっかくなのでクラウド版のGoogle Earthにデータを乗せてみましょう。
先程作成したGoogleマイマップから、kmz(Google Earth用ファイル形式)ファイルを作成します。
※KMLでも可能ですが、アイコン表示に不具合が出るのでKMZを推奨いたします。
一番上の3つ並んだ点をクリックします。
image.png

KML/KMZにエクスポートを選択します。
image.png

マップ名を選択し、ダウンロードをクリックします。
するとKMZファイルがダウンロードされます。
image.png

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

まずEarthを起動します。
少し待ちましょう。
image.png

続いて、kmlファイルを利用する準備をします。
左上のハンバーガーメニューを展開します。
image.png
続いて、設定をクリックすると設定内容がポップアップされるので、全般設定のKMLファイルのインポートを有効にするをオンにして保存します。
このとき、このデバイスのファイルの保存についての許可を求めてきますので、許可します。
image.png

左のロケーションマークをクリックします。
image.png

開くをクリックして、パソコンからKMLファイルをインポートを選択します。
image.png

いきなりマップができます。
鉛筆マークをクリックして美波町AEDマップに名前を変更します。
image.png
説明にAED設置箇所一覧 © 美波町 クリエイティブ・コモンズ・ライセンス(表示4.0 国際) https://www.town.minami.lg.jp/docs/820.htmlを入力して完了です。
image.png

おまけ

Googleがサービスやーめた!って時のために。

まず、地理院地図(電子国土地図)にcsvをインポートします。
機能、ツール、作図・ファイルからインポートできます。
image.png
ディレクトリを開くアイコンをクリック、ファイルを選択、先程のcsvを選択し、読込を開始します。
image.png

上記の内容で読込開始をクリックします。
これでマップ上にデータを可視化できます。
さらに踏み込んで、QGISなど、レイヤを自由に整備したいときなどのためのファイル作成もしておきましょう。
image.png

新規作図情報のチェックを外し、保存ボタンをクリックします。
image.png

KML形式を選択肢、上記の内容で保存を選択します。
これで様々なGISソフト等で読み込めるはずです。
image.png

諸注意

利用規約はしっかり確認してください。
オープンデータの利用規約や利用するサービスの利用規約をご確認ください。
例えば、次のマーク。by.png

原作者のクレジット(氏名、作品タイトルなど)を表示することを主な条件とし、改変はもちろん、営利目的での二次利用も許可される最も自由度の高いCCライセンス。
https://creativecommons.jp/licenses/

また、Googleサービスの場合、サービス内で作ったデータの権利はGoogleにあったりする場合があります。
また、サービス向上が多い反面、サービス廃止等(例えば、Google Fusion Tableは、GoogleのSaaS型データベースとして9年間続いたサービスだったのですが、2019年に廃止)もあるので注意が必要です。
打開策として、おまけで紹介した地理院のサービスや、QGISなどのソフトでの代替管理ができる方法をバックで持っておくといいかと思います。

まとめ

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away