〇〇保育園マップの作り方

「さっぽろ保育園マップ」という、とても良いサービスがあります。
このサービスは、オープンソースで公開されているのですが、
いざ使わせてもらおうと思うと資料が少ないので苦労すると思います。
とりあえず、実際使ってみて分かった範囲を書いておきます。
ご参考まで。

とりあえず見ておく資料。

さっぽろ保育園マップこれからどうしよう？
https://www.slideshare.net/Mayumit/udc2015-50243801

さっぽろ保育園マップを　次は東京で！（動画）
https://www.youtube.com/watch?v=4CWToTeqikw

以下、資料の１８～２１ページ辺りを補完します。

１．Githubのアカウントを作る
２．さっぽろパパママMAPをフォーク
３．CNAMEやトラッキングID消しとく
４．デフォルトのブランチをgh-pagesにしておくと便利
５．保育園の情報を準備（水戸市の場合）
６．住所から位置情報を取得
７．保育園情報の雛形を作る
８．保育園情報の更新
９．GeoJSONへ変換し、サイトのデータを更新する
１０．マップの中心座標を設定する
１１．結果を確認
１２．BingMapsキーの変更(2016.3.7追記)
１３．その他諸々(2016.3.7追記)
ライセンス等

１．Githubのアカウントを作る

１）google先生に聞きながらGithubのアカウントを作ります。
https://www.google.co.jp/search?sourceid=chrome-psyapi2&ion=1&espv=2&ie=UTF-8&q=Github%E3%81%AE%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88%E3%82%92%E4%BD%9C%E3%82%8B&oq=Github%E3%81%AE%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88%E3%82%92%E4%BD%9C%E3%82%8B&aqs=chrome..69i57.879j0j7

２．さっぽろパパママMAPをフォーク

１）「https://github.com/codeforsapporo/papamama」を開く
２）右上の「Fork」をクリック
３）詳しくはgoogle先生に（ry

３．CNAMEやトラッキングID消しとく

１）自分のページのpapamamaフォルダに有るCNAMEを削除
２）index.htmlの中のトラッキングID部分（UA-********-*という記述がある前後）を削除
３）詳しくはgoogle・・・

４．デフォルトのブランチをgh-pagesにしておくと便利

１）Githubの「Settings」の中の「Branches」を開く。
２）「Default branch」の「master」を「gh-pages」にする。
３）Updateを忘れずに。

５．保育園の情報を準備（水戸市の場合）

１）「水戸市保育園」でググる。
２）「市内の認可保育所(園)一覧　及び　申込み状況」を開く。
http://www.city.mito.lg.jp/000042/000073/hoikushisetsu/p000057.html
３）一覧をexcelとかにコピー。
４）所在地の前にカラムを追加して「茨城県水戸市」を入れる。
５）適当な名前をつけてcsvで保存しておく。
※データの取得は各自工夫して下さい。

 施設名称,住所１,所在地,電話,一時預かり
 白梅保育所,茨城県水戸市,元吉田町3250-1,304-2070,○
 杉山保育所,茨城県水戸市,三の丸3-12-5,221-7219,○
 新原保育所,茨城県水戸市,新原2-6-20,251-2262,○
 緑岡保育所,茨城県水戸市,見川町2131-1519,241-0707,○
 城東保育所,茨城県水戸市,城東2-6-39,231-5972,○
 平須保育所,茨城県水戸市,平須町1820-7,241-1172,
 渡里保育所,茨城県水戸市,堀町480-7,224-8908,○
 若宮保育所,茨城県水戸市,若宮1-10-30,226-3923,○
 河和田保育所,茨城県水戸市,河和田3-2536-2,253-1482,○
 双葉台保育所,茨城県水戸市,双葉台2-19,252-8749,○
 一の牧保育所,茨城県水戸市,見川町2131-1741,243-8899,
 常澄保育所,茨城県水戸市,大串町789-2,269-4592,○
 内原保育所,茨城県水戸市,内原町720-1,259-4656,○

６．住所から位置情報を取得

１）東京大学が提供する「CSVアドレスマッチングサービス」を開く。
http://newspat.csis.u-tokyo.ac.jp/geocode-cgi/geocode.cgi?action=start
２）「住所を含むカラム番号」に住所のカラム「2,3」を設定。
３）「変換したいファイル名」に先ほど保存したcsvファイルを指定。
４）「送信」をクリック。
５）ファイルがダウンロードされてくるので、適当に保存。

