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

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

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

さっぽろ保育園マップ これからどうしよう?(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で保存しておく。
※データの取得は各自工夫して下さい。

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

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

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)項目名だけ残して札幌の情報を削除する。

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

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キー’;
※コミット忘れずに

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

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

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

ライセンス等

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

カテゴリー: めも パーマリンク

コメントを残す

メールアドレスが公開されることはありません。