最も簡単にデータを更新する方法
Webシステムでデータを更新する方法としては、管理画面にログインして、リスト上にデータが並んでおり、「編集」ボタンをクリックすると、フォームが並んだ編集画面に遷移して、そこでデータを更新したあと、「更新」ボタンを押して完了、というのが定番であろう。
しかし、筆者が考える一般の方が最も簡単にデータを更新出来る方法、それはエクセル状のシートの更新だと考えている。
住所を持ったデータがあって、それらを Google マップ上にピンを置いて参照できるようにしたい。その上、それらのデータを随時編集したり、新しいデータを追加したい、という要件があって、まず浮かんだのは Google マイマップでした。しかし、Google マイマップの場合、Google スプレッドシートから簡単に Google マップにデータをインポートはできるのですが、スプレッドシートと Google マップは同期しているわけではなく、データの更新があるたびにインポートの作業をおこなわければならない。Google スプレッドシート上のデータを更新したら瞬時に Google マップの方のピンも更新したいというのが理想だ。
ネット上の情報を色々と参考にして、Google スプレッドシートを更新したら即座に Google マップを更新できる仕組みを作った。そのシステムで他に転用できそうな部分だけを抜き出して sheet2gmap という名前で公開したので、その使い方と仕組みを紹介しようと思う。
Google スプレッドシートを更新したら即座に Google マップを更新できるマップツール sheet2gmap
champierre/sheet2gmap | GitHub
として公開しています。
sheet2gmap の使い方
デモサイトを開いて下さい。
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 スプレッド シートで住所→緯度経度変換を参考にして、住所が入力されると、「緯度」と「経度」が自動的に入力されるようにしておくと便利です。
- データが用意できたらシートを公開状態にします。「リンクを知っている全員」が「閲覧者」であれば十分です。
- シートID（下図の下線部分）を constants.js にコピーします。
-
次に Google Cloud Platform の API キーを用意します。持っていなければ、GCP のアカウントを作成します。
-
GCP コンソール画面の「API とサービス」>「ダッシュボード」>「APIとサービスを有効化」を選んで、「Maps JavaScript API」と「Google Sheets API」を有効化しておきます。
- GCP コンソール画面の「API とサービス」>「認証情報」の画面を開きます。
-「認証情報を作成」>「API キー」を選びます。
- 作成したAPIキーには、以下のように HTTP リファラーでの制限をかけておくと、別のサイトから利用されず安全です。
- API の制限では、有効化しておいた「Maps JavaScript API」と「Google Sheets API」の2つのAPIだけに制限しておきます。
-
作成した API キーを constants.js にコピーします。
-
index.html の
<script src="https://maps.googleapis.com/maps/api/js?language=ja®ion=JP&key=[API キーを入力してください]&callback=initMap" async defer></script>
の[API キーを入力してください]の部分にも API キーをコピーして下さい。
以上の設定をおこなえば、sheet2gmap を自分のサイトで動かすことができます。
追記(2020/2/4)
青山学院大学古橋研究室 古橋先生より以下のフィードバックをいただきました。
-
Google マップを紙に印刷する場合には、Google マップ & Google Earth Permissionsの「印刷物での使用」の項目を参照して、使用目的による可/不可を確認してください。
-
使用する地図を OpenStreetMap に変更すれば、適切にクレジットすることで自由に印刷物に使用できる。(OpenStreetMap 著作権とライセンス参照)
-
Google Spreadsheet ベースなのでそのまま Glide と連携してスマホアプリ化できる。 Glide Apps 版
参考にした情報
Sheetson という Google スプレッドシートの内容を API として簡単に公開できる仕組みを使って、ほぼ要件通りのことを実現している例がありました。大枠はこちらを参考にしたのですが、外部のサービスにはなるべく依存したくなかったので、Sheetson を使う部分は Google Sheets API を直接呼ぶ方法に書き換えました。
Google スプレッドシートで住所を入力するだけで緯度、経度のデータも取得できる仕組みを作るために以下を参考にしました。
Google Sheet API を呼ぶところは結構詰まったのですが、以下を参考にして解決できました。