Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
メイキング・オブ・ザ
さっぽろ保育園マップ
2015/07/03(/(FOSS4G(Hokkaido
Code(for(Sapporo
共同代表(:(すずきゆうすけ(
(@yuskesuzki)
提供
自己紹介
すずきゆうすけ
• 長野県出身。北海道在住15年目
• 江別市在住
• 職業:フリーランスプログラマー
江別市とは?
平地とレンガと豪雪が有名な
札幌のベットタウン
趣味
以上、閑話休題終わり
Code%for%Sapporo
Code%for%Sapporo%とは
• h#p:www.codeforsapporo.org
• 共同代表
• すずきゆうすけ
• Fix4My4Street4Japan4開発者4:4川人さん
• メンバー410人ほどで活動
活動
活動
• Code&for&Japanブリゲード団体
• 札幌近郊でシビックテックをやってる団体
• ハッカソン・アイディアソン
• マッピングパーティ
• 作成したアプリケーションのメンテナンス
さっぽろ保育園マップ
h"p://
papamama.codeforsapporo.o
rg
さっぽろ保育園マップ!:!特徴
その1:地図である
• 札幌市内に点在する保育園(認可、認可外)、幼稚園
を掲載
その2:保育施設の詳細情
報
その3:施設クリックでポップアッ
プ
• 住所
• 施設のホームページ
• 預けられる時間
• 保育の内容
• 空き有り":"札幌市のホームページに移動
その4:小中学区表示
その5:絞込検索
施設属性を条件絞り混み検
索
さっぽろ保育園マップの反
響
わりとあった
びっくり
新聞、雑誌、ネットで紹介
• 朝日新聞
• 北海道新聞
• So$ware)Design)vol.20
• WIRED)vol16
• SAPPORO)SMILE)h@p://www.sapporosmile.com/
projects/cod...
受賞
アーバンデータチャレンジ
2014金賞
他地域に展開された
他地域に展開
• つくば市
• 横浜市金沢区
• 沖縄県浦添市
• 奈良県生駒市
• 徳島県版
• 千葉県流山市版
さまざまな反響に
びっくり
本題
メイキング・オブ・ザ
さっぽろ保育園マップ
開発のきっかけ
この人
開発前夜
• 久保さんとの遭遇
• FOSS4G'2014で初めてお会いする
• すずき':'CfS発のアプリを作りたい
• 久保':'保育園を簡単に調べる手段が欲しい
Win$Win
• 2014年9月末に開発開始
開発環境
• HTML
• CSS
• JavaScript
• jQuery52
• jQuery5mobile
• OpenLayers3
• GeoJSON
わりと普通のWeb開発
しかし、地理位置情報の知識はゼロ
• 作りながら学んだ
• しかしまだまだ知識が怪しい…
• EPSG:3857,って何?とかすぐに答えられない...
開発の手順
• プロジェクトのディレクトリ移動
• Web%サーバ起動
• python%,m%SimpleHTTPServer%8000%→%h9p://
localhost:8000%でページ表示
• Web%サーバ経由で確認しないと%Aj...
地図ライブラリ!:!OpenLayers3
• 地図タイルの表示
• マーカーの配置・表示
• GeoJsonデータ取り扱い
• 駅、ランドマーク地点、現在地移動
• 円描画などなど...
チーム構成
• CfSパパママチーム%:%5人
• プログラマー%:%2人%
• デザイン・データ作成:3人
開発期間
• 合計"約1ヶ月半
• 随時アップデート
• フルタイムで仕事した後、ほぼ毎日1∼3時間の作
業
ソース管理
ソース管理
GitHub
ソース管理
• h#ps://github.com/codeforsapporo/papamama
• 無料
• ソースコードは常に公開されてる(版)
• 分散バージョン管理ツール6git
運用
GitHub'Pages
• Github(Pages
• "gh/pages"(ブランチを作成
• ドメインとCNAME(ファイルを用意
• →GithubをWebサーバとして全世界に情報発信
• 無料で使える
ちなみに
GeoJsonデータを
Githubで管理すると
勝手に地図ができます
打ち合わせ
打ち合わせ
• FaceBookグループのチャット
• 開発中、直接会って打ち合わせる事はほぼなかっ
た
保育施設データの入手
保育施設データの入手
• 札幌市HPに掲載
• ただしオープンデータではない
• ここからゴニョゴニョとデータを拝借
• CCついてるだけでも違うんだけどな…
保育施設データの入手先
• 保育園の名称住所しか掲載されてない
• ジオコーディングで座標を取得
• おそらくQGISを使ってGeoJsonデータ生成
保育施設データの入手先
• 保育施設のホームページ情報の取得
• 検索エンジンの結果からスクレイピング?
• GeoJsonデータの(property(にURLを保存
開発で苦労した点
デザインに明確な仕様がない
• 意見もらって、作って、意見もらって、修正...#
• 作ったけどなくした機能もある
• 区の移動機能
• こども園の表示
• 動きの微調整
• この辺りにわりと時間を使ってた
OpenLayers*3
• 日本語の情報が少ない
• OpenLayers2とは異なる
• 多機能。だが重厚
• ライブラリーが提供する機能以外の独自の機能拡
張が作りづらい
• モバイルフレンドリーではない
• 動かないスマホ環境がある
なので
現在、さっぽろ保育園マップ!ver!2!
を開発中
• Leaflet.js*ベース
• 絶賛開発中
• データは*ver*1*をそのまま使える予定
マップを作った結果、個人の仕事に
も影響
• 保育園マップの応用システム
• OpenLayers2,で某港湾管理システムの地図画面
• 某SFAのデータを「いつもNAVI,API」で地図連携
• 某SFAのデータを「Google,Map,AP...
めでたし!めでたし
Code%for%Sapporo
お知らせ
メンバー募集
• イベント参加
• プログラミング
• デザイン
• ホームページの記事更新
• イベント運営スタッフ
• など
イベント:シビックハックナ
イト(仮)
シビックハックナイト(仮)
• h#p://www.codeforsapporo.org/hacknight1/
• 日時:2015年7月21日;19:00=20:30
• 場所:Sapporo;Cafe;2F;(札幌市北区北8条西5丁目
2=...
餃子クックソン(仮)
• 調理できる場所を借りる
• 集まる
• みんなで餃子を包んで、焼いて、食べて、飲む
• 寝る"シビックテックについて語る
• 企画中
• 決まったらホームページでお知らせ"
以上
powerd'by' 'Deckset
メイキング・オブ・ザ・さっぽろ保育園マップ
メイキング・オブ・ザ・さっぽろ保育園マップ
メイキング・オブ・ザ・さっぽろ保育園マップ
メイキング・オブ・ザ・さっぽろ保育園マップ
メイキング・オブ・ザ・さっぽろ保育園マップ
メイキング・オブ・ザ・さっぽろ保育園マップ
メイキング・オブ・ザ・さっぽろ保育園マップ
メイキング・オブ・ザ・さっぽろ保育園マップ
メイキング・オブ・ザ・さっぽろ保育園マップ
メイキング・オブ・ザ・さっぽろ保育園マップ
メイキング・オブ・ザ・さっぽろ保育園マップ
メイキング・オブ・ザ・さっぽろ保育園マップ
メイキング・オブ・ザ・さっぽろ保育園マップ
メイキング・オブ・ザ・さっぽろ保育園マップ
メイキング・オブ・ザ・さっぽろ保育園マップ
メイキング・オブ・ザ・さっぽろ保育園マップ
メイキング・オブ・ザ・さっぽろ保育園マップ
メイキング・オブ・ザ・さっぽろ保育園マップ
メイキング・オブ・ザ・さっぽろ保育園マップ
メイキング・オブ・ザ・さっぽろ保育園マップ
メイキング・オブ・ザ・さっぽろ保育園マップ
メイキング・オブ・ザ・さっぽろ保育園マップ
Upcoming SlideShare
Loading in …5
×

メイキング・オブ・ザ・さっぽろ保育園マップ

1,226 views

Published on

FOSS4G Hokkaido 2015発表資料。
2014年にCode for Sapporo で開発した「さっぽろ保育園マップ」の反響と制作についてまとめました。

Published in: Software
  • Be the first to comment

メイキング・オブ・ザ・さっぽろ保育園マップ

  1. 1. メイキング・オブ・ザ さっぽろ保育園マップ 2015/07/03(/(FOSS4G(Hokkaido Code(for(Sapporo 共同代表(:(すずきゆうすけ( (@yuskesuzki)
  2. 2. 提供
  3. 3. 自己紹介
  4. 4. すずきゆうすけ • 長野県出身。北海道在住15年目 • 江別市在住 • 職業:フリーランスプログラマー
  5. 5. 江別市とは?
  6. 6. 平地とレンガと豪雪が有名な 札幌のベットタウン
  7. 7. 趣味
  8. 8. 以上、閑話休題終わり
  9. 9. Code%for%Sapporo
  10. 10. Code%for%Sapporo%とは • h#p:www.codeforsapporo.org • 共同代表 • すずきゆうすけ • Fix4My4Street4Japan4開発者4:4川人さん • メンバー410人ほどで活動
  11. 11. 活動
  12. 12. 活動 • Code&for&Japanブリゲード団体 • 札幌近郊でシビックテックをやってる団体 • ハッカソン・アイディアソン • マッピングパーティ • 作成したアプリケーションのメンテナンス
  13. 13. さっぽろ保育園マップ
  14. 14. h"p:// papamama.codeforsapporo.o rg
  15. 15. さっぽろ保育園マップ!:!特徴
  16. 16. その1:地図である
  17. 17. • 札幌市内に点在する保育園(認可、認可外)、幼稚園 を掲載
  18. 18. その2:保育施設の詳細情 報
  19. 19. その3:施設クリックでポップアッ プ • 住所 • 施設のホームページ • 預けられる時間 • 保育の内容 • 空き有り":"札幌市のホームページに移動
  20. 20. その4:小中学区表示
  21. 21. その5:絞込検索
  22. 22. 施設属性を条件絞り混み検 索
  23. 23. さっぽろ保育園マップの反 響
  24. 24. わりとあった
  25. 25. びっくり
  26. 26. 新聞、雑誌、ネットで紹介 • 朝日新聞 • 北海道新聞 • So$ware)Design)vol.20 • WIRED)vol16 • SAPPORO)SMILE)h@p://www.sapporosmile.com/ projects/codeIforIsapporo/
  27. 27. 受賞
  28. 28. アーバンデータチャレンジ 2014金賞
  29. 29. 他地域に展開された
  30. 30. 他地域に展開 • つくば市 • 横浜市金沢区 • 沖縄県浦添市 • 奈良県生駒市 • 徳島県版 • 千葉県流山市版
  31. 31. さまざまな反響に びっくり
  32. 32. 本題
  33. 33. メイキング・オブ・ザ さっぽろ保育園マップ
  34. 34. 開発のきっかけ
  35. 35. この人
  36. 36. 開発前夜 • 久保さんとの遭遇 • FOSS4G'2014で初めてお会いする • すずき':'CfS発のアプリを作りたい • 久保':'保育園を簡単に調べる手段が欲しい
  37. 37. Win$Win • 2014年9月末に開発開始
  38. 38. 開発環境
  39. 39. • HTML • CSS • JavaScript • jQuery52 • jQuery5mobile • OpenLayers3 • GeoJSON
  40. 40. わりと普通のWeb開発
  41. 41. しかし、地理位置情報の知識はゼロ • 作りながら学んだ • しかしまだまだ知識が怪しい… • EPSG:3857,って何?とかすぐに答えられない...
  42. 42. 開発の手順 • プロジェクトのディレクトリ移動 • Web%サーバ起動 • python%,m%SimpleHTTPServer%8000%→%h9p:// localhost:8000%でページ表示 • Web%サーバ経由で確認しないと%Ajax%処理が動 かない • テキストエディタでソースコード編集
  43. 43. 地図ライブラリ!:!OpenLayers3 • 地図タイルの表示 • マーカーの配置・表示 • GeoJsonデータ取り扱い • 駅、ランドマーク地点、現在地移動 • 円描画などなど...
  44. 44. チーム構成 • CfSパパママチーム%:%5人 • プログラマー%:%2人% • デザイン・データ作成:3人
  45. 45. 開発期間 • 合計"約1ヶ月半 • 随時アップデート • フルタイムで仕事した後、ほぼ毎日1∼3時間の作 業
  46. 46. ソース管理
  47. 47. ソース管理 GitHub
  48. 48. ソース管理 • h#ps://github.com/codeforsapporo/papamama • 無料 • ソースコードは常に公開されてる(版) • 分散バージョン管理ツール6git
  49. 49. 運用
  50. 50. GitHub'Pages
  51. 51. • Github(Pages • "gh/pages"(ブランチを作成 • ドメインとCNAME(ファイルを用意 • →GithubをWebサーバとして全世界に情報発信 • 無料で使える
  52. 52. ちなみに
  53. 53. GeoJsonデータを Githubで管理すると 勝手に地図ができます
  54. 54. 打ち合わせ
  55. 55. 打ち合わせ • FaceBookグループのチャット • 開発中、直接会って打ち合わせる事はほぼなかっ た
  56. 56. 保育施設データの入手
  57. 57. 保育施設データの入手 • 札幌市HPに掲載 • ただしオープンデータではない • ここからゴニョゴニョとデータを拝借 • CCついてるだけでも違うんだけどな…
  58. 58. 保育施設データの入手先 • 保育園の名称住所しか掲載されてない • ジオコーディングで座標を取得 • おそらくQGISを使ってGeoJsonデータ生成
  59. 59. 保育施設データの入手先 • 保育施設のホームページ情報の取得 • 検索エンジンの結果からスクレイピング? • GeoJsonデータの(property(にURLを保存
  60. 60. 開発で苦労した点
  61. 61. デザインに明確な仕様がない • 意見もらって、作って、意見もらって、修正...# • 作ったけどなくした機能もある • 区の移動機能 • こども園の表示 • 動きの微調整 • この辺りにわりと時間を使ってた
  62. 62. OpenLayers*3 • 日本語の情報が少ない • OpenLayers2とは異なる • 多機能。だが重厚 • ライブラリーが提供する機能以外の独自の機能拡 張が作りづらい • モバイルフレンドリーではない • 動かないスマホ環境がある
  63. 63. なので
  64. 64. 現在、さっぽろ保育園マップ!ver!2! を開発中 • Leaflet.js*ベース • 絶賛開発中 • データは*ver*1*をそのまま使える予定
  65. 65. マップを作った結果、個人の仕事に も影響 • 保育園マップの応用システム • OpenLayers2,で某港湾管理システムの地図画面 • 某SFAのデータを「いつもNAVI,API」で地図連携 • 某SFAのデータを「Google,Map,API,V3」で以下略 • 仕事の幅が広がった
  66. 66. めでたし!めでたし
  67. 67. Code%for%Sapporo お知らせ
  68. 68. メンバー募集
  69. 69. • イベント参加 • プログラミング • デザイン • ホームページの記事更新 • イベント運営スタッフ • など
  70. 70. イベント:シビックハックナ イト(仮)
  71. 71. シビックハックナイト(仮) • h#p://www.codeforsapporo.org/hacknight1/ • 日時:2015年7月21日;19:00=20:30 • 場所:Sapporo;Cafe;2F;(札幌市北区北8条西5丁目 2=3;札幌公務員受験学院ビル1F・2F)
  72. 72. 餃子クックソン(仮) • 調理できる場所を借りる • 集まる • みんなで餃子を包んで、焼いて、食べて、飲む • 寝る"シビックテックについて語る • 企画中 • 決まったらホームページでお知らせ"
  73. 73. 以上 powerd'by' 'Deckset

×