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