Help us understand the problem. What is going on with this article?

Googleスプレッドシートを利用した、たぶん史上最も簡単にデータを更新できるマップツール

最も簡単にデータを更新する方法

Webシステムでデータを更新する方法としては、管理画面にログインして、リスト上にデータが並んでおり、「編集」ボタンをクリックすると、フォームが並んだ編集画面に遷移して、そこでデータを更新したあと、「更新」ボタンを押して完了、というのが定番であろう。

しかし、筆者が考える一般の方が最も簡単にデータを更新出来る方法、それはエクセル状のシートの更新だと考えている。

住所を持ったデータがあって、それらを Google マップ上にピンを置いて参照できるようにしたい。その上、それらのデータを随時編集したり、新しいデータを追加したい、という要件があって、まず浮かんだのは Google マイマップでした。しかし、Google マイマップの場合、Google スプレッドシートから簡単に Google マップにデータをインポートはできるのですが、スプレッドシートと Google マップは同期しているわけではなく、データの更新があるたびにインポートの作業をおこなわければならない。Google スプレッドシート上のデータを更新したら瞬時に Google マップの方のピンも更新したいというのが理想だ。

ネット上の情報を色々と参考にして、Google スプレッドシートを更新したら即座に Google マップを更新できる仕組みを作った。そのシステムで他に転用できそうな部分だけを抜き出して sheet2gmap という名前で公開したので、その使い方と仕組みを紹介しようと思う。

Google スプレッドシートを更新したら即座に Google マップを更新できるマップツール sheet2gmap

champierre/sheet2gmap | GitHub

として公開しています。

sheet2gmap の使い方

  1. デモサイトを開いて下さい。
  2. 「元データ」のリンクをクリックして、Google スプレッドシートを開きます。
  3. 名称と住所を入力します。緯度と経度は住所が入力されると、自動的に入力されます。
  4. 地図のページをリロードすれば、新しい場所のマーカーが追加されます。

デモサイトのスプレッドシートは誰でも自由に編集できる権限に設定してあります。実際に名称と住所を入力してみてお試し下さい。故意にデータを削除したり、イタズラするはおやめください。もしそのような行為が続くようであれば、編集権限を削除することになります。

sheet2gmap の仕組み

  • index.html と constants.js の2つのファイルだけで動きます。
  • index.html はプログラム本体、constants.js には Google Cloud Platform の API キーと、データ元の Google スプレッドシートの Sheet ID を定義しています。
  • 「名称」と「住所」をカラムに持ったデータを Google スプレッドシート上に用意し、そのシートを公開状態にします。
  • index.html では、Google Sheets API を読み取り、データをパースして Google Maps 上にピンを追加しています。

自分のサイトで動かす方法

  • ソースコードをクローンするなり、ダウンロードするなりして自分のサイトにコピーしてください。
  • Google スプレッドシートにデータを用意し、「名称」「住所」「緯度」「経度」のカラムを用意します。Google スプレッド シートで住所→緯度経度変換を参考にして、住所が入力されると、「緯度」と「経度」が自動的に入力されるようにしておくと便利です。

spreadsheet.png

  • データが用意できたらシートを公開状態にします。「リンクを知っている全員」が「閲覧者」であれば十分です。

share.png

  • シートID(下図の下線部分)を constants.js にコピーします。

sheet_id.png

  • 次に Google Cloud Platform の API キーを用意します。持っていなければ、GCP のアカウントを作成します。

  • GCP コンソール画面の「API とサービス」>「ダッシュボード」>「APIとサービスを有効化」を選んで、「Maps JavaScript API」と「Google Sheets API」を有効化しておきます。

enable_apis.png

  • GCP コンソール画面の「API とサービス」>「認証情報」の画面を開きます。

gcp.png

-「認証情報を作成」>「API キー」を選びます。

add_api_key.png

  • 作成したAPIキーには、以下のように HTTP リファラーでの制限をかけておくと、別のサイトから利用されず安全です。

referer.png

  • API の制限では、有効化しておいた「Maps JavaScript API」と「Google Sheets API」の2つのAPIだけに制限しておきます。

api_restriction.png

  • 作成した API キーを constants.js にコピーします。

  • index.html の

<script src="https://maps.googleapis.com/maps/api/js?language=ja&region=JP&key=[API キーを入力してください]&callback=initMap" async defer></script>

の[API キーを入力してください]の部分にも API キーをコピーして下さい。

以上の設定をおこなえば、sheet2gmap を自分のサイトで動かすことができます。

追記(2020/2/4)

青山学院大学古橋研究室 古橋先生より以下のフィードバックをいただきました。

参考にした情報

Sheetson という Google スプレッドシートの内容を API として簡単に公開できる仕組みを使って、ほぼ要件通りのことを実現している例がありました。大枠はこちらを参考にしたのですが、外部のサービスにはなるべく依存したくなかったので、Sheetson を使う部分は Google Sheets API を直接呼ぶ方法に書き換えました。

Google スプレッドシートで住所を入力するだけで緯度、経度のデータも取得できる仕組みを作るために以下を参考にしました。

Google Sheet API を呼ぶところは結構詰まったのですが、以下を参考にして解決できました。

champierre
株式会社まちクエスト(@machiquest)代表、つくる社LLC代表、CoderDojo調布(@CoderDojoChofu)、著書 Raspberry Piではじめるどきどきプログラミング http://bit.ly/dokipro、Amazonから図書館検索「Libron」
http://blog.champierre.com
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