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

2016年3月7日

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

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

さっぽろ保育園マップ これからどうしよう?(PDF)
http://i.csis.u-tokyo.ac.jp/event/20150622/index.files/150622_csisi_11_03.pdf

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

以下、資料の18~21ページ辺りを補完します。

1.Githubのアカウントを作る

1)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

2.さっぽろパパママMAPをフォーク

1)「https://github.com/codeforsapporo/papamama」を開く
2)右上の「Fork」をクリック
3)詳しくはgoogle先生に(ry

3.CNAMEやトラッキングID消しとく

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

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

1)Githubの「Settings」の中の「Branches」を開く。
2)「Default branch」の「master」を「gh-pages」にする。
3)Updateを忘れずに。

5.保育園の情報を準備(水戸市の場合)

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

 施設名称,住所1,所在地,電話,一時預かり
 白梅保育所,茨城県水戸市,元吉田町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,○

6.住所から位置情報を取得

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

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

7.保育園情報の雛形を作る

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

8.保育園情報の更新

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

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

3)6で保存したcsvファイルを開く。
4)「latitude」にY座標、「longitude」にX座標を指定する。(実際のプロットに使われる)
※CSVアドレスマッチングサービスの出力と並び順が違うので注意
5)papamama/doc/dataSpecification.xlsファイルのnurseryFacilitiesシートを参考に6のcsvから7のcsvに情報をコピーする。
※「Type(保育施設種別)」は現在、「認可保育所」、「認可外」、「幼稚園」の3種類しか対応していないため、どれかを指定する。
※「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,,,

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

1)8で保存したcsvをテキストエディタで開く。
2)データをコピーする。
3)「Convert CSV to GeoJSON」のサイトを開く。
http://www.convertcsv.com/csv-to-geojson.htm
4)Step1のTextBoxにペーストする。
5)「Convert CSV To GeoJSON」をクリック。
6)結果をコピー。
7)papamama/data/の中の「nurseryFacilities.geojson」を編集モードで開く。
8)内容を削除してペースト。
9)「Commit changes」でコミットする。

10.マップの中心座標を設定する

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

11.結果を確認

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

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

12.BingMapsキーの変更(2016.3.7追記)

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

参考にしたページ:

※ちょっと情報古いですが基本は変わってないです

13.その他諸々(2016.3.7追記)

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

ライセンス等

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

めも

Posted by ikaken