Google Mapでまとめられていたデータを使って「東京固めプリンマップ」のサイトをGlideで作ったよ

こんにちは！ @nabettuです。

今回のWeb1WeekではNoCodeでサイトを作ってみました！それが表題の「東京固めプリンマップ」です。

こちらは へんてこグルメガイド（矢崎/ヤザキング）@asobikikaku さんの以下のツイートがありまして、

こちらのマップの利用許可を頂いてデータを使わせて頂き（ありがたや〜🙏）、Glideで文字列検索などをできるようにしたものになります。

Glideの無料枠なので地図データがたまに出なかったりするんですが、「品川区」などで検索するとその住所やキーワードにヒットする固めプリンが食べれるお店が出てきます。

サイトの作りかた Step1 マイマップ→Spreadsheet

まず元のデータですが、Google Mapのマイマップ機能を使って作られています。

これをGlideで使えるようにSpreadsheetに直したいと思います。

まずはMapを使えるデータにエクスポートするのですが、形式がKMLというものに限られています。

そしてダウンロードしたKMLファイルを次のサイトを使ってCSVに変換します。

Googleマップ KML/CSV相互変換 というサイトを使います。

そしてCSVをSpreadsheetで読み込めば、一旦元データの変換は完了です。

サイトの作りかた Step2 データ成型(緯度経度→住所)

さぁ出来上がったCSVですが、次のような形式になっています。

1. index
2. 名前
3. 説明文
4. 緯度
5. 経度

Glide上で正しく場所を表示するには住所が必要です。ということで緯度経度から住所を作っていきます。

使わせて頂いたのはこちらのサービス
郵便番号／住所／緯度経度データ変換サービス

こちらのAPIを使って、住所を緯度経度から割り出していきます。

まずはAPI用のURLを作ります。

="http://geoapi.heartrails.com/api/xml?method=searchByGeoLocation&x=" & G2 & "&y=" & H2

という感じで設定すればxmlが取得できるようになりますので、このURLで一つカラムを作成します。(G2,H2とかはカラムデータの取得)

するとこんな値が入るようになります。

[http://geoapi.heartrails.com/api/xml?method=searchByGeoLocation&x=139.5955947&y=35.7092688](http://geoapi.heartrails.com/api/xml?method=searchByGeoLocation&x=139.5955947&y=35.7092688)

そのXMLのデータをインポートするための命令がSpreadsheetにあるので、それを利用してカラムに入れます。

=IMPORTXML(J3,"/")

すると

" 港区 みなとく 西新橋一丁目 にししんばし1ちょうめ 139.753077 35.668116 89.19496353533386 東京都 
1050003  港区 みなとく 西新橋二丁目 にししんばし2ちょうめ 139.751867 35.667002 93.81633499427977 東京都 
1050003  港区 みなとく 虎ノ門虎ノ門ヒルズビジネスタワー３０階 とらのもんとらのもんひるずびじねすたわー30かい 139.750062 35.667986 
191.29710881449762 東京都 1056430  港区 みなとく 虎ノ門虎ノ門ヒルズビジネスタワー３５階 とらのもんとらのもんひるずびじねすたわー35かい 139.750062 35.667986 
191.29710881449762 東京都 1056435  港区 みなとく 虎ノ門虎ノ門ヒルズビジネスタワー３階 とらのもんとらのもんひるずびじねすたわー3かい 139.750062 35.667986 
191.29710881449762 東京都 1056403  港区 みなとく 虎ノ門虎ノ門ヒルズビジネスタワー３４階 とらのもんとらのもんひるずびじねすたわー34かい 139.750062 35.667986 
191.29710881449762 東京都 1056434  港区 みなとく 虎ノ門虎ノ門ヒルズビジネスタワー４階 とらのもんとらのもんひるずびじねすたわー4かい 139.750062 35.667986 
191.29710881449762 東京都 1056404  港区 みなとく 虎ノ門虎ノ門ヒルズビジネスタワー５階 とらのもんとらのもんひるずびじねすたわー5かい 139.750062 35.667986 
191.29710881449762 東京都 1056405  港区 みなとく 虎ノ門虎ノ門ヒルズビジネスタワー６階 とらのもんとらのもんひるずびじねすたわー6かい 139.750062 35.667986 
191.29710881449762 東京都 1056406  港区 みなとく 虎ノ門虎ノ門ヒルズビジネスタワー３３階 とらのもんとらのもんひるずびじねすたわー33かい 139.750062 35.667986 
191.29710881449762 東京都 1056433 "

というデータがカラムに入ってきます。このままだと使いづらいので、

=SPLIT(K3," ",true,true)

でバラしていくと別々なカラムにスペースで区切られた内容が入るので、

杉並区 すぎなみく   西荻北四丁目  にしおぎきた4ちょうめ 139.596547  35.708441   126.1002605 東京都 1670042 杉並区 すぎなみく   西荻北五丁目  にしおぎきた5ちょうめ 139.599946  35.709907   399.6782071 東京都 1670042 杉並区 すぎなみく   西荻北三丁目  にしおぎきた3ちょうめ 139.598557  35.706513   407.1976297 東京都 1670042 杉並区 すぎなみく   善福寺一丁目  ぜんぷくじ1ちょうめ  139.598386  35.712448   434.6331725 東京都 1670041 武蔵野市    むさしのし   吉祥寺東町四丁目    きちじょうじひがしちょう4ちょうめ   139.592693  35.705914   456.3604124 東京都 1800002 杉並区 すぎなみく   善福寺二丁目  ぜんぷくじ2ちょうめ  139.591476  35.711792   466.3581414 東京都 1670041 武蔵野市    むさしのし   吉祥寺東町三丁目    きちじょうじひがしちょう3ちょうめ   139.589047  35.706186   684.1543641 東京都 1800002 杉並区 すぎなみく   西荻北二丁目  にしおぎきた2ちょうめ 139.603286  35.706947   741.7175361 東京都 1670042 杉並区 すぎなみく   上荻四丁目   かみおぎ4ちょうめ   139.604281  35.710003   789.3953431 東京都 1670043 杉並区 すぎなみく   松庵三丁目   しょうあん3ちょうめ  139.596458  35.701977   815.462034  東京都 1670054

それの1,3個目を結合して

杉並区西荻北四丁目

というカラムが出来ました。これで一応はお店の住所になりますが、丁目までしか入っていないので、正確な場所を出すために、これにお店の名前を追加したものを住所として登録しておくと、無事に地図で場所を表示することができるようになりました。（表示する住所とマップで利用する住所は別にしておきます。）

サイトの作りかた Step3 サイトの表示設定

あとは出来上がったデータを使って、Glideでどのように表示していくかを設定します。

今回はマップの他にリストと、

その詳細画面を作ってみました。（instagramの一部の写真の利用許可も頂いたので、こちらは手動でURLを取得しました）

下にタブを増やして、謝辞と元ツイートへのリンクも設定しています。

最後にサイトの名前やアイコンを設定して、公開すれば出来上がりです。

まとめ

こういうまとまったデータをサイト化するのにGlideは本当に楽ですね。

ホントはプリン店にお気に入りできる機能を付けたかったのですが、Glideの有料機能が必要（約月$49）だったので断念しました。

むしゃくしゃしたときには、このマップを見て固いプリンを食べに行きましょう。

「東京固めプリンマップ」

あ、お題の「２」ですが、今回は「GoogleMap2Site」な事例ということでご勘弁をｗ

以上です！今回もWeb1week参加できてよかったです！