"施設名称","住所１","所在地","電話","一時預かり","LocName","fX","fY","iConf","iLvl"
白梅保育所,茨城県水戸市,元吉田町3250-1,304-2070,○,"茨城県/水戸市/元吉田町/３２５０番地","140.48016","36.36013","5","7"
杉山保育所,茨城県水戸市,三の丸3-12-5,221-7219,○,"茨城県/水戸市/三の丸/三丁目/１２番","140.48592","36.37239","5","7"
新原保育所,茨城県水戸市,新原2-6-20,251-2262,○,"茨城県/水戸市/新原/二丁目/６番","140.43874","36.39535","5","7"
緑岡保育所,茨城県水戸市,見川町2131-1519,241-0707,○,"茨城県/水戸市/見川町/２１３１番地","140.42923","36.35559","5","7"
城東保育所,茨城県水戸市,城東2-6-39,231-5972,○,"茨城県/水戸市/城東/二丁目/６番","140.49522","36.37131","5","7"
平須保育所,茨城県水戸市,平須町1820-7,241-1172,,"茨城県/水戸市/平須町/１８２０番地","140.43893","36.32739","5","7"
渡里保育所,茨城県水戸市,堀町480-7,224-8908,○,"茨城県/水戸市/堀町/４８０番地","140.42598","36.40498","5","7"
若宮保育所,茨城県水戸市,若宮1-10-30,226-3923,○,"茨城県/水戸市/若宮/一丁目/１０番","140.50616","36.37420","5","7"
河和田保育所,茨城県水戸市,河和田3-2536-2,253-1482,○,"茨城県/水戸市/河和田/三丁目/２５３６番地","140.40227","36.37452","5","7"
双葉台保育所,茨城県水戸市,双葉台2-19,252-8749,○,"茨城県/水戸市/双葉台/二丁目/１９番","140.39259","36.39531","5","7"
一の牧保育所,茨城県水戸市,見川町2131-1741,243-8899,,"茨城県/水戸市/見川町/２１３１番地","140.42923","36.35559","5","7"
常澄保育所,茨城県水戸市,大串町789-2,269-4592,○,"茨城県/水戸市/大串町/７８９番地","140.53876","36.33615","5","7"
内原保育所,茨城県水戸市,内原町720-1,259-4656,○,"茨城県/水戸市/内原町/７２０番地","140.35960","36.36881","5","7"

７．保育園情報の雛形を作る

１）papamama/data/の中の「nurseryFacilities.geojson」を開く。
※Github上では「Raw」モードで表示
２）内容をコピー。
３）「GeoJSON to CSV Converter」のサイトを開く。
http://www.convertcsv.com/geojson-to-csv.htm
４）Step1のTextBoxにペーストする。
５）「Convert GeoJSON To CSV」をクリック。
６）結果をコピー。
７）メモ帳などのテキストエディタに貼り付ける。
８）適当な名前を付けてcsvで保存する。
※ファイルを指定して変換すると文字コードとかややこしいのでコピペ使ってます。

８．保育園情報の更新

１）７で保存したcsvファイルをexcelなどで開く。
２）項目名だけ残して札幌の情報を削除する。

latitude,longitude,altitude,geometry,HID,Type,Kodomo,Name,Label,AgeS,AgeE,Full,Open,Close,H24,Memo,Extra,Temp,Holiday,Night,Add1,Add2,TEL,FAX,Owner,Ownership,Proof,Shanai,Y,X,url,Vacancy,VacancyDate

３）６で保存したcsvファイルを開く。
４）「latitude」にY座標、「longitude」にX座標を指定する。（実際のプロットに使われる）
※CSVアドレスマッチングサービスの出力と並び順が違うので注意
５）papamama/doc/dataSpecification.xlsファイルのnurseryFacilitiesシートを参考に６のcsvから７のcsvに情報をコピーする。
※「Type（保育施設種別）」は現在、「認可保育所」、「認可外」、「幼稚園」の３種類しか対応していないため、どれかを指定する。
※「Temp（一時保育あり）」等はNull判定を行っているだけなので、文字が入っていれば問題ないと思われるが、将来的に変更になる可能性があるので、仕様通り「Y」を入力しておく。

latitude,longitude,altitude,geometry,HID,Type,Kodomo,Name,Label,AgeS,AgeE,Full,Open,Close,H24,Memo,Extra,Temp,Holiday,Night,Add1,Add2,TEL,FAX,Owner,Ownership,Proof,Shanai,Y,X,url,Vacancy,VacancyDate
36.36013,140.48016,,,,認可保育所,,白梅保育所,白梅保育所,,,,,,,,,Y,,,茨城県水戸市,元吉田町3250-1,304-2070,,,,,,36.36013,140.48016,,,
36.37239,140.48592,,,,認可保育所,,杉山保育所,杉山保育所,,,,,,,,,Y,,,茨城県水戸市,三の丸3-12-5,221-7219,,,,,,36.37239,140.48592,,,
36.39535,140.43874,,,,認可保育所,,新原保育所,新原保育所,,,,,,,,,Y,,,茨城県水戸市,新原2-6-20,251-2262,,,,,,36.39535,140.43874,,,
36.35559,140.42923,,,,認可保育所,,緑岡保育所,緑岡保育所,,,,,,,,,Y,,,茨城県水戸市,見川町2131-1519,241-0707,,,,,,36.35559,140.42923,,,
36.37131,140.49522,,,,認可保育所,,城東保育所,城東保育所,,,,,,,,,Y,,,茨城県水戸市,城東2-6-39,231-5972,,,,,,36.37131,140.49522,,,
36.32739,140.43893,,,,認可保育所,,平須保育所,平須保育所,,,,,,,,,,,,茨城県水戸市,平須町1820-7,241-1172,,,,,,36.32739,140.43893,,,
36.40498,140.42598,,,,認可保育所,,渡里保育所,渡里保育所,,,,,,,,,Y,,,茨城県水戸市,堀町480-7,224-8908,,,,,,36.40498,140.42598,,,
36.3742,140.50616,,,,認可保育所,,若宮保育所,若宮保育所,,,,,,,,,Y,,,茨城県水戸市,若宮1-10-30,226-3923,,,,,,36.3742,140.50616,,,
36.37452,140.40227,,,,認可保育所,,河和田保育所,河和田保育所,,,,,,,,,Y,,,茨城県水戸市,河和田3-2536-2,253-1482,,,,,,36.37452,140.40227,,,
36.39531,140.39259,,,,認可保育所,,双葉台保育所,双葉台保育所,,,,,,,,,Y,,,茨城県水戸市,双葉台2-19,252-8749,,,,,,36.39531,140.39259,,,
36.35559,140.42923,,,,認可保育所,,一の牧保育所,一の牧保育所,,,,,,,,,,,,茨城県水戸市,見川町2131-1741,243-8899,,,,,,36.35559,140.42923,,,
36.33615,140.53876,,,,認可保育所,,常澄保育所,常澄保育所,,,,,,,,,Y,,,茨城県水戸市,大串町789-2,269-4592,,,,,,36.33615,140.53876,,,
36.36881,140.3596,,,,認可保育所,,内原保育所,内原保育所,,,,,,,,,Y,,,茨城県水戸市,内原町720-1,259-4656,,,,,,36.36881,140.3596,,,

９．GeoJSONへ変換し、サイトのデータを更新する

１）８で保存したcsvをテキストエディタで開く。
２）データをコピーする。
３）「Convert CSV to GeoJSON」のサイトを開く。
http://www.convertcsv.com/csv-to-geojson.htm
４）Step1のTextBoxにペーストする。
５）「Convert CSV To GeoJSON」をクリック。
６）結果をコピー。
７）papamama/data/の中の「nurseryFacilities.geojson」を編集モードで開く。
８）内容を削除してペースト。
９）「Commit changes」でコミットする。

１０．マップの中心座標を設定する

１）papamama/js/index.jsの先頭にある「地図表示時の中心座標」を設定。（適当な保育園の座標を使いました）
var init_center_coords = [140.48016, 36.36013];
※コミット忘れずに

１１．結果を確認

１）Githubの「Settings」の中の「Options」を開く。
２）「GitHub Pages」の項目にあるアドレスを開く。
Your site is published at http://ikaken.github.io/papamama.

とりあえず保育園は表示できました。
学区とかの表示はまた後ほど。

１２．BingMapsキーの変更(2016.3.7追記)

papamama/js/index.jsファイルにMapAPI用のキーが記述されています。
テスト程度ならいいかもしれませんが、このまま公開してしまうとCode for Sapporoさんに迷惑がかかってしまうので、自分でKeyを取得して書き換えます。
１）Microsoftアカウント（なければ作る）でBing Maps Dev Centerにサインインし、BingMapsアカウントを作る。
２）My keysのページにてBingMaps用のキーを作る。
３）papamama/js/index.jsファイルにある「bing_api_key」を書き換える。
var bing_api_key = ‘新しく作ったBingMapsキー’;
※コミット忘れずに

参考にしたページ：
http://chorusde.hatenablog.jp/entry/2013/03/14/074739
※ちょっと情報古いですが基本は変わってないです

１３．その他諸々(2016.3.7追記)

・「空きあり」のリンク先変更
１）papamama/js/papamamap.jsファイルの405行目付近にある「空きあり」リンクのURLを変更する。
content += ‘<a href=”「空きあり」のリンク先” target=”_blank”>空きあり</a>’;
※コミット(ry

ライセンス等

システムはCode for SapporoのさっぽろパパママMAPを利用しています。
保育園情報は水戸市ホームページ上の情報（2015年11月現在）を利用しています。
データの加工は「いかけん」が行いました。