東京23区保育園マップの更新作業を改善した話

2015/08/29 2015/08/30

東京23区の認可・認証・認可外保育園をGoogleマップ上で確認できる「東京23区保育園マップ」というサイトを2年位前から運営しております。

もともと我が家も待機児童問題で保育園探しに苦労した経験があったんで、自宅付近にどんな保育園があるのかマップ上で分かったら便利だろうなって思ったところから始めたサイトです。

Googleマイマップに手作業で一つ一つ保育園情報を追加してたわけですが、途中でGoogleマップのリニューアルに併せて、APIを利用して、取得した位置情報で現在地周辺を自動的に割り出すようなサイトになりました。

ただ、待機児童解消のために保育園は毎年どんどん新規開設されるため、今までのような手作業での更新作業はかなり大変になってきました。
※手作業だと、元データとなるEXCELの一覧表、マップデータ（KMLファイル）、各保育園ページのhtmlファイルと3種類のファイルについて、手作業での更新が必要でした。

そこで、今回元データとなるEXCELの一覧表からマップデータが一括作成できるように、更新作業の改善をしてみました。

EXCEL（CSV)からKMLへの変換は簡単？

東京23区保育園マップでは、Googleマップ上に保育園情報を表示させているわけですが、これは「KML」というテキストファイル形式のデータを、Googleマップに読み込ませて表示させています。

KMLには、保育園名や保育園の位置情報（緯度・経度）が含まれているんですが、これをEXCELファイルから変換できれば、一番簡単なわけです。

検索してみると、「Googleマップ KML/CSV相互変換」というWEBサービスを使うと、KMLが作成できるようです。
EXCELはCSV形式に変換して保存する機能がありますから、あとはそのCSVをKMLを変換すれば問題なさそうです。

しかし、どうやらこのサービスでは1種類のマーカーしか対応していない模様。
23区保育園マップは、認可・認証・認可外等でマーカーの色分けが必要ですから、残念ながらこちらではそこまでの対応は無理でした。

他にも「Google Fusion Tables」や「AGtokml」なども検討してみましたが、うまく地図表示できなかったり商用利用不可などの条件もあって断念。

EXCEL（CSV）からテンプレファイル（html）に流し込んで合体させてみる

そこで次に考えたのが、CSVからhtml形式のテンプレートファイルに必要事項を流し込んで、自動生成されたファイルを結合する方法。

流し込みは「bpTran」、ファイルの結合は「TextBinder」を使ってみました（どちらもフリーソフト）。

元々23区保育園マップでの各保育園情報のhtmlページは「bpTran」を使っていましたので、操作方法は慣れたもの。
「TextBinder」も、画面を見ればすぐ分かる簡単操作でしたので、試しに20件くらいの保育園データを結合して、ファイル名の変更で拡張子を「html」から「kml」に変更し、テストサイトにアップ。
うまい具合にマップ表示されました。

これで万事解決～っと思って、2,000件以上の23区保育園データを流し込んでみたところ、なぜか今度はマップ表示されません。

こうなると本職ではない素人の悲しいところで、原因が分からないので思い当たる節を一つずつ潰していくしかありません。

緯度経度の数字の末尾が「0」の場合、EXCELでは省略されるから？→直してもダメ
1,000件ぐらいまでは問題なく表示されるので、ファイルサイズの問題？→圧縮してもダメ
文字コードがおかしい？html形式ではなくtxt形式とすべき？→変更してもダメ

こんな感じで1個試してダメなら再試行を繰り返して、どうやらファイルを結合するのが良くなさそうということに落ち着きました。

EXCELからWORDに差込印刷してKMLにコピペする⇒正解！

となると、今度はまた別の方法を探すしかありません。
今までは「EXCEL KML 変換」や「EXCEL KML 流し込み」といったキーワードで検索していましたが、ふと「EXCEL KML 差し込み」というキーワードで検索してみたところ、WORDの差し込み印刷機能を使ってEXCELからKMLデータを作れた！という書き込みを発見。

早速以下のようにやってみました。

WORDの差込印刷機能で「ラベル印刷」を選択し、差し込みたいKMLのタグを入力。
次のラベルに「NextRecord」で指定することで、同ファイル内に次々と連続したデータを差し込み。
差し込んで生成されたWORDファイル内のテキストを全選択し、KMLファイルの指定場所にコピペ。

Wordでの差し込みテンプレート

<Placemark>
<name>«保育園名»</name>
<description><![CDATA[<div>【«区名»・«種別»】</div><div><a href=”info-«No».html” target=”_blank”>«保育園名»</a></div><div>TEL：«電話番号»</div><div>«受入年齢»、«開所時間»</div>]]></description>
<styleUrl>#style«マーカー»</styleUrl>
<Point>
<coordinates>«経度»,«緯度»,0.000000</coordinates>
</Point>
</Placemark>

«Next Record» <Placemark>
<name>«保育園名»</name>
<description><![CDATA[<div>【«区名»・«種別»】</div><div><a href=”info-«No».html” target=”_blank”>«保育園名»</a></div><div>TEL：«電話番号»</div><div>«受入年齢»、«開所時間»</div>]]></description>
<styleUrl>#style«マーカー»</styleUrl>
<Point>
<coordinates>«経度»,«緯度»,0.000000</coordinates>
</Point>
</Placemark>

«Next Record» <Placemark>
<name>«保育園名»</name>
<description><![CDATA[<div>【«区名»・«種別»】</div><div><a href=”info-«No».html” target=”_blank”>«保育園名»</a></div><div>TEL：«電話番号»</div><div>«受入年齢»、«開所時間»</div>]]></description>
<styleUrl>#style«マーカー»</styleUrl>
<Point>
<coordinates>«経度»,«緯度»,0.000000</coordinates>
</Point>
</Placemark>

差し込み後

<Placemark>
<name>千代田区立麹町保育園</name>
<description><![CDATA[<div>【千代田区・認可（公立）】</div><div><a href=”info-1.html” target=”_blank”>千代田区立麹町保育園</a></div><div>TEL：03-3261-7960</div><div>57日～就学前、7：30～19：30</div>]]></description>
<styleUrl>#styleblue</styleUrl>
<Point>
<coordinates>139.74234000000001,35.690235000000001,0.000000</coordinates>
</Point>
</Placemark>

<Placemark>
<name>千代田区立神田保育園</name>
<description><![CDATA[<div>【千代田区・認可（公立）】</div><div><a href=”info-2.html” target=”_blank”>千代田区立神田保育園</a></div><div>TEL：03-3253-6258</div><div>57日～就学前、7：30～19：30</div>]]></description>
<styleUrl>#styleblue</styleUrl>
<Point>
<coordinates>139.76733400000001,35.69632,0.000000</coordinates>
</Point>
</Placemark>

<Placemark>
<name>千代田区立西神田保育園</name>
<description><![CDATA[<div>【千代田区・認可（公立）】</div><div><a href=”info-3.html” target=”_blank”>千代田区立西神田保育園</a></div><div>TEL：03-5215-9060</div><div>57日～就学前、7：30～19：30</div>]]></description>
<styleUrl>#styleblue</styleUrl>
<Point>
<coordinates>139.75482199999999,35.698784000000003,0.000000</coordinates>
</Point>
</Placemark